网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂（附光盘）

《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》作者根据自己在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍了CSS 3 + DIV网页样式与布局的技术。

《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》共分为24章，前19章分别介绍了开发网站的准备工作、HTML 5技术、CSS样式入门、CSS样式基本语法、CSS 3的高级特性、控制网页字体和段落样式、控制网页图片样式、控制网页背景和边框样式、美化网页浏览效果、控制表格与表单样式、控制列表样式、使用CSS 3滤镜美化网页元素、CSS定位与DIV布局核心技术、CSS + DIV盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作、CSS 3与JavaScript的搭配应用、CSS与XML的综合应用、CSS与Ajax的综合应用。最后5章介绍了5个综合性网站的例子。通过学习案例，使读者进一步巩固所学的知识，提高实战能力。

《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》内容丰富、全面，图文并茂，步骤清晰，通俗易懂，专业性强，使读者能理解CSS 3 + DIV网页样式与布局的技术，并能解决实际生活或工作中的问题，真正做到知其然更知其所以然。通过重点章节，条理清晰、系统地介绍了读者希望了解的网页设计技巧。

《网站开发案例课堂：CSS3+DIV网页样式与布局案例课堂》涉及面广泛，几乎囊括了CSS 3 + DIV网页样式与布局的所有重要知识，适合所有的网页设计初学者快速入门，同时也适合想全面了解CSS 3 + DIV网页样式与布局的设计人员阅读。

第1章 制作网页的准备工作 1

第2章 网页实现技术——HTML 5 21

第3章 CSS 3样式入门 47

第4章 CSS样式的基本语法 67

第5章 CSS 3的高级特性 77

第6章 使用CSS 3控制网页字体与段落的样式 95

第7章 使用CSS控制网页图片的样式 123

第8章 使用CSS控制网页背景与边框样式 137

第9章 使用CSS 3美化网页浏览效果 167

第10章 使用CSS控制表格和表单的样式 185

第11章 使用CSS控制列表样式 201

第12章 使用CSS 3滤镜美化网页元素 221

第13章 CSS定位与DIV布局核心技术 243

第14章 CSS + DIV盒子的浮动与定位 269

第15章 固定宽度网页布局的剖析与制作 293

第16章 自动缩放网页布局的剖析与制作 311

第17章 CSS 3和JavaScript的搭配应用 335

第18章 CSS与XML的综合运用 375

第19章 CSS与Ajax的综合应用 395

第20章 商业门户类网站赏析 413

第21章 制作娱乐休闲类网页 437

第22章 制作图像影音类网页 451

第23章 制作企业门户类网页 477

第24章 制作在线购物类网页 487

第1章

制作网页的

准备工作

随着Internet的发展与普及，越来越多的人开始在网上通信、工作、购物、娱乐，甚至在网络上建立自己的网站。网站代表了企业和个人的形象，正确的布局可以让网站的结构更加合理，使网站变得更加美观。

1.1 认识网页和网站

现在，网站已经成为越来越重要的信息发布途径。拥有自己的网站，可以说是每个网页创作者的梦想。要学习网站建设，首先应当认识一下网页和网站，了解它们的相关概念。

1.1.1 什么是网页

网页是Internet中最基本的信息单位，是把文字、图形、声音及动画等各种多媒体信息相互链接起来而构成的一种信息表达方式。

通常情况下，网页中有文字和图像等基本信息，有些网页中还有声音、动画和视频等多媒体内容。

网页一般由站标、导航栏、广告栏、信息区和版权区等部分组成，如图1-1所示。

在访问一个网站时，首先看到的网页一般称为该网站的首页。有些网站的首页具有欢迎访问者的作用。首页只是网站的开场页，单击页面上的文字或图片，即可打开网站主页，而首页也随之关闭，如图1-2所示。

图1-1 网页的外观

图1-2 网站的首页

网站主页与首页的区别在于：主页设有网站的导航栏，是所有网页的链接中心。但多数网站的首页与主页通常合为一个页面，即省略了首页而直接显示主页，在这种情况下，它们指的是同一个页面，如图1-3所示。

图1-3 网站主页与首页合二为一

1.1.2 什么是网站

网站就是在Internet上通过超级链接的形式构成的相关网页的集合。简单地说，网站是一种通信工具，人们可以通过网页浏览器来访问网站，获取自己需要的资源或享受网络提供的服务。例如，人们可以通过淘宝网站查找自己需要的信息，如图1-4所示。

图1-4 淘宝网站

1.2 网页中需要包含的要素

在互联网中，网页是一个文件，存储在某一台与互联网相连的计算机或服务器中，使用统一资源定位符（URL）来识别和访问，本节就来介绍网页中需要包含的要素。

1.2.1 需要HTML文件

HTML（Hypertext Marked Language），即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是应用非常广泛的网页格式，也是用来显示Web页面的语言之一。

网页中所有定义的色彩、文字、表格，甚至是视频等元素的网页相关代码，都是编写在HTML文件中的，可以说HTML就是网站展示声音、图片、文字等元素的平台。图1-5展示了淘宝网首页的HTML相关代码。

图1-5 淘宝网首页的HTML相关代码

1.2.2 需要DIV层

标记是一个区块容器标记，在

标记中，可以放置其他的一些HTML元素，例如段落

、标题

、表格、图片和表单等。然后使用CSS 3相关的属性把div容器标记中的元素作为一个独立的对象进行修饰，这样就不会影响到其他HTML元素了。

形象地讲，在HTML网页文件中，DIV就相当于一个“圈地者”，它将网页分成若干个小区域，每一个DIV在网页上占据了一定的位置，在这个位置上，用户可以放置特定的内容。图1-6中的“手机数码”区域，就是先用DIV圈出一块地方，然后在上面放置“手机数码”的分类信息，其他区域也是这样来放置网页元素的，最后合在一起，就整合出了一个完美的网页了。

