哪位高手替我看一下啊,為什么我的底部滑動(dòng)是這個(gè)效果!
底部的黑色沒有完全填滿灰色,太丑了,可是我就是按步驟來弄的?。?/p>
這是index.html文件
<!DOCTYPE?HTML> <html> <head> <title>企業(yè)實(shí)戰(zhàn)</title> <link?rel="stylesheet"?type="text/css"?href="css/main.css"?/> <script?type="text/javascript"> function?setHome(){ confirm("是否將該網(wǎng)站設(shè)為首頁(yè)?"); } function?addFavorite(){ alert("收藏該網(wǎng)頁(yè)成功!"); } function?contactUs(){ prompt("請(qǐng)輸入您的聯(lián)系方式,我們將盡快與您取得聯(lián)系!", "在這里輸入您的聯(lián)系方式···"); } </script> <script?type="text/javascript"?src="js/myfocus-2.0.1.min.js"?charset="utf-8"></script> <script?type="text/javascript"?src="js/mf-pattern/mF_fancy.js"></script> <link?rel="stylesheet"?type="text/css"?href="js/mf-pattern/mF_fancy.css"?/> <script?type="text/javascript"> myFocus.set({id:'focusID'}) </script> </head> <body> <div?class="top"> <div?class="topContent"> <ul> <li><a?href="#"?onclick="contactUs()">聯(lián)系我們</a></li> <li><a?href="#"?onclick="addFavorite()">加入收藏</a></li> <li><a?href="#"?onclick="setHome()">設(shè)為首頁(yè)</a></li> </ul> </div> </div> <!--?頁(yè)面頂端top結(jié)束?--> <div?class="main"> <div?class="logo"> <div?class="logoLeft"> <img?src="images/logo.jpg"?alt="慕課網(wǎng)"?title="慕課網(wǎng)"?/> </div> <div?class="logoRight"> <img?src="images/tel.jpg"?alt="服務(wù)熱線"?title="服務(wù)熱線"?/>24小時(shí)服務(wù)熱線:<span?class="tel">123-456-7890</span> </div> </div> <!--?慕課網(wǎng)logo結(jié)束?--> <div?class="navigate"> <div?class="navLeft"></div> <div?class="navMiddle"> <div?class="midLeft"> <ul> <li><a?href="#">首頁(yè)</a></li> <li><a?href="#">關(guān)于慕課</a></li> <li><a?href="#">新聞動(dòng)態(tài)</a></li> <li><a?href="#">課程中心</a></li> <li><a?href="#">在線課程</a></li> <li><a?href="#">人才招聘</a></li> </ul> </div> <!--?midLeft結(jié)束?--> <div?class="midRight"> <form?action=""?method="post"?name="searchText"> <input?type="text"?class="searchText"?/> </form> </div> <!--?midRight結(jié)束?--> </div> <div?class="navRight"></div> </div> <!--?navigate導(dǎo)航結(jié)束?--> <div?class="focus"?id="focusID"> <div?class="loading"><img?src="images/loading.gif"?alt="圖片加載中···"?title="圖片加載中···"></div> <div?class="pic"> <ul> <li><img?src="images/ad2.jpg"?alt="互聯(lián)網(wǎng)編程"?title="互聯(lián)網(wǎng)編程"?/></li> <li><img?src="images/ad3.jpg"?alt="互聯(lián)網(wǎng)編程"?title="互聯(lián)網(wǎng)編程"?/></li> <li><img?src="images/ad4.jpg"?alt="互聯(lián)網(wǎng)編程"?title="互聯(lián)網(wǎng)編程"?/></li> </ul> </div> </div> <!--?focus結(jié)束?--> </div> </body> </html>
這是css文件
@charset?"utf-8"; *{ margin:0; padding:0; font-size:12px; } body{ background-color:#F5F5F5; } .top{ width:100%; height:27px; background:url(../images/top_bg.jpg)?repeat-x; } .topContent{ width:1000px; margin:0?auto; line-height:27px; } .topContent?li{ width:70px; float:right; } .topContent?a:link,?.topContent?a:visited{ color:#8E8E8E; text-decoration:none; } .topContent?a:hover,?.topContent?a:active{ color:#C00; text-decoration:none; } .main{ width:1000px; margin:0?auto; } .logo{ height:80px; background-color:#FFF; } .logoLeft{ width:600px; height:80px; float:left; } .logoRight{ width:300px; height:28px; margin-top:28px; color:#8E8E8E; float:right; } .logoRight?img{ vertical-align:middle; margin-right:10px; } .tel{ font-family:"微軟雅黑"; font-size:22px; color:#C00; } .navigate{ height:40px; } .navLeft{ width:10px; background:url(../images/nav_left.jpg)?no-repeat; } .navMiddle{ width:980px; background:url(../images/nav_bg.jpg)?repeat-x; line-height:40px; } .navRight{ width:10px; background:url(../images/nav_right.jpg)?no-repeat; } .navLeft,?.navMiddle,?.navRight{ float:left; height:40px; display:inline; } .midLeft{ width:680px; float:left; } .midRight{ width:300px; float:left; } .midLeft?li{ width:100px; float:left; height:40px; list-style-type:none; font-family:"微軟雅黑"; text-align:center; } .midLeft?a{ display:block; width:100px; height:40px; } .midLeft?a:link,?.midLeft?a:visited{ font-size:16px; color:#FFF; text-decoration:none; } .midLeft?a:hover,?.midLeft?a:active{ font-size:16px; color:#C00; } .searchText{ width:190px; height:25px; margin-top:7px; border:1px?solid?#FFF; background:url(../images/search.jpg)?no-repeat?right?center; background-color:#FFF; padding-right:25px; } .focus{ height:320px; margin:5px; overflow:hidden; }
哪位好心人給個(gè)回答啊,效果真的很奇怪。
2015-03-13
額。。我在前面加上
就可以了是為什么???