CSS网页设计标准教程（第2版）.pptVIP

9.3.2设置整体样式和表头样式在建立好表格的框架结构后，开始编写CSS样式。控制标题、表头单元9.3.3设置日历单元格样式整个表格中的单元格一共分为4种，即“普通的”“有日程安排的”“上个月的”和“下个月的”。后三者分别设置了active、previous和next类别，因此先对普通单元格进行设置，它也是后三者所具有的“共性”样式基础。对单元格进行设置后的效果9.4CSS与表单表单是网页与用户交互所不可缺少的元素，在传统的HTML中对表单元素的样式进行控制的标记很少，仅仅局限于功能上的实现。本节围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制、与表格配合制作各种效果等。9.4.1表单中的元素表单中的元素很多，包括常用的输入框、文本框、单选项、复选框、下拉菜单和按钮等，一个没有经过任何修饰的表单，包括最简单的输入框、下拉菜单、单选项、复选框、文本框和按钮等。普通表单9.4.2多彩的下拉菜单CSS不仅可以控制下拉菜单的整体字体和边框等，对于下拉菜单中的每一个选项同样可以设置背景色和文字颜色。对于下拉选项很多、必须加以进一步分类的时候，这种方法十分奏效，对于选择颜色更是得心应手。七彩的下拉菜单9.5网民调查问卷实例门户网站上的新闻和事实往往都伴随着各种各样的调查问卷，包括事实的评论、舆论的反馈和事态的预测等。这些调查问卷都离不开表格与表单的配合使用。本例通过制作一个简单的调查问卷，进一步熟练CSS控制表格和表单的方法。调查问卷小结本章详细介绍表格的CSS样式的设置方法，主要包括3个方面。（1）关于表格的HTML结构及其相应的CSS属性设置。（2）使用JavaScript实现对CSS的样式扩充。（3）通过“日历”这个实例，演示了如何在一个实际的页面中使用表格，以及设置相关的样式。本章还介绍了表单的制作，以及使用CSS设置表单元素的方法。表单是交互式网站很重要的应用之一，它可以实现交互功能。需要注意的是，本章所介绍的内容只涉及表单的设置，不涉及具体功能的实现方法，例如要实现一个真正的留言簿功能，则必须要有服务器程序的配合。第10章网页样式综合案例——灵活的电子相册本章简介：前面几章针对CSS设计中的几个专项分别进行了讲解，本章通过一个案例，对CSS的样式设计进行阶段复习。本章通过CSS对电子相册进行排版，进一步介绍CSS排版的方法。搭建框架10.1阵列模式10.2单列模式10.3改进阵列模式10.410.1搭建框架首先来搭建页面的框架结构。搭建框架主要应考虑在实际页面中相册的具体结构和形式，包括照片整体排列的方法、用户可能的浏览情况、照片是否需要自动调整等。首先对于阵列模式，不同的用户可能有不同的浏览器。显示器分辨率为“1024×768”的用户可能希望每行能显示5～6幅缩略图，而显示器分辨率为“1280×1024”的用户或许希望每行能容纳7～8幅，宽屏用户或许希望每行能显示更多。其次，即使在同一个浏览器下，用户也不一定能够全屏幕欣赏，这就需要照片能够自动排列和换行。如果使用table排版，是无论如何也不可能实现这一点的。未设置CSS样式的效果10.2阵列模式首先来讨论阵列模式的实现方法，它主要要求照片能够根据浏览器的宽度自动调整每行的照片数，在CSS排版中正好可以用float属性来实现；另外考虑到需要排列整齐，而且照片有横向显示的也有纵向显示的，因此将块扩大为一个正方形，并且给照片加上边框。以阵列模式显示10.3单列模式单列模式的照片竖直排列，每张照片的右侧显示关于该照片的详细信息，并且不更改页面的HTML结构。单列模式8.2创建按钮式超链接很多网页上的超链接都制作成各种按钮的效果，这些效果大都采用了各种图片。本节仅仅通过CSS的普通属性来模拟按钮的效果。按钮式超链接8.3制作荧光灯效果的菜单下面制作一个简单的竖直排列的菜单效果，在每个菜单项的上边有一条深橙色的横线，当鼠标指针滑过时，横线由深橙色变成浅黄色，就好像一个荧光灯点亮后的效果，同时菜单文字变为青色，以更明显的方式提示用户选中了哪个菜单项目。荧光灯效果菜单8.3.1创建HTML框架首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架。没有任何CSS设置时的效果8.3.2设置容器的CSS样式styletype=text/css#menu{font-family:Arial;font-size:14px;font-weight:bold;w