图1-6 网页上的“手机数码”区域及其他区域

1.2.3 需要CSS定义的网页样式

在网页中，设计者将DIV元素都放置好了，要想给浏览者呈现出一个丰富多彩的网页效果，还需要利用CSS来定义网页样式。

在设计网页的过程中，CSS扮演了一个“美术家”的角色，利用CSS，可以定义网页文字、图片以及视频等元素的显示方式，使其能够更贴切地接近我们的要求。如图1-7所示的网页中就使用了CSS来定义网页样式。

图1-7 使用了CSS来定义网页样式

CSS样式一般是作用在DIV上的，它需要与DIV一起构成网页上的一个模块，而网页又是由多个DIV构成的，因此，从狭义上讲，HTML + DIV + CSS组合起来，就能构成一个网站。

1.2.4 需要JavaScript设置网页动画

JavaScript是一种为了使网页能够具有交互性，能够包含更多活跃的元素，而嵌入在网页中的技术，它使我们的网页能够表现得内容更加生动，使网页的效果更加醒目。

JavaScript作为一种可以给网页增加交互性的脚本语言，拥有近20年的发展历史。它的简单、易学易用特性，使其立于不败之地。使用JavaScript可以很容易地制作出很多网页动画效果，如漂亮的时钟、广告效果的跑马灯等。

图1-8中，网页里的广告图片会自动地切换，而且单击图片左右两侧的箭头时，广告也会切换。这种效果就是用JavaScript脚本控制的。

图1-8 网页里的广告图片效果

1.2.5 需要域名与服务器空间

一个网站开发完成后，要想运营，需要给网站申请一个域名。申请域名的方法很多，用户可以登录域名服务商的网站，根据提示申请域名。域名有免费域名和收费域名两种，用户可以根据实际的需要进行选择。

域名注册成功之后，还需要申请网站空间，应根据不同的网站类型选择不同的空间。网站空间有免费空间和收费空间两种。对于个人网站的用户来说，可以先申请免费空间使用。免费空间只需向空间的服务提供商提出申请，在得到答复后，按照说明上传主页即可，主页的域名和空间都不用操心。对于商业网站而言，用户需要考虑空间和安全性等因素，为此可以选择收费网站。

使用免费空间美中不足的是：网站的空间有限，提供的服务一般，空间不是非常稳定，域名不能随心所欲地选择。

域名与网站是一一对应的关系，用户只需要在浏览器里输入某个域名，就能进入到对应的站点中。例如，在浏览器的地址栏中输入“www.baidu.com”这个域名，就能进入百度网站，如图1-9所示。

图1-9 进入百度网站

1.3 一个简单网页的基本构成

任何一个网页的内容都包含在和这对标签之内，在这对标签中，通常包含三个要素，分别是head部分、body部分以及注释部分。

1.3.1 head部分

头标记head用于说明文档头部的相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息以结束，语法格式如下：

...

元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。在head标记中，一般可以设置title和meta等标记的内容。

1.3.2 body部分

网页所要显示的内容都放在网页的主体标记内，主体标记以开始，以标记结束，语法格式如下。

...

主体标记是HTML文件的重点所在，HTML的所有标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像。

注意，在构建HTML结构时，标记不允许交错出现，否则会造成错误。例如，下列代码中出现了交错：

注释语句元素由前后两半部分组成，前半部分由一个左尖括号、一个半角感叹号和两个连字符头组成，后半部分由两个连字符和一个右尖括号组成。例如：

网页

页面注释不但可以对HTML中一行或多行代码进行解释说明，而且能够注释掉某些代码。如果希望某些HTML代码在浏览器中不显示，可以将这部分内容放在之间。例如，修改上述代码，如下所示：

……

伴随着Web 2.0潮流的盛行，传统的表格布局模式正逐渐被网页标准化CSS + DIV的设计方式取代，对最新CSS 3的学习也成为网页设计师的必修功课。本书专门针对网页样式与布局的初学者，帮助他们快速提高实战水平。

1. 本书特色

（1）知识全面：由浅入深，涵盖了所有的CSS 3 + DIV知识点，帮助读者快速掌握网页设计方面的技能。

（2）图文并茂：在介绍案例的过程中，每一个操作均有对应的插图。图文结合的方式使读者在学习过程中能够直观、清晰地看到操作的过程及效果，便于更快地理解和掌握。

（3）易学易用：颠覆传统“看”书的观念，变成一本能“操作”的图书。

（4）案例丰富：把知识点融会于系统的案例实训中，并且结合经典案例进行讲解和拓展，进而实现“知其然，并知其所以然”的效果。

（5）贴心提示：本书对读者在学习过程中可能会遇到的疑难问题以“提示”和“注意”等形式进行说明，以免读者在学习的过程中走弯路。

（6）超值赠送：除了本书的素材和结果外，还附赠封面所述的大量的资源，读者可以全面掌握网页设计方方面面的知识。

2. 读者对象

本书不仅适合网页设计初级读者入门学习，也可作为中、高级用户的参考手册。书中大量的实例模拟真实的网页设计案例，对读者的工作有现实的借鉴作用。

3. 作者团队

本书作者刘玉红长期从事网站设计与开发工作。胡同夫、梁云亮、王攀登、王婷婷、陈伟光、包慧利、孙若淞、肖品、王维维和刘海松等人参与了本书的编写工作。

本书虽然倾注了编者的努力，但由于水平有限，书中难免存在疏漏之处，恳请读者批评指正。读者如果遇到问题或有意见和建议，敬请与我们联系，我们将全力提供帮助。

编 者