作者的话　　001作品集网站　　002第1章　作品集网站的设计风格与趋势　　003极简风　　004插画风　　007瀑布流　　010单页式　　013首页突出式　　016非典型　　019主题式　　022登陆页式　　025响应式　　028第

关键词： 目录 

正如前几卷一样，我喜欢将书中的第一部分用于探讨某个二级话题。第一卷谈的是色彩，第二卷是设计的基本元素，第三卷是影响网页设计的各种技术。在这新的一卷中，我将深入探讨在线作品集网站的设计。人们提交给我

关键词： 作品集  网站 

我写的每本书，这部分内容总是最后完成的。这么做是因为只有基本上把书写完，才容易进行总结。这样做的感受真是苦乐参半。显而易见，其中的乐趣在于终于要完成一件大事了，自然兴高采烈。但同时，这也意味着要开

关键词： 作者 

编辑推荐：网页设计的灵感从哪来？资深网页设计师Patrick McNeil在这一系列《网页设计创意书》中将为你揭示创作的奥秘。- Web页面视觉盛宴，展示近700个最出色的网页- 设计师进阶必读，总结一流网页应遵守的设

关键词： 宣传语 

本书展示了近700个顶尖网站设计示例。这些网站时而浓墨重彩、时而简洁素雅，为读者带来一场丰富的视觉盛宴。读者可以从这些优秀的作品中获得启发，博采众长，将这些作品的成功设计理念为己所用，从而设计出夺人眼

关键词： 创意  网页设计 

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文

关键词： 字符串  符号  文字 

可以将大编号嵌入在中编号中，譬如要将代码清单20-7中的中编号修改为大编号-中编号的形式，需要将中编号的before选择器中的代码修改成如下代码。h2:before{ content: counter(mycounter) & 39;-& 39; counte

关键词： 中编号  中  嵌入  大编号 

可以在大编号中嵌套中编号，在中编号中嵌套小编号。在代码清单20-7中，我们给出一个编号嵌套的示例，在该示例中，有两个大标题，每个大标题中又有三个中标题，使用编号嵌套的方式分别对大标题与中标题进行分层编

关键词： 编号  嵌套 

用before选择器或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。content：counter(计数器名，编号种类)可以使用list-style-type属性的值

关键词： 种类 

可以指定追加编号的样式，譬如对代码清单20-6中追加的编号指定如下所示的样式，使得编号后面带一个 文字，编号颜色为蓝色，字体大小为42像素。h1:before{ content: counter(mycounter)& 39; & 39;;

关键词： 样式 

可以在插入的项目编号中加入文字，使项目编号变成类似第1章之类的带文字的编号。针对代码清单20-6，只要将before选择器中的代码修改为如下所示的代码就可以了。h1:before{content: & 39;第& 39;counter(mycount

关键词： 文字  项目 

在content属性中使用counter属性值来针对多个项目追加连续编号，使用方法如下所示。<元素>：before{ content：counter(计数器名);}使用计数器来计算编号，计数器可任意命名。另外，还需要在元素的样式中追加对元

关键词： 多个  标题 

前面两节中分别介绍了利用before选择器与after选择器的content属性在元素的前面或后面插入文字与图像的方法，本节介绍当页面中具有多个项目时如何利用这个content属性来在项目前插入项目编号，在本节的最后介绍一

关键词： 属性  项目 

如果在content属性中通过attr（属性名）这种形式来指定attr属性值，可以将某个属性的属性值显示出来。在代码清单20-5中，给出一个attr属性值的使用示例。在该示例中，在页面上用img元素显示一个图像文件，并且在

关键词： 属性  图像  标题 

虽然可以利用img元素在画面中追加图像文件，但是也可以使用样式表来追加图像文件，这样做的好处是可以为页面的编写节省大量时间。例如，在代码清单20-3所示的示例中，可以利用名字为new的类来在个别标题后面追加

关键词： 图像  好处  文件 

20 2　插入图像文件20 2 1　在标题前插入图像文件使用before选择器或after选择器，除了可以在元素的前面或后面插入文字之外，还可以插入图像文件。插入图像时，需要使用url属性值来指定图像文件的路径。在如下所

关键词： 图像  标题  文件 

在代码清单20-1的示例中，因为对页面上的h2元素使用了before选择器，所以该页面上如果有多个h2元素，则所有的h2元素前面都会被插入内容。如果想让其中一个或几个h2元素的前面不要插入内容时，应该怎么指定呢？在

关键词： 元素 

20 1　使用选择器来插入文字20 1 1　使用选择器来插入内容首先，让我们来回顾一下，在CSS 2中是如何使用样式在元素的前面或后面插入内容的。在CSS 2中，使用before选择器在元素前面插入内容，使用after选择器在

关键词： 内容 

在19 3 1节中介绍CSS中的伪元素时，我们曾经介绍过，在CSS中可以使用before伪元素选择器与after伪元素选择器在页面中的元素的前面或后面插入内容，而插入的内容是用content属性来定义的。确切地说，before伪元素

关键词： 概述 

关于选择器部分，最后要介绍的一个选择器是通用兄弟元素选择器，它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。它的使用方法如下所示。<子元素> ~<子元素之后的同级

关键词： 元素  兄弟