html代码
<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title></title>
???<link rel="stylesheet" href="../CSS/reset.css"/>
???<link rel="stylesheet" href="../CSS/fight2.css"/>
</head>
<body>
<header>
???<nav>
???????<a href="">首页</a>
???????<a href="">易牛课程</a>
???????<a href="">易牛班级</a>
???????<a href="">易牛资讯</a>
???????<a href="">话题小组</a>
???</nav>
???<nav>
???????<a href="">登录</a>
???????<a href="">注册</a>
???</nav>
</header>
<div>
<header>
</header>
???<div>
???????<p></p>
???????<p></p>
???????<p></p>
???????<p></p>
???????<p></p>
???</div>
???<aside>
???????<p></p>
???????<p></p>
???</aside>
??<footer>
??????<p>
??????????<a href="#">返回顶部</a>
??????</p>
??</footer>
<header></header>
</div>
<footer>
???<div>
???????<p>我是管理员</p>
???????<p><a href="">用户管理</a></p>
???????<p><a href="">课程管理</a></p>
???</div>
???<div>
???????<p>我是学生</p>
???????<p><a href="">如何注册</a></p>
???????<p><a href="">购买教程</a></p>
???</div>
???<div>
???????<p>联系我我们</p>
???????<p><a href="">关于我们</a></p>
??????<p><a href="">联系我们</a></p>
???</div>
???<div>
???????<p>商业应用</p>
???????<p><a href="">商务合作</a></p>
???????<p><a href="">内容招募</a></p>
???</div>
???<div>
???????<p>系统帮助</p>
???????<p><a href="">购买教程</a></p>
???????<p><a href="">作业提交</a></p>
???</div>
</footer>
</body>
</html>
CSS代码
body{
???width: 100%;
}
body>header{
???padding:0px 30px;
???background-color:#534141;
???height: 50px;
???overflow:hidden;
}
nav>a{
???font-size: 16px;
???padding: 17px;
???color: #e6e6e6;
???display: block;
???text-decoration: none;
}
nav>a:hover{
???color:#fff;
???background-color: #e12929;
}
header>nav:first-child>a{
???float: left;
}
header>nav:last-child>a{
???float: right;
}
body>div{
???width: 700px;
???height:1000px;
???margin: 30px auto;
???border:1px solid black ;
???background-color: #f1e4e4;
???position: relative;
}
body>div>header{
????width: 90%;
????height: 50px;
????margin: 0px auto;
????background-color: #645858;
????position: absolute;
}
body>div>header:first-child{
????left: 35px;
????top:50px;
}
body>div>header:last-child{
???left: 35px;
????top:430px;
}
div>div>p{
???width:100px;
???height:100px;
???background-color: #e58282;
???float: left;
}
div>div>p:not(:last-child){
???margin-right: 30px;
}
div>div>p{
???width:100px;
???height:100px;
???background-color: #e58282;
???float: left;
}
div>div{
???position: absolute;
???left: 40px;
???top:150px;
}
div>aside>p{
???width:100px;
???height:100px;
???background-color: #e58282;
???float: left;
}
div>aside>p:not(:last-child){
???margin-right: 30px;
}
div>aside{
???position: absolute;
???left: 40px;
???top:280px;
}
div>footer>p{
???background-color: deepskyblue;
???width: 50px;
???height: 50px;
???position: fixed;
???right: 50px;
???bottom:100px;
}
body a{
???text-decoration: none;
}
body>footer{
???padding: 50px 500px 50px 50px;
???background-color:#2a2a2a;
???height: 200px;
???box-sizing: border-box;
???overflow: hidden;
}
body>footer>div>p>a{
???font-size: 14px;
???color:#e6e6e6;
???text-decoration: none;
}
body>footer>div>p:first-child{
???font-size: 16px;
???color:#fff;
???margin-bottom: 20px;
???margin-right: 50px;
}
body>ooter>div>p:nth-child(2){
???margin-bottom: 10px;
}
body>footer>div>p:nth-child(3){
???margin-bottom: 10px;
}
body>footer>div{
????float:left;
}
练习网页
原文地址：https://www.cnblogs.com/liuwujiang/p/8904146.html