美团的导航栏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>北京美团网-北京美食_酒店_旅游_团购_电影_吃喝玩乐</title> <link rel="stylesheet" type="text/css" href="./1.css"> </head> <body> <nav> <div> <ul> <li style="color: #666666"><a>北京</a></li> <li style="color: #666666"><a>切换城市</a></li> <li><a>[ 大厂回族自治县 廊坊 固安县 ]</a></li> <li style="color: #29C0AD; margin-left:20px;" ><a>立即登录</a></li> <li><a>注册</a></li> </ul> </div> <div> <ul> <li><a >网站导航</a></li> <li><a>商家中心</a></li> <li><a>手机APP</a></li> <li><a>我的美团</a></li> </ul> </div> </nav> <div class="clear"></div> </body> </html>
*{margin: 0;padding: 0;}
ul li{list-style:none;}
nav{background-color:#F8F8F8;height: 40px;width: 1200px;margin: 0 auto;}
.nav_left{height: 40px;line-height: 40px;font-size: 12px;width: 600px;float:left;}
.nav_left li{color: #999999;margin-left:5px;float:left;}
.nav_right{height: 40px;line-height: 40px;font-size: 12px;width: 400px;float:right;}
.nav_right li{color: #999999;float:right;margin-right:30px;}
nav li a:hover{color: #29C0AD;}
.clear{clear:both;}由于页面上不好引用字体库,于是就没有引用,只是做了一个简单的导航栏.导航栏的布局基本上只要条理清晰,还是很好上手的.需要注意的是浮动的运用以及使用完后清除浮动.