常用CSS样式(持续更新)

一、标签 1、ul同一行显示     ul为无序列表,ol为有序列表,li为列表元素 ul:list-style:none // 每行的样式,有圆形等 li:float:left // 默认占行排列 二、宽高 1、强制宽高 div{width:100%!important; height:100%!important;} 三、样式 1、透明度 background-color:rgba(0,0,0,0.5); 2、div并排显示 一、css…

Continue Reading →

Posted in: CSS

::before和::after伪元素的用法

一、前言 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。 所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。 举例:网站有些联系电话,希望在它们前加一个icon☎,就可以使用:before伪元素,如下: <!DOCTYPE html> <meta charset=”utf-8″ /> <style type=”text/css”> .phoneNumber::before { content:’\260E’; font-size: 15px;…

Continue Reading →

Posted in: CSS

CSS3中-moz、-ms、-webkit,-o的含

一、介绍 这种方式在业界上统称:识别码、前缀 //-ms代表【ie】内核识别码 //-moz代表火狐【firefox】内核识别码 //-webkit代表谷歌【chrome】/苹果【safari】内核识别码 //-o代表欧朋【opera】内核识别码 二、用法 -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg); -o-transform:rotate(7deg); transform:rotate(7deg); //统一标识语句,符合w3c标准 三、为什么要加识别码 在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性。 四、再进一步看前缀对应的内核 Gecko内核,css前缀为”-moz-“,火狐浏览器 WebKit内核,css前缀为”-webkit-“,Comodo Drangon(科摩多龙),苹果,安卓,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器…

Continue Reading →

Posted in: CSS