老师看一下有需要优化的地方嘛
来源：2-10 编程练习
bao_
2020-01-26 15:03:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
height: 100px;
background: black;
overflow:hidden;
zoom: 1;
position:fixed;
top: 0px;
}
.nav_logo img {
width: 300px;
height: 100px;
line-height: 100px;
float: left;
}
.header .nav_list ul {
list-style: none;
line-height: 100px;
float: right;
}
.header .nav_list ul li {
display: inline-block;
padding: 0 30px;
color: white;
}
.content {
width: 70%;
height: 800px;
background: #00ccff;
margin:0 auto;
overflow:hidden;
zoom: 1;
margin-top:100px;
margin-bottom:100px;
}
h3{
line-height: 30px;
}
.content .content_left ul {
list-style: none;
}
.content .content_left ul li::before{
content: "职业路径";
background: pink;
margin-right:10px;
}
.content .content_right ul {
list-style: none;
}
.content_left {
width: 55%;
float: left;
margin-top:80px;
}
.content_left ul li{
line-height: 30px;
}
.content_right {
width: 45%;
float: right;
margin-top:80px;
}
.content_right ul li{
line-height:30px;
}
.footer {
width: 100%;
height: 100px;
background: black;
text-align: center;
position: fixed;
bottom:0px;
}
.footer ul {
list-style: none;
line-height: 100px;
}
.footer ul li {
display: inline-block;
line-height:100px;
padding: 0 30px;
color: white;
}
body{
background: #00ccff;
}
</style>
</head>
<body>
<div class="big_content">
<div class="header">
<div class="nav_logo"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" /></div>
<div class="nav_list">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div class="content_left">
<h3>课程推荐</h3>
<ul>
<li>HTML5与CSS3实现动态网页</li>
<li>零基础入门Android语法与界面</li>
<li>iOS基础语法与常用控件</li>
<li>PHP入门开发</li>
<li>JAVA入门开发</li>
</ul>
</div>
<div class="content_right">
<h3>相关课程</h3>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Query</li>
<li>移动端基础 移动端基础APP开发</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>
1回答
-
同学你好，代码实现效果不错。顶部和底部不需要设置固定定位，正常显示就好，其他地方不需要修改了。
继续加油，祝学习愉快！
0
相似问题