布局的练习
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="../CSS/fudong.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<div class="no3">
<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>
</div>
</header>
<!-- 内容 -->
<article>
<header></header>
<div class="no1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="no2">
<p class="no4"></p>
<p class="no4"></p>
</div>
<header></header>
</article>
<!-- 返回顶部 -->
<a href="#">返回顶部</a>
<!-- 脚注 -->
<footer>
<div>
<p >我是管理员</p>
<p>用户管理</p>
<p >课程管理</p>
</div>
<div>
<p >我是学生</p>
<p>如何注册</p>
<p >购买课程</p>
</div>
<div>
<p >联系我们</p>
<p>关于我们</p>
<p >联系我们</p>
</div>
<div>
<p >商业应用</p>
<p>商务合作</p>
<p >内容招募</p>
</div>
<div>
<p >系统帮助</p>
<p>购买课程</p>
<p >作业提交</p>
</div>
</footer>
</body>
</html>
CSS代码
/*导航栏*/
a{
padding: 17px 17px;
margin: 30px;
color:#e6e6e6;
}
.no3{
height: 50px;
width: 100%;
background: #534141;
text-align: center;
overflow: hidden;
position: fixed;
top: 0px;
left: 0px;
}
.no3{
overflow: hidden;
}
nav:first-child{
float: left;
margin-top: 17px;
}
nav:last-child{
float: right;
margin-top: 17px;
}
a:hover{
background-color: #e12929;
color:#fff ;
}
/*正文*/
article{
width: 700px;
height: 1000px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
background-color: #f1e4e4;
}
article>header{
height: 50px;
margin: 30px 30px 0 30px;
background-color: #645858;
border: 1px solid black;
}
article>div>p{
width: 100px;
height: 100px;
background-color:#e58282;
margin-top:50px;
margin-left: 30px;
float: left;
}
.no1{
overflow:hidden;
}
.no2{
overflow: hidden;
}
.no4{
margin-top: 30px;
}
/*返回顶部*/
body>a{
width: 50px;
height: 50px;
position: fixed;
right: 50px;
bottom: 100px;
color: black;
background-color:#e58383;
}
/*脚注*/
footer{
border: 1px solid black;
background-color: #2a2a2a;
margin-top: 30px;
height: 200px;
}
footer>div>p:not(:first-child){
font-size: 14px;
color :#e6e6e6;
}
p{
font-size: 16px;
color: #fff;
}
footer>div{
padding: 50px 50px ;
line-height: 2;
float: left;
}
