<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>网页布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
border-spacing: 0;
border-collapse: collapse;
}
.container{
background:black;
width:100%;
height:100px;
margin:0 auto;
}
.logo{
width: 400px;
height: 100px;
background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png) no-repeat center left;
cursor: pointer;
}
.nav{
width: 700px;
height: 100px;
line-height: 100px;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
.top_table li, .foot_table li{
display: inline;
color:white;
font-size: 20px;
margin: 40px;
cursor: pointer;
width: 60px;
}
.foot{
background: black center;
width:100%;
line-height: 100px;
height: 100px;
position: absolute;
bottom: 0;
text-align: center;
}
.banner_pic{
width: 100%;
height: 750px;
line-height: 750px;
background:blue;
}
.fst_col{
width: 50%;
height: 750px;
line-height: 750px;
position: absolute;
left: 0;
}
.sec_col{
width: 50%;
height: 750px;
line-height: 750px;
position: absolute;
right: 0;
}
.foot_table,.top_table{
height: 98px;
}
h3.title_in_first_col{
width: 50%;
height:100px;
line-height: 100px;
position: absolute;
top: 0;
left: 0;
margin-left:200px;
margin-top: 80px;
font-size: 30px;
}
h3.title_in_second_col{
width: 50%;
height:100px;
line-height: 100px;
position: absolute;
top: 0;
left: 0;
margin-top: 80px;
font-size: 30px;
}
.path_road li{
font-size: 20px;
height: 50px;
width: 300px;
list-style: none;
}
.path_road{
position: absolute;
left: 200px;
top:-150px;
}
.course li{
height: 50px;
width: 300px;
list-style: none;
font-size: 20px;
}
.course{
position: absolute;
left: 0;
top: -150px;
}
span{
background-color: red;
}
</style>
</head>
<body>
<!--页头-->
<div class="container">
<div class="logo"></div>
<div class="nav">
<ul class="top_table">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<!--主体为两列-->
<div class="banner_pic">
<!--第一列-->
<div class="fst_col">
<h3 class="title_in_first_col">课程推荐</h3>
<ul class="path_road">
<li><span>职业路劲</span> html5与实现动态网页</li>
<li><span>职业路劲</span> html5与实现动态网页</li>
<li><span>职业路劲</span> html5与实现动态网页</li>
<li><span>职业路劲</span> html5与实现动态网页</li>
<li><span>职业路劲</span> html5与实现动态网页</li>
</ul>
</div>
<!--第二列-->
<div class="sec_col">
<h3 class="title_in_second_col">相关课程</h3>
<ul class="course">
<li>html5 css3 javascript</li>
<li>html5 css3 javascript</li>
<li>移动端基础 移动端app开发</li>
</ul>
</div>
<!--页脚-->
<div class="foot">
<ul class="foot_table">
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>我想问的是，为什么这个li标签的2px就是弄不掉，boder取消也不行。最终我只能把ul的高度减小2px。
还有我在chrom浏览器中看了下发现我的职业路劲 html5与动态网页那里一开始就有了个偏移量，就是Li标签中的文字
不在li容器中，为什么啊？
1 回答
- 1 回答
- 0 关注
- 947 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消