<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>
<title>網(wǎng)頁(yè)布局</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>
<!--頁(yè)頭-->
<div?class="container">
<div?class="logo"></div>
<div?class="nav">
<ul?class="top_table">
<li>課程</li>
<li>職業(yè)路徑</li>
<li>實(shí)戰(zhàn)</li>
<li>猿問(wèn)</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>職業(yè)路勁</span> html5與實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</li>
<li><span>職業(yè)路勁</span> html5與實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</li>
<li><span>職業(yè)路勁</span> html5與實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</li>
<li><span>職業(yè)路勁</span> html5與實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</li>
<li><span>職業(yè)路勁</span> html5與實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)</li>
</ul>
</div>
<!--第二列-->
<div?class="sec_col">
<h3?class="title_in_second_col">相關(guān)課程</h3>
<ul?class="course">
<li>html5?css3?javascript</li>
<li>html5?css3?javascript</li>
<li>移動(dòng)端基礎(chǔ)?移動(dòng)端app開(kāi)發(fā)</li>
</ul>
</div>
<!--頁(yè)腳-->
<div?class="foot">
<ul?class="foot_table">
<li>網(wǎng)站首頁(yè)</li>
<li>企業(yè)合作</li>
<li>人才招聘</li>
<li>聯(lián)系我們</li>
<li>常見(jiàn)問(wèn)題</li>
<li>友情鏈接</li>
</ul>
</div>
</body>
</html>我想問(wèn)的是，為什么這個(gè)li標(biāo)簽的2px就是弄不掉，boder取消也不行。最終我只能把ul的高度減小2px。
還有我在chrom瀏覽器中看了下發(fā)現(xiàn)我的職業(yè)路勁?html5與動(dòng)態(tài)網(wǎng)頁(yè)那里一開(kāi)始就有了個(gè)偏移量，就是Li標(biāo)簽中的文字
不在li容器中，為什么??？
感覺(jué)自己的代碼又臭又長(zhǎng)，麻煩老師幫忙看看。
小學(xué)生6年級(jí)
2018-03-24 00:40:26