检查代码，看看是否有需要优化的地方

来源：3-3 编程练习

weixin_慕的地5241954

2019-08-16 19:06:19

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
margin: 0;
padding: 0;
}

body {
min-width: 1000px;
}

.header,
.footer {
width: 100%;
height: 100px;
text-align: center;
background: black;
color: white;
line-height: 100px;
float: left;
}
.header .logo {
float: left;
width: 300px;
height: 100px;
margin: auto 0;
}
.header .nav {
float: right;
}
.header .nav ul li {
font: 16px "微软雅黑";
color: white;
list-style: none;
display: inline-block;
margin: auto 40px;
}

.content {
padding: 0 350px 0 400px;
}

.middle,
.left,
.right {
position: relative;
float: left;
min-height: 770px;
}

.middle {
width: 100%;
background: pink;
}
.middle img{
display: block;
margin: 100px auto;
}

.left {
width: 400px;
background: lightyellow;
margin-left: -100%;
left: -400px;
}
.left h2{
margin-top:100px;
margin-left: 50px;
}
.left p{
margin: 25px 0;
margin-left: 50px;
}
.left p span {
background: pink;
}
.right {
width: 350px;
background: lightblue;
margin-left: -350px;
right: -350px;
}
.right .right-loign {
padding-top: 100px;
padding-left: 15px;
}
.right .right-loign input {
display: block;
margin: 20px 10px;
width: 300px;
height: 50px;
}
.right .right-loign .loign {
background: red;
font: 16px "微软雅黑";
color: white;
width: 304px;
}
.footer ul li {
font: 16px "微软雅黑";
color: white;
display: inline-block;
margin: 40px;
}

.footer ul li a,.nav ul li a{
text-decoration: none;
font: 20px "微软雅黑";
color: white;
}
.nav ul li a:hover{
color: orange;
}
</style>
</head>

<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<a href="#1"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo" /></a>
</div>
<div class="nav">
<ul>
<!--<a href="#2">-->
<!--a标签是行内元素，li是块级元素，所以a标签应该放在li标签里面-->
<li><a href="#2">课程</a></li>
<!--<a href="#3">-->
<li><a href="#3">职业路径</a></li>
<!--<a href="#4">-->
<li><a href="#4">实战</a></li>
<!--<a href="#5">-->
<li><a href="#5">猿问</a></li>
<!--<a href="#6">-->
<li><a href="#6">手记</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="middle"><img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" alt="学习"></div>
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;零基础入门Android语法与界面</p>
<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;IOS基础语法与常用控件</p>
<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;PHP入门开发</p>
<p><span>职业路径</span>&nbsp;&nbsp;&nbsp;JAVA入门开发</p>
</div>
<div class="right">
<div class="right-loign">
<h2>登录</h2>
<form action="#" method="POST" name="user" target="_blank">
<input type="text" name="username" size="20" maxlength="10" placeholder="  请输入登录邮箱/手机号" />
<input type="password" name="paw" size="20" maxlength="16"
placeholder="  6-16位密码，区分大小写，不能用空格" />
<input type="submit" name="submit" class="loign" value="登录">
</form>
</div>
</div>
</div>
<div class="footer">
<ul>
<!--<a href="#7">-->
<!--a标签是行内元素，li是行内块元素，所以a标签应该放在li标签里面-->
<li><a href="#7">网站首页</a></li>
<!--<a href="#8">-->
<li><a href="#8">企业合作</a></li>
<!--<a href="#9">-->
<li><a href="#9">人才招聘</a></li>
<!--<a href="#10">-->
<li><a href="#10">联系我们</a></li>
<!--<a href="#11">-->
<li><a href="#11">常见问题</a></li>
<!--<a href="#12">-->
<li><a href="#12">友情链接</a></li>
</ul>
</div>
</body>

</html>

写回答

2回答