请老师帮我看下底部改什么设置居中以及上面代码有没有可以优化的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多列布局</title>
<style type="text/css">
body{
margin: 0;padding: 0;width:100%;height:auto;margin:0 auto;font-size: 20px;
}
.header{
width: 100%;height: 100px;background:black;margin: 0 auto;
}
.logo img{
display: block;float: left;
}
.nav ul{
float: right;line-height: 100px;margin: 0;
}
.nav ul li{
list-style:none;color:blue;float: left;margin: 0 30px;color: white;cursor: pointer;
}
.bodyer{
width: 100%;height: 1000px;auto;background: #87cefa;margin: 0 auto;padding-left:150px;
}
.container{
width: 100%;height: auto; padding-left:100px;
}
.left{
width:33%;float:left;padding-top:150px;
}
span{
background-color: coral;
}
.middle{
width:33%;float:left;padding-top:150px;
}
.right{
width:33%;float:left;padding-top:150px;
}
.text{
width:200px;height:30px;margin-bottom: 15px;padding: 0;font-size:12px;
}
.sub{
width:200px;height:30px;background-color: orangered;margin: 0;border:none;
}
.footer{
width:100%;height:100px;position: fixed;bottom:0px;background:black;margin: 0 auto;
}
.footer ul{
margin: 0 auto;line-height: 100px;
}
.footer ul li{
color: white;list-style:none;float: left;margin:0 30px;cursor: pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="bodyer">
<div class="container"></div>
<div class="left">
<h3>课程推荐</h3>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS常用语法和基础控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> Java入门开发</p>
</div>
<div class="middle">
<h3>相关课程</h3>
<p>HTML CSS javascript</p>
<p>HTML5 CSS3 jquery</p>
<p>移动端基础 移动端app开发</p>
</div>
<div class="right">
<h3>登录</h3>
<form>
<input type="text" name="user" class="text" placeholder="请输入登录邮箱/手机号"/>
<br/>
<input type="password" name="pwd" class="text" placeholder="6-16位密码，区分大小写，不能用空格"/>
<br/>
<input type="submit" name="sub" value="登录" class="sub"/>
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，对于你的问题解答如下：
可以调整页脚的li的display属性值为inline-block，让其在一排显示，然后，给ul添加text-align：center;属性实现内容水平居中显示。
由于bodyer盒子设置了百分百宽度的同时，又设置了左内填充，实际占据页面的宽度超出了窗口的宽度，导致水平方向出现了滚动条。建议：去掉bodyer盒子的左填充。
给内容设置左外边距，实现效果。示例：
中间内容与右侧内容之间缺少橘色分割线，建议参考如下代码设置
在middle和right之间添加一个div，用来设置分割线。
调整右侧内容的宽度，设置分割线的宽高和背景颜色，然后，浮动在一排显示。
如下所示，因为浏览器默认会给没有设置border属性的input元素添加2px的边框，导致输入框与按钮右侧没有对齐显示
建议优化：调整按钮的宽度
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星