老师帮我看下代码哪里还可以优化？
来源：2-12 编程练习
慕斯卡0165078
2020-03-22 23:00:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2-12编程题</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 100px;
color: #fff;
background: #000000;
line-height: 100px;
}
.img {
width: 30%;
height: 100%;
float: left;
}
.daohang {
/* 浮动和定位同时设置，浮动会失效，这里应至设置浮动 */
float: right;
}
ul {
list-style-type: none;
font-size: 16px;
}
li {
/* 横向排列 */
display: inline-block;
/* margin-right: 50px; */
/* 优化 */
margin:0 25px;
}
/* 中间部分 */
.container {
width: 100%;
height: 800px;
color:black;
font-size:14px;
background:#A6FFFF;
/* padding: 100px; */
padding-top:100px;
}
/* 中间左侧 */
.container-left{
width:30%;
height:100%;
float:left;
padding-left:100px;
}
.p-left{
padding:50px 0px 0px 50px;
line-height:35px;
text-align: justify;
}
.p-left a span{
background: pink;
margin-right:15px;
}
/* 中间右侧 */
.container-middle{
width:30%;
height:100%;
float:left;
border-right:5px solid orange;
}
.p-middle{
padding-top:50px;
line-height:35px;
text-align: left;
}
.p-middle a{
word-spacing:8px;
}
.container-right{
width:30%;
height:100%;
float:right;
}
.container-right #form{
padding-top:50px;
text-align: justify;
padding-left:50px;
}
.container-right #form #input{
margin-top:20px;
width:180px;
height:25px;
font-size:10px;
text-align: left;
}
.container-right #form #button{
margin-top:20px;
width:180px;
height:35px;
color:#fff;
background-color:red;
border:none;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #fff;
background: black;
font-size:16px;
line-height: 80px;
}
.footerul{
list-style-type: none;
font-size: 14px;
}
.footerul li{
display: inline-block;
/* margin-right: 50px; */
line-height: 80px;
}
</style>
</head>
<body>
<div class="header">
<div class="img"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" /></div>
<div class="daohang">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="container-left">
<p class="p-left">
<!-- <h3>课程推荐</h3> -->
<a style="font-size:18px"><b>课程推荐</b></a><br>
<a><span>职业路径</span>HTML5与CSS3实现动态网页</a><br>
<a><span>职业路径</span>零基础入门Android语法与界面</a><br>
<a><span>职业路径</span>iOS基础语法与常用控件</a><br>
<a><span>职业路径</span>PHP入门开发</a><br>
<a><span>职业路径</span>JAVA入门开发</a><br>
</p>
</div>
<div class="container-middle">
<p class="p-middle">
<a style="font-size:18px"><b>相关课程</b></a><br>
<a>HTML CSS JavaScript</a><br>
<a>HTML5 CSS3 Jquery</a><br>
<a>移动端基础 移动端APP开发</a>
</p>
<!-- <hr size="800" width="5px" color="orange" float:right right="0"> -->
</div>
<div class="container-right">
<form id="form">
<a style="font-size:18px"><b>登录</b></a><br>
<input type="text" id="input" placeholder="请输入登录邮箱/手机号"/><br>
<input type="text" id="input" placeholder="6-16位密码，区分大小写，不能有空格"/><br>
<button id="button">登录</button>
</form>
</div>
</div>
<div class="footer">
<ul class="footerul">
<li >网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，代码效果实现的很棒。如下所示，由于浏览器默认给input元素添加2px的边框，而按钮设置了border:none;导致按钮与输入框对齐存在误差
建议优化：调整按钮的宽度，让其对齐显示。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题