在本案例中，要实现如图1所示的圆角菜单效果。如果通过背景图片来使用前面介绍的滑动门技术，也是可以实现的。但在本案例中，我们采用另外一种方法来制作，其特点是不使用任何图像文件，仅通过CSS本身来实现这样的效果。该实例文件位于网页学习网CSS教程资源的“第8章\05\rounded-navi.htm”。...
分类：
其他好文 时间：
2014-06-20 16:33:51
阅读次数：
300
经过前面的学习．对标准流中的盒子排列方式应该已经很清楚了，下面来做一个习题。假设有一个网页，其显示结果如图1所示，现在要读者精确地回答出从字母a到x对应的宽度是多少个像素。习题文件位于网页学习网CSS教程资源“第3章\04.htm”。图1 计算图中各个字母代表的宽度（高度）是多少像素网页的完整代码如...
分类：
Web程序 时间：
2014-06-20 16:27:01
阅读次数：
255
本小节的标题是盒子的定位，实际上对于使用CSS对网页布局这个大主题来说．“定位”这个词本身有两种含义。● 广义的“定位”：要将某个元素故到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。● 狭义的...
分类：
其他好文 时间：
2014-06-20 16:26:18
阅读次数：
282
文字和图像是传达信息的基础，是网页设计永远不可缺少的元素，各种各样的文字和图像效果在整个互联网中无处不在。本章从基础的文字设置开始，详细讲解CSS设置各种文字效果的方法，然后再进一步讲解关于图像的几个重要的应用领域。使用过任何文字处理软件的用户对文字排版都不会陌生。例如在Word软件中可以对文字的字...
分类：
Web程序 时间：
2014-06-20 16:25:37
阅读次数：
382
读者要理解前几节的内容并不困难，因为都只涉及一个盒子内部的关系。而实际网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们以各种关系相互影响着。要把一个盒子与外部的其他盒子之间的关系理解清楚，并不是简单的事情。在很多CSS资料中大都通过简单的分类，就CSS本身的介绍来说明这个问题，往往只是就事...
分类：
其他好文 时间：
2014-06-20 16:24:15
阅读次数：
228
本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果，以及玻璃的质感．必须借助图像才可以实现，完成后的效果如图1所示。该实例文件位于网页学习网CSS教程资源的“第8章\03\glass-navi.htm”。图1 玻璃效果的菜单本例中用到了两个图像，分别作为整个菜单的背景色平铺使用的，和当...
分类：
其他好文 时间：
2014-06-20 16:19:29
阅读次数：
300
本例的目标是实现带有两侧箭头的菜单效果，如图1所示。这里的箭头效果没有使用任何背景图像文件，而是完全依靠CSS代码实现的。图1 箭头菜单效果该实例文件位于网页学习网CSS教程资源的“第7章\04\arrow-navi.htm”。一、基本思路既然这里不允许使用背景图像来制作这个三角形的样式，那么如何产...
分类：
其他好文 时间：
2014-06-20 16:17:36
阅读次数：
298
在本案例中，将实现如图1所示的立体菜单效果。当鼠标指针经过菜单项时，菜单按钮将显示出被按下的样式。该实例文件位于网页学习网 CSS教程资源中的“第7章\03\3d-navi.htm”。图1 立体菜单效果一、基本设置本案例仍然使用和上一个案例相同的HTML结构，基本代码HTML如下。XML/HTML ...
分类：
其他好文 时间：
2014-06-20 16:15:41
阅读次数：
181
第7章中，介绍了5个竖直方向菜单的制作方法，相信读者可以体会到CSS的功能非常强大。在本章中，我们将制作6个水平排列的菜单。它们也同样各具特色，而且应用了一些CSS设计中非常重要的技术，例如“滑动门”技术。它不仅仅应用在这里，奉书后面的很多案例中，都会看到“滑动门”技术的应用。这一节要实现一个简单的...
分类：
其他好文 时间：
2014-06-20 16:06:00
阅读次数：
201
导航是网页中不可缺少的功能，本章将制作5个风格各异的导航幕单。这些菜单单充分利用了CSS的各种特性，并且将前面介绍的各种关于盒子模型的技术要点都融入到各个案例当中。本章将集中介绍竖直排列的菜单，第8章中将介绍水平排列的菜单，第9章中将介绍一个更为复杂的下拉菜单。需要注意的是。这些案例中都大量使用了前...
分类：
其他好文 时间：
2014-06-20 16:03:28
阅读次数：
219
