老师，帮忙看下有需要改进的地方么，谢谢！
来源：2-12 编程练习
V_旺_
2019-11-06 23:00:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
.rig li,footer li{
list-style: none;
color: #fff;
display: inline;
line-height: 100px;
padding: 0 15px;
}
header,footer{
width: 100%;
height: 100px;
background: #000;
text-align: center;
}
.let{
float: left;
}
.rig{
float: right;
}
.l,.c{
height: 690px;
width: 35%;
background: darkcyan;
float: left;
}
.r{
height: 690px;
width: 30%;
border-left: 5px solid red;
background:yellowgreen;
float: right;
margin-left: -5px;
}
footer{
overflow: hidden;
}
a{
text-decoration: none;
}
.l h1,span,.r h1{
margin-top: 100px;
margin-left: 100px;
}
span{
background-color:pink;
}
.l li{
margin: 10px;
}
.c h1{
margin-top: 100px;
}
.c li{
display: block;
margin:10px 0;
}
.c li a,.l li a{
margin: 0 20px;
color: #000;
}
input,button{
display: block;
width: 300px;
height: 50px;
margin:0 auto;
margin: 50px 100px;
}
button{
background: red;
color: #fff;
}
</style>
</head>
<body>
<header>
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" class="let">
<ul class="rig">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</header>
<div class="cont">
<div class="l">
<h1>课程推荐</h1>
<ul>
<li>
<span>职业路径</span>
<a href="#">HTML5与CSS3实现动态网页</a>
</li>
<li>
<span>职业路径</span>
<a href="#">零基础入门Android语法与界面</a>
</li>
<li>
<span>职业路径</span>
<a href="#">IOS基础语法与常用控件</a>
</li>
<li>
<span>职业路径</span>
<a href="#">PHP入门开发</a>
</li>
<li>
<span>职业路径</span>
<a href="#">Java入门开发</a>
</li>
</ul>
</div>
<div class="c">
<h1>相关课程</h1>
<ul>
<li>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">HTML5</a>
<a href="#">CSS3</a>
<a href="#">Jquery</a>
</li>
<li>
<a href="#">移动端基础</a>
<a href="#">移动端App开发</a>
</li>
</ul>
</div>
<div class="r">
<h1>登录</h1>
<input type="text" placeholder="请输入登录邮箱/手机号"/>
<input type="text" placeholder="6-16位密码，区分大小写，不能用空格"/>
<button type="submit">登录</button>
</div>
</div>
<footer>
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</footer>
</body>
</html>
1回答
-
同学你好，
代码整体布局以及实现效果很棒！
优化建议：提交按钮可以将边框去掉，看起来会美观一些
参考修改：
祝学习愉快！欢迎采纳~
0
相似问题