为了给HTML文档优化，减少空标签的使用，使布局看起来更加的完善，使用：before;：after等伪元素是非常有必要的，配合伪元素的content和background来写效果，并使用css3进行修饰，能够写出许多非常精美的效果。

　　1、string

　　使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}

　　2.清除浮动

　　清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动。

　　：after{content“”;display：block;clear：both;｝

　　3、模拟float:center的效果

　　float没有center这个取值，但是可以通过伪类来模拟实现。

　　这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

　　4、给blockquote添加引号

　　经常用到给blockquote 引用段添加巨大的引号作为背景，可以用 ：:before 来代替 background。好处是即可以给背景留下空间，还可以直接使用文字而非图片。

　　在css3中能实现许多本来需要切图的效果，锻炼css3的技巧会显得尤为重要。

　　接下来，就举例来说明css3写三角形(为了好区分姑且按方向区别)。

　　(1)上三角形：

　　border: 16px solid transparent;

　　border-bottom: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(2)下三角形：

　　border: 16px solid transparent;

　　border-top: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(3)右三角形：

　　border: 16px solid transparent;

　　border-left: 16px solid #f00;

　　width: 0;

　　height: 0;

　　(4)左三角形：

　　border: 16px solid transparent;

　　border-right: 16px solid #f00;

　　width: 0;

　　height: 0;

　　学习Web前端编程是一个漫长的过程，在千锋哈尔滨前端培训班学习到的知识能够帮助我们高薪就业。但是，想要在这条路上走下去，想要走的更加高远，还要继续努力，保持热情，保持对知识的渴求!

上一篇

千锋哈尔滨Web前端培训学员心得 学好JS前端编程便不难

下一篇

千锋哈尔滨Web前端培训学员心得 学编程虽辛苦但值得