本例的目标是实现带有两侧箭头的菜单效果，如图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
在五彩缤纷的网络世界中，各种各样的图片组成了丰富多彩的页面，能够让人更直观地感受网页所要传达给浏览者的信息。本节将介绍CSS设置图片风格样式的方法，包括图片的边框、对卉方式和图文混排等，并通过实例综合掌握文字和图片的各种运用。一、基本设置作为单独的图片，虽然它本身的很多属性都可以直接在HTML中进行...
分类：
Web程序 时间：
2014-06-20 16:04:45
阅读次数：
314
导航是网页中不可缺少的功能，本章将制作5个风格各异的导航幕单。这些菜单单充分利用了CSS的各种特性，并且将前面介绍的各种关于盒子模型的技术要点都融入到各个案例当中。本章将集中介绍竖直排列的菜单，第8章中将介绍水平排列的菜单，第9章中将介绍一个更为复杂的下拉菜单。需要注意的是。这些案例中都大量使用了前...
分类：
其他好文 时间：
2014-06-20 16:03:28
阅读次数：
219
一、郊野——两列布局两列布局是所有网站中最常见的布局形式，也是禅意花园的作品中最常见到的。这种布局结构清晰，对访问者的引导性非常好。《郊野》是这类作品的代表，由意大利设计师Mario Carboni设汁。在这个作品中，页面划分合理，并且颜色搭配平和而协调，点击下面的网址查看。访问这个作品的网址是ht...
分类：
Web程序 时间：
2014-06-20 16:02:03
阅读次数：
294
网页学习网《CSS教程布局实例》教程假设读者已经对HTML有所掌握，如果读者了解以下HTML标记中大多数标记的含义，就可以开始学习本教程。、、、、、、、、、、、、、、、、、、。如果读者还不清楚上面这些标记的含义，请先跟随网页学习网《HTML教程入门经典》，学习一下最基础的知识，然后再开始学习本教程。...
分类：
Web程序 时间：
2014-06-20 15:57:34
阅读次数：
313
传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的标记和无顺序列表的标记等。当引入css后，项目列表被赋予了很多新的属性．甚至超越了它最初设计时的功能。本节主要围绕项目列表的基本css属性进行相关介绍，包括项目列表的编号、缩进和位置等。一、列表的符号通常的项目列表主要采用或者标记，然后配合...
分类：
其他好文 时间：
2014-06-20 15:49:06
阅读次数：
234
本案例中，制作一个带有斜角的水平菜单。依然和上例一样，它也是可以适应窗口宽度的，效果如图1所示。该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。图1 自适应的斜角水平菜单效果一、基本思路本案例的关键在于，如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭...
分类：
其他好文 时间：
2014-06-20 15:33:38
阅读次数：
352
盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本章主要介绍盒子模型的基本概念，并讲解CSS定位的基本方法。所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话...
分类：
其他好文 时间：
2014-06-20 15:29:09
阅读次数：
244
