请老师检查3-3的作业。是否存在不规范待优化的地方。谢谢老师~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
width:100%;
color:black;
margin:0 auto;
min-width:1000px;
}
a{
text-decoration:none;
color:white;
}
.header{
overflow:hidden;
background:black;
}
.logo{
float:left;
}
.nav{
}
.nav li{
float:right;
list-style:none;
height:100px;
line-height:100px;
padding-right:20px;
}
.main{
height:650px;
margin:0 auto;
overflow:hidden;
padding:0 200px 0 300px;
}
.footer{
background:black;
height:50px;
line-height:50px;
position:fixed;
width:100%;
bottom:0;
text-align:center;
}
.footer ul{
display:inline-block;
}
.footer li{
float:left;
padding-right:20px;
list-style:none;
}
.left,.middle,.right{
float:left;
min-height:650px;
position:relative;
}
.left{
width:300px;
background:#FFE4B5;
margin-left:-100%;
left:-300px;
}
.middle{
width:100%;
background:pink;
text-align:center;
}
.right{
width:200px;
background:lightblue;
margin-left:-200px;
right:-200px;
}
p{
margin-top:20px;
padding-left:20px;
}
span{
background:pink;
margin-right:20px;
}
input{
height:30px;
width:150px;
}
.button{
background:red;
color:white;
border-color:red;
}
.middle img{
padding-top:50px;
padding-left:50px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<ul class="nav">
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
<div class="main">
<div class="middle">
<img src="http://img1.sycdn.imooc.com\/climg/590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<h3>课程推荐</h3>
<p><span>职业路径 </span>人门开发人门开发</p>
<p><span>职业路径 </span>人门开发人门开发</p>
<p><span>职业路径 </span>人门开发人门开发</p>
<p><span>职业路径 </span>人门开发人门开发</p>
<p><span>职业路径 </span>人门开发人门开发</p>
</div>
<div class="right">
<h3>登录</h3>
<p><input type="text" placeholder="请输入用户名"/></p>
<p><input type="password" placeholder="请输入密码"/></p>
<p><input type="button" value="登录" class="button"/></p>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
</div>
</body>
</html>0
收起
正在回答
1回答
你好同学 ，一些问题和建议如下
1.left和right中的标题，也建议设置20px的左间距 ，这样让标题和下面的内容左对齐更好看
2.中间粉色盒子是自适应的，所以里面的图片也建议设置一个百分比的宽度 ，这样会随着粉色盒子的缩放而缩放. 图片的间距最好使用margin实现，因为padding会计算在图片的高度之中。
3.尾部的li因为设置了右间距，所以内容并不会居中显示，建议改为左右各一半间距，这样内容就可以居中了
如下调整：
祝学习愉快 ，望采纳。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星