您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
CSS教程: 双斜角横线菜单
作者：佚名 责任编辑：admin 更新时间：2022-06-22
在这个案例中，将制作如图1所示的菜单。鼠标指针经过某个菜单项时，显示灰色背景色，同时在上下两侧各产生一条带有斜角的横线。
该实例文件位于网页CSS教程资源中的“第7章\02\bevel-navi.htm”。
图1 双斜角横线菜单效果
在这个案例中，需要重点考虑的是这个带有斜角的横线是如何产生的。
一、基本设置
本案例和上一个案例相同的HTML结构如下。
XML/HTML 代码复制内容到剪贴板- <body>
- <div id="menu">
- <a href="#"> Home</a>
- <a href="#"> Contact Us</a>
- <a href="#"> Web Dev</a>
- <a href="#"> Web Design</a>
- <a href="#"> Map</a>
- </div>
- </body>
对于#menu容器的设置如下。WANGYEXX.COM
折叠展开CSS 代码复制内容到剪贴板- #menu { /*对menu层设置*/
- width:9em; /*宽度*/
- margin:0 auto; /*水平居中*/
- font-family:Arial; /*字体*/
- font-size:14px; /*字号*/
- border:solid 1px #aaa; /*细灰色边框*/
- }
在对#menu的设置中，宽度使用的足相对单位em，而不像上一个例子，使用像素作为单位，代码如下。
折叠展开CSS 代码复制内容到剪贴板- #menu a, #menu a:visited { /*设置菜单选项*/
- display:block; /*设置为块级元素*/
- text-decoration:none; /*无下划线*/
- color:#000; /*黑色文字*/
- height:1.4em; /*高度*/
- border:0.5em solid #fff; /*白色*/
- }
- #menu a:hover {
- color:#fff; /*白色文字*/
- background-color:#aaa; /*深灰色背景色*/
- border-color:#ddd #aaa; /*上下边框浅灰色，左右与背景色相同*/
- }
使用相对单位的优势是，当访问者在浏览器中调整了文字的大小，#menu容器的大小可以自动调整，以适应文字大小的变化。
此外，还为#menu容器设置了1个像素宽的灰色的边框，代码为：
折叠展开CSS 代码复制内容到剪贴板- border:solid 1px #aaa; /*细灰色边框*/
二、菜单项设置
菜单项没有鼠标指针经过时效果的设置方法与上一节的案例相似，代码如下。
折叠展开CSS 代码复制内容到剪贴板- #menu a, #menu a:visited { /*设置菜单选项*/
- display:block; /*设置为块级元素*/
- text-decoration:none; /*无下划线*/
- color:#000; /*黑色文字*/
- height:1.4em; /*高度*/
- border:0.5em solid #fff; /*白色*/
- }
与上个案例的不同之处在于，这里为了使菜单项的文字之间有一定空白，并且使文字在菜单项中竖直居中，没有采用padding来实现，而是用了line-height属性。当line-height属性设置为1.4em时，文字的上下会各产生0.2em的空白。
注意：这里不能使用height属性。如果使用height属性代替line-height属性。可以看到，文字将在竖直方向靠上对齐，而不是竖直居中了，这不是所期望的效果。
接下来，就要实现在鼠标指针经过时产生的背景色和边框了。在前面正常状态下的CSS代码中有如下一行设置。
折叠展开CSS 代码复制内容到剪贴板- border:0.5em solid #fff; /*白色*/
对鼠标指针经过效果设置如下。
折叠展开CSS 代码复制内容到剪贴板- #menu a:hover {
- color:#fff; /*白色文字*/
- background-color:#aaa; /*深灰色背景色*/
- border-color:#ddd #aaa; /*上下边框浅灰色，左右与背景色相同*/
- }
可以看出，这个边框在鼠标指针未经过之前就已经存在了，只是和背景色相同，所以看不出是边框。而当鼠标指针经过时，边框的颜色发生改变，边框就显现出来了。
思考：最后请读者思考一下，为什么这里显示出的上下两条边框是斜角的，而7.1节案例中的左右两条边框不是这样的呢？
答案是，7.1节的案例中设置了左右两条边框宽为4px，上下边框为O；而在这个案例中，虽然左右边框在鼠标指针经过和不经过时的颜色不同，但实际上它们是存在宽度的，因此在水平和竖直的边框接角的位置，就产生了斜角。
- 上一个程序编程： CSS教程: 制作小视图模式
- 下一个程序编程： CSS教程:3.3 内边距(padding)
