请老师检查，有什么地方可以优化？
来源：2-12 编程练习
TaraTara
2020-03-22 02:59:52
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.main{
margin:100px auto;
background-color:#B0E0E6;
height:1500px;
width:100%;
}
.container{
margin:0 auto;
width:70%;
}
.header{
width:100%;
height:100px;
background-color:#000;
position:fixed;
line-height:100px;
font-size:20px;
top:0px;
}
.banner1{
background-repeat:no-repeat;
width:100%;
}
.banner2{
background-repeat:no-repeat;
width:100%;
}
.banner3{
background-repeat:no-repeat;
width:800px;
}
.navi{
position:fixed;
right:0px;
}
.navi li{
color:white;
display:inline-block;
margin-right:30px;
float:left;
}
.logo{
float:left;
}
.footer{
width:100%;
height:100px;
line-height:100px;
color:white;
font-size:20px;
background-color:black;
position: fixed;
text-align:center;
bottom:0;
}
.footer ul li{
padding:0 25px;
display:inline-block;
}
ul{
list-style: none;
display:inline-block;
}
.left ul,.middle ul{
line-height:40px;
margin-top:10%;
margin-left:10%;
}
a{
text-decoration:none;
color:white;
}
span{
background-color:pink;
}
h1{
margin-top:10%;
margin-left:10%;
}
form{
margin-top:10%;
margin-left:10%;
}
input{
margin-bottom:20px;
width:200px;
}
.buttom{
background-color:red;
border:none;
}
.left{
float:left;
width:35%;
margin:0 auto;
height:1500px;
}
.middle{
float:left;
width:35%;
margin:0 auto;
height:1500px;
}
.right{
width:30%;
float:right;
border-left:10px solid orange;
box-sizing: border-box; /*不设置这个属性，div.right会被挤到下方*/
height:1500px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<ul class="navi">
<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="container">
<div class="left">
<h1>课程推荐</h1>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门android语法与界面</li>
<li><span>职业路径</span> IOS基础语法与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="middle">
<h1>相关课程</h1>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
<div class="right">
<h1>登录</h1>
<form>
<table>
<tr>
<td><input type="text" placeholder="请输入登录手机号" name="username"></td>
</tr>
<tr>
<td><input type="password" placeholder="请输入密码" name="password"></td>
</tr>
<tr>
<td><input type="submit" value="登录" name="submit" class="buttom"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="footer">
<div>
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，整体效果实现了，还有如下可以优化的地方：
如下所示，由于img标签自带间距，导致logo区域实际高度超出顶部，虽然不会影响效果的实现，但还是建议同学给img设置display:block属性，让代码更加规范
如下所示，li标签没有成对出现，开始和闭合标签混乱，建议同学调整下，让代码更加规范
如下所示，因为浏览器默认给input标签添加2px的边框，但登录按钮去掉了边框，导致输入框与按钮对齐存在误差。
建议：调整按钮的宽度
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题