小米官网案例布局作业

原创 2018-11-10 15:32:38 400
摘要:<!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>
<h2 style='width:1226px;height:29px;'>小米闪购</h2>
<div></div>
<div style='background:url(images/longAD1.jpg)'></div>
<div><h2>手机</h2></div>
<div></div>
<div style='background:url(images/longAD2.jgp)'></div>
<div><h2>智能</h2></div>
<div></div>
<div style='background:url(images/longAD3.jpg)'></div>
<div><h2>家电</h2></div>
<div></div>
<div style='background:url(images/longAD4.jpg)'></div>
</div>
<!--结尾开始-->
<div>
<div>底部</div>
<div></div>
</div>


</body>
</html>

老师这个编辑器还是复制进来class属性就全没了。

CSS部分:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,inp
ut,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;}
.menu{width:1226px;height:85px;background:red;}
.menu_slideShow{width:1226px;height:460px;background-color:blue;}
.contentPic_ul{width:1226px;height:180px;margin:10px 0;background:red;}
p{width:1226px;height:29px;}
.contentShop{width:1226px;height:380px;background:blue;}
.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:28px;}
.contentPhone{width:1226px;height:614px;background:red;margin:10px 0;}


/*底部样式*/
.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;}


发布手记

热门词条