這是成品圖 要實現這樣的一個功能 背景色會灰色 鼠標划過去變成橙色
1、我們可以用<a>標簽來做 如圖所示 把框架先建立起來
1 <a href="#">手機 電話卡</a> 2 <a href="#">電視 盒子</a> 3 <a href="#">筆記本 顯示器</a> 4 <a href="#">家電 插線板</a> 5 <a href="#">出行 穿戴</a> 6 <a href="#">智能 路由器</a> 7 <a href="#">電源 配件</a> 8 <a href="#">健康 兒童</a> 9 <a href="#">耳機 音箱</a> 10 <a href="#">生活 箱包</a>
寫好之后 我們先預覽一下到網頁 是如圖所示的樣子
那么要把它豎過來 就需要用到元素轉換顯示模式的 display：block 把行內元素轉換成行內塊元素（如圖1、2所示）
圖1
圖2
完成后就需要來給它“裝修調色”了
觀看成品圖 字體為白色 背景色為灰色 鼠標滑過顏色變成橙色
先給他設置一個寬度高度 可以用工具來量 這里推薦 
軟件 可以在微軟應用商店直接搜索下載 也可以在官網上下載 非常方便的一款軟
1 a { 2 display: block; 3 width: 247px; /* 設置寬度 */ 4 height: 54px; /* 設置高度 */ 5 color: white; /* 設置字體顏色為白色 */ 6 background-color: #888888; /* 設置背景色為灰色 */ 7 8 }
設置完成后如圖所示 但是發現有下划線存在 需要把下划線去掉 代碼如下
text-decoration: none;
接下來設置鼠標滑過 背景色變為橙色 代碼如下 a:hover為鼠標滑過的代碼
1 a:hover { 2 background-color: #FF6700; 3 }
設置完畢后 如圖所示 基本完成
再接着一步就是需要讓字顯示美觀居中並對齊 可以用到行高和首行縮進來解決這個問題 行高需要設置與之前的寬度相同數值 就可以讓字體顯示在中間
1 text-indent: 2em; 2 line-height: 54px;
全部設置完畢 如圖所示
