今天讲了页面布局，自己做得部分练习如下：
<style type="text/css">
*{ margin:0px auto; padding:opx; font-family:微软雅黑
}
#bangzhu
{
width:80px;
height:32px;
font-size:12px;
color: #a5cf4c;
font-weight: bold;
float:right;
margin-right:4px;
margin-top:40px
}
#a1{ width:100%; height:200
}
#bt{ width:100%;
}
#biaoti{float:left; margin-top:70px; margin-left:90px; font-size: 14px;
font-weight: normal;color: #666;
}
#logo{ float:left;margin-top:60px; margin-left:30px
}
#sousuo{ margin-top:70px; border-bottom:#999; margin-left::20px
}
</style>
</head>
<body >
<<div style="color:#868585;font-size: xx-small;position: relative;text-align: right;padding-right: 2%;padding-bottom:2px; background-color: #fff; >[广告]
</div>
<div style="width:100%">
<div id="bangzhu">售后服务</div>
<div id="bangzhu">帮助中心 ·</div>
<div id="bangzhu">在线客服 ·</div>
</div>
<div id="bt">
<div id="logo">
<img src="捕获.PNG" />
</div>
<div style="width:100%">
<div id="biaoti"> 官方商城</div>
<div id="biaoti">全部产品</div>
<div id="biaoti">VIVE</div>
<div id="biaoti">官方社区</div>
<div id="biaoti">最新活动</div>
<div id="biaoti">购买地点</div>
</div>
</div>
效果是:
原文：http://www.cnblogs.com/F4natasy/p/6021121.html