在网页设计时，很多链接放在一起，就可以组成菜单，菜单是网站的导航中心，在每个页面都会看见它，因此设计链接样式，以及导航菜单样式就成为网页设计中很重要的组成部分。
菜单样式风格不一、种类繁多，页面该用什么样式，这个需要结合网页设计风格。之前曾经介绍了按钮样式，下面就以按钮样式为基础，设计一个水平显示的菜单样式。
【操作步骤】
第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种技巧如下。
•利用边框线的颜色变化来制造视觉错觉。可以把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。
•利用链接背景色的变化来营造凸凹变化的效果。链接的背景色可以设置相对深色效果，以营造凸起效果，当鼠标经过时，再定义浅色背景来营造凹下效果。
•利用环境色、字体颜色（前景色）来烘托这种立体变化过程。
当前文章标题：在网页设计中定义菜单样式
当前URL：http://www.lyjtt.cn/news/wzzz/3080.html
上一篇：在网页设计中定义鼠标指针样式
下一篇：如何在网页设计中设计苹果风格菜单
