老师请帮忙看下代码，是否可以优化？
来源：2-10 编程练习
不努力就淘汰
2020-07-16 23:30:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
}
.header {
width: 100%;
height: 100px;
background-color: black;
}
.header .logo {
float: left;
margin: 0 40px;
}
.header .logo img {
display: block;
}
.header .nav {
list-style: none;
overflow: hidden;
zoom: 1;
}
.header .nav li {
font-size: 16px;
font-family: "微软雅黑";
color: white;
display: inline;
float: right;
line-height: 100px;
margin: 0 40px;
padding: 0 20px;
}
.content {
width: 100%;
height: 600px;
overflow: hidden;
zoom: 1;
}
.con_left {
width: 50%;
height: 600px;
background-color: rgb(189, 204, 253);
float: left;
}
.course1 {
position: absolute;
top: 150px;
left: 20%;
}
.course2 {
position: absolute;
top: 150px;
left: 60%;
}
span {
background-color: orange;
}
.con_right {
width: 50%;
height: 600px;
background-color: rgb(189, 204, 253);
float: right;
}
p {
margin: 20px 0;
}
.footer {
width: 100%;
height: 100px;
background-color: black;
text-align: center;
}
.footer p {
font-size: 16px;
font-family: "微软雅黑";
color: white;
line-height: 100px;
margin: 0 auto;
padding: 0 20px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" /></div>
<ul class="nav">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="content">
<div class="con_left">
<div class="course1">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
<p><span>职业路径</span> HTML与CSS实现动态页面</p>
</div>
</div>
<div class="con_right">
<div class="course2">
<h2>相关课程</h2>
<p>HTML CSS JaveScript</p>
<p>HTML CSS JaveScript</p>
<p>HTML CSS JaveScript</p>
</div>
</div>
</div>
<div class="footer">
<p><a href="#">网站首作 企业合作 人才招聘 联系我们 常见问题 友情链接</a></p>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2020-07-17
同学你好，代码布局以及实现效果是可以的。
优化：底部导航项建议分别用a标签包裹，这样可以设置间隙大一些
祝学习愉快！
0
相似问题