老师 请检查 是不是太麻烦了 需要改进一下
来源：2-10 编程练习
顾寻
2019-03-14 11:10:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.header{
width: 100%;
height: 100px;
margin: 0 auto;
background-color: black;
overflow: hidden;
position: fixed;
}
img.one{
display: inline;
vertical-align: middle;
}
ul.banner{
list-style: none;
float: right;
overflow: hidden;
padding-right: 50px;
}
.banner li{
height: 100px;
line-height: 100px;
float: left;
margin-right: 30px;
}
a{
text-decoration: none;
color: white;
}
.footer{
width: 100%;
height: 100px;
position: sticky;
bottom: 0px;
background-color: black;
}
ul.end{
text-align: center;
}
.end li{
display: inline-block;
height: 100px;
line-height: 100px;
padding-left: 50px;
}
.container{
width: 100%;
height: 1000px;
background-color: #40D0E0;
padding-top: 100px;
overflow: hidden;
margin: 0 auto;
}
.content{
width: 80%;
height: 1000px;
margin:0 auto;
}
.left{
width: 50%;
background-color: #40D0E0;
float: left;
margin-top: 100px;
}
span{
display: inline-block;
background-color: pink;
margin-bottom: 10px;
margin-right: 10px;
}
.right{
width: 50%;
background-color: #40D0E0;
float:left;
margin-top: 100px;
}
.left1 li,.right1 li{
list-style-type: none;
}
.left1,.right1{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<a href="#">
<img class="one" src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a>
<ul class="banner">
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<div class="left">
<h3>课程推荐</h3>
<ul class="left1">
<li><span>职业路径</span>HTML3和CSS5实现动态网页</li>
<li><span>职业路径</span>HTML3和CSS5实现动态网页</li>
<li><span>职业路径</span>HTML3和CSS5实现动态网页</li>
<li><span>职业路径</span>HTML3和CSS5实现动态网页</li>
<li><span>职业路径</span>HTML3和CSS5实现动态网页</li>
</ul>
</div>
<div class="right">
<h3>相关课程</h3>
<ul class="right1">
<li>HTML CSS JavaScript</li>
<li>HTML CSS JavaScript</li>
<li>HTML CSS JavaScript</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<ul class="end">
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
<li><a href="#">网站首页</a></li>
</ul>
</div>
</body>
</html>写回答
1回答
-
好帮手慕夭夭
2019-03-14
你好同学 ,尾部设置左填充 ,会让左边整体的间距大一些
建议改为左右各一半 ,使间距相等 , 这样内容就能居中了
结构实现的很不错 , 代码并没有太麻烦 , 要对自己有信心哦 . 祝学习愉快 ,望采纳 .
0
相似问题