大腿繞道，給小白學習用，上代碼

<div class="list"><div class="infor"><ul class="left"><li><a href="">限時特價</a></li><li><a href="">熱門推薦</a></li></ul><ul class="right"><li><a href="" class="selected">推薦</a></li><li><a href="">折扣</a></li><li><a href="">價格</a></li></ul></div></div>

css樣式?

* {padding: 0;margin: 0;}a {text-decoration: none;}.list {width: 910px;float: left;margin-left: 10px;margin-top: 10px;}.infor {height: 45px;line-height: 45px;background-color: #eee;}.left {display: inline-block;float: left;}.left li {display: inline-block;width: 150px;height: 43px;line-height: 43px;text-align: center;}.left li:first-child,.left li:hover {background-color: #fff;border-top: 2px solid #458b00;position: relative;left: 1px;}.left a {color: #666;}.right {display: inline-block;padding: 0 20px 0 0;float: right;}.right li {display: inline-block;width: 60px;height: 45px;line-height: 45px;text-align: center;}.right li a {padding: 3px 8px;color: #666;}.right li a.selected,.right li a:hover {background-color: #458b00;color: #fff;}妥了，十分鐘搞定，下班咯

總結

以上是生活随笔為你收集整理的小白十分钟-推荐导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。