麻烦老师检查一下有么有需要更改的地方
来源：2-10 编程练习
qq_慕后端1441263
2019-12-04 12:44:23
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
background-color:
}
.banner{
width: 100%;
height: 100px;
background-color: black;
position: fixed;
}
img{
float: left;
}
.tit ul li{
color:white;
font-size: 25px;
float: right;
margin-right: 40px;
line-height: 100px;
list-style: none;
}
.container{
width: 100%;
height: 800px;
background-color: blue;
padding-top: 100px;
}
.left{
width: 30%;
height: 800px;
float: left;
margin-left: 20%;
}
.right{
width: 30%;
height: 800px;
float: right;
margin-right: 20%;
}
.floot{
width: 1600px;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
background-color: black;
}
.f1{
width: 700px;
margin:auto;
}
.f1 ul li{
color: white;
font-size: 25px;
display: inline-block;
line-height: 100px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="banner">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
<div class="tit">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>提问</li>
<li>笔记</li>
</ul>
</div>
</div>
<div class="container">
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right">
<h3>相关课程</h3>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="floot">
<div class="f1">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人力招聘</li>
<li>联系我们</li>
<li>常见问题</li>
</ul>
</div>
</div>
</body>
</html>写回答
1回答
-
同学你好，代码的问题与修改如下
1. 导航项的显示顺序不对。因为是从左往右显示，但是如下是从右往左显示的
如下调整：整体右浮动，里面的导航项左浮动
2.主体区域背景色建议改为如下更好看
3. 如下代码没有设置背景色，但是不需要，把它去掉。
4. 主体中的内容与上面没有间距，建议设置一个上间距效果更好。
5.尾部宽度没有相对浏览器100%显示。
如下设置：
6.尾部导航间距设置左右各20px，让内容居中更好。注意间距调整，整体的宽度也要调整大一点。如下
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
1
相似问题