8.5 不使用图像的圆角菜单


在本案例中，要实现如图1所示的圆角菜单效果。如果通过背景图片来使用前面介绍的滑动门技术，也是可以实现的。但在本案例中，我们采用另外一种方法来制作，其特点是不使用任何图像文件，仅通过CSS本身来实现这样的效果。

该实例文件位于网页学习网CSS教程资源的“第8章\05\rounded-navi.htm”。


图1 不使用图像的圆角菜单

如果读者不看下面的讲解，自己是否可以想出解决方法呢？其实这个方法前面的案例已经使用过了，它类似于制作带箭头的菜单，只不过这次要多挂几个“钩子”。

一、实现圆角效果

在制作整体圆角菜单之前，先来实现如图2所示的一个圆角菜单项。这圆角的文件位于网页学习网CSS教程资源的“第8章\05\prepare.htm”。


图2 圆角的构成

在前面我们曾经制作过不使用图像文件的斜角菜单，是使用CSS的边框来实现的，那么这里怎么做呢？

① 首先观察如下的HTML代码。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <div class="item">
  3. <div class="row1"></div>
  4. <div class="row2"></div>
  5. <div class="row3"></div>
  6. <div class="row4"></div>
  7. <p>Home</p>
  8. </div>
  9. </body>

这正是上面效果所使用的HTML结构，可以看到每一行标记是如何与最终效果中的像素对应的。

② 那么CSS又如何设置呢？对.item容器进行设置，代码如下，这里都是一些常规的设置。

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

  1. .item{
  2. width:100px;
  3. margin:0 auto;
  4. padding 0;
  5. font: 14px Arial;
  6. font-weight:bold;
  7. }

③ 对p段落的样式进行设置，代码如下。

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

  1. .item p{
  2. padding:0 0 2px 0;
  3. margin:0px;
  4. text-align:center;
  5. background:#cc6;
  6. border:solid 1px  #000;
  7. border-top-width:0;
  8. }

注意这里对边框的设置。首先设置4条边为1个像素宽，然后把上边框设置为0，这时的效果可以看到左边，右边和下边有边框，上边则没有边框。

④ 下面就要对构成圆角的4个div进行设置了。先对它们的公共属性进行设置，代码如下。

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

  1. .item div{
  2. height:1px;
  3. overflow:hidden;
  4. background:#cc6;
  5. border-left:solid 1px  #000;
  6. border-right:solid 1px  #000;
  7. }

⑤ 设置最上面一行的row1的样式，它需要覆盖共性的背景色。因为它是作为水平的上边框出现的，所以把它的背景色设置为边框颜色即可。同时通过设置左右margin，使它左右各短5个像素，代码如下。

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

  1. .item .row1{
  2. margin:0 5px;
  3. background:#000;
  4. height:1px;
  5. }

⑥ 设置第2行row2的样式。这一行覆盖了border属性，使它变为两个像素，从而更接近一个圆角。

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

  1. .item  .row2{
  2. margin:0 3px;
  3. border:0 2px;
  4. }

此时在浏览器中的效果如可以看到已经出现圆角的雏形了。

⑦ 使用和上面相同的方法设置接下来的两行，代码如下。

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

  1. .item .row3{
  2. margin:0 2px;
  3. }
  4. .item .row4{
  5. margin:0 1px;
  6. height:2px;
  7. }

这样就获得了圆角菜单项的效果了，如果读者对这些数据的计算还有不清楚的地方，可以参考前面的结构部分和图1的对比。

请读者务必先把圆角的制作方法分析清楚，然后再往下学习。

二、用列表进行改造

上面只是做出了一个菜单项。为了能够实现完整的菜单，还需要改造为利用列表来实现的HTML结构，也就是使用ul代替div，便于以后增加菜单项时能更方便地组织内容。同时增加a标记，使菜单项可以响应鼠标的操作。

① 首先改造HTML代码。找到代码中的如下部分。

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <div class="item">
  3. <div class="row1"></div>
  4. <div class="row2"></div>
  5. <div class="row3"></div>
  6. <div class="row4"></div>
  7. <p>Home</p>
  8. </div>
  9. </body>

改造为：

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <body>
  2. <ul>
  3. <li class="item">
  4. <a href="#">
  5. <div class="row1"></div>
  6. <div class="row2"></div>
  7. <div class="row3"></div>
  8. <div class="row4"></div>
  9. <p>Home</p>
  10. </a>
  11. </li>
  12. </ul>
  13. </body>

这样显示的效果和原来是相同的。

② 增加其余几个菜单项，只需要复制后修改p段落中的文字就可以了，这里不再抄录代码。

③ 对CSS样式进行改造。

