CSS+DIV网页样式与布局案例指导

作者简介

《CSS+DIV网页样式与布局案例指导》是网页设计的一大改革。DIV分块实现了HTML文档内部结构的划分，CSS层叠样式表则为网页提供了丰富的设计样式，并控制HTML文档的外在表现。两者各尽其职，实现了样式与内容的分离，从而大大简化了HTML代码。CSS+DIV网页布局技术可以保证网页风格的一致性，对网页的样式进行统一的管理，给网页的开发与维护带来了极大的方便。当我们想要修改网页的风格设置时，只需要修改CSS样式表就能使所有的网页样式随之发生变动，而不必一页一页地修改网页。《CSS+DIV网页样式与布局案例指导》以实用为前提，提供了大量网页设计与制作的范例，并辅以细致的讲解与图示，对网页制作的步骤与方法都有具体的示例，是一本简单易学的CSS+DIV布局技术的参考手册。

书籍目录

第1章 网站制作流程与布局概念1.1 网站和网页1.1.1 网站与网页的关系1.1.2 域名1.2 网站的制作流程1.2.1 前期策划1.2.2 页面实施1.2.3 后期维护1.3 布局方式1.3.1 网站建设标准1.3.2 页面布局1.3.3 标准与表格布局第2章 HTML与XHTML2.1 HTML基础2.1.1 HTML概述2.1.2 HTML基本结构2.2 HTML基本标签2.2.1 基本标签2.2.2 格式标签2.2.3 文本标签2.2.4 超链接标签2.2.5 图像标签2.2.6 表格标签2.2.7 框架标签2.2.8 表单标签2.2.9 分区标签2.3 XHTML2.3.1 XHTML概述2.3.2 HTML转换为XHTML第3章 JavaScript脚本语言概述3.1 JavaScript概述3.1.1 JavaScript发展3.1.2 编写JavaScript脚本代码3.1.3 JavaScript程序结构3.1.4 JavaScript代码嵌入HTML文档3.2 JavaScript效果的实现3.2.1 事件处理器3.2.2 表单验证3.2.3 JavaScript窗口3.3 JavaScript与CSS3.3.1 在CSS中使用JavaScript3.3.2 JavaScript控制CSS样式切换3.3.2 JavaScript与CSS实现雕刻菜单效果第4章 CSS概述4.1 CSS的基本概念4.2 CSS的页面设置4.2.1 内联样式表4.2.2 嵌入样式表4.2.3 外部样式表4.2.4 输入样式表4.3 CSS与HTML4.4 CSS的选择器和继承4.4.1 CSS选择器4.4.2 CSS的继承4.5 编辑CSS4.6 浏览器与CSS第5章 CSS语法介绍5.1 CSS选择器5.1.1 标记选择器5.1.2 类选择器5.1.3 ID选择器5.1.4 选择器的声明5.2 CSS的继承5.2.1 父子关系5.2.2 CSS继承的运用5.3 单位和值5.3.1 颜色5.3.2 长度单位5.3.3 URL第6章 CSS文本编辑效果6.1 文字样式6.1.1 字体的样式6.1.2 文字的大小6.1.3 文字的颜色6.1.4 字体的粗细与斜体6.1.5 下画线、顶画线和删除线6.2 段落设置6.2.1 对齐方式6.2.2 行间距6.2.3 字间距6.2.4 首字放大效果第7章 CSS表格和表单效果7.1 表格样式7.1.1 表格属性7.1.2 表格的边框样式7.1.3 表格的文本样式7.1.4 表格嵌套7.1.5 表格背景变色7.2 表单样式7.2.1 表单属性7.2.2 表单边框闪烁第8章 CSS与页面结构8.1 边框8.1.1 边界8.1.2 边框8.1.3 补白8.1.4 浮动与清除8.2 分块格式编排8.2.1 块元素8.2.2 内联元素8.2.3 可变元素第9章 用CSS设置网页效果9.1 用CSS设置图片样式9.1.1 图片边框的设置9.1.2 图片大小的设置9.1.3 图片自动等比例缩小9.1.4 图片阴影的设置9.1.5 图片透明的设置9.1.6 图片的对齐方式的设置9.1.7 文字环绕的效果9.1.8 浮动广告的制作9.2 用CSS设置网页中的背景9.2.1 页面的背景色9.2.2 页面的背景图的设置9.2.3 背景图片的位置9.2.4 固定背景图片9.2.5 添加多个背景图片第10章 用CSS设置页面10.1 设置页面格式10.1.1 设置超链接10.1.2 设置导航栏10.1.3 设置鼠标特效10.1.4 设置滚动条10.1.5 设置选项卡10.2 特殊效果10.2.1 鼠标提示10.2.2 导航栏的隐藏和展开10.2.3 设置滑动文本选项卡第11章 CSS滤镜的应用11.1 滤镜介绍11.2 通道（alpha）11.3 模糊（blur）11.4 透明色（chroma）11.5 阴影（shadow）11.6 光晕（glow）11.7 波浪（wave）11.8 X射线（x-ray）11.9 灰度（gray）11.1 0反色（invert）11.1 1遮罩（mask）11.1 2翻转（FlipH&FlipV）第12章 理解CSS定位与div布局12.1 div标签与span标签12.1.1 概述12.1.2 元素的分类和标识（class和id）12.1.3 组织元素（div和span）12.2 盒子模型12.2.1 盒子模型的概念12.2.2 border属性12.2.3 padding属性12.2.4 margin属性12.2.5 宽度和高度12.3 元素的定位12.3.1 CSS的定位原理12.3.2 定位方式12.3.3 float定位12.3.4 z-index定位第13章 CSS+DIV布局13.1 CSS+DIV布局方法13.1.1 网站的制作规范13.1.2 将页面用div分块13.1.3 对分布的块进行定位13.2 CSS排版观念13.2.1 对段落进行排版13.2.2 对图片进行排版13.2.3 对表格进行排版13.2.4 “固定宽度且居中”的版式13.2.5 “左中右”版式第14章 调用样式表14.1 关于CSS14.1.1 CSS样式表的功能14.1.2 CSS样式表的分类14.2 调用样式表的方法14.2.1 外部调用CSS样式表14.2.2 双表法调用样式表14.2.3 样式表的切换14.2.4 样式表的优先级14.2.5 根据时段改变网站风格第15章 小型企业网站15.1 设计分析15.2 布局分析15.3 模块分析与设计实现15.3.1 Logo与菜单效果15.3.2 导航与搜索功能的设计15.3.3 公司咨询15.3.4 主体实现15.3.5 业内新闻15.4 CSS整理与调整第16章 购物网站16.1 设计分析16.2 布局分析16.3 模块分析与设计实现16.3.1 Logo与菜单效果16.3.2 分类搜索功能设计16.3.3 商品导购功能设计16.3.4 交易功能设计16.4 CSS整理与调整第17章 观光旅游导航网站17.1 设计分析17.2 布局分析17.3 模块分析与设计实现17.3.1 CSS基本设置17.3.2 标题栏与banner图片的实现17.3.3 左侧分栏与导航菜单实现17.3.4 主体实现17.3.5 脚注（footer）17.4 CSS整理与调整

