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选择的艺术》这门课。祝学习愉快！

怎么都被占用了呢

2017-09-27

<!DOCTYPE html>

<html>

<head>

<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;

}

line-height: 100px;

padding:0 20px;

}

</style>

</head>

<body>

</div>

<div>

</div>

</body>

</html>

这样效果更好些哦

hZH994

h .footer>div{ width:650px; margin:0 auto; } 这段代码的意思是选择footer下面的div标签吗？“>”的意义是什么？

h017-09-27

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

2-6作业疑问

回答 5

2-6 作业

回答 1

2-10作业

回答 1

2-6作业改进

回答 1

2-9作业代码

回答 2

打开慕课网App查看更多内容