Copyright © 2013 义乌市智仁信息科技有限公司 All Right Reserved. [浙ICP备13026887号-4]
-
制作天猫界面的简易框架
-
天猫商城 2023-10-24 08:13:30
导读学习浮动和盒模型之后练习制作天猫界面简易框架原网页：要求：实现布局，实现简易框架代码实现：<!doctypehtml><html><head><metacharset="UTF-8"><title>Document</title><styletype="text/css">.box{height:40px;width:100...
学习浮动和盒模型之后练习制作天猫界面简易框架
原网页：
要求：实现布局，实现简易框架
代码实现：
<!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（层叠样式表的理解）。
本文地址：
免责声明：本站部分文章源自网络，出于方便寻找市场信息的初衷，并不用于商业目的。如无意侵犯了贵方知识产权，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。