在网页设计时，很多链接放在一起，就可以组成菜单，菜单是网站的导航中心，在每个页面都会看见它，因此设计链接样式，以及导航菜单样式就成为网页设计中很重要的组成部分。

菜单样式风格不一、种类繁多，页面该用什么样式，这个需要结合网页设计风格。之前曾经介绍了按钮样式，下面就以按钮样式为基础，设计一个水平显示的菜单样式。

【操作步骤】

第1步，构建网页结构，在<body>标签中输入以下内容：

<div>    

<ul>        

<li><a href="#">首页</a></li>        

<li><a href="#">国内新闻</a></li>        

<li><a href="#">体育新闻</a></li>        

<li><a href="#">国际新闻</a></li>        

<li><a href="#">娱乐新闻</a></li>        

<li><a href="#">财经新闻</a></li>    

</ul>

</div>

整个菜单结构以无序列表为基础，使用<ul>和<li>标签配合，设计每个菜单项，在每个菜单项中包含一个链接，可以看到，无序列表结构呈现垂直显示，并带有项目符号，每个项目以缩进呈现。

第2步，定义网页基本属性，设置列表默认样式，清除项目符号，并让菜单文本居中显示。

body {    margin:0px;    

padding:0px;    

font-size:16px;    

font-family:"宋体";

}div {    margin:10px auto auto 10px;}ul {    list-style-type:none;    

text-align:center;}li {    float:left;    margin-left:5px;}

在以上代码中，首先定义了页面边界为0，清除页边距，统一字体大小为16像素，字体类型为宋体，为div元素定义左右margin为auto，上下为10像素。

第3步，定义按钮样式。

a:link, a:visited {/*链接正常状态、被访问过的样式*/    

color: #000;    

display:block;    

width:100px;    

height:20px;    

line-height:20px;    

padding:4px 10px 4px 10px;    

background-color: #ffd8db;    

text-decoration: none;    

border-top: 1px solid #ece0e0;      /*边框实现阴影效果*/

 border-left: 1px solid #ece0e0;    

border-bottom: 1px solid #636060;    

border-right: 1px solid #636060;}a:hover {/*鼠标经过时的链接*/    

color:#821818;                     /*改变文字颜色*/    

padding:5px 8px 3px 12px;          /*改变文字位置*/    

background-color:#e2c4c9;          /*改变背景色*/    

border-top: 1px solid #636060;     /*边框变换，实现“按下去”的效果*/    

border-left: 1px solid #636060;    

border-bottom: 1px solid #ece0e0;    

border-right: 1px solid #ece0e0;}

在上面代码中定义链接在默认状态下显示黑色，顶部边框线和左侧边框线为浅色效果，而右侧和底部边框线颜色为深色。当鼠标经过时，则重新设置四边边框线颜色，把上下和左右边框线颜色调换，这样利用错觉就设计出了一个凸凹立体效果。

提示：网页设计立体样式的技巧就是借助边框样式的变化（主要是颜色的深浅变化）来模拟一种凸凹变化的过程，即营造一种立体变化效果。使用CSS设计立体效果的3种技巧如下。   

•利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。

   •利用链接背景色的变化来营造凸凹变化的效果。链接的背景色可以设置相对深色效果，以营造凸起效果，当鼠标经过时，再定义浅色背景来营造凹下效果。   

•利用环境色、字体颜色（前景色）来烘托这种立体变化过程。