这是成品图 要实现这样的一个功能 背景色会灰色 鼠标划过去变成橙色
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;
全部设置完毕 如图所示
