练习网页
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;
}
