                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實戰(zhàn)

learn More>>下面的4個無序列表不能靠左左邊有空隔哥哥們救命啊

? ? ??

html部分：
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標(biāo)題文檔</title>
<link?href="css/main.css"?rel="stylesheet"?type="text/css"?/>
<script?src="images/js/setHomeSetFav.js"?type="text/javascript"?charset="gb2312"></script>
<script?src="js/myfocus-2.0.1.min.js"?type="text/javascript"></script>
<script?src="js/mf-pattern/mF_YSlider.js"?type="text/javascript"></script>
<link?href="js/mf-pattern/mF_YSlider.css"?rel="stylesheet"?type="text/css"?/>
<script?type="text/javascript">
myFocus.set({id:'picBox'})
</script>
</head>

<body>
<div?class="top">
<div?class="top_content">
<ul>
<li><a?href="#">聯(lián)系我們</a></li>
<li><a?href="#"?onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
<li><a?href="#"?onclick="SetHome(window.location)">設(shè)為首頁</a></li>
</ul>
</div>
</div><!--top結(jié)束-->
<div?class="wrap">
??<div?class="logo">
??<div?class="logo_left">
??<img?src="images/logo.jpg"?alt="慕課網(wǎng)"?/>
??</div>
??<div?class="logo_right">
??<img?src="images/tel.jpg"alt="服務(wù)熱線"?/><span?class="tel">24小時服務(wù)熱線：123-456-7890</span>
??</div>
??</div><!--logo結(jié)束-->

<div?class="nav">
??<div?class="nav_left"></div>
??<div?class="nav_mid">
??<div?class="nav_mid_left">
??<ul>
????<li><a?href="#">首頁</a></li>
????<li><a?href-"list.html">關(guān)于慕課</a></li>
????<li><a?href-"list.html">新聞中心</a></li>
????<li><a?href-"list.html">課程中心</a></li>
????<li><a?href-"list.html">在線課程</a></li>
????<li><a?href-"list.html">人才招聘</a></li>
????</ul>
??</div>
??<div?class="nav_mid_right">
??<form?action=""method="post">
??<input?type="text"?class="search_text"/>
??</form>
??</div>
??</div><!--nav_mid結(jié)束-->
??<div?class="nav_right"></div>
??</div><!--nav結(jié)束-->
??<div?class="ad"?id="picBox">
??<div?class="loading"><img?src="images/loading.gif"?alt="圖片加載中"?/></div>
???<div?class="pic">
????<ul>
?????<li><img?src="images/ad2.jpg"?/></li>
?????<li><img?src="images/ad3.jpg"?/></li>
?????<li><img?src="images/ad4.jpg"?/></li>
????</ul>
??</div>
?</div>
?<div?class="main">
?<div?class="news">?
?<div?class="title">
?<h2?class="title_left">新聞中心</h2><span?class="title_right"><a?href="news.html">More&gt;&gt;</a></span>
?</div><!--title結(jié)束-->
?<div?class="pic_news">
?<img?src="images/news.jpg"><h2>慕女神喊你來表白！</h2><p>活動時間：5月20號——5月25日<br?/>獲獎公布時間：5月26號<br?/>Learn?More&gt;&gt;</p>
?
?</div><!--pic_news結(jié)束-->
<div?class="news_list">
<ul>
<li><span>2014-06-01</span><a?href="news.html">【慕課訪談&nbsp;用戶篇】”有位屌絲“在路上</a></li>
<li><span>2014-06-01</span><a?href="news.html">【有獎活動】給父親的三行書信</a></li>
<li><span>2014-05-30</span><a?href="news.html">【程序猿，請曬出你的童年】活動獲獎公告</a></li>
<li><span>2014-05-28</span><a?href="news.html"?title="aa">【慕課訪談】破繭成蝶——美女程序猿的蛻變史</a></li>
</ul>
??</div><!--news_list結(jié)束-->?????
?</div><!--news結(jié)束-->
?<div?class="course">?</div><!--course結(jié)束-->
?<div?class="sidebar">?</div><!--sidebar結(jié)束-->
?</div><!--main結(jié)束-->
</div><!--wrap結(jié)束-->
</body>
</html>


