给大家带来CSS的伪元素:标签div:before、div:after

一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
破洛洛文章简介：CSS伪元素before、after妙用：制造时髦核心图相框
在css标签中有如许子的标签div:before、div:after，关于before、after来讲有部分人是相称生疏的，那末这两个标签是甚么呢？有甚么用途？
:befor、:after是CSS的伪元素，甚么是伪元素呢？伪元素用于向某些选择器设置特别效果。
我们用CSS手册能够查询到其基础的用法：

• E:before/E::before设置在工具前（根据工具树的逻辑布局）产生的内容。用来和content属性一同利用
  
• E:after/E::after设置在工具后（根据工具树的逻辑布局）产生的内容。用来和content属性一同利用
  
• Ie6-7不撑持
  

既然说到了before、after，那末我们也要也许的懂得下content，content用来和:after及:before伪元素一同利用，在工具前或后显现内容。基础的用法以下：

1. div:after{content:恣意字符串;}

复制代码

如今我们也许晓得before和after的也许用法了，那末我们就能够在元素的内容之前大概以后拔出新内容。而拔出的内容我们也能够用css款式来加以把持和丑化。大概在寻常中如许子的标签用途不年夜，可是存期近是真谛，哈哈，一定有他的妙用的地方，明天就来看看使用before和after制造的一个创意的时髦核心图相框，今后制造这类边框线的时分我们能够完整丢弃图片的做法，并且做出来的十分的优美。
制造思绪和办法：

1、在图片层加多一层div，设置1像素的边框线，边框线有高低摆布四条边框，而我们想要的只是每两条边框线构成的相似小三角形的外形，那末我们只需把四条边框线的两头部分往失落，那不就完成了我们的效果。那我们应当怎样把四条边框线两头部分往失落？大概用甚么器材把他挡住，不让他显现出来？办理举措就是，我们晓得before和after伪元素能够在元素之前大概以后增加新的内容，那我们就使用这两个伪元从来挡住四条边框线的两头部分。
2、我们先往失落摆布双方的边框线，在边框层，使用before伪元素，利用css款式的定位，设置红色边框，为何要红色的边框呢？由于要把之前的摆布边框两头部分遮失落，色彩设置成和背景致（本例的背景为红色背景）分歧，如许子看起来就相称于两头部分被裁剪失落了。
3、我们持续往失落高低两条边框线，办法同上，使用after伪元素，利用css款式的定位，设置为红色边框，遮失落高低边框线的两头部分。如许子一来，基础的外形就呈现了
4、丑化步骤，调剂我们的细节，边框线调剂为虚线。

懂得了基础的思绪和办法，是否是很复杂呢？那我们就入手下手下手写代码吧。
HTML代码：

1. <divclass="content"><ul><li><ahref="http://www.jiawin.com"target="_blank"></p></a></li><li><ahref="http://www.jiawin.com"target="_blank"></p></a></li></ul></div>

复制代码

CSS款式代码

1. .content{width:788px;margin:auto;height:auto;overflow:hidden;padding:30px;}.contentulli{float:left;height:176px;border-right:1pxsolid#DDDDDD;position:relative;padding:10px;}.focus{background:rgba(250,250,250,0.25);width:174px;height:174px;border:1pxdashed#666;position:absolute;left:10px;top:10px;display:none;}.focus:before{width:174px;height:134px;border-left:1pxsolid#fff;border-right:1pxsolid#fff;content:;position:absolute;left:-1px;top:20px;}.focus:after{width:134px;height:174px;border-top:1pxsolid#fff;border-bottom:1pxsolid#fff;content:;position:absolute;top:-1px;left:20px;}.contentulli:hover.focus{display:block;}#noborder{border-right:0none;}

复制代码

经由过程这个例子是否是很便利的把这个效果做出来了呢？并且看看我们的代码，是否是很简便呢！哈哈……也许另有更好的办法来完成，我们能够一同切磋。我团体感到实在div+css是很好的一门很简单手上可是功效性很强的手艺，并且他很好玩很风趣。使用你的奇思妙想，你能够做出各类意想不到的效果。等候你的作品哦。
</p>
对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。