前言

　　因特网的诞生改变了人们的工作和生活方式，而各种网站的盛行也给网页设计者带来了机遇与挑战。HTML语言是整个网站设计和开发的核心。它是网页开发所基于的标准的结构化语言。它包含的各种结构标记的基本功能是控制网页内容的结构划分。但是在网页开发之初，在网页开发的标准不完善的情况下，HTML实际上肩负了网页外观的呈现。例如，(B)、(I)等标记元素的出现，这使得网页内容和结构混杂在一起，代码异常冗长和繁复，极大地增加了网页设计和开发者的工作量。CSS的出现完美地解决了这个问题。CSS是英文Cascading Style Sheets的缩写，即层叠样式表。CSS是一种简单的标准化语法。它可以让网站设计者方便灵活地控制Web页面的外观表现，使网站设计变得更加简单。最重要的是，它与HTML语言中的DIV标记的结合，完美地实现了网页的内容与结构的分离，简化了HTML语言，并且减轻了HTML对表现形式的责任。同时使网页开发者的分工更加明确，从而大大减少了创建和维护网站所花费的时间。如今，HTML和CSS共同担负着网页前台设计的责任，一起构成了网页设计与开发的基石。　　本书由浅入深地对CSS+DIV网页布局进行了全面的介绍。首先是对CSS必备的基础知识的详细讲解，分章节介绍了CSS对网页各组成部分的控制的技术要点与参数设定，为深入学习CSS+DIV网页布局做好铺垫。在此基础上，以实例讲解的方式进一步介绍了CSS+DIV网页布局的观念及其实际应用。最后的综合案例让读者真正体会到网页设计与开发的整个思路与过程，加深读者对CSS+DIV网页布局观念的理解。在本书中，每个知识要点处都安排了详细的范例解析来帮助读者理解与掌握知识要点。同时精心设计了“举一反三”供读者实践，帮助读者对所学知识真正做到学以致用。全书的章节安排条理清晰，技术讲解循序渐进，与大家的学习习惯相吻合，使读者通过本书的学习能真正地掌握CSS+DIV网页布局的相关技术，并能够在实际中应用。　　全书按照学习进程分成3大部分。第1部分是CSS基础知识篇，共分为11章。第1章是网站制作流程与布局概念的介绍，帮助读者理解CSS层叠样式表的布局观念及其在网站制作中的地位。第2章和第3章是对网站制作的相关知识的扩展介绍，包括HTML、XHTML、JavaScript网站制作的基础技术，帮助读者从网站开发的层次理解CSS+DIV网页布局，不会因为孤立地学习CSS而无法在实际的网站开发中应用。同时指导读者制作符合Web标准的网页，为以后从事网站设计开发工作打下良好的基础，这也是本书的一大特色。第4章到第11章以分类介绍的方式，比较细致全面地讲解CSS相关的基本语法知识以及使用技巧，针对每一个知识点都有相应的范例讲解，以帮助读者更好地理解和掌握。　　第2部分是CSS+DIV布局篇，共分为3章。该部分是整体提高篇。它是在掌握了第1部分的CSS基础知识的前提下，从更高的网页整体布局的层次上讲解CSS和DIV的整体应用。　　第3部分是综合案例篇，共分为3章。每章都详细地讲解一个完整的网站开发的综合实例。其中，第15章是小型企业网站，第16章是购物网站，第17章是观光旅游导航网站。这3个典型网站制作实例覆盖了常用的网页设计与制作知识，在书中都有详细的分析与讲解。该部分让读者可以掌握实用的网站开发的思路、方法、技巧，最终能够独立地完成网页的开发。　　本书内容涵盖了从Web排版到页面布局的所有元素，内容全面、条理清晰、深入浅出，注重范例讲解与实用性，是一本简单易学的CSS+DIV布局技术的参考手册，既适合CSS初学者入门，又适合中高级使用者巩固提高。　　本书由王俭敏、方强、李静等编写，本书致力于让多层次的读者阅读后能有所收获，但是由于编者的水平有限，书中难免有疏漏之处，欢迎广大读者与专家批评指正。

