在这个案例中，将制作如图1所示的菜单。鼠标指针经过某个菜单项时，显示灰色背景色，同时在上下两侧各产生一条带有斜角的横线。该实例文件位于网页学习网CSS教程资源中的“第7章\02\bevel-navi.htm”。图1 双斜角横线菜单效果在这个案例中，需要重点考虑的是这个带有斜角的横线是如何产生的。一、...
分类：
其他好文 时间：
2014-06-20 16:45:55
阅读次数：
228
在本案例中，要实现如图1所示的圆角菜单效果。如果通过背景图片来使用前面介绍的滑动门技术，也是可以实现的。但在本案例中，我们采用另外一种方法来制作，其特点是不使用任何图像文件，仅通过CSS本身来实现这样的效果。该实例文件位于网页学习网CSS教程资源的“第8章\05\rounded-navi.htm”。...
分类：
其他好文 时间：
2014-06-20 16:33:51
阅读次数：
300
本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果，以及玻璃的质感．必须借助图像才可以实现，完成后的效果如图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
在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观地感受网页所要传达给浏览者的信息。本节将介绍CSS设置图片风格样式的方法，包括图片的边框、对卉方式和图文混排等，并通过实例综合掌握文字和图片的各种运用。一、基本设置作为单独的图片，虽然它本身的很多属性都可以直接在HTML中进行...
分类：
Web程序 时间：
2014-06-20 16:04:45
阅读次数：
314
网页学习网《CSS教程布局实例》教程假设读者已经对HTML有所掌握，如果读者了解以下HTML标记中大多数标记的含义，就可以开始学习本教程。、、、、、、、、、、、、、、、、、、。如果读者还不清楚上面这些标记的含义，请先跟随网页学习网《HTML教程入门经典》，学习一下最基础的知识，然后再开始学习本教程。...
分类：
Web程序 时间：
2014-06-20 15:57:34
阅读次数：
313
本案例中，制作一个带有斜角的水平菜单。依然和上例一样，它也是可以适应窗口宽度的，效果如图1所示。该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。图1 自适应的斜角水平菜单效果一、基本思路本案例的关键在于，如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭...
分类：
其他好文 时间：
2014-06-20 15:33:38
阅读次数：
352
本章的最后一个案例要实现一个“伸缩面板”。伸缩面板具有固定的高度，包含若干页面，其中只有一个页面处于打开状态。当用鼠标单击某一个页面的标题时，该页面就会展开，原来展开的页面同时自动隐藏起来。在展开和隐藏的过程中，会有动画效果演示。本实例的文件位于网页学习网CSS教程资源中“第12章\04\accor...
分类：
其他好文 时间：
2014-06-20 15:13:28
阅读次数：
250
下面就来制作大税图模式。大视图模式的日历实例文件位于网页学习网CSS教程资源中的“第10章\03\calendar-large.htm”。需要说明的是，本案例要求不修改HTML结构。在此前提下，大视图模式无法在IE浏览器中实现，除非使用JavaScript动态修改DOM结构，而这和修改HTML结构就...
分类：
其他好文 时间：
2014-06-20 15:05:42
阅读次数：
219
