HTML,DIV+CSS,通栏HTML DIV+CSS制作通栏
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ margin:0; padding:0; } ul{ list-style:none; } img{ border:none; } a{ text-decoration:none; color:#fff; } a:hover{ text-decoration:none; } /*layout*/ #header{ width:100%; margin:0 auto; background:#eee; } #menu_bg{ width:100%; background:pink; height:50px; } #menu{ width:980px; margin:0 auto; } #menu ul li{ width:101px; float:left; } #menu ul li a{ float:left; display:block; width:100px; height:48x; line-height:48px; text-align:center; text-transform:uppercase; background:black; border-bottom:2px solid black; } #menu ul li a:hover{ border-bottom:2px solid pink; } #wrap{ width:980px; height:500px; margin:0 auto; background:green; } #footer_bg{ width:100%; background:pink; height:50px; } #footer{ width:980px; margin:0 auto; } .friend_links li{ display:inline; } </style> </head> <body> <div id="header"> <div id="logo">this is logo</div> <div id="menu_bg"> <div id="menu"> <ul> <li class="current selected"><a href="###">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">contact us</a></li> <li><a href="#">price</a></li> </ul> </div> </div> </div> <div id="wrap"> wrap </div> <div id="footer_bg"> <div id="footer"> <p class="copyright">©XXXXXXX科技有限责任公司</p> <ul class="friend_links"> <li>百度</li> <li>谷歌</li> <li>有道</li> <li>腾讯</li> </ul> </div> </div> </body> </html>
HTML,DIV+CSS,通栏
|
