css
文章平均质量分 81
Zoe_Wang_ing
这个作者很懒,什么都没留下…
展开
-
CSS中存在一些比较特殊的属性,伪类,伪元素
CSS中存在一些比较特殊的属性,称之为伪类,伪元素。定义链接的伪类:link,:visited,:hover,:active等。不被常使用的伪类,有:focus,:first-child,:lang等。伪元素,比如::first-letter,:first-line,:before和:after。a:link {color:#ff0000} /*未访问的链接*/a.one:原创 2013-11-19 11:24:38 · 1356 阅读 · 0 评论 -
左右等高div
$(function(){ equalHeight($('.content_left'),$('.content_right')); }) function equalHeight(left,right){ var lh = left.height(); var rh = right.height(); if(lh<rh){ left.css("h原创 2013-12-18 17:59:07 · 631 阅读 · 0 评论 -
纯CSS实现侧边栏/分栏高度自动相等
转载:http://www.zhangxinxu.com/wordpress/?p=694by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694一、为何要分栏高度一致?分栏高度一致的目的是更加美观。举两个例子吧。① 对于分栏转载 2013-12-18 16:37:13 · 1723 阅读 · 0 评论 -
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
转载:http://www.cnblogs.com/myitm/archive/2011/05/17/2048850.htmlCSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 powered by 25175.ne转载 2013-12-19 14:57:59 · 1742 阅读 · 0 评论 -
纯css三角效果
转载:http://www.w3cplus.com/code/303.htmlhtml代码如下:div class="arrow-up">div>div class="arrow-down">div>div class="arrow-left">div>div class="arrow-right">div>css代码如下:.arrow-up {转载 2013-12-20 10:35:14 · 621 阅读 · 0 评论 -
兼容浏览器的inline-block
.inlineblock{ display:inline-block; *display:inline; *zoom:1;}转载:http://www.w3cplus.com/code/304.html转载 2013-12-20 10:40:22 · 501 阅读 · 0 评论 -
css+js教你实现一个动态颜色变化的圈中圈
转载:http://www.icodein.com/codein/code_77.html circle .circle { border-radius:50%; background:#DDDDDD; } .circle_inside转载 2014-02-11 10:03:37 · 1975 阅读 · 0 评论 -
重设浏览器默认样式
转载:支付宝base 样式@charset "utf-8"; /* @名称: base @功能: 重设浏览器默认样式 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */html{ color:#000;background:#fff; -webkit-text-size-adjust: 100%; -m转载 2014-04-02 10:06:11 · 729 阅读 · 0 评论 -
页面变灰
html{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,#grayscale")转载 2014-03-25 14:57:38 · 691 阅读 · 0 评论 -
进度条动态加载
动画效果animateul li{ list-style:none;}.expl li{ line-height:30px;}.expl .per{ height:10px; width:60%; font-size:0; line-height:0; overflow:hidden; float:left; display:inline; background:转载 2013-12-11 10:15:02 · 1322 阅读 · 0 评论 -
jquery 点击切换面板及图标
将背景颜色换成背景图无标题文档.finance{ border-bottom:none;}.finance dd{ line-height:48px; color:#0e4f71; padding:5px 0; border-bottom:1px solid #eaeaea; background:#ffffff;}.finance dd p{ paddin原创 2013-12-03 13:04:49 · 2526 阅读 · 0 评论 -
content = "IE=edge,chrome=1" 详解
meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />X-UA-Compatible 是IE8专有标记。这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:但令我好奇的是转载 2013-11-06 15:32:40 · 715 阅读 · 0 评论 -
利用css中的border生成三角,兼容包括IE6的主流浏览器
转载:http://www.36ria.com/demo/triangle/1、生成四个不同颜色方向的梯形代码#ladder{ width:20px; height:20px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00; }转载 2013-11-21 10:47:53 · 1020 阅读 · 0 评论 -
CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及转载 2013-11-08 13:23:22 · 832 阅读 · 0 评论 -
CSS3 backface-visibility 属性
实例隐藏被旋转的 div 元素的背面:div{backface-visibility:hidden;-webkit-backface-visibility:hidden; /* Chrome 和 Safari */-moz-backface-visibility:hidden; /* Firefox */-ms-backface-visibility:hidden; /* I转载 2013-11-08 14:31:39 · 2875 阅读 · 0 评论 -
js 循环滚动
上下滚动body{ margin:0; padding:0;}div{ width:306px; height:128px; margin:50px auto auto auto; padding:0; position:relative; overflow:hidden;}ul{ margin:0; padding:0; width:9999em;}ul原创 2013-11-08 10:56:57 · 772 阅读 · 0 评论 -
CSS3 background-size:[length|percentage|auto]{1,2}|cover|contain
转载:http://demo.doyoe.com/css3/background-size/CSS3 background-size:[length|percentage|auto]{1,2}|cover|contain浏览器参照基准:Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and L转载 2013-11-08 14:22:50 · 1129 阅读 · 0 评论 -
背景图做幻灯片
修改别人的作品上下滚动body, input, button, select, textarea, th, td,div,font {color: #333333;font-family: tahoma,arial,sans-serif;font-size: 12px;line-height: 1.5; font-family:"微软雅黑";}img{ border:none}u转载 2013-11-13 18:01:44 · 942 阅读 · 0 评论 -
jQuery插件 -- Form表单插件jquery.form.js
转载:http://blog.csdn.net/zzq58157383/article/details/7718956#commentsjQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到转载 2013-11-14 14:49:30 · 1405 阅读 · 0 评论 -
margin 负值应用
转自:http://www.topcss.org/?p=94 有改动转载 2014-06-24 13:29:40 · 683 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2357一、现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~我们使用CSS更改非inlin转载 2014-06-26 17:05:52 · 521 阅读 · 0 评论 -
学习CSS了解单位em和px的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为1、IE无法调整那些使用px作为单位的字体大小;2、国外的大部分网站能够调整的原因在于其使用了em转载 2014-06-26 15:46:49 · 491 阅读 · 0 评论 -
Google Fonts导致WordPress 速度问题的三个解决方案
Google Fonts导致WordPress 速度问题之原因WordPress 自3.9+版本后加入了Google Fonts(别问我Google Fonts是什么了),然后捏,因为近期敏感周期(35号),天朝发威,谷歌的一系列网站被彻底墙,包括Google Fonts 所在的googleapis.com 。所以,如果是在登陆状态下打开你的WordPress 站点,会非常慢,因为压根儿加转载 2014-11-12 16:53:01 · 1391 阅读 · 0 评论 -
web前端性能优化
转载:http://www.phpv5.com/blog/web-front-optimize减少http 请求合并js css, 图片减小传输的内容http请求数量已经足够少了, 我们还可以在减小传输内容的方面做一些文章, 比如:压缩 js css , 在质量达到期望的前提下压缩图片。启用gzip 压缩.使用浏览器缓转载 2014-10-16 14:09:47 · 589 阅读 · 0 评论 -
详解CSS中:nth-child的用法
转载:http://www.daqianduan.com/3737.html转载 2014-11-04 09:26:59 · 1059 阅读 · 0 评论 -
foot 固定底部 不用绝对定位
from:http://paranimage.com/css-sticky-footer/转载 2015-01-05 09:58:00 · 3589 阅读 · 0 评论 -
修改 input[type="file"] 原生样式
图片 --> /*上传头像*/.h-upload{ .bsb(); position:relative; input[type="file"]{ opacity:0; position:absolute; top:0; left:0原创 2015-01-06 11:39:19 · 3107 阅读 · 0 评论 -
使用CSS表达式去除超链接的虚框的一些方法
from:http://www.zhufengpeixun.cn/jishuziliao/CSS3heHTML4zhuanti/2014-05-08/292.html去除超链接的虚框的一些方法 1. a{ blr:expression(this.onFocus=this.blur());/*IE使用*/ outline-style:none;/*FF使用*/转载 2015-03-04 15:34:55 · 639 阅读 · 0 评论 -
前端CSS规范大全
from: http://www.w3cfuns.com/article-5596764-1-1.html文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。 一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解:所有的CSS分为转载 2015-05-08 18:21:38 · 629 阅读 · 0 评论 -
css中border:none;与border:0;的区别说明
这问题在网络相信已经有不少人问到,最近再次被牵起讨论,籍此记录一下个人的理解,border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。1.性能差异【border:0;】把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了转载 2015-05-29 11:07:21 · 822 阅读 · 0 评论 -
禁用a链接
在bootstrap中,a链接 加上 class=".btn" 时,给a链接 disabled 属性 可实现禁用 a 链接(包括 a链接的 onclick事件)在平时应用 a 链接时,ie8 到 ie11 支持 disabled 属性,且 可以 禁用 a 链接(包括 a链接的 onclick事件)后经本人各种虐,终于虐出了原因,发现了一个css3 新生属性 pointer-even原创 2014-10-24 16:26:09 · 4945 阅读 · 0 评论 -
CSS background-attachment 属性
转自:http://www.dreamdu.com/css/property_background-attachment/background-attachment -- 定义背景图片随滚动轴的移动方式取值: scroll | fixed | inheritscroll: 随着页面的滚动轴背景图片将移动fixed: 随着页面的滚动轴背景图片不会移动inher转载 2014-08-27 09:45:22 · 920 阅读 · 0 评论 -
准确理解CSS clear:left/right的含义及实际用途
转载:http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/转载 2014-06-26 16:46:38 · 1192 阅读 · 0 评论 -
自定义下拉菜单
css/*select*/.select_wrap1{ position:relative; z-index:10;}.select_box{ position:absolute; margin:-34px 0 0 122px; width:127px; height:28px;}.select_box2{ position:absolute; margin:-34p转载 2014-07-22 18:24:46 · 638 阅读 · 0 评论 -
Web页面中八种创建多列等高(等高列布局)的实现技术
一、假等高列这种方法是我们实现等高列最早使用的一种方法,就是使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像:Html Markup 复制代码代码如下:在制作样式之前需要一张类似下面的背景图:CSS Code: 复制代码代码如下:.c转载 2014-08-04 14:45:54 · 951 阅读 · 0 评论 -
CSS用省略号实现文字自动截断
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">css文字截断____dowhatyouwantbody{background-color:#f4f4f4;font-size:12px;}.text-overflow{wi转载 2014-09-05 12:35:44 · 718 阅读 · 0 评论 -
CSS实现连续数字和英文的自动换行
转自:http://www.cnblogs.com/luluping/archive/2010/12/25/1916431.html对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行: html正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-sp转载 2014-09-05 12:50:28 · 1016 阅读 · 0 评论 -
CSS3 经典教程系列——CSS3 RGBA 用法详解
转自:http://www.cnblogs.com/lhb25/archive/2013/01/28/css3-rgba-tutorials.html转载 2014-08-21 16:10:48 · 627 阅读 · 0 评论 -
checkbox 引用样式用jQuery实现选中
记住密码原创 2014-08-11 17:29:27 · 1491 阅读 · 0 评论 -
jQuery操作checkbox选择
转自:http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html转载 2014-08-11 17:32:21 · 559 阅读 · 0 评论