深圳网站制作公司接上篇文章继续分享网页设计时如何处理链接以及链接样式的定义，在前面我们从理论实现做了分享，本文博纳网络将通过实例的形式帮助您设计CSS的链接样式，以提高实战技法和技巧，快速理解CSS链接属性的应用。
一、网站制作定义鼠标指针样式
在默认状态下，鼠标移过链接则显示为箭头样式，如果链接显示为按钮样式，我们还可以把光标设计为手形样式，这样能够提高用户使用体验。设计鼠标样式的效果如图所示。
鼠标样式。
鼠标样式。【操作步骤】
第1步，构建网页结构，在<body>标签中输入以下内容：
<ul>
<li><ahref="#">帮助</a></li>
<li><ahref="#">文本</a></li>
<li><ahref="#">等待</a></li>
<li><ahref="#">斜箭头</a></li>
<li><ahref="#">十字</a></li>
<li><ahref="#">移动</a></li>
</ul>
第2步，规划整个页面的基本显示属性以及统一所有元素的默认样式。
第3步，定义水平显示的导航菜单样式。在ul类型选择器中清除列表项目符号，通过li选择器让所有列表项并列显示，通过添加左侧边界2像素，实现列表项目之间留有一点距离。定义a元素为块显示，设计背景色为亮蓝色，通过固定高和宽设置方形样式，利用line-height属性实现文本垂直居中，清除默认的下划线样式，设置字体为白色。显示效果如图所示。
设置水平导航样式
设置水平导航样式第4步，利用CSS的cursor属性定义多个光标样式类。
提示：cursor是CSS2.0定义的一个属性，具体用法如下：
提示：cursor是CSS2.0定义的一个属性，具体用法如下：cursor:auto|all-scroll|col-resize|crosshair|default|hand|move|help|no-drop|not-allowed|pointer|progress|row-resize|text|vertical-text|wait|*-resize|url(url)该属性的取值说明如表所示。
cursor取值说明
cursor取值说明第5步，把这些样式类绑定到列表项目中包含的链接a元素上即可。
<ul>
<li><ahref="#"class="help">帮助</a></li>
<li><ahref="#"class="text">文本</a></li>
<li><ahref="#"class="wait">等待</a></li>
<li><ahref="#"class="sw-resize">斜箭头</a></li>
<li><ahref="#"class="crosshair">十字</a></li>
<li><ahref="#"class="move">移动</a></li>
</ul>
二、网站制作定义菜单样式
很多链接放在一起，就可以组成菜单，菜单是网站的导航中心，在每个页面都会看见它，因此设计链接样式，以及导航菜单样式就成为网页设计中很重要的组成部分。菜单样式风格不一、种类繁多，页面该用什么样式，这个需要结合网页设计风格。深圳网页制作在前面的文章中曾经介绍了按钮样式，下面就以按钮样式为基础，设计一个水平显示的菜单样式，示例效果如图3.36所示。
设计菜单样式
设计菜单样式【操作步骤】
第1步，构建网页结构，在<body>标签中输入以下内容：
<div>
<ul>
<li><ahref="#">首页</a></li>
<li><ahref="#">国内新闻</a></li>
<li><ahref="#">体育新闻</a></li>
<li><ahref="#">国际新闻</a></li>
<li><ahref="#">娱乐新闻</a></li>
<li><ahref="#">财经新闻</a></li>
</ul>
</div>整个菜单结构以无序列表为基础，使用<ul>和<li>标签配合，设计每个菜单项，在每个菜单项中包含一个链接，此时的显示效果如图3.37所示，可以看到，无序列表结构呈现垂直显示，并带有项目符号，每个项目以缩进呈现。
构建列表结构
第2步，定义网页基本属性，设置列表默认样式，清除项目符号，并让菜单文本居中显示。
在以上代码中，首先定义了页面边界为0，清除页边距，统一字体大小为16像素，字体类型为宋体，为div元素定义左右margin为auto，上下为10像素。此时的显示效果如图3.38所示。
设置列表基本属性
第3步，定义按钮样式。
在上面代码中定义链接在默认状态下显示黑色，顶部边框线和左侧边框线为浅色效果，而右侧和底部边框线颜色为深色。当鼠标经过时，则重新设置四边边框线颜色，把上下和左右边框线颜色调换，这样利用错觉就设计出了一个凸凹立体效果，此时网页的显示效果如图3.39所示。
设计立体按钮样式提示：设计立体样式的技巧就是借助边框样式的变化（主要是颜色的深浅变化）来模拟一种凸凹变化的过程，即营造一种立体变化效果。使用CSS设计立体效果的3种技巧如下。
构建列表结构第2步，定义网页基本属性，设置列表默认样式，清除项目符号，并让菜单文本居中显示。
在以上代码中，首先定义了页面边界为0，清除页边距，统一字体大小为16像素，字体类型为宋体，为div元素定义左右margin为auto，上下为10像素。此时的显示效果如图3.38所示。设置列表基本属性第3步，定义按钮样式。
在上面代码中定义链接在默认状态下显示黑色，顶部边框线和左侧边框线为浅色效果，而右侧和底部边框线颜色为深色。当鼠标经过时，则重新设置四边边框线颜色，把上下和左右边框线颜色调换，这样利用错觉就设计出了一个凸凹立体效果，此时网页的显示效果如图3.39所示。设计立体按钮样式提示：设计立体样式的技巧就是借助边框样式的变化（主要是颜色的深浅变化）来模拟一种凸凹变化的过程，即营造一种立体变化效果。使用CSS设计立体效果的3种技巧如下。1.利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。
2.利用链接背景色的变化来营造凸凹变化的效果。链接的背景色可以设置相对深色效果，以营造凸起效果，当鼠标经过时，再定义浅色背景来营造凹效果。
3.利用环境色、字体颜色（前景色）来烘托这种立体变化过程。网站制作公司关于链接的鼠标定义方式以及菜单样式的实际操作案例就介绍到这里。下期博纳网络会就网站制作苹果菜单样式设计经验进行分享。
当前文章链接：/construction/jzhyzx/1352.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
