十字绣首页设计
html布局代码
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="top"> <img src="img/top1.gif" style="padding-left:50px;"/></div>
<div id="nav">
<img src="img/banner.gif" style="padding-left:50px; float:left;"/><div id="dh">
<a href="#">网站首页</a>
<a href="#">公司介绍</a>
<a href="#">企业新闻</a>
<a href="#">产品展示</a>
<a href="#">在线留言</a>
<a href="#">销售网络</a>
<a href="#">联系方式</a>
<a href="#">在线客服</a>
</div>
</div>
<div id="banner"><img src="img/tp3.gif" style="padding-left:42px;"/></div>
</div>
<div id="contenter">
<div id="left">
<div id="tp"><img src="img/left1.gif" /></div>
<div id="yj"><span><br />品牌形象店</span>
<div id="left_tp">
<div class="left_left"><img src="img/left_tp2.gif" /><a href="#" ><br /><br />
中国jk十字绣，热爱十字绣，就在jk网开始，让我们携手绣出美好生活......<br /> 一针一线一世情，一丝一缕一针心......品质源于细心......</a></div>
</div>
<div id="left_tp">
<div class="left_left"><img src="img/left_tp2.gif" /><a href="#"><br /><br /> 中国jk十字绣，热爱十字绣，就在jk网开始，让我们携手绣出美好生活......<br /> 一针一线一世情，一丝一缕一针心......品质源于细心......</a></div>
</div>
<div id="left_tp">
<div class="left_left"><img src="img/left_tp2.gif" /><a href="#"><br /><br /> 中国jk十字绣，热爱十字绣，就在jk网开始，让我们携手绣出美好生活......<br /> 一针一线一世情，一丝一缕一针心......品质源于细心......</a></div>
</div>
</div>
<div id="tp3"></div>
</div>
<div id="right">
<div id="hy">
<div id="kx">
<img src="img/ds.gif" style="margin:3px; padding:3px;"/><span>行业快讯<a href="#" style="margin-top:-50px; padding-top:-150px; padding-bottom:-150px;">+more</a><img src="img/x.gif" style=" padding-top:-25px; margin-top:-25px;"></span>
<ul>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低飞过海杠<span>2011.04.05</span></li></a>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>客观客观风帆股份股份<span>2011.04.05</span></li></a>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低法国恢杠<span>2011.04.05</span></li></a>
<a href="#"> <li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>客观客观风帆股股好份<span>2011.04.05</span></li></a>
<a href="#"><li> <img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低讨厌通杠<span>2011.04.05</span></li></a>
</ul>
</div>
<div id="kx">
<img src="img/ds.gif" style="margin:3px; padding:3px;"/><span>行业快讯<a href="#" style="margin-top:-50px; padding-top:-150px; padding-bottom:-150px;">+more</a><img src="img/x.gif" style=" padding-top:-25px; margin-top:-25px;"></span>
<ul>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低飞过海杠<span>2011.04.05</span></li></a>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>客观客观风帆股份股份<span>2011.04.05</span></li></a>
<a href="#"><li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低法国恢杠<span>2011.04.05</span></li></a>
<a href="#"> <li><img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>客观客观风帆股股好份<span>2011.04.05</span></li></a>
<a href="#"><li> <img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低讨厌通杠<span>2011.04.05</span></li></a>
<a href="#"><li> <img src="img/tb7.gif" style="border:none; padding-right:5px; padding-top:-5px; margin-top:-5px;"/>看到房价高低讨厌通杠<span>2011.04.05</span></li></a>
</ul>
</div>
</div>
<div id="rt" style="margin-top:-330px;"><img src="img/tb8.gif" style="padding:5px; padding-left:3px; margin-left:5px;"/><h5>站内公告</h5><p>两地分居日螺丝钉反抗的路口附近带来狂。</p><p>风恶大力开发机构劳动法弗兰克反对广泛fg风格风格感觉。</p></div>
<div id="rt" style="margin-top:-160px;"><img src="img/tb4.gif" style="padding:5px; padding-left:3px; margin-left:5px;"/><h5>联系我们</h5><p style="color:#F93;">温州ck十字绣有限公司</p>
<p style="margin-left:-20px;">联系人：张小姐<img src="img/tb5.gif" style="width:60px;" /><br />
联系电话：0516-12378<br>
传真：0214-14785655</p>
</div>
<div id="ss">产品搜索：
<select name="lb">
<option value="--请选择系列--">--请选择系列--</option>
<option value="复古风格广泛">复古风格广泛</option>
<option value="广泛覆盖更广">广泛覆盖更广</option>
</select>
<label>
<input name="textfield" type="text" id="textfield" size="15" />
</label>
<label>
<input type="submit" name="button" id="button" value="GO" style="background-color:#99cccc;"/>
</label>
</div>
<div id="rightbt">
<div class="yb"><img src="img/2.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div> <div class="yb"><img src="img/2.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div> <div class="yb"><img src="img/2.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div> <div class="yb"><img src="img/2.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/5.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/5.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/5.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/5.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/7.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/7.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/7.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
<div class="yb"><img src="img/7.gif" style="margin:0 auto;"/><br /> 浪漫相爱<br />价格：<span style="text-align:center;">面议</span></div>
</div>
</div>
</div>
<div id="footer">
<div id="di">
<div id="lj" ><a href="#" style="color:#FF9900; height:50px; width:40px; font-size:18px;">友情<br />链接</a></div>
<div id="wz"><a href="#">空房管家</a><a href="#">dfhjd</a><a href="#">付款福建</a><a href="#">省机房短<a href="#">间的价格低</a><a href="#">简答题看</a><a href="#">见过sdk</a><a href="#">个深刻的后</a><a href="#">果是人结</a><a href="#">婚开始看</a><a href="#">见看</a><a href="#">fjgjg</a><a href="#">空房管家</a><a href="#">dfhjd</a><a href="#">付款福建</a></div>
<div id="xh"><form action="from1" method="get"><input name="z" type="button" /></form></div>
<div id="xh_tp"><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /><img src="img/bottom.gif" /></div>
<div id="xh"><form action="from1" method="get"><input name="z" type="button" /></form></div>
</div>
<div id="bz">看见贴客人推荐人并不看人家他包客人拜拜人bl6bb<br />联系人：张小姐 电话：7546793892 传真：48758686867<br />解放后：打开敌人空间的发挥kdj客套话儿科他</div>
</div>
</body>
css样式设置
@charset "utf-8";
/* CSS Document */
body{
background:url(img/bj.gif);
margin-top:0px;
}
a{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#ffcc66;
}
a:hover{
font-weight:bold;}
#header,#contenter,#footer{
width:900px;
margin:0 auto;}
#top{
width:900px;
height:26px;
padding-top:0px;
background-color:#660000;
}
#nav{
height:37px;
background:url(img/banner_bj.gif) repeat-x left top;
margin-bottom:0px;}
#dh{
float:left;
margin-top:10px;
margin-left:30px;
}
#dh a{
color:#fff;
padding:10px;
font-size:14px;
font-weight:bold;}
#dh a:hover{
text-decoration:underline;}
#banner{
width:900px;
background:url(img/banner1.gif);
height:250px;
margin-top:-5px;
}
#contenter{
height:900px;
background-color:#660000;}
#left{
width:350px;
float:left;
}
#tp{
width:345px;
height:240px;
padding-left:2px;
padding-top:4px;}
#yj{
margin-top:2px;
height:511px;
background:url(img/left_yjbj.gif) no-repeat;
margin-left:3px;}
#yj span{
font-family:"仿宋";
font-size:18px;
color:#ffcc00;
font-weight:bold;
}
#yj #left_tp{
float:left;
width:345px;
height:130px;}
#yj .left_left img{
height:130px;
margin-top:10px;
margin-left:5px;
float:left;
padding-top:10px;
padding-left:5px;
margin-bottom:5px;
padding-bottom:5px;
}
#yj .left_left a{
font-size:13px;
width:150px;
font-family:Arial, Helvetica, sans-serif;
padding-left:5px;
color:#ffcc66;
text-decoration:none;
text-indent:2em;
}
#yj .left_left a:hover{
color:#ffcc66;
font-weight:bold;
}
#tp3{
width:345px;
height:116px;
background:url(img/left_tp5.gif) no-repeat;
padding-left:3px;
margin-top:3px;
border:1px solid #990066;}
#right{
margin-top:4px;
height:500px;
width:545px;
float:right;}
#hy{
float:left;
border:1px solid #cc0033;
height:380px;
width:340px;}
#kx span{
padding-bottom:0px;
margin-bottom:0px;
color:#fff;
font-weight:bold;
padding-left:10px;
margin-bottom:10px;
padding-bottom:10px;
}
#kx span a{
color:#F96;
text-decoration:none;
margin-left:150px;
}
#kx span a:hover{
font-weight:bold;}
hr{
margin-top:-8px;
border:1px solid #ffcc66;
margin-bottom:0px;}
#kx ul{
list-style:none;
margin-left:5px;
padding-left:5px;
padding-top:5px;
}
#kx ul a li{
padding-top:-10px;
text-decoration:none;
color:#ffcc66;
line-height:15px;}
#kx ul a li span{
padding-top:-20px;
margin-left:120px;
color:#663333;
font-size:12px;}
#rt{
float:right;
margin-left:345px;
width:200px;
height:168px;
background:url(img/rightrt.gif) no-repeat;}
h5{
color:#fff;
padding-top:-20px;
margin-top:-20px;
padding-left:20px;
margin-left:20px;}
#rt p{
text-indent:2em;
color:#fff;
font-size:14px;
padding-left:5px;}
#ss{
padding-top:10px;
float:left;
margin-bottom:0px;
font-weight:bold;
font-size:14px;
color:#fff;
margin-top:0px;
height:33px;
width:522px;
border:2px solid #330000;
padding-left:15px;
}
#rightbt{
margin-top:2px;
float:left;
width:540px;
height:400px;
background-color:#cc0000;
border:1px solid #990000;}
.yb{
float:left;
padding-top:2px;
width:120px;
height:120px;
background-color:#990000;
border:1px solid #fff;
color:#fff;
margin:5px;
text-align:center;
}
.yb span{
color:#FFCC33;}
#footer{
height:210px;
background-color:#660000;
}
#di{background:url(img/di.gif);
width:900px;
height:114px;
border-bottom:2px solid #cc3333;
}
#lj{
margin:8px 0 0 20px;
float:left;
}
#wz{
height:50px;
width:800px;
color:#fff;
padding-top:8px;
margin-left:10px;
}
#wz a{
padding:10px;
color:#fff;
font-size:16px;
}
#wz a:hover{
text-decoration:underline;
font-weight:normal;}
#xh{
float:left;
width:20px;
height:50px;
margin-top:10px;
margin-left:5px;
padding-left:5px;}
#xh_tp{
float:left;
width:830px;
height:50px;
margin-top:5px;
padding-top:5px;
}
#xh_tp img{
padding-left:2px;
padding-right:3px;}
#bz{
text-align:center;
color:#fff;
font-size:12px;
margin-top:10px;}
