用DIV实现商城的初步

abstract：<!DOCTYPE html><html><head><meta charset="utf-8"> <link rel="icon" href="http://s01.mifile.cn/favicon.ico" type="image/x-icon"&

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</script>

<a href="https://xiaoai.mi.com/">小爱开放平台</a>

<a href="//www.mi.com/appdownload/">下载app</a>

<a href="#J_modal-globalSites" >Select Region</a>

</div>

</div>

</div>

<ul>

</ul>

</div>

</div>

</div>

</div>

</dir>

</div>

</div>

</div>

<div>小米插线板</div>

</dir>

</div>

</div>

<div id="DH_F3" class="more">智能

</div>

</div>

<div id="DH_F4" class="more">搭配

</div>

<div class="LD_U_1_0">预约维修服务</div>

<div class="LD_U_1_1">7天无理由退货</div>

<div class="LD_U_1_1">15天免费换货</div>

<div class="LD_U_1_1"#F5F5F5>520余家售后网点</div>

</div>

</div>

</body>

</html>

*{margin:0px;padding: 0px;}

li{list-style:none;}

a{text-decoration: none;color: #b0b0b0;cursor: pointer;}

/*导航背景*/

#F1{height: 40px;width: 100%;background: #333;color: #b0b0b0;font-size: 12px;}

/*导航中间部分*/

#F1_on_C{height: 40px;width: 1226px;margin:0px auto;}

/*中间左侧导航条*/

#F1_on_C_L{float: left;}

#F1_on_C_L>a{height:40px;line-height:40px;margin-right:5px;}

#F1_on_C_L>a:hover{color: #fff;}

/*中间右侧注册*/

#F1_on_C_R{float:right;height:40px;line-height:40px;}

#F1_on_C_R>a{margin-left: 13px;}

/*------分层线------*/

/*导航下的菜单*/

#F2{height: 100px;width: 1226px;margin:0px auto; }

/*导航下的菜单左侧LOGO底色*/

#F2_logo{height:55px;width:55px;background-color:#FF6700;margin: 23px 0px;float: left;}

/*导航下的菜单左侧LOGO底色上的字*/

#F2_logo>img{width: 49px;height: 49px;margin:3px 3px;}

/*导航下的中间的内容*/

#F2_C{height:100px;float: left;}

#F2_C>ul{margin-left: 150px;}

#F2_C>ul>li{float: left;height: 100px;line-height: 100px;margin-right:20px;}

/*导航下的菜单右侧搜索*/

#F2_search{}

/*分类菜单层*/

#F3{width: 1226px;height: 430px;background: #ccc;margin: 0px auto;}

/*分类菜单层下一行广告位 */

#F4{width: 1226px;height: 170px;margin: 15px auto;}

#F4_1{width: 233px;height: 170px;background: yellow;float: left;}

#F4_2,#F4_3,#F4_4{width: 316px;height: 170px;margin-left: 15px;background: blue;float: left;}

#F4_2{background-image:url(https://i1.mifile.cn/a4/xmad_15500580021576_iymFx.jpg);background-size: cover;}

#F4_3{background-image:url(https://i1.mifile.cn/a4/xmad_15410029988871_TdzPQ.jpg);background-size: cover;}

#F4_4{background-image:url(https://i1.mifile.cn/a4/xmad_1550022313197_PMtDb.jpg);background-size: cover;}

/*1226-233-316*3=45 45/3=15*/

/*广告为你而战*/

#F5{width: 1226px;height: 120px;margin: 15px auto;background-image: url(https://i1.mifile.cn/a4/xmad_15502299357512_IFbpc.jpg);background-size: cover;}

/*灰色底*/

#DH{width: 100%;background:#F5F5F5;}

/*小方块及上面字的整个容器*/

.more{width: 1226px;height: 694px;margin:30px auto;}

/*顶部左右有字的容器*/

.TT{width: 1226px;height: 80px;}

.TT>span{height: 79px;line-height: 79px;display: inline-block;}

/*文字左*/

.TL{float: left;font-size: 24px;}

/*文字右*/

.TR{float: right;}

/*左侧上下通的广告*/

.M1X1{width: 234px;height: 614px;float: left;}

/*右侧上下两排每排四个容器*/

.M4X2{float: left;height: 614px;width:992px; }

/*右边隔行*/

.M4x2_0{width: 992px;height: 14px;clear: both}

/*每排四个里面单独的一个*/

.M4X2_1{width: 234px;height: 300px;margin-left: 14px;float: left;background: #fff;}

.M4X2_1 img{margin: 0px 8px;max-width: 234px;}

/*4个两排小块，一块分两块容器*/

.M4X2_1_2{}

/*4个两排小块，一块分两块容器里的DIV*/

.M4X2_1>div{width: 234px;height: 143px;line-height: 143px;text-align:center;}

/*两个小块中间的隔行*/

.M4X2_1>.GH{width: 234px;height: 14px;background: #F5F5F5;}

/*横幅广告*/

.AD{width: 1226px;height: 120px;background: blue;margin:50px auto;}

.AD>img {max-width: 1226px;max-height: 120px;}

/*手机*/

#DH_F1{}

/*手机-横幅广告-家电*/

#DH_F1-2AD{}

/*家电*/

#DH_F2{}

/*左侧1个两行容器*/

.M1X1{height: 614px;width: 234px;}

/*左侧1个两行*/

.M1X2{width: 234px;height: 300px;float: left;}

/*左边隔行*/

.M1x2_0{width: 234px;height: 14px;float: left;}

/*楼底*/

/*楼底上*/

#LD_U{width:100% ;height:273px;}

/*楼底上五段字容器*/

#LD_U_1{width: 1226px;height: 80px;margin:0px auto;border-bottom:1px solid #F5F5F5; }

#LD_U_1 div{height:18px;line-height:18px;font-size: 18px;width: 243px;float: left;text-align:center;margin:31px 0px;}

/*左边第一个*/

.LD_U_1_0{}

/*后面四个*/

.LD_U_1_1{border-left: 1px solid #F5F5F5;}

/*楼底下*/

#LD_D{width:100% ;height:273px;background: #F5F5F5;}

Correcting teacher：韦小宝Correction time：2019-02-20 13:03:00
Teacher's summary：写的很不错还真是头一次见到使用大写的class名啊不过这个也并不影响

用DIV实现商城的初步

Popular Entries