在做导航栏目的时候,总是遇到一个奇怪的bug
这里面还没有增加什么Css样式,但是这里始终就是有一块空格,实在不知道哪来的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mukeplus</title> <link rel="stylesheet" href="css/index.css" type="text/css"> <script src="js/setHomeSetFav.js" type="text/javascript" charset = "gb2312"></script> </head> <body> <div> <div> <ul> <li><a href="#">add_home</a></li> <li><a href="#" onClick = "AddFavorite(window.location,document.title)">add_to_share</a></li> <li><a href="#" onClick = "SetHome(window.location)">contact_us</a></li> </ul> </div> <!-- top ending --> </div> <div> <div> <div> <img src="images/logo.jpg" alt="mukewang"> </div> <div> <img src="images/tel.jpg" alt="contact_to_us">24hours_waiting_for_you <span> 020-245-135-23</span> </div> </div> <!-- logo ending --> <div> <div></div> <div> <div> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Lessons</a></li> <li><a href="#">Online</a></li> <li><a href="#">Need</a></li> </div> <div> <form action="post" action= ""> <input type="text"> </form> </div> </div> <div></div> </div> <!-- nav ending --> </div> <!-- wrap ending --> </body> </html> 下面是CSS *{ margin:0px; padding: 0px; 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{ list-style-image: url(../images/li_bg.gif); float: right; width:80px; line-height: 27px; } .top_content a:link,.top_content a:visited{ color:#8E8E8E; text-decoration: none; } .top_content a:active,.top_content a:hover{ color: #900; } .wrap{ width: 1000px; margin: 0 auto; } .logo{ height:80px; background: #FFF; } .logo_left{ width:200px; float: left; } .logo_right{ color: #8E8E8E; width:300px; float: right; height: 28px; margin-top:30px; } .logo_right img{ vertical-align: middle; margin-right:8px; } .tel{ font-family: yahei; font-size: 16px; color:orange; }