麻烦老师帮忙检查一下
来源：2-10 编程练习
慕妹8413186
2020-05-05 21:07:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;color:#fff;text-align:center;font-size:16px;}
.hearder{
width:100%;
height:100px;
background:#000;
position:fixed;
overflow:hidden;
}
ul li{list-style: none;float: left;color:white;line-height:100px;font-size: 25px;margin-right: 30px;}
ul{
float:right;
}
img{float:left;}
.content{
width:100%;
height:500px;
margin:0 auto;
background:#ADD8E6;
text-align:center;
padding-top:100px;
}
h3{
color:#000;
text-align:left;
font-size:20px;
}
.left{
width:30%;
height:500px;
float:left;
padding-top:50px;
padding-left:20%;
}
.right{
width:30%;
height:500px;
float:right;
padding-top:50px;
padding-left:20%;
}
.footer{
width:100%;
height:80px;
background:#000;
position:fixed;
bottom:0px;
}
.ul002{
float:none;
width:50%;
margin:0 auto;
}
.path{
display:inline;
color:#000;
background:#D69999;
text-align:left;
}
.value{
display:inline;
color:#000;
margin-left:20px;
text-align:left;
}
p{
margin-top:20px;
text-align:left;
}
.valueRight{
display:inline;
color:#000;
text-align:left;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="hearder">
<img src ="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
<ul class="ul001">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div class="left">
<h3>课程推荐</h3>
<p><span class="path">职业路径</span><span class="value">HTML5与CSS3实现动态网页</span></p>
<p><span class="path">职业路径</span><span class="value">零基础入门Android语法与界面</span></p>
<p><span class="path">职业路径</span><span class="value">iOS基础语法与常用控件</span></p>
<p><span class="path">职业路径</span><span class="value">PHP入门开发</span></p>
<p><span class="path">职业路径</span><span class="value">JAVA入门开发</span></p>
</div>
<div class="right">
<h3>相关课程</h3>
<p><span class="valueRight">HTML CSS JavaScript</span></p>
<p><span class="valueRight">HTML5 CSS3 Jquery</span></p>
<p><span class="valueRight">移动端基础 移动端APP开发</span></p>
</div>
</div>
<div class="footer">
<ul class="ul002">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2020-05-06
同学你好，因为页脚部分是给每个li设置右间距，最后一项右侧会多出一些空白，导致整体居中存在误差，另，页脚内容没有垂直居中。
建议：
1、单独给页脚内容设置样式，设置左右间距相等，调整display属性设置为inline-block，让元素在一排显示，结合之前设置的text-align:center;属性让内容水平居中显示。
2、设置行高与页脚高度一样，让内容垂直居中显示。
3、去掉ul的宽度，让其由内容撑开宽度即可
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题