制作天猫界面的简易框架

学习浮动和盒模型之后练习制作天猫界面简易框架
原网页:

制作天猫界面的简易框架

要求:实现布局,实现简易框架
代码实现:

<!doctypehtml><html><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">.box{height:40px;width:100%;}.box-top{height:40px;width:1300px;background:#ccccff;margin:0auto;}.box2{width:1300px;height:80px;margin:0auto;padding-top:50px;background:#ccffcc;}.box-input{width:300px;height:30px;margin:000500px;font-size:18px;}.box3{width:1300px;height:500px;margin:0auto100px;background:#cc66ff;}.box-ul{width:205px;height:500px;float:left;background:rgba(226,52,222,0.6);}.box4{height:330px;width:1300px;background:#99ccff;margin:0auto;}.dis-a{width:645px;height:330px;float:left;}.dis-1{width:290px;height:330px;float:left;margin-right:10px;background:#ff6666;}.dis-2{width:345px;height:160px;float:left;background:#ff6666;margin-bottom:10px;}.dis-3{margin:0;}.dis-b{float:right;}</style></head><body><!--天猫官网首页布局--><!--顶部导航栏区域--><divclass="box1"><divclass="box-top">顶部导航栏区域</div></div><!--顶部导航栏区域end--><!--搜索框区域--><divclass="box2"><formaction=""><inputtype="text"class="box-input"placeholder="搜索框区域"/></form></div><!--搜索框区域end--><!--轮播图区域--><divclass="box3"><span>轮播图区域</span><divclass="box-ul">轮播图遮盖扩展列表</div></div><!--轮播图区域end--><!--热卖广告--><divclass="box4"><divclass="dis-a"><divclass="dis-1">热卖广告</div><divclass="dis-2">热卖广告</div><divclass="dis-2dis-3">热卖广告</div></div><divclass="dis-adis-b"><divclass="dis-1">热卖广告</div><divclass="dis-2">热卖广告</div><divclass="dis-2dis-3">热卖广告</div></div></div><!--热卖广告end--></body></html>

实现效果:

总结:这里需要用到外间距(margin:)内间距(padding:)和左右浮动对齐(float:left/right)。也需要对css(层叠样式表的理解)。

本文地址:

TAG:
为您推荐
请选择分类
请登录精打账号获取更好的体验