:after伪类+content 清除浮动的影响 .box{padding:10px; background:gray;} .l{float:left;} <div class="box"> <img class="l" src="http://image/imagemm1.jpg" /> </div> .fix:after{display:block; content:"clear"; h…

一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 例如下…

一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 例如下…

:after伪类+content 清除浮动的影响 浮动元素会让此div的高度塌陷.如下例子: .box{padding:10px; background:gray;} .l{float:left;}   <div class="box fix">     <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> </d…

如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; text-align: center; font-size:; //父元素设置为0祛除换行符或空格 } .box img { vertical-align: middle; } .box span { font-size: 20px; width: 220px; display: inline-bl…

原文转载于:https://www.cnblogs.com/wujindong/p/5630656.html 项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF; display: inli…

CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. 超链接 - :focus 的使用 本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作). :first-child(首个子对象) 本例演示 :first-child 伪类的用法. :lang(语言) 本例演示 :lang 伪类的用法. 语法 伪类的语法: selector : ps…

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m…

说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码量.开发网页代码的效率也极大提高,今天我就跟大家分享一下学习css伪类的一些小经验. 对于开始接触css的朋友来说,在看其他人的代码的时候会经常看到 :hover,:foucs,:before,:after等相关代码,其实这些就是css伪类代码.简单来说应用css伪类就是增加了一个块. 接下来我们看…

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类 伪类选择器分为两种. (1)静态伪类:只能用于超链接的…