给大家带来CSS实例教程;利用:before和:after拔出内容

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。
破洛洛文章简介：我们利用:before来在元素的后面拔出内容，利用:after在元素的前面拔出内容（兼容扫瞄器：firefox、chrome、safari、opera、ie8+）。
在css中，我们可使用:before伪元素选择器与:after伪元素选择器在页面的后面和前面以content属性的体例拔出内容。
从css2.0增加这两个伪元素选择器到css2.1到如今的3.0，都不休的在对这两个选择器举行改进和扩大。
起首，我们来看一下，在css2中，我们怎样来拔出内容（ie67不在思索局限以内，由于他们不撑持:before与after）。
在css2中，我们利用:before来在元素的后面拔出内容，利用:after在元素的前面拔出内容（兼容扫瞄器：firefox、chrome、safari、opera、ie8+）。请看上面的例子：
css款式：

1. #div1{border:1pxsolid#090;padding:10px;font-size:14px;margin-bottom:10px;}#div1:before{content:"【";color:#f00;font-family:Arial;}#div1:after{content:"】";color:#f00;font-family:Arial;}

复制代码

html代码：

1. <divid="div1">拔出内容</div>

复制代码

在扫瞄器中检察演示了局（我测试过的扫瞄器：ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

登录/注册后可看大图

假如一切的div后面和前面我都增加了上例中的白色括号，只要包括”none”的div前面不拔出括号，也就是我所指定的一般元素不拔出内容。上面我们来看下怎样完成：
css款式：

