2-6编程求助
来源：2-7 编程练习
小侃流年
2017-06-22 09:52:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.header{
background: #333;
height: 60px;
width: 100%;
margin: 0 auto;
line-height: 60px;
position: fixed;
}
.header img{
height:60px;
float: left;
}
.headerright{
list-style: none;
float: right;
color: white;
}
.headerright li{
float: left;
margin: 0 20px;
line-height: 30px;
font-size: auto;
}
.body1,.body2.body3{
width: 100%;
margin: 0 auto;
}
.footer{
background: #333;
height: 60px;
width: 100%;
margin: 0 auto;
line-height: 60px;
position:fixed;
left: 0;
bottom: 0;
/* text-align: center;*/
}
.footerwenzi{
align:center;
list-style: none;
color: white;
float: left;
text-align: center;
}
.footerwenzi li{
float: left;
margin: 0 20px;
line-height: 30px;
/* text-align: center;*/
}
</style>
</head>
<body>
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
<ul class="headerright" >
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="body1"><img src="http://climg.mukewang.com/58c0eda50001e12416000480.jpg"></div>
<div class="body2"><img src="http://climg.mukewang.com/58c0edb80001c9f216000480.jpg"></div>
<div class="body3"><img src="http://climg.mukewang.com/58c0edc9000100d516000480.jpg"></div>
<div class="footer">
<ul class="footerwenzi">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>意见反馈</li>
</ul>
</div>
<!-- 此处写代码 -->
</body>
</html>
老师 这里有俩问题
中间图片之间可以做到无缝隙么？
底部文字不会居中处理了！
3回答
-
小丸子爱吃菜
2017-06-23
（1）代码选择器有书写错误，并列选择器要有逗号分开。
（2）楼上的同学使用vertical-align: top; 这个方法是可以的，也可以给.body1、2、3添加一个固定的高度，高度等于图片的高度就可以了。
（3）给底部的ul设置一个定宽，然后再设置margin：0 auto；即可实现居中，将float去掉。
祝学习愉快！
0 -
qq_又年_0
2017-06-23
img图片上加条属性vertical-align: top; 让基线顶部对齐就没有空隙了。
0 -
慕粉2120116609
2017-06-22
底部文字居中可以用
position:relative;
left:***px;
0
相似问题