2-9作业
来源：2-11 经典的三列布局
夜景阑珊
2017-08-22 21:01:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.nav{
width:100%;
height:70px;
background:black;
}
.imooc img{
width:200px;
height:70px;
float:left;
}
.div1{ float:right;
color:#fff;
}
.div1 ul li{
display:inline-block;
width:70px;
line-height:70px;
}
.neirong{
width:100%;
height:800px;
background:#87CEFA;
}
.div2{
float:left;
margin-top:100px;
margin-left:200px;
}
ul li{
list-style-type: none;}
span{background: #FF1493;}
.div2 ul li{ line-height:50px;
}
.div3{
float:right;
margin-top:100px;
margin-right:200px;
}
.div3 ul li{line-height:50px;}
.div4{ width:100%;
height:70px;
background:black;
text-align:center;
}
.div4 ul li{color:#fff;
display:inline-block;
line-height:70px;
width:100px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="imooc"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></div>
<div class="div1">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿文</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="neirong">
<div class="div2">
<h3>课程推荐</h3>
<ul>
<li><span>职业路径</span> HTML和CSS发展</li>
<li><span>职业路径</span> JS入门内容</li>
<li><span>职业路径</span> ios语法讲解</li>
<li><span>职业路径</span> JAVA</li>
<li><span>职业路径</span> php</li>
</ul>
</div>
<div class="div3">
<h3>相关课程</h3>
<ul>
<li>html css java</li>
<li>html css java</li>
<li>移动端基础开发 内容</li>
</ul>
</div>
</div>
<div class="div4">
<ul>
<li>网站首页</li>
<li>联系我们</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
感觉有很多多余的，还有为什么页尾文字居中对齐，写在.DIV4 UL LI 这里不生效 要卸载.DIV4里面才生效
2回答
-
好帮手慕糖
2017-08-23
你好，给li设置居中的话，他的宽度是100px，这里文字只完成了相对于这100px实现了居中（可以尝试给ul及div4都不设置居中的情况下，查看li设置居中与没有居中的区别），相对于整体的底部并没有实现居中。祝学习愉快~
0 -
晓松aa
2017-08-22
设置个左浮动在设置居中
0
相似问题