请问老师代码哪里还可以优化？
来源：2-10 编程练习
慕斯卡0165078
2020-03-22 17:29:37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2-10编程题</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
text-align: center;
}
.header {
position: fixed;
width: 100%;
height: 100px;
color: #fff;
background: #000000;
line-height: 100px;
}
.img {
width: 30%;
height: 100%;
float: left;
}
.daohang {
/* 浮动和定位同时设置，浮动会失效，这里应至设置浮动 */
float: right;
}
ul {
list-style-type: none;
font-size: 16px;
}
li {
/* 横向排列 */
display: inline-block;
margin-right: 50px;
}
/* 中间部分 */
.container {
width: 100%;
height: 800px;
color:black;
font-size:14px;
background:#A6FFFF;
padding: 100px;
}
/* 中间左侧 */
.container-left{
width:50%;
height:100%;
float:left;
}
.p-left{
padding:50px 0px 0px 50px;
line-height:35px;
text-align: justify;
}
.p-left a span{
background: pink;
margin-right:15px;
}
/* 中间右侧 */
.container-right{
width:50%;
height:100%;
float:right;
}
.p-right{
padding-top:50px;
line-height:35px;
text-align: left;
}
.p-right a{
word-spacing:8px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #fff;
background: black;
font-size:16px;
line-height: 80px;
}
.footerul{
list-style-type: none;
font-size: 14px;
}
.footerul li{
display: inline-block;
margin-right: 50px;
line-height: 80px;
}
</style>
</head>
<body>
<div class="header">
<div class="img"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" /></div>
<div class="daohang">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="container-left">
<p class="p-left">
<!-- <h3>课程推荐</h3> -->
<a style="font-size:18px"><b>课程推荐</b></a><br>
<a><span>职业路径</span>HTML5与CSS3实现动态网页</a><br>
<a><span>职业路径</span>零基础入门Android语法与界面</a><br>
<a><span>职业路径</span>iOS基础语法与常用控件</a><br>
<a><span>职业路径</span>PHP入门开发</a><br>
<a><span>职业路径</span>JAVA入门开发</a><br>
</p>
</div>
<div class="container-right">
<p class="p-right">
<a style="font-size:18px"><b>相关课程</b></a><br>
<a>HTML CSS JavaScript</a><br>
<a>HTML5 CSS3 Jquery</a><br>
<a>移动端基础 移动端APP开发</a>
</p>
</div>
</div>
<div class="footer">
<ul class="footerul">
<li >网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
1回答
-
同学你好，导航样式可以优化：
另，由于中部设置的内边距也是算在宽度100%里面的，所以已经设置了宽度100%了，再添加padding：100px会导致宽度超出，出现水平滚动条，建议修改如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题