1. div{border:1pxsolid#090;padding:10px;font-size:14px;margin-bottom:10px;}div:before{content:"【";color:#f00;font-family:Arial;}div:after{content:"】";color:#f00;font-family:Arial;}.div2:after{content:none;/*content:normal;*/}

复制代码

html代码：

1. <div>拔出内容</div><divclass="div2">拔出内容</div>

复制代码

这里利用的是content:none来完成不拔出内容的，可是在opera10.6和safari5中是不撑持的，只要ff3.6/4.0/7.0、chrome14、ie8撑持。当利用normal关头字时，只要safari5不给力了（因而最好利用normal）。来看一下在了局（ff3.6/4.0/7.0、chrome14、ie8）：

登录/注册后可看大图

不给力的safari5:

登录/注册后可看大图

除下面用关头字的办法，另有一种办法，那就是拔出”"的体例，这类办法都是撑持的。

1. content:"";

复制代码

利用:before与:after能够拔出笔墨标记，也能够利用content属性的open-quote属性性与close-quote属性值在字符串的双方增加诸如括号、单引号等标记。从字面上我们就能够看出来，open-quote属性值能够在后面拔出内容，close-quote会在开头拔出内容。
来看个例子：

1. h1{quotes:"("")";}h1:before{content:open-quote;}h1:after{content:close-quote;}h2:before{content:"";}h2:after{content:"";}

复制代码

html代码：

1. <h1>题目</h1><h2>题目h2</h2>

复制代码

这里，h1标签利用quotes的体例在h1的后面和前面增加一对括号，而h2利用:before与:after的办法拔出一对反斜杠（固然也能够拔出一对括号，这里利用反斜杠是想申明，一些字符是要本义的，好比反斜杠）。来看一下扫瞄器中的体现(ff3.6、chrome14、opera10.6、safari5、ie8)：

登录/注册后可看大图

quotes也必要利用:before与:after来拔出内容，真不晓得他有甚么上风，也许能够在quotes界说大批的笔墨大概标记，而content中援用就是它的上风。
拔出完笔墨，我们如今来看一下怎样拔出图片。
css款式：

1. div{border:1pxsolid#090;padding:10px;font-size:14px;margin-bottom:10px;}div:first-child:after{content:url(new.gif);margin-left:5px;}

复制代码

html代码：

1. <div>拔出内容</div><div>拔出内容</div><div>拔出内容</div><div>拔出内容</div>

复制代码

拔出图片，这是一个十分十分给力的功效，好比我有一个旧事列表，第一条旧事我想加个new的图片大概说hot的图片，之前我们也许经由过程程序来把持，可是如今，前端事情者也能够完成了，不必要程序员往写判别（这里没有利用li列表的情势，迁就一下吧，写demo的时分如许写了）。来看一下扫瞄了局（ff3.6/4.0/7.0、chrome14、safari5、opera10.6）：

登录/注册后可看大图

ie8只撑持拔出笔墨，不撑持拔出图片的功效（PS：在ietester中的8.0仿佛撑持，又多了一条不给力的证据）。
我们不单单能够拔出笔墨、图片，我们还能够猎取元素的属性，然后拔出它。先来看一下猎取div元素属性的例子：
css款式：

1. div{border:1pxsolid#090;width:78px;height:59px;padding:3px;position:relative;}div:after{content:attr(id);display:block;color:#f00;font-weight:bold;position:absolute;top:0;right:0;}

复制代码

html代码：

1. <divid="div1">拔出内容</div>0

复制代码

这里，我猎取div的id值，固然也能够猎取title，style的值，来看一下扫瞄器中的体现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

登录/注册后可看大图

来看一下特别的例子，那就是猎取图片的属性值，今朝只要opera撑持，这一点，opera十分的给力，完成某些效果上，它能够节俭大批的html代码。先来看我这里要完成的效果（opera10.5）：

登录/注册后可看大图

登录/注册后可看大图

默许情形下如左图所示，只要一张图片，当鼠标放到图片下面，显现图片的alt属性内的内容，并掩盖在图片的下面，如。
假如用content:attr(alt)十分简单完成，并且削减了却构。来看一下怎样完成的：
css款式：

1. <divid="div1">拔出内容</div>1

复制代码

html代码：

1. <divid="div1">拔出内容</div>2

复制代码

拔出项目编号，在css2中，只能利用list-style来完成，可是css3中，我们可使用content来增加项目编号，并且功效加倍壮大。先来看一个复杂的例子：
css款式：

1. <divid="div1">拔出内容</div>3

复制代码

html代码：

1. <divid="div1">拔出内容</div>4

复制代码

来看一下扫瞄器中的体现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

登录/注册后可看大图

counter-increment:name;这句是设置编号的name，这个name能够随便，这里我利用的是mycounter。挪用的时分利用content:counter(name);的情势。
上图中，数字前面间接跟题目，有点丢脸，我们能够加点笔墨，加笔墨的办法很复杂。

1. <divid="div1">拔出内容</div>5

复制代码

把笔墨用引号引发来，增加的笔墨与counter(mycounter)之间能够有空格，也能够不必空格，但它们都不会显现出来。在扫瞄器中检察增加笔墨后的了局（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

登录/注册后可看大图

不但在编号中能够增加笔墨，我们还能够改动编号的范例。我们可使用list-style-type的值，挪用办法counter(name,list-style-type的值);
css款式：

1. <divid="div1">拔出内容</div>6

复制代码

html代码：

1. <divid="div1">拔出内容</div>4

复制代码

这里，我们利用的是年夜写罗马字母，来看一下扫瞄器中的体现（ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

登录/注册后可看大图

实习：我们都晓得，list-style-type的值能够取circle这类的值，那末这里会怎样显现呢？
上面我们来看一下编号嵌套，这在目次中长短经常见的。来看一下例子：
css款式：

1. <divid="div1">拔出内容</div>8

复制代码

html代码：

1. <divid="div1">拔出内容</div>9

复制代码

来看一下扫瞄器中的显现效果：

登录/注册后可看大图

这类显现效果，的确没有到达我的请求，由于2.32.4依照我们的需求，应当是2.12.2，同理，前面的也是。可是扫瞄器十分给力的供应了一个属性counter-reset，从字面意义我们就晓得，它是用来重置的。来看例子怎样利用：
css款式：

1. div{border:1pxsolid#090;padding:10px;font-size:14px;margin-bottom:10px;}div:before{content:"【";color:#f00;font-family:Arial;}div:after{content:"】";color:#f00;font-family:Arial;}.div2:after{content:none;/*content:normal;*/}0

复制代码

这里，在dt中重置了dd的编号，来看显现效果：

登录/注册后可看大图

是否是很给力？有木有？有木有？
一切demo下载
</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

学Dreamweaver技术的过程其实是一个增加信心的过程。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。