布局 2-6 编程练习
来源：2-5 经典的行布局（2）
写额外飞1
2018-01-11 15:35:26
效果实现了，请老师看看代码在实际开发中有什么问题
问题一：导航用<div><a></a></div>这种写法。有问题吗？一般是不是都用ul li 来写
问题二：图片之间的空隙。是用margin来消除吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{margin:0;padding:0;font-family:"黑体";color:#fff;}
.header{
width:100%;
height:100px;
background:#000;
position:fixed;
top:0;
left:0;
}
.logo{
width:250px;
height:100px;
line-height:100px;
float:left;
}
.nav{
width:600px;
height:100px;
float:right;
}
.nav a{
font-size:24px;
line-height:100px;
text-align:center;
padding:20px;
text-decoration:none;
color:#fff;
}
.main{
width:100%;
height:auto;
margin-top:100px;
margin-bottom:100px;
}
.main img{
width:100%;
height:auto;
margin-top:-5px;
}
.footer{
width:100%;
height:100px;
text-align:center;
line-height:100px;
background:#000;
position:fixed;
bottom:0;
left:0;
}
.footer a{
color:#fff;
font-size:24px;
text-decoration:none;
padding:20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="main">
<img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg">
<img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg">
<img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg">
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
1回答
-
你好，1、由于代码的灵活性，实现一种效果会有很多种方法，这里主要理解会用即可，没有强制的要求，具体可看个人编码习惯已经项目需求。
2、这个是图片的自身问题，建议：可设置display: block;属性。
祝学习愉快~
0
相似问题