摘要：HTML部分代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>阶段练习</title><link rel="stylesheet" type="text/css" href="demo.
HTML部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阶段练习</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSs</a></li>
<li><a href="#">JS</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">php</a></li>
<li><a href="#">Java</a></li>
</ul>
</div>
<div>广告1</div>
<div>广告2</div>
<div>广告3</div>
<div>
<div>左面</div>
<div>右面</div>
</div>
<div>底部</div>
</body>
</html>
CSS部分代码
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
.header{width: 100%;
height: 40px;
background-color: #000;
}
ul{width:612px;
height: 40px;
margin:0 auto;
}
ul li{width: 100px;
height: 38px;
line-height: 38px;
text-align: center;
border: 1px solid #ccc;
float: left;
}
ul li a{text-decoration: none;
font-size: 14px;
color: orange;
display: block;
}
ul li a:hover{color: red;
font-size: 18px;
background-color: #424242;
}
.gt1,.gt2,.gt3{
width: 100px;
height: 160px;
position: fixed;
background-color: #ccc;
}
.gt1{
top: 200px;
left: 20px;
}
.gt2{
top: 120px;
right: 20px;
}
.gt3{
top: 320px;
right: 20px;
}
.count{width: 612px;
background-color: #ccc;
margin: 0 auto;
}
.count .left{width: 40%;
height: 800px;
float: left;
background-color: blue;
}
.count .right{width: 60%;
height: 800px;
float: right;
background-color: red;
}
.footer{height: 60px;
background-color: #000;
color: #fff;clear: both;
}
用列表和浮动做的导航。
布局是常用的上中下结构。
用定位做的页面广告部分。
批改老师：天蓬老师批改时间：2018-12-30 13:37:53
老师总结：布局方式很多,但很有规律,抽空可以总结 一下