章节摘录

　　第1章　网站制作流程与布局概念
　　1.1　网站和网页
　　网站（Website）是在国际网络中根据一定的规范，使用超文本标记语言或其他工具软件制作的用于展示特定内容的相关网页的集合。简单地说，网站是网络中的通信工具。像布告栏一样，网站拥有者可以通过网站发布资讯或提供相关的网络服务。用户可以通过浏览器访问网络中的网站，获取需要的资讯或接受网络服务。　　网页（Website）是一个文件，存储在某一台与因特网相连的计算机或服务器中。网页经由统一资源定位器（uRL）来识别与存取，当用户在浏览器中输入网址（即URL）后，服务器端程序处理后，网页文件传送到用户的计算机，然后通过浏览器解释网页的内容之后再展示给用户。　　1.1.1　网站与网页的关系　　许多企业和公司都拥有自己的网站，并利用网站进行宣传、发布产品资讯和招聘信息。随着网页制作技术的流行，很多个人也开始制作个人主页，这些网页通常是作者用来自我介绍、展现个性的地方。同时也出现了很多以提供网络资讯为营利手段的网络公司，通常这些公司的网站会提供生活各个方面的资讯，如时事新闻、旅游、娱乐、经济等。　　在因特网的早期，网站还只能保存单纯的文本。经过几年的发展，当万维网出现之后，图像、声音、动画、视频，甚至3D技术开始在因特网上流行起来，网站也慢慢地发展成人们现在看到的图文并茂的样子。通过动态网页技术，用户也可以与其他用户或者网站管理者进行交流，也有一些网站为用户提供电子邮件服务。　　网页是网站中的一“页”，通常是HTML格式（文件扩展名为.html或.htm、.asp、.aspx、.php、.jsp等），需要通过Web页面浏览器阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。可以说，网站就是由网页组成的。如果只有域名和虚拟主机，而没有制作任何网页的话，用户仍旧无法访问网站。

图书封面

---

 CSS+DIV网页样式与布局案例指导下载

---