7.2 双斜角横线菜单


在这个案例中，将制作如图1所示的菜单。鼠标指针经过某个菜单项时，显示灰色背景色，同时在上下两侧各产生一条带有斜角的横线。

该实例文件位于网页学习网CSS教程资源中的“第7章\02\bevel-navi.htm”。


图1 双斜角横线菜单效果

在这个案例中，需要重点考虑的是这个带有斜角的横线是如何产生的。

一、基本设置

本案例和上一个案例相同的HTML结构如下。

XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <div id="menu">
  3. <a href="#"> Home</a>
  4. <a href="#"> Contact Us</a>
  5. <a href="#"> Web Dev</a>
  6. <a href="#"> Web Design</a>
  7. <a href="#"> Map</a>
  8. </div>
  9. </body>

对于#menu容器的设置如下。lodidance.com

折叠展开CSS 代码复制内容到剪贴板

  1. #menu {                         /*对menu层设置*/
  2. width:9em;                   /*宽度*/
  3. margin:0 auto;               /*水平居中*/
  4. font-family:Arial;           /*字体*/
  5. font-size:14px;              /*字号*/
  6. border:solid 1px #aaa;       /*细灰色边框*/
  7. }

在对#menu的设置中，宽度使用的足相对单位em，而不像上一个例子，使用像素作为单位，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. #menu a, #menu a:visited {      /*设置菜单选项*/
  2. display:block;                /*设置为块级元素*/
  3. text-decoration:none;         /*无下划线*/
  4. color:#000;                   /*黑色文字*/
  5. height:1.4em;                 /*高度*/
  6. border:0.5em solid #fff;      /*白色*/
  7. }
  8. #menu a:hover {
  9. color:#fff;                   /*白色文字*/
  10. background-color:#aaa;        /*深灰色背景色*/
  11. border-color:#ddd #aaa;       /*上下边框浅灰色，左右与背景色相同*/
  12. }

使用相对单位的优势是，当访问者在浏览器中调整了文字的大小，#menu容器的大小可以自动调整，以适应文字大小的变化。

此外，还为#menu容器设置了1个像素宽的灰色的边框，代码为：

折叠展开CSS 代码复制内容到剪贴板

  1. border:solid 1px #aaa;      /*细灰色边框*/

二、菜单项设置

菜单项没有鼠标指针经过时效果的设置方法与上一节的案例相似，代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. #menu a, #menu a:visited {      /*设置菜单选项*/
  2. display:block;                /*设置为块级元素*/
  3. text-decoration:none;         /*无下划线*/
  4. color:#000;                   /*黑色文字*/
  5. height:1.4em;                 /*高度*/
  6. border:0.5em solid #fff;      /*白色*/
  7. }

与上个案例的不同之处在于，这里为了使菜单项的文字之间有一定空白，并且使文字在菜单项中竖直居中，没有采用padding来实现，而是用了line-height属性。当line-height属性设置为1.4em时，文字的上下会各产生0.2em的空白。

注意：这里不能使用height属性。如果使用height属性代替line-height属性。可以看到，文字将在竖直方向靠上对齐，而不是竖直居中了，这不是所期望的效果。

接下来，就要实现在鼠标指针经过时产生的背景色和边框了。在前面正常状态下的CSS代码中有如下一行设置。

折叠展开CSS 代码复制内容到剪贴板

  1. border:0.5em solid #fff;        /*白色*/

对鼠标指针经过效果设置如下。

折叠展开CSS 代码复制内容到剪贴板

  1. #menu a:hover {
  2. color:#fff;                   /*白色文字*/
  3. background-color:#aaa;        /*深灰色背景色*/
  4. border-color:#ddd #aaa;       /*上下边框浅灰色，左右与背景色相同*/
  5. }

可以看出，这个边框在鼠标指针未经过之前就已经存在了，只是和背景色相同，所以看不出是边框。而当鼠标指针经过时，边框的颜色发生改变，边框就显现出来了。

思考：最后请读者思考一下，为什么这里显示出的上下两条边框是斜角的，而7.1节案例中的左右两条边框不是这样的呢？

答案是，7.1节的案例中设置了左右两条边框宽为4px，上下边框为O；而在这个案例中，虽然左右边框在鼠标指针经过和不经过时的颜色不同，但实际上它们是存在宽度的，因此在水平和竖直的边框接角的位置，就产生了斜角。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/701.html

7.2 双斜角横线菜单,布布扣,bubuko.com

时间： 2024-11-03 22:01:39

7.2 双斜角横线菜单的相关文章

8.2 自适应的斜角水平菜单

本案例中,制作一个带有斜角的水平菜单.依然和上例一样,它也是可以适应窗口宽度的,效果如图1所示. 该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”. 图1 自适应的斜角水平菜单效果 一.基本思路 本案例的关键在于,如何制作出菜单项左上角这个斜角.如果有了上一章中制作“带箭头的菜单”的经验,掌握了使用“钩子“的方法,本案例的实现就很容易了.lodidance.com 对于每一个菜单项的a元素,放置一个span元素,设为corner类别,并作为CSS“钩子”,用于

