为您找到搜索结果：1786个
css before和after伪元素应用
1、说明":before"伪元素可以在元素的内容前面插入新内容。":after"伪元素可以在元素的内容之后插入新内容。伪元素默认展示为inline，即display:inline; 必须写content属性，不然伪类不起作用！ 2、兼容性伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。兼容性查看：http://caniuse.com/#search=%3Abefore从上图看见：IE8浏览器只支持单冒号写法，不支持双冒号写法，因此建议before和after伪元素采用单冒号写法。3、应用（1）清除浮动 .clearfix:after{content:"";display:table;}.clearfix:after{clear:both;} （2）添加美化图标如清除ulli显示默认的小黑点，添加美化的符号<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>css伪元素应用--添加美化图标</t...
SCSS 实用知识汇总
1、变量声明$nav-color:#F90;nav{//$width变量的作用域仅限于{}内$width:100px;width:$width;color:$nav-color;}.a{//报错，$width未定义width:$width;}2、父选择器&scss代码：articlea{color:blue;&:hover{color:red}}编译后为：articlea{color:blue;}articlea:hover{color:red;}父选择器的另外一个用途，可以在父选择器之前添加选择器，如处理IE的hack，在html或者body上添加ieclass。示例代码：#contentaside{color:red;body.ie&{color:green}}编译后为：#contentaside{color:red;}body.ie#contentaside{color:green;}3、群组选择器.container{h1,h2,h3{margin-bottom:.8em}}编译后：.containerh1,.containerh2,.container...
CSS实现水平垂直居中方式
1、定位核心代码实现请看示例代码中的注释：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>CSS水平垂直居中实现方式--定位实现</title><styletype="text/css">*{margin:0;padding:0;}.p{/*父元素为除了static以外的定位方式*/position:relative;/*position:absolute;*//*position:fixed;*/width:500px;height:500px;border:1pxsolidred;}.c{/*子元素为绝对定位*/position:absolute;width:200px;height:200px;/*top、bottom、left和right均设置为0*/top:0;bottom:0;left:0;right:0;/*margin设置为auto*/margin:auto;border:1pxsolidgreen;}<...
CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。示例代码：<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><title>CSS高级选择器使用</title><style>*{padding:0;margin:0;}/*IE8不支持IE9支持*/li:nth-child(3n+1){color:red;}/*IE7+以上浏览器均支持*/li:first-child{color:blue;}/*IE8不支持IE9以上支持*/li:last-child{color:green;}/*IE8不支持IE9以上支持*/li:nth-of-type(odd){color:#8D8D8D;}/*IE8不支持IE9以上支持*/li:first-of-type{color:#92B8B1;}/*IE8不支持IE9以上支持*/li:last-of...
CSS编写规范
一、面向对象CSS（OOCSSS）OOCSS规则一：结构和皮肤分离如.btn， .btn-info，.btn-warning.btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;background-image:none;border:1pxsolidtransparent;white-space:nowrap;padding:6px12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.btn-info{color:#ffffff;background-...
检测和删除多余无用的css
本文主要讲解如何检测页面中多余无用的css。1、chrome浏览器F12审查元素的Audits说明：使用Audits，会检测出页面中没有用到的css，需要手动删除多余的css；同时需要说明的是检测出多余无用的css块，而不是某一行css。2、CSSusage插件（1）安装Firefox浏览器（2）安装firebugFirefox浏览器--添加附件--搜索插件--安装 （3）安装cssusage步骤同安装firebug一样。（4）检测重要说明：可以导出干净的css 总结：以上2种方法都是检测多余的css代码块。有无检测每一行是否多余的插件或者工具呢？后续继续研究。 ...
css 实用代码汇总
1、table排版（防止td文字过多导致table变形）table{/*为表格设置合并边框模型*/border-collapse:collapse;border-spacing:0;/*固定表格布局*/table-layout:fixed;}td{/*允许在单词内换行。*/word-break:break-word;} 2、持续更新...
CSS3 GPU硬件加速
1<!DOCTYPEhtml>2<htmllang="zh-CN">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">7<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>8<title></title>9<metaname="keywords"content="##，##，##，##，##，##">10<metaname="description"content="###....">11<metaname="format-detection"content="telephone=no,email=no">12<metaname="a...
CSS3 transition 浏览器兼容性
1、兼容性根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示： 1<!DOCTYPEhtml>2<html>3<head>4<style>5div6{7width:100px;8height:100px;9background:blue;10transition:width2s;11-moz-transition:width2s;/*Firefox4*/12-webkit-transition:width2s;/*SafariandChrome*/13-o-transition:width2s;/*Opera*/14}1516div:hover17{18width:300px;19}20</style>21</head>22<body>2324<div></div>2526<p>请把鼠标指针移动到蓝色的div元素上，就可以看到过渡效果。</p>...
CSS实现垂直居中的方法
(1)css+html代码1<!doctypehtml>2<htmllang="en">34<head>5<metacharset="UTF-8"/>6<title>Document</title>7<styletype="text/css">8*{9margin:0;10padding:0;11}1213.parent{14width:400px;15height:400px;16margin:100px;17border:1pxsolidred;18position:relative;19}2021.child{22width:200px;23height:200px;24border:1pxsolidgreen;25position:absolute;26top:0;27left:0;28right:0;29bottom:0;30margin:auto;31}32</style>33</head>3435<body>36<divclass="parent"...
php 前端自动更新css和js，防止页面缓存
<?phpfunctionautoVer($url){$ver=filemtime($_SERVER['DOCUMENT_ROOT'].$url);echo$url.'?v='.$ver;}?><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title><blockname="title"></block></title><linkhref="<?phpautoVer('__DATA_CENTER_CSS__/info.css')?>"rel="stylesheet"type="text/css"/><linkhref="<?phpautoVer('__DATA_CENTER_CSS__/admin.css')?>"rel="stylesheet"type="text/css"/></head>...
CSS 表头不设置hover，tr:hover覆盖td的背景色
如果td有背景色tr:hover覆盖td的背景色tr:hovertd{background:#B6E8Ea;}======================================================================================================tr:hover会hover到表头，可以这样设置表第一行的背景色，使用hover影响不到第一行tr:nth-of-type(1):hovertd{background:#f0f0f0;}...
关于 css padding 的使用 padding会将使用该属性的元素撑开
.right_img_box{width:300px;height:250px;border:1pxsolid#c9c9c9;margin-bottom:15px;background:#fff;padding:7px;}.right_aimg{width:300px;height:210px;} 使用padding后right_aimg图片大小不变，right_img_box本来是300px，会被撑大到300+左padding7px+右padding7px+2*border的1px共316px。...
Vue笔记：引入animate.css
转载：https://www.cnblogs.com/cbpm-wuhq/p/12753312.html在命令行中执行：npminstallanimate.css--savemain.js中：importanimatedfrom'animate.css'//npminstallanimate.css--save安装，在引入Vue.use(animated)在div样式class中加*代表所有的动画样式,可自由选择class="animated*"class="animatedwobble"//左右强晃动fade:{title:'淡入淡出',fadeIn:'淡入',fadeInDown:'向下淡入',fadeInDownBig:'向下快速淡入',fadeInLeft:'向右淡入',fadeInLeftBig:'向右快速淡入',fadeInRight:'向左淡入',fadeInRightBig:'向左快速淡入',fadeInUp:'向上淡入',fadeInUpBig:'向上快速淡入',fadeOut:'淡出',fadeOutDown:'向下淡出',fadeOutDownBig:'向下快速淡...