老师请检查，什么地方可以优化
来源：2-12 编程练习
keepangry2297447
2020-03-18 18:01:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-7编程练习</title>
<style>
*{
padding: 0;
margin: 0;
}
.big{
width: 100%;
position: relative;
background: #99cccc;
}
.header{
width: 100%;
height: 100px;
background-color: #000;
overflow:hidden;
zoom:1;
position: fixed;
top: 0;
}
.header img{
display: block;
float: left;
margin-left: 30px;
line-height: 100px;
cursor: pointer;
}
.header li{
font-family: "微软雅黑"；
font-size:16px;
color: #fff;
list-style: none;
float: left;
line-height: 100px;
padding: 0 15px;
cursor: pointer;
}
.header ul{
float: right;
margin-right:50px;
}
.content{
background: #99cccc;
width: 90%;
height: 1000px;
margin-right: auto;
margin-left: auto;
padding: 100px 0 0 60px;
overflow: hidden;
zoom:1; }
.content p{
display: inline-block;
background: pink;
margin: 10px;
padding: 5px;
}
p,span{
font-family: "微软雅黑";
font-size: 20px;
line-height: 30px;
}
.left{
padding-top: 60px;
float: left;
width: 30%
height:100px;
}
.right{
float: left;
width: 30%;
height: 100px;
padding: 60px 0 0 80px;
}
.right span{
display: inline-block;
margin: 10px; }
.th{
float: right;
width:30%;
height: 1000px;
border-left: 2px orange solid;
padding: 60px 0 0 40px;
}
.h2{
font-family: "微软雅黑";
font-size: 25px;
margin-bottom: 20px; }
.h2_1{
background: #f00;
font-family: "微软雅黑";
font-size: 25px;
color: #fff;
width: 251px;
margin-top: 20px;
padding:5px 0;
text-align: center;
cursor: pointer;
}
.text{
width: 251px;
} .footer{
width: 100%;
height: 100px;
overflow: hidden;
zoom:1;
position: fixed;
bottom: 0;
background: #000;
}
.footer li{
float: left;
font-family: "微软雅黑";
font-size: 16px;
color: #fff;
text-align: center;
list-style: none;
line-height: 100px;
padding:0 35px;
cursor: pointer;
}
.footer ul{
text-align: center;
height: 100px;
width: 805px;
margin:0 auto;
} </style>
</head>
<body>
<div class="big">
<div class="header">
<div><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png"></div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div class="left">
<h2>课程推荐</h2>
<p>职业路径</p><span>HTML5和CSS实现动态网页</span><br/>
<p>职业路径</p><span>零基础入门Android语法与界面</span><br/>
<p>职业路径</p><span>iOS基础语法与常用控件</span><br/>
<p>职业路径</p><span>PHP入门开发</span><br/>
<p>职业路径</p><span>Java入门开发</span><br/> </div>
<div class="right">
<h2>相关课程</h2>
<span>HTML</span><span>CSS</span><span>JavaScript</span><br/>
<span>HTML5</span><span>CSS3</span><span>Jquery</span><br/>
<span>移动端基础</span><span>移动端app开发</span><br/> </div>
<div class="th">
<div class="text">
<h2 class="h2">登录</h2>
<input type="text" size="35" placeholder="请输入登录邮箱/手机号" style="height: 30px;width: 251px;">
<br/>
<br/>
<input type="password" size="35" placeholder="6-16位密码，区分大小写，不能用空格" style="height: 30px;width: 251px;"><br/>
<h2 class="h2_1">登录</h2>
</div>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div> </div>
</body>
</html>
1回答
-
好帮手慕粉
2020-03-18
同学你好，关于同学的问题回答如下:
1、在老师的电脑下（分辨率小），布局是不太正确：
这是因为给第三列设置padding-top将内容撑下来了。同学可以给下面的自容器设置：
2、登录按钮没有与输入框保持一致：
这是因为输入框不仅有251px的宽度，还有左右各2px的边框。建议同学调大按钮的宽度为255px：
祝学习愉快~
0
相似问题