7.4 箭头菜单

本例的目标是实现带有两侧箭头的菜单效果,如图1所示.这里的箭头效果没有使用任何背景图像文件,而是完全依靠CSS代码实现的. 图1 箭头菜单效果 该实例文件位于网页学习网CSS教程资源的“第7章\04\arrow-navi.htm”. 一.基本思路 既然这里不允许使用背景图像来制作这个三角形的样式,那么如何产生这两个三角形,并放到适当的位置上呢? 读者可以回忆一下7.2节的案例双斜角横线菜单的制作方法.那个案例中通过相邻边框的颜色区分实现了斜角效果.在这里.就继续挖掘它的潜力. 1.三角形效果:

联动二级菜单实现

参照美团app下拉式的二级列表菜单,公司项目中也有这种菜单的需求                    1,结构分析 首先,我们给出这个下来菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的“美食,全城,理我最近,刷选”这一行.这一行一点就会弹出对应的下来菜单. 2)下拉菜单是如何实现的呢?,这里我们利用了PopupWindow来实现这一弹出式窗口.然后我们在弹出式窗口

XP和Win 7双系统安装说明和注意事项

安装前说明: 1.先装XP,再装Windows 7,最好不要反过来,不然XP不会把Windows 7的启动管理器给覆盖掉,会麻烦些.总之遵循“旧版本到新版本”安装原则. 2.如果分区不够大,请用以下软件调整,但要慎重,详见:硬盘分区管理工具Norton PartitionMagic(PQ8.0) V8.05 Build 1371 简装汉化版 下载 操作系统: Windows XP pro with sp3 VOL微软原版(简体中文)+正版密钥 Windows 7简体中文旗舰版(MSDN原版) X

python学习6--函数定义及参数

1.函数的创建 def function(): 函数体2.函数形参和实参 形参是函数创建或定义时候括号内的参数: 实参是函数被调用时传递进去,括号内实际的参数.3.函数文档 (1)内部注释:' ',单引号加注释体表示一行,可用""" """打印多行: (2)打印函数文档: 函数名function.__doc__(双下横线),直接打印函数文档 help(函数名):4.注释 以#开头即可:#xxxxx5.关键字参数 为了避免函数在调用过程中因为形参给

该怎么开始？开始界面进化论

在微软最近的硬件发布会中,Lumia 950 XL + Display Dock着实令人惊艳了一把.虽说最后被Surface Book抢尽了风头,但是让手机像计算机一样去工作确实展现了Windows Phone的生产力. 放下其他的不谈,如何让人觉得一部手机是一台电脑?使用鼠标键盘以传统PC的方式操控?像电脑一样收发邮件编辑Word/PPT?在不同的程序间快速切换?这些都是.但是,还有一点也是不容忘记——开始. Figure 1. Lumia and Display Dork at Micros

7.1 双竖线菜单

导航是网页中不可缺少的功能,本章将制作5个风格各异的导航幕单.这些菜单单充分利用了CSS的各种特性,并且将前面介绍的各种关于盒子模型的技术要点都融入到各个案例当中. 本章将集中介绍竖直排列的菜单,第8章中将介绍水平排列的菜单,第9章中将介绍一个更为复杂的下拉菜单.需要注意的是.这些案例中都大量使用了前面章节中的CSS盒子模型以及浮动和定位的技术,因此读者务必先把前面的基础掌握好,再来学习这些实际的案例.这3章中的案例参考了英国设计师StuNicholls的设计和文章,如果读者有兴趣,可以访问他的

无法设置光驱位硬盘启动，制作双硬盘双系统启动菜单

前两天把光驱换成了硬盘,折腾了很久才搞定的双系统,这里备忘一下: 光驱坏掉了,刚好有一个以前从笔记本上拆下来的硬盘,就打算把这个硬盘装在光驱上: 我的笔记本是索尼,那个需要装到光驱位的硬盘是从这个笔记本上拆下来的,里面有个正版的win7系统,不过很久没用过了. 既然光驱坏掉了,就买个光驱位硬盘托盘,把那个硬盘再装回去用呗. 把硬盘装回去之后,本以为设置从光驱位启动系统,就能进入以前硬盘里面的那个系统.可是发现,笔记本是不支持从光驱位启动系统的!虽然从主硬盘启动,能看到装在光驱位的硬盘信息,也能使

【已解决】安装Ubuntu时怎样分区--利用EasyBCD在win7下进行ubuntu安装（双系统）时遇到报错：没有根文件系统，请回到分区菜单以修正此错误

由于我们离不开Windows操作,并且因为不熟悉而不习惯ubuntu的操作方式,固采用Win7和Ubuntu双系统方式比较合理.在Win7基础上安装Ubuntu,Ubuntu会自动建立一个启动菜单,让我们在开机时自行选择启动Win7还是Ubuntu. 1.在win7上安装EasyBCD后进行配置,并复制启动文件到C盘.此步具体过程可见http://teliute.org/linux/Ubsetup/jichu3/jichu3.html中的步骤一下载安装 EasyBCD,以及步骤二复制启动文件: