摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米官网案例练习</title> <link rel="shortcut icon" type="im
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小米官网案例练习</title> <link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css"> </head> <body> <!--头部开始--> <div> <div> <div></div> <div></div> </div> </div> <!--内容开始--> <div> <!--内容头部导航--> <div></div> <!--内容轮播图部分--> <div> <div></div> <div></div> </div> <!--内容轮播图下方广告部分--> <div> <div style='margin-right:13px'></div> <div style='background:url(images/midAD1.jpg);margin-right:13px'></div> <div style='background:url(images/midAD2.jpg);margin-right:13px'></div> <div style='background:url(images/midAD3.jpg)'></div> </div> <!--小米闪购部分--> <!-- <h2 style='width:1226px;height:29px;'>小米闪购</h2> --> <div> <h2>小米闪购</h2> <div style='border-top:1px solid #FF0000'></div> <div style='border-top:1px solid #FF6700;margin-left:2px'></div> <div style='border-top:1px solid #FF8800'></div> <div style='border-top:1px solid #0000FF'></div> <div style='border-top:1px solid #FF0000;margin-right:0;'></div> <div></div> </div> <div style='background:url(images/longAD1.jpg)'></div> <!--内容手机栏目部分--> <div><h2>手机</h2></div> <div> <div></div> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div style='background:url(images/longAD2.jpg)'></div> <!--内容智能栏目部分--> <div><h2>家电</h2></div> <div> <ul> <li style='background:url(./images/buy/家电AD1.jpg)'></li> <li style='background:url(./images/buy/家电AD2.jpg)'></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li> <div></div> <div></div> </li> </ul> </div> <div style='background:url(images/longAD3.jpg)'></div> <!--内容家电部分--> <div><h2>智能</h2></div> <div> <ul> <li style='background:url(images/buy/智能AD1.jpg)'></li> <li style='background:url(images/buy/智能AD2.jpg)'></li> </ul> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li> <div></div> <div></div> </li> </ul> </div> <div style='background:url(images/longAD4.jpg)'></div> </div> <!--结尾开始--> <div> <div>底部</div> <div></div> </div> </body> </html>
CSS部分
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ul li{list-style:none;}
body{font-size:13px;font-family:微软雅黑;}
.clear{clear:both;}
/*头部样式*/
.header{height:40px;width:100%;background-color:#333;}
.nav{width:1226px;height:40px;margin:0 auto;}
.header_left{width:500px;height:40px;line-height:40px;background:blue;float:left;}
.header_right{width:260px;height:40px;line-height:40px;background:blue;float:right;}
/*内容样式*/
.content{width:1226px;/*background-color:#ccc*/;margin:0 auto;}
/*头部导航部分*/
.contentMenu{width:1226px;height:66px;margin:10px auto;background:red;}
/*轮播图部分*/
.contentPic{width:1226px;height:460px;background-color:blue;}
.contentPic_left{width:246px;height:460px;float:left;background:black;}
.contentPic_right{width:980px;height:460px;float:right;background:red;}
/*轮播图下方广告样式*/
.contentPic_ul{width:1226px;height:180px;margin:10px 0;}
.contentPic_ul_0{width:235px;height:170px;background:#5F5750;float:left;}
.contentPic_ul_1{width:317px;height:170px;float:left;}
/*小米闪购栏目样式*/
.contentShop{width:1226px;}
.contentShop_mi{height:58px;line-height:58px;font-size:25px;font-weight:lighter;}
.contentShop_ul{width:235px;height:380px;float:left;background:black;margin-right:12px;}
/*产品栏目样式*/
.contentImg{width:1226px;height:100px;margin:10px auto;}
.contentUL{width:1226px;height:60px;margin:10px 0;/*background:red;*/}
.contentUL>h2{line-height:60px;font-size:25px;font-weight:lighter;}
.contentPhone{width:1226px;height:614px;/*background:red;*/margin:10px 0;}
.contentPhone_0_left{width:234px;height:614px;background-color: black;float:left;background:url(../images/buy/手机AD.jpg);}
/*.contentPhone_right{width:992px;height:614px;background-color:blue;float:right;}*/
.contentPhone_0_right ul{width:992px;height:614px;float:right;}
.contentPhone_0_right ul li{width:234px;height:300px;margin-bottom:14px;margin-left:14px;background-color: red;float:left;}
/*产品栏目基本样式*/
.contentPhone_left{width:234px;height:614px;float:left;}
.contentPhone_left li{height:300px;width:234px;float:left;background-color: red;}
.contentPhone_left_t{margin-bottom:14px;}
.contentPhone_right{width:992px;height:614px;float:right;}
.contentPhone_right li{width:234px;height:300px;background-color: red;float:left;margin-left:14px;}
.contentPhone_right_b{margin-top:14px;}
.contentPhone_right_b_0{width:234px;height:145px;background-color: blue;}
.contentPhone_right_b_1{width:234px;height:145px;margin-top:14px;background-color: yellow;}
/*底部样式*/
.footer{width:1226px;height:350px;background-color:#ccc;margin:0 auto;}
.footer-top_li{width:1226px;height:221px;background:red;margin:10px auto;}
.footer-bottom_li{width:1226px;height:84px;background:red;}效果图请老师直接看网站：
http://47.107.161.34/
