w3cplus

有关于美化图片的教程，W3cplus有好几篇了，比如说《 CSS3制作图片样式 》、《 jQuery和CSS3给图片制作圆角 》这两篇是针对于美化图片圆角效果的教程，昨天在《 CSS美化图片 》一文中介了使用标签给图片设置朦板效果。 《 CSS美化图片 》制作原理是通过给元素添加一个额外的标签，比如说“span”标签，或者能过jQuery的append函数给元素添加标签，在把将此标签运用朦板背景图片定位在图片元素之上，达到美化图片的效果。今天要和大家分享一种新的方法，基于《 CSS美化图片 》介绍的理论之上，把里面的“span”标签去掉，同时使用CSS3中的伪元素“::before”和“::after”或者CSS3的伪类选择器“:before”和“:after”来代替增加的标签“span”，接着将运用在span上的样式转架嫁到伪元素或者伪类选择器上。下面我们一起来学习一下这种制作方法与CSS方法有何不一样？ DEMO DOWNLOAD HTML结构的变化 首先来简单的回忆一下《 CSS美化图片 》介绍的结构，如图所示： 那么今天要介绍的方法，关键之处是不需要这个额外增加的“span”标准，此时结构就改成了： <div class="photo"> <a href=""> <img src="xxx.jpg" alt="" /> </a> </div> “span”标签去掉了

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在上一篇《 Web布局连载——两栏固定布局（四） 》中留了一个下文，“No div, no float, no clear, no hack”。看起来很有意思，这种没有div，没有float，没有清除浮动和没有hack的布局，还是看到的少数，当然除了 table布局。因为table布局是不需要使用前面说的几个部分。那么今天我们要讲的布局是不是table布局呢？欲想知道，那就一起随着往下看吧。 首先今天这个布局的思路是来自于 sneak peek 的《 No div, no float, no clear, no hack*, no joke! 》一文。虽然整个页面看到不到table的有关标签，但是其布局的原理却是和table一模一样。那么我们实现如下所示的效果，究竟要怎么来写呢？ 既然原理是来自于表格，那么表格的结构，我想不用我在这里多说，大家应该都知道，如果您不知道，那加紧补习一下html中的表格标签相关应用。表格用于布局，最大的时候是整个页面都是table，而且table里还有table，层层关系是那个复杂呀，头痛。可今天要说的，我们只是运用table的原理来布局，而且只是运用在分栏部分。具体的我们来看： HTML结构 <div id="wp"> <div id="hd">Header</div> <div