2-6作业
来源：2-8 经典的两列布局
ZZH994
2017-09-26 23:49:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行布局练习</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
max-width: 1903px;
height:100px;
background:black;
position:fixed;
top: 0;
}
.logo{
width:250px;
height:100px;
background:url("http://climg.mukewang.com/58c0d2d900016ce303000100.png") center top no-repeat;
margin: 10px;
position:absolute;
left:30px;
top: -10px;
}
.nav{
position:absolute;
right:20px;
color:white;
}
.nav-li{
float:left;
line-height:100px;
margin-right:25px;
cursor: pointer;
}
.banner{
width: 100%;
height: 409px;
background:url("http://climg.mukewang.com/58c0eda50001e12416000480.jpg") center top no-repeat;
margin-top:100px;
margin-bottom: 5px;
}
.container{
width: 100%;
height:409px;
background:url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg) center top no-repeat;
margin-bottom: 5px;
}
.container1{
width: 100%;
height: 409px;
background:url("http://climg.mukewang.com/58c0edc9000100d516000480.jpg") center top no-repeat;
}
.footer{
width: 100%;
max-width: 1903px;
height:100px;
background:black;
color: white;
}
.footer a:link{
color: white;
text-decoration:none;
}
a{
line-height: 100px;
float: left;
}
.footer1{
margin-left: 24%;
}
.footer2,.footer3,.footer4,.footer5,.footer6{
margin-left: 6%;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav-li">编程</div>
<div class="nav-li">职业路径</div>
<div class="nav-li">实战</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
</div>
<div class="banner"></div>
<div class="container"></div>
<div class="container1"></div>
<div class="footer">
<a href="#" class="footer1">网站首页</a>
<a href="#" class="footer2">企业合作</a>
<a href="#" class="footer3">人才招聘</a>
<a href="#" class="footer4">联系我们</a>
<a href="#" class="footer5">常见问题</a>
<a href="#" class="footer6">友情链接</a>
</div>
</body>
</html>麻烦老师帮忙修改一下这个作业，代码如何优化一下？
2回答
-
Miss路
2017-09-27
这是css的选择器的格式呀，你可以再去重新学一下《CSS选择的艺术》这门课。祝学习愉快！
0 -
怎么都被占用了呢
2017-09-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行布局练习</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
max-width: 1903px;
height:100px;
background:black;
position:fixed;
top: 0;
}
.logo{
width:250px;
height:100px;
background:url("http://climg.mukewang.com/58c0d2d900016ce303000100.png") center top no-repeat;
margin: 10px;
position:absolute;
left:30px;
top: -10px;
}
.nav{
position:absolute;
right:20px;
color:white;
}
.nav-li{
float:left;
line-height:100px;
margin-right:25px;
cursor: pointer;
}
.banner{
width: 100%;
height: 409px;
background:url("http://climg.mukewang.com/58c0eda50001e12416000480.jpg") center top no-repeat;
margin-top:100px;
margin-bottom: 5px;
background-size: 100%;
}
.container{
width: 100%;
height:409px;
background:url(http://climg.mukewang.com/58c0edb80001c9f216000480.jpg) center top no-repeat;
margin-bottom: 5px;
background-size: 100%;
}
.container1{
width: 100%;
height: 409px;
background:url("http://climg.mukewang.com/58c0edc9000100d516000480.jpg") center top no-repeat;
background-size: 100%;
}
.footer{
width: 100%;
max-width: 1903px;
height:100px;
background:black;
color: white;
position: fixed;
bottom: 0;
left:0;
}
.footer>div{
width:650px;
margin:0 auto;
}
.footer a:link{
color: white;
text-decoration:none;
}
a{
line-height: 100px;
padding:0 20px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav-li">编程</div>
<div class="nav-li">职业路径</div>
<div class="nav-li">实战</div>
<div class="nav-li">猿问</div>
<div class="nav-li">手记</div>
</div>
</div>
<div class="banner"></div>
<div class="container"></div>
<div class="container1"></div>
<div class="footer">
<div>
<a href="#" >网站首页</a>
<a href="#" >企业合作</a>
<a href="#" >人才招聘</a>
<a href="#" >联系我们</a>
<a href="#" >常见问题</a>
<a href="#" >友情链接</a>
</div>
</div>
</body>
</html>
这样效果更好些哦
0h017-09-27
