小米商城底部布局

摘要：*{padding: 0px;margin: 0px;border: 0px;} .clear{clear: both;} li {list-style: none;} .fl{float: left;} a{text-decoration: none;color: #ccc;cursor: poi

*{padding: 0px;margin: 0px;border: 0px;}
.clear{clear: both;}
li {list-style: none;}
.fl{float: left;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
/*头部样式*/
.header{background: #333;width: 100%;height: 40px;}

/*主体样式*/
/*父级给了宽度，一般让子级自己撑开所以content不设高度*/
.content{width: 1226px;margin: 0px auto;}
.content_menu{background: #ccc;height: 90px;margin:10px auto;}
.content_pic{margin:10px auto;}
.content_picl{width: 246px;height: 480px;background: #ccc;height: 480px;float: left;}
.content_picf{width: 980px;height: 480px; background: blue;float: left;}
.contentpic_ul{height: 170px;margin:10px auto;}
.contentpic_ul_1{width: 235px;background: #5F5750;height: 170px;margin-right: 13px;float: left;}
.contentpic_ul_0{width: 317px;height: 170px;float: left;}
/*小米闪购*/
.contentshop{height: 280px;margin:10px auto;}
.contentshop_1{width: 235px;height:340px;background: #ccc;float: left;}
.contentimg{background: #ccc;height: 100px;margin:10px auto;}
.contentul{background: #ccc;height: 80px;margin:10px auto;}
.contentphone{margin:10px auto;}
.contentphone_l{height: 614px;width: 234px;background: url('../img/buy/手机AD.jpg');float: left;margin-right: 12px;}
.contentphone_r{height: 614px;width: 980px;float: left;}
.contentphone_r div{width: 235px;height: 300px;float: left;background: #ccc;}
.contentphone_0,.contentphone_1{width: 235px;height: 300px;float: left;background: #ccc;}
.contentphone_t,.contentphone_b{width: 235px;height: 145px;background:#ccc;}
/*页脚样式*/
.footer{background: #fff;width: 1226px;margin: 10px auto;}
.footers1{text-align: center;border-bottom: 1px solid #e0e0e0;}
.footers1 i{margin-right:10px;}
.footers1 a{height: 80px;line-height: 80px;color: #616161;font-weight: 300px;font-size: 16px;}
.footers a:hover{color:#ff5700;}
.footers1 span{color: #616161;margin: 0 56px;font-size: 20px;border-left: 1px solid #e0e0e0;}
.footers2{padding-top: 40px;text-align: center;}
.footers2 dl{width: 160px;display: block;}
.footers2 dt{margin-bottom:26px;font-size: 14px;color: #424242;}
.footers2 dd{height: 18px;line-height: 18px;margin-top: 10px;}
.footers2 dd a,.footers2_1 .time{font-size: 12px;margin-top: 10px;color: #757575;}
.footers2_1{width: 259px;height: 112px;border-left: 1px solid #e0e0e0;}
.footers2_1 .telephone{font-size: 22px;line-height: 22px;color: #ff6700;margin:0px 0px 8px;}
.footers2_1 button{width: 118px;height: 28px;font-size: 12px;color: #ff5700; background-color: #fff; border:1px solid #ff6700;margin-top:16px;}
.footers2_1 button:hover{background:#ff6700;color: #fff;}
.footers3{margin:25px 0px 0px;height: 30px;}
.footers3_1,.footers3_2{margin-left: 10px;height: 20px;line-height: 30px;}
.footers3_1 span{border-left: 1px solid #e0e0e0;font-size: 1px;margin: 2px;}
.footers3_1 a,.footers3_2 a{height: 19px;font-size: 12px;color: #757575;}
.footers3_2{width: 640px;height: 40px;line-height: 40px;}
.footers4{width: 465px;height: 27px;float: right;margin-top: -10px;}
.footers4 img{border: none; display: block;width: 83px;float: left;}
/*探索黑科技 小米为发烧而生！*/
.footers .ipc{font-family: 楷体;font-size: 24px;color: rgb(204,204,204); width: 1226px;text-align: center; height:50px;line-height: 50px; }

*{padding: 0px;margin: 0px;border: 0px;}
.clear{clear: both;}
li {list-style: none;}
.fl{float: left;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
/*头部样式*/
.header{background: #333;width: 100%;height: 40px;}

/*主体样式*/
/*父级给了宽度，一般让子级自己撑开所以content不设高度*/
.content{width: 1226px;margin: 0px auto;}
.content_menu{background: #ccc;height: 90px;margin:10px auto;}
.content_pic{margin:10px auto;}
.content_picl{width: 246px;height: 480px;background: #ccc;height: 480px;float: left;}
.content_picf{width: 980px;height: 480px; background: blue;float: left;}
.contentpic_ul{height: 170px;margin:10px auto;}
.contentpic_ul_1{width: 235px;background: #5F5750;height: 170px;margin-right: 13px;float: left;}
.contentpic_ul_0{width: 317px;height: 170px;float: left;}
/*小米闪购*/
.contentshop{height: 280px;margin:10px auto;}
.contentshop_1{width: 235px;height:340px;background: #ccc;float: left;}
.contentimg{background: #ccc;height: 100px;margin:10px auto;}
.contentul{background: #ccc;height: 80px;margin:10px auto;}
.contentphone{margin:10px auto;}
.contentphone_l{height: 614px;width: 234px;background: url('../img/buy/手机AD.jpg');float: left;margin-right: 12px;}
.contentphone_r{height: 614px;width: 980px;float: left;}
.contentphone_r div{width: 235px;height: 300px;float: left;background: #ccc;}
.contentphone_0,.contentphone_1{width: 235px;height: 300px;float: left;background: #ccc;}
.contentphone_t,.contentphone_b{width: 235px;height: 145px;background:#ccc;}
/*页脚样式*/
.footer{background: #fff;width: 1226px;margin: 10px auto;}
.footers1{text-align: center;border-bottom: 1px solid #e0e0e0;}
.footers1 i{margin-right:10px;}
.footers1 a{height: 80px;line-height: 80px;color: #616161;font-weight: 300px;font-size: 16px;}
.footers a:hover{color:#ff5700;}
.footers1 span{color: #616161;margin: 0 56px;font-size: 20px;border-left: 1px solid #e0e0e0;}
.footers2{padding-top: 40px;text-align: center;}
.footers2 dl{width: 160px;display: block;}
.footers2 dt{margin-bottom:26px;font-size: 14px;color: #424242;}
.footers2 dd{height: 18px;line-height: 18px;margin-top: 10px;}
.footers2 dd a,.footers2_1 .time{font-size: 12px;margin-top: 10px;color: #757575;}
.footers2_1{width: 259px;height: 112px;border-left: 1px solid #e0e0e0;}
.footers2_1 .telephone{font-size: 22px;line-height: 22px;color: #ff6700;margin:0px 0px 8px;}
.footers2_1 button{width: 118px;height: 28px;font-size: 12px;color: #ff5700; background-color: #fff; border:1px solid #ff6700;margin-top:16px;}
.footers2_1 button:hover{background:#ff6700;color: #fff;}
.footers3{margin:25px 0px 0px;height: 30px;}
.footers3_1,.footers3_2{margin-left: 10px;height: 20px;line-height: 30px;}
.footers3_1 span{border-left: 1px solid #e0e0e0;font-size: 1px;margin: 2px;}
.footers3_1 a,.footers3_2 a{height: 19px;font-size: 12px;color: #757575;}
.footers3_2{width: 640px;height: 40px;line-height: 40px;}
.footers4{width: 465px;height: 27px;float: right;margin-top: -10px;}
.footers4 img{border: none; display: block;width: 83px;float: left;}
/*探索黑科技 小米为发烧而生！*/
.footers .ipc{font-family: 楷体;font-size: 24px;color: rgb(204,204,204); width: 1226px;text-align: center; height:50px;line-height: 50px; }

批改老师：天蓬老师批改时间：2018-12-07 09:05:24
老师总结：尽管写得没问题, 但还是推荐css,一个样式写一行, 这样方便写注释, 还有, background, 推荐写成: background-color: 这样方便第三方工具对样式进行分析处理