苦笑一下 - 博客园

CSS导航菜单--会跳起的多彩菜单

摘要：这里来实现跳起的效果。是基于前一例的制作过程，让菜单跳起时，就是让菜单项在鼠标指针式，使菜单文字所在的p段落变高一些。1,首先改造HTML。在每个li中，增加一个div，把类别名设为“pad”，即垫子的意思，代码如下：<li> <a href="#"> <div class="pad"></div> <div class="row1"></div><div class="row2"></div> <div clas 阅读全文

posted @ 2011-10-25 17:36 苦笑一下阅读(373) 评论(0) 推荐(0)

CSS导航菜单--不使用图像圆角菜单

摘要：前面我们做的圆角菜单都是使用图片来完成得，有局限性。下面介绍一种纯使用css完成的菜单。1，搭建基本的HTML代码<body><ul> <li class="item"> <a href="#"> <div class="row1"></div><div class="row2"></div> <div class="row3"></div><div class=&quo 阅读全文

posted @ 2011-10-25 13:30 苦笑一下阅读(934) 评论(0) 推荐(0)

CSS导航菜单--三状态玻璃效果菜单（双层滑动门应用）

摘要：本例进一步讨论背景图片制作菜单的方法，目标是实现一个具有3个状态的菜单，如图所示三状态玻璃效果菜单首先要准备所需的图片，本例中只是用了一张图片完成这个效果，如图所示：现在设置HTML代码，如下所示。<div id="menu"><ul><li><a href="#"><b>Home</b></a></li><li><a href="#"><b>Contact Us</b></a>& 阅读全文

posted @ 2011-10-13 08:40 苦笑一下阅读(2421) 评论(0) 推荐(0)

CSS导航菜单--应用滑动门技术的玻璃效果菜单

摘要：本例主要实现一个玻璃材质效果的水平菜单。完成的效果图如图所示：本例中使用了两个图像，如图这是作为菜单的背景使用得。相应的HTML代码如下：<ul class="item"><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Contact Us</span></a></li><li>< 阅读全文

posted @ 2011-10-13 08:31 苦笑一下阅读(1071) 评论(0) 推荐(0)

CSS导航菜单--自适用的斜角水平菜单

摘要：本案列中，制作一个带有斜角的水平菜单。依然和上例一样，他也是自适应快读。如本例的关键在于，如何制作出左上角这个斜角。如果有了上例，制作 “带箭头的菜单“的经验，掌握使用“钩子”的方法，这个例子就很容易实现了核心思想就是利用边框的接角位置构造出一个斜角，然后使用“钩子”的方法挂到每一个菜单项的左上角去。如果掌握了以后，可以放到任何一个角上去。对于每个菜单的a元素，放置一个span元素，设为corner类别，并作为CSS“钩子”，用于实现斜角效果，代码如下所示：<div id="menu"><a href="#"> <spa 阅读全文

posted @ 2011-10-13 08:26 苦笑一下阅读(2270) 评论(0) 推荐(0)

CSS导航菜单—自适应水平菜单

摘要：这一教材最主要是实现一个简单的水平菜单，效果如图1.1所示。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当浏览器宽度不足以容纳所有菜单项的时候，会自动折行，如图1.1所示。图1.1 自动适用水平菜单效果它的HTML代码依然是多次使用过的最基本HTML结构，如下所示。<div id="menu"><a href="#">Home</a><a href="#">Contact Us</a><a href="#">Web Dev</a& 阅读全文

posted @ 2011-10-13 08:20 苦笑一下阅读(5160) 评论(0) 推荐(0)

CSS菜单--带说明信息的菜单

摘要：在上一例的基础上，制作一个显示说明信息的菜单，鼠标经过某个菜单项的时候，会出现相应的说明信息。如图所示：在通常状态下，这个菜单和上一个例子相同，而在鼠标经过菜单项的时候，在菜单右侧回出现一个矩形区域，里面分别写着对正在经过菜单项的说明文字，这个是一个很实用的效果。本例的代码以，上一例为基础，对于每个菜单项的a元素，分别再添加一个span元素，里面输入香型的说明文字，代码如下：<div id="menu"> <a href="#"> <span class="left"></span> H 阅读全文

posted @ 2011-10-08 11:01 苦笑一下阅读(378) 评论(0) 推荐(0)

CSS菜单--双箭头菜单

摘要：本例的目标是实现带有两侧箭头的菜单效果，这里的箭头没有使用任何背景图像文件，而是完全依靠CSS代码实现的。仍然使用前面的HTML代码，但是必须进行一定的改造，也就是每个菜单项增加了两个盒子来放置三角形。具体代码如下：<div id="menu"> <a href="#"> <span class="left"></span> Home <span class="right"></span> </a> <a href=" 阅读全文

posted @ 2011-10-08 10:42 苦笑一下阅读(3815) 评论(0) 推荐(0)

CSS菜单--立体菜单

摘要：本案例仍然使用和上一个案例相同的HTML结构，基本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> 阅读全文

posted @ 2011-09-29 09:43 苦笑一下阅读(825) 评论(0) 推荐(1)

CSS菜单--双斜角横线菜单

摘要：本案例和上一个案例相同的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> 阅读全文

posted @ 2011-09-29 09:20 苦笑一下阅读(986) 评论(0) 推荐(0)

导航

2011年10月25日

2011年10月13日

2011年10月8日

2011年9月29日