因为不必考虑宽度变化带来的麻烦，所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多。关键在于如何合理地使用背景图像。一、两背景图像法本例制作如图1所示的圆角框，使用两个背景图像文件，宽度固定。这种方法只适用于制作单色圆角框。本实例文件位于网页学习网CSS教程资源中“第11章\01\basic....
分类：
其他好文 时间：
2014-06-28 19:38:12
阅读次数：
549
首先从中模式开始制作，制作好中模式以后，再以它为基础制作另外两个模式的页面，效果如图1所示。中视图模式的日历实例文件位于网页学习网CSS教程资源的“第10章\03\calendar-normal.htm”。图1 中视图模式显示的日历一、搭建HTML结构按照传统的方法建立最简单的表格．包括建立表格的标...
分类：
其他好文 时间：
2014-06-28 19:26:59
阅读次数：
255
在基于Spry的基础上实现了Tab板之后，再来制作一个折叠面板的页面，效果如图1所示。图中一共有3个折叠面板，每个折叠面板都有一个标题。单击一个标题，就可以实现面板的折叠隐藏或展开。图1的左图为折叠起来的效果，右图为展开后的效果。图1 设置当前页的Tab样式本实例的文件位于网页学习网CSS教程资源中...
分类：
其他好文 时间：
2014-06-28 19:17:40
阅读次数：
279
在10.3节中，整行变色提求鼠标指针经过的效果已经完成了，接下来继续改进它。实现类似于Excel的行列的二维提示，效果如图1所示，当鼠标指针经过某一个单元格时。相应的列头和行头单元格会同时变色。实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-3.htm”。图1 表格的行列二维变...
分类：
其他好文 时间：
2014-06-28 19:12:18
阅读次数：
316
这显然是最筒单的一种布局形式。通过这个例子，希望读者能够顺便复习前面圆角框的制作方法。实现的效果如图1所示。本案例文件位于网页学习网CSS教程资源中“第13章\1-1-1.htm”。图1 单列固定宽度的页面布局一、放置第一个圆角框先在页面中放置第一个圆角框，HTML代码如下。lodidance.co...
分类：
其他好文 时间：
2014-06-28 19:09:23
阅读次数：
217
border一般用于分隔不同元素，border的外围即为元素的最外围，因此计算元素实际的宽和高时，就要将border纳入。换句话说，border会占据空问，所以在计算精细的版面时，一定要把border的影响考虑进去，如图1所示，蓝色的虚线框即为border。图1 borderborder的属性主要有...
分类：
其他好文 时间：
2014-06-20 15:36:13
阅读次数：
284
本案例中，制作一个带有斜角的水平菜单。依然和上例一样，它也是可以适应窗口宽度的，效果如图1所示。该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。图1 自适应的斜角水平菜单效果一、基本思路本案例的关键在于，如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭...
分类：
其他好文 时间：
2014-06-20 15:33:38
阅读次数：
352
本案例将在8.5节的基础上来制作会跳起的多彩菜单，效果如图1所示。在平常状态时，各菜单项的高度都同样，而当鼠标指针经过某一个菜单项的时候，该菜单项就会跳起，高于其他菜单项。这个效果非常有趣，能够吸引访问者的目光。该实例文件位于网页学习网CSS教程资源的“第8章\06\rounded-navi.htm...
分类：
其他好文 时间：
2014-06-20 14:38:27
阅读次数：
272
本案例中，我们对一个简单的表格进行设置，使它看起来更为精致。另外，当表格的行和列都很多，并且数据量很大的时候，为避免单元格采用相同的背景色会使浏览者感到凌乱，发生看错行的情况，为表格设置隔行变色的效果，使得奇数行和偶数行的背景颜色不一样。实例的最终效果如图1所示。实例文件位于网页学习网CSS教程资源...
分类：
其他好文 时间：
2014-06-20 14:37:06
阅读次数：
371
下面再来实现一个"1-((1-2)+1)-1"的布局。如果读者还不清楚这种布局方式的表示方法，请阅读本章的13 .1节。本案例的最终效果如图1所示。图1 “1-((1-2)+1)-1”布局效果案例文件位于网页学习网CSS教程资源中“第13章\1-((1-2)+1)-1.html”。这个案例的HTML...
分类：
其他好文 时间：
2014-06-20 14:36:25
阅读次数：
303