● 增加对ul的CSS设置，代码如下。

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

  1. ul{
  2. height:26px;
  3. margin: O ;
  4. padding:1Opx;
  5. list-tyle-type:none;
  6. background: #ddd;
  7. }

● 对item类增加向左浮动设置，以及对margin设置修改，代码如下。

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

  1. .item{
  2. float:left;
  3. width:100px;
  4. margin:0 -1px 0 0;
  5. padding 0;
  6. font: 14px Arial;
  7. font-weight:bold;
  8. }

分析：这里之所以把右margin的值设置为-1px，是因为希望各菜单项之间有1像素的重叠，这样，在最终的效果中，相邻菜单项之间的竖线就会显示为1像素。

其余代码都不用修改，此时在浏览器中的外观效果如图1所示。

三、设置鼠标响应效果

接下来的任务就是设置鼠标的响应效果了。

① 首先增加链接文字在普通状态时的颜色设置，并取消下划线，代码如下。

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

  1. .item a , .item a:visted{
  2. color:#000;
  3. text-decoration:none;
  4. }

② 对鼠标指针经过时的p标记进行设置。这样做的目的是使鼠标指针经过时．文字颜色和背景色发生变化，代码如下。

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

  1. .item a:hover p{
  2. background:#884;
  3. color:#fff;
  4. }

分析：这时在IE浏览器中查看效果，会发现并没有实现所希望的效果，从上面这两段代码本身来说，并没有错误，那么问题出在哪里呢？先来看解决这个问题的方法，增加如下一段代码。

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

  1. .item a:hover{
  2. background:transparent;
  3. }

它的作用是将a标记的鼠标指针经过样式的背景色设置为透明。事变上对于各种元素，默认的背景色就是透明的。但是当某一个元素的上级元素设置了某种背景色之后，它的后代的背景色就继承了这种颜色。因此这里就需要把它恢复为透明色，才可以正确地显示鼠标经过效果。

③ 下面就很简单了。对矩形上面的4个构成圆角的div在鼠标指针经过时的效果进行设置，只要设置背景色就可以了，代码如下。

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

  1. .item a:hover .row2,
  2. .item a:hover .row3 ,
  3. .item a:hover .row4{
  4. background:#884;
  5. }

这时在浏览器中的效果如图1所示。

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

8.5 不使用图像的圆角菜单,布布扣,bubuko.com

时间： 2024-10-03 05:24:43

8.5 不使用图像的圆角菜单的相关文章

css分类导航和圆角菜单的制作

#纵向分类 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*清除默认的边框*/ *{margin: 0px;padding: 0px;} /*不显示li前面的.号 */ ul{list-style: none;width: 100px;} /*

2.制作圆角菜单的两种方法

方法一:设置成背景图片 style{background:url(../image/2.jpg);} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直菜单</title> <style type="text/css"> *{margin: 0;padding: 0;} .class1 {border-bott

导航条菜单制作总结

整理自慕课网 http://www.imooc.com/view/6 制作垂直导航条时若不想增加导航块的长度可用text-indent:20px;进行缩进 导航条菜单制作总结1.用无序列表构建菜单:ul/li2.垂直菜单转变为水平菜单:float:left:3.在制作圆角菜单时,背景图片贴在<a>标签上: -------> 雪碧图的应用--- background-position4.在制作改变高度的伸缩菜单时,实现高度向上延伸的技巧: ----> margin-top用负值:5.

Web前端开发实战4：导航菜单(一)

在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单.导航菜单种类很多,但是制作原理都是大同 小异的,这里看的比二级下拉式菜单还简单.来看一些网站上的导航菜单: 垂直导航菜单: 水平导航菜单: 一垂直菜单 制作原理:(1)用无序列表构建菜单:(2)<a>标签的设置:ul li a{display:block;}.定义的关键是将<a>标签设置为 块元素. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

tytabs.jquery.min.js实例，渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

DIV+CSS实战系列课程附实例源码

教程目录: 1._固定大小圆角边框. 2._.不固定大小圆角边框. 3.灵活的图片边框. 4.div.css视频教程--.ul横向菜单. 5.div.css视频教程_文字排版. 6.div.css视频教程_制作简单页面之ps布局. 7.div.css视频教程_.制作简单页面之css布局. 8.div.css视频教程_.制作简单页面之填充内容. 9.div.css视频教程_.如何改变布局成三列布局. 10.div.css.视频教程._页面组合式_菜单的调用. 11.DIV.CSS实战视频教程_.圆

导航页面样式

用一下的代码为例: <body> <ul class="nav"> <li><a class="on" href="#">首 页</a></li> <li><a href="#">新闻快讯</a></li> <li><a href="#">产品展示</a>