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

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

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

摘要： 这一教材最主要是实现一个简单的水平菜单，效果如图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& 阅读全文