<code>#縱向分類</code>
<code><!DOCTYPE html></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code><</code><code>title</code><code>></</code><code>title</code><code>></code>
<code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>
<code>/*清除預設的邊框*/</code>
<code>*{margin: 0px;padding: 0px;}</code>
<code>/*不顯示li前面的.号 */</code>
<code>ul{list-style: none;width: 100px;}</code>
<code>/* 取消a标簽的下劃線,把a标簽變成獨立的塊,text-indent:10px為向右縮進10px*/</code>
<code>a{text-decoration: none;display: block;}</code>
<code>/*讓滑鼠點上分類項時變色*/</code>
<code>a:hover{background-color: #00DB00;color: #fff;}</code>
<code></</code><code>style</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code><</code><code>ul</code><code>></code>
<code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>>首頁</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>>玄幻</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>>都市</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>""</code><code>>言情</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code></</code><code>ul</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
橫向：
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code> </code><code><</code><code>title</code><code>></</code><code>title</code><code>></code>
<code> </code><code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>
<code> </code><code>*{margin:0;padding:0;}</code>
<code> </code><code>.fenlei{</code>
<code> </code><code>width: 100%;background: green;</code>
<code> </code><code>overflow: hidden;</code>
<code> </code><code>margin-top: 100px;</code>
<code> </code><code>}</code>
<code> </code><code>ul{list-style: none;margin: 0 auto;width: 1000px;}</code>
<code> </code>
<code> </code><code>\\注意：這裡如果不加*{margin:0;padding:0;}的話ul的外邊距會對a标簽産生影響，造成a标簽的每個塊不能占滿div的整塊，</code>
<code> </code><code>是以要對ul去掉外邊距，讓a标簽的字型上下占滿class="fenlei"的div。</code>
<code> </code><code>對比圖見圖1和圖2： </code>
<code> </code><code>a{</code>
<code> </code><code>float: left; #向左浮動，橫向展示</code>
<code> </code><code>width: 70px; #每個a标簽的寬度</code>
<code> </code><code>text-decoration: none; #a标簽不顯示下劃線</code>
<code> </code><code>color: white;</code>
<code> </code><code>text-align: center; #字型橫向居中</code>
<code> </code>
<code> </code><code>/* line-height設定像素和行高一緻時，為垂直居中 */</code>
<code> </code><code>display: block; #塊狀顯示</code>
<code> </code><code>padding: 10px; #内邊距大小</code>
<code> </code><code>font-size: 16px; #字型大小</code>
<code> </code><code>font-weight: bold; #字型粗細</code>
<code> </code><code>a:hover{background-color: #00DB00;}</code>
<code> </code><code></</code><code>style</code><code>></code>
<code><</code><code>div</code> <code>class</code><code>=</code><code>"fenlei"</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>首頁</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>玄幻</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>都市</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>言情</</code><code>a</code><code>> </</code><code>li</code><code>></code>
<code></</code><code>div</code><code>></code>
圖1：
<a href="https://s2.51cto.com/wyfs02/M00/97/EC/wKiom1k1FmWA03G5AAAiAtiAzik687.jpg" target="_blank"></a>
圖2：
<a href="https://s1.51cto.com/wyfs02/M02/97/EE/wKioL1k1FimA9HVjAAA-HR8oklg135.jpg" target="_blank"></a>
圓角菜單：
圓角菜單的原理就是制作一個圖檔，上面白色圓角，下面是綠色圓角。a标簽的高度正好是圖像的一半高度，a标簽的寬等于圖像的寬度，當滑鼠點上去時讓圖像上移一半的高度，這就實作了圓角變化。
<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/></code>
<code><</code><code>title</code><code>>導航菜單</</code><code>title</code><code>></code>
<code>*{margin:0; padding:0; font-size:14px;}</code>
<code>a{color:#333;text-decoration:none}</code>
<code>.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}</code>
<code>li{float:left}</code>
<code>a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(test.jpg); margin-left:1px;}</code>
<code>a.shouye, a:hover{ background-position:0 30px; color:#fff;}</code>
<code>//這裡需要改變的就是background-position</code>
<code><</code><code>ul</code> <code>class</code><code>=</code><code>"nav"</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>class</code><code>=</code><code>"shouye"</code> <code>href</code><code>=</code><code>"#"</code><code>>首頁</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>玄幻</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>都市</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>言情</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>排行</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
本文轉自 王家東哥 51CTO部落格，原文連結:http://blog.51cto.com/xiaodongge/1932418
![Web前端就業前景好不好 怎麼迅速在行業立足[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)