仓酷云

标题: DIV教程之:before和:after伪类元素制造奇妙效果 [打印本页]

作者: 因胸联盟 时间: 2015-1-15 23:14
标题: DIV教程之:before和:after伪类元素制造奇妙效果
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和FLASH，所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造Webjx文章简介：伪类元素之美.
经由过程利用:before和:after，你能创作出让人称奇的视觉效果。对页面中的每一个元素，你都有两个分外的能够把持的元素，原本这些是必要分外的元从来完成。他们给计划带来了更多的兴趣性的空间，而不是增添无语义的有负面影响的标签。这里给人人收拾了一堆让人称奇的器材。让我们入手下手吧！
给了你多层背景画布

由于你能够相对他们的父元素相对定位伪类元素，你能够把他们设想他们是每一个元素的两个分外层。NicolasGallaghershowsus给我们展现了良多这类使用，包含多层的边框，分离css3的多重背景和等高列。
扩大经由过程单一元素体现更多图形的大概

一切下面的图形anymanymore都能够经由过程一个单一的元素制造出来，这是一个很实际的办法。和“makeacoffeecupwithpureCSS!”的这类案例相反（利用了1700的div），这类办法加倍有用。
上面是这段代码可让我们失掉六角星的例子：
12345678910111213141516171819#star-six{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;position:relative;}#star-six:after{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-top:100pxsolidred;position:absolute;content:"";top:30px;left:-50px;}将链接笔墨的链接地点打印出来

12345@mediaprint{a[href]:after{content:"("attr(href)")";}}扫除浮动

和增添而外的没有语义的标签来扫除容器浮动比拟，我们可使用伪类元从来为我们做这件事变。就是我们熟习的“clearfix”，和别的一个更有语义的被定名为类名“group”。
1234567891011.group:before,.group:after{content:"";display:table;}.group:after{clear:both;}.group{zoom:1;/*ForIE6/7(triggerhasLayout)*/}摹拟居中浮动

浮动属性中实践上其实不包括居中的值，除非我们本人但愿有这个属性。浮动固然有左和右属性，可是经由过程占位的伪类元素我们能够在两列结构两头启示出一个地区放一张图片，我们能够摹拟出这类效果simulatetheeffect。
暗示出区块中代码利用的是哪一种言语

你如今正在利用的这个网站，经由过程伪类元素标示出了代码块她是用哪一种言语。
1<prerel="CSS"></pre>123456pre:after{content:attr(rel);position:absolute;top:22px;right:12px;}制造一系列图标

NicolasGallagher再次经由过程不利用图片的情形下，拓展了下面的设法制造了另外一个条理的amassivesetoficonsIcon，最多只要两个伪类元素。
更无效的利用空间

CSS带来的，CSS也能带走。这句话的意义是伪类元素内容能够经由过程媒体查询appliedorremovedconditionallyviamediaqueries。也许你能够在空间丰裕的情形下利用Icon，当空间丰裕的时分利用更有形貌性的笔墨。
利用更有粉饰性的排版

假如你的伪类元素是笔墨，他们将会承继他们父类元素的排版款式。可是当你设置内容时，你也能够对它们利用款式。也就是说，你可使用分歧的字体和色彩让你的题目更有粉饰效果。
1234567891011121314h2{text-align:center;}h2:before,h2:after{font-family:"Somecoolfontwithglyphs",serif;content:"0d7";/*Somefancycharacter*/color:#c83f3f;}h2:before{margin-right:10px;}h2:after{margin-left:10px;}制造扫瞄器宽度的条

当你必要元素，它的内容很很少，可是你必要它的背景能够添补全部宽度，你一般接纳的做法是追加一个没有语义的外部包括容器，大概利用一个能够反复空间界说。大概你能够经由过程利用一个元素，将他的伪类元素延长到边沿。simulatetheeffect
给body标签加边框

想在页面的摆布增添一个划定规矩的边框，并利用流动地位的伪类元素将条界说在头部和顶部，我们可使用“bodyborder”effect而其实不必要利用分外的标签。
123456789101112131415161718body:before,body:after{content:"";position:fixed;background:#900;left:0;right:0;height:10px;}body:before{top:0;}body:after{bottom:0;}body{border-left:10pxsolid#900;border-right:10pxsolid#900;}制造有发光的按钮

假如你利用块伪类元素，并让它们有从通明到红色，并将他们定位到按钮以外（经由过程overflow埋没），当鼠标悬浮的时分经由过程利用动画效果你就会发明按钮有了光感。这个效果你能够在Firefox4大概Firefox5利用了，由于这是今朝独一同意给伪类元素增添动画效果的扫瞄器。
AntonTrollb

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

: 登录/注册后可看大图

作者: 变相怪杰 时间: 2015-1-17 20:51
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 小魔女 时间: 2015-1-26 22:47
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小女巫 时间: 2015-2-5 06:12
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 深爱那片海 时间: 2015-2-11 07:54
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 冷月葬花魂 时间: 2015-3-2 01:05
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 老尸 时间: 2015-3-11 04:05
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 山那边是海 时间: 2015-3-17 22:09
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 愤怒的大鸟 时间: 2015-3-25 08:13
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

欢迎光临仓酷云 (http://www.ckuyun.com/)