css部分：??????@charset?"utf-8";
/*?CSS?Document?*/

*{
	margin:0;
	padding:0
	font-size:12px;}
	
body{
	background-color:#F5F5F5;}
.top{
	width:100%;
	height:27px;
	background:url(../images/top_bg.jpg)repeat-x;
}
.top_content{
	width:1000px;
	margin:0?auto;}
.top_content?li{
	width:70px;
	line-height:27px;
	float:right;
	list-style-image:url(../images/li_bg.gif)}
.top_content?a:link,.top_content?a:visited{
	color:#333;
	text?decoration:none;}
.top_content?a:hover,.top_content?a:active{
	color:#F00;
	text?decoration:none;}
.wrap{
	width:1000px;
	margin:0?auto;
}
.logo{
	height:80px;
	background-color:#FFF;}
.logo_left{
	width:200px;
	float:left;
}
.logo_right{width:300px;
float:right;
height:28px;
margin-top:30px;
color:#8E8E8E;}
.logo_right?img{
	vertical-align:middle;
	margin-right:10px;}
.tel{
	font-family:"微軟雅黑";
	font-size:16px;
	color:#C00;
}
.nav{
	height:40px;
	margin:0?auto;
	}
.nav_left{
	width:10px;
	background:url(../images/nav_left.jpg)no-repeat;
	/*background-image:url(../images/nav_left.jpg);
	background-repeat:no-repeat;*/
	
	}

.nav_mid{
	width:980px;
	background:url(../images/nav_bg.jpg)?repeat-x;
	}

.nav_right{
	width:10px;
	background:url(../images/nav_right.jpg)no-repeat;
	}
.nav_left,.nav_mid,.nav_right{
	height:40px;
	float:left;}
.nav_mid_left,.nav_mid_right{
	float:left;
}
.nav_mid_left{
	width:680px;}
.nav_mid_right{
	width:300px;}
.nav_mid_left?li{
	float:left;
	list-style-type:none;
	width:100px;
	text-align:center;
	font-family:"微軟雅黑";
	line-height:40px;
	color:#FFF;
	
}
.nav_mid_left?a:link,.nav_mid_left?a:visited{
	text-decoration:none;
	font-size:16px;
	color:#FFF;
	font-family:"微軟雅黑";
	
	}
.nav_mid_left?a:hover,.nav_mid_left?a:active{
	text-decoration:none;
	font-size:16px;
	color:#FF0;
	font-family:"微軟雅黑";
	}
.search_text{
	width:190px;
	height:25px;
	margin-top:5px;
	background:url(../../images/search.jpg)no-repeat?right?center;
	/*background-image:url(../../images/search.jpg);
	background-repeat:no-repeat;
	background-position:right?center;*/
	background-color:#FFF;
	padding-right:25px;
	border:1px?solid?#FFF;}
.ad{
	height:310px;
	overflow:hidden;}
.main{
	height:250px;
	margin-top:5px;
	background-color:#FFF;}
.news{
	width:340px;
	border:1px?solid?#E8E8E8;
	font-size:1px;
	}
.course{
	width:410px;
	border:1px?solid?#E8E8E8;
	margin:0?7px;
	background-color:#FF6;}
.sidebar{
	width:230px;
	background-color:#09F;
	}
.news,.course,.sidebar{
	height:250px;
	float:left;
	}
.title{
	height:35px;
	border-bottom:2px?solid?#E8E8E8;}
.title_left{
	width:70%;
	font-family:"微軟雅黑";
	font-size:14px;
	font-weight:bold;
	color:#786f66;
	float:left;
	line-height:35px;
	padding-left:20px;
}