CSS
shitouPlus
做一个徘徊在牛A与牛C之间的人
展开
-
css优先级
css样式分为:外部样式,内部样式,内联样式选择器优先权:1. 内联样式表的权值最高 1000;2. ID 选择器的权值为 1003. Class 类选择器的权值为 104. HTML 标签选择器的权值为 1CSS 优先级法则:A 选择器都有一个权值,权值越大越优先;B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;C原创 2015-07-08 14:25:41 · 350 阅读 · 0 评论 -
animate.css强大的动效库
这是一个非常强大炫酷的css3动画库,使用时只需要引入相应的class 就行了。http://daneden.github.io/animate.css/演示地址原创 2015-11-06 19:08:58 · 838 阅读 · 0 评论 -
Bootstrap框架学习
Bootstrap不愧是最流行的前段框架,简单确功能强大,扩展丰富,基本满足了界面开发所需的一切。响应式的布局也很方便,但是不怎么实用,将网格分为12列是不能满足不同的界面开发需要的。同时兼容性也是一个很大的问题,最新版本已经不支持IE8了,这让广大的ie6,7,8用户情何以堪。Bootstrap中文网(很赞的学习途径):http://v3.bootcss.com/原创 2015-10-07 15:29:51 · 322 阅读 · 0 评论 -
53种纯CSS3炫酷loading指示器动画特效
加载动画如果不想用用gif图实现的话,不妨试试css3动画,效果很是很酷的原创 2015-11-06 19:33:37 · 752 阅读 · 0 评论 -
grunt修行之路
看了一下grunt的教程真的很强大,功能也很全面,需要的功能都能找到,学习成本也很低,里面的插件真的太方便,用uglify插件压缩js代码真的太实用了,而且轻轻松松配置,又拾得一个新技能,前端还有好多东东要学啊,加油!一个grunt教程,看完之后使用grunt应该就没什么问题了原文链接:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程原创 2015-10-07 23:01:21 · 339 阅读 · 0 评论 -
jQuery EasyUI初体验
看了一下EasyUI的api,功能也很强大,几乎不需要怎么写js代码就能把功能实现,但是界面一般,不是很美观,面板组件也不是很多,但是对于需要处理大量数据的CRUD应用却十分方便,所以没有一种框架是完美的,需要根据需要取舍,前端框架实在太多了,学习之路还要继续。推荐一个学习的地址:jQuery EasyUI中文网在线demo:EasyUI demo原创 2015-10-07 23:36:58 · 402 阅读 · 0 评论 -
强大的移动web前端框架zeptojs
移动端web越来越流行,各种移动端框架也应运而生,这里推荐一下比较流行的zeptojs.zeptojs比较适合移动端web的设计,它的初衷就是移动端jQuery框架,所以语法和jQuery非常相似,如果你会jQuery的话,那么学习zeptojs将会很容易,其次由于精简了很多模块,所以体积比较小,所有模块整合在一起之后也只有30+多KB比较适合移动端浏览器,它的触屏和手势事件支持的原创 2015-10-08 18:59:57 · 971 阅读 · 0 评论 -
让边框带阴影
要实现的效果如图:这种边框效果通过单一的border设置是不能显示此效果的,需要配合使用border-left和border-right来显示需要的效果。border-right: 1px solid #0065B0;border-left: 1px solid #0080DD;通过左右边框设置不同的颜色,通过叠加显示出阴影效果。原创 2015-09-20 23:21:46 · 391 阅读 · 0 评论 -
BFC原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,转载 2015-10-26 12:21:34 · 389 阅读 · 0 评论 -
margin collapsing现象
读过李松峰老师翻译的新书中《CSS设计师指南(第3版》的外边距叠加部分( http://www.ituring.com.cn/article/16969)实在是有些捉急啊,这地方实在是有些没写到位,也有错误(如“叠加的只是垂直外边距,水平外边距不叠加”)margin collapsing现象BFC(block formatting context)中相邻的两个block-level转载 2015-10-26 13:26:01 · 359 阅读 · 0 评论 -
overflow清除浮动
在使用Div+Css布局的时候我们所面临的共同问题之一是,包装容器不扩到子元素的浮动元素的高度。你也可以使用overflow属性来解决这个问题 ?这不是一个新的CSS技巧。今天,我想重新拾起这几个技巧的话题。演示地址:http://webdesignerwall.com/demo/clear-float/ 演示1: 下面的演示中显示的浮动子元素在父容器高度不自动适转载 2015-10-26 11:07:50 · 796 阅读 · 0 评论 -
分享一个css浏览器兼容重构代码
@charset "utf-8";body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,p,pre,code,form,fieldset,legend,input,button,textarea,blockquote { margin: 0; padding: 0}table { border-collapse: collapse; border-sp原创 2015-11-12 13:25:43 · 458 阅读 · 0 评论 -
<li><img>标签之间空隙解决办法
第一,给图片img标签display:block。 Example Source Codeimg{display:block}第二,定义容器里的字体大小为0。 Example Source Codediv { width:110px; border:1px solid #000000; font-size:0 }第三,定义图片img标签ver转载 2015-10-29 09:26:49 · 4095 阅读 · 0 评论 -
边框border的特殊应用
边框是经常用到的属性,但是有时候却很让人抓狂,比如这种情况边框带有阴影,hover之后白色的方块被后面的遮挡一部分,这就比较恼火了,阴影边框本来应该是admin有边框是border-left: 1px solid #0080DD;退出那部分有边框1px solid #0065B0,然后产生一个阴影效果,但是这样做使得hover时边框会被覆盖,需要些很多css样式原创 2015-10-14 09:02:36 · 405 阅读 · 0 评论 -
7款本地搭建PHP环境工具推荐
通常在开发PHP程序时,需要用到服务器环境来调试自己的页面。有时候仅仅是为了学习PHP程序开发,如果是出于这样的理由去购买一个空间或者服务器是完全没必要的。本文推荐7款目前主流的PHP集成环境工具,可以快速的在电脑上搭建服务器环境,无需再逐个的安装与配置服务器程序。1. XAMPPXAMPP是一款比较强大的本地测试平台,它集成了必须的三个功能,还带有 FileZilla,软转载 2015-10-14 21:39:20 · 933 阅读 · 0 评论 -
插件推荐Echo.js 简单易用的图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件。Echo.js 不依赖第三方库,压缩后不到1KB大小。 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视区域的时候,它就会改变图像的 src 属性,从服务端加载所需的图片,这也是一个异步的过程。您可能感兴趣的相关文章那些让人惊叹的的国外创意404错误页面设计让人爱不释手的精美转载 2015-10-15 00:39:45 · 358 阅读 · 0 评论 -
ie css3兼容方法之 ie 滤镜
https://msdn.microsoft.com/en-us/library/ms533087(v=vs.85).aspx这是官网地址css3在ie6,7,8的兼容性很差,这时候可以用ie自带的滤镜来实现效果,比如阴影,透明度,1.Alpha,调整对象内容的不透明度。语法:filter:progid:DXImageTransform.Microsoft.Alpha(原创 2015-11-05 20:08:22 · 1187 阅读 · 0 评论 -
css hack大全
CSS hack分类CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\原创 2015-10-21 00:30:05 · 396 阅读 · 0 评论 -
图片墙效果
每天写点小demo,每天进步一点点原创 2015-06-14 00:00:57 · 486 阅读 · 0 评论 -
前端编码规范
前端编码规范 by @mdo原创 2015-07-26 19:31:17 · 442 阅读 · 0 评论 -
display:inline-block空白间距的去除和兼容问题
网页布局中使用float的问题有很多,比如高度坍塌。那么有没有一种可以替代float的方法呢?我们首先想到的就是display:inline-block inline-block不仅可以替代float而且没有脱离文档流,简化了布局,但仍然有兼容问题,就是水平空白间距网上有很多种解决方案,我个人比较赞同的方案是 :改变html结构,省略关闭标签如果是手写页面的原创 2015-07-18 19:34:39 · 788 阅读 · 0 评论 -
纯css画三角形/梯形(兼容ie6)
代码很简单也很容易理解,及用css盒模型来实现效果实例:宽高为0的话是三角形,否则是梯形 Document .triangle{ width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-wid原创 2015-07-18 19:40:46 · 1160 阅读 · 0 评论 -
使用tabindex属性是的标签具有onblur,onfocus方法
默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的,经我长久论证因为他们不具有tab属性,所以只要我们创建tab,那么任何标签都可以具有tab属性。什么标签具有tab呢?显然input和a是得天独厚的具有,我们经常用键盘上的tab键进行移动光标的时候,我们发现光标只在具有tab属性的元素上进行跳转。我们现在来让div拥有tab并具有onfucus和o转载 2015-09-08 17:49:23 · 1018 阅读 · 0 评论 -
解析offsetHeight,clientHeight,scrollHeight之间的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。clientHeight大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式为c转载 2015-09-09 16:00:38 · 340 阅读 · 0 评论 -
绝对定位中的坑坑
一.基本概念:如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位,当然这个定位相对元素在不同的情况下也有所不同。二.如何将一个元素设置为绝对定位:为对象添加如下属性即可将对象设置为绝对定位:复制代码转载 2015-09-12 21:51:25 · 472 阅读 · 0 评论 -
语义化前段UI框架Semantic UI
Semantci UI是一个高度语义化的前端框架,需要引入semantic.min.css和semantic.min.js,因为此框架也依赖jquery,所以需要引入jquery.min.js,此外框架还有很多主题theme,需要使用的话可以下载需要的主题,引入主题中的图片和字体文件就可以了,界面还是很漂亮的。官网地址http://www.semantic-ui.cn/introd原创 2015-10-05 11:50:56 · 1094 阅读 · 0 评论 -
CSS 多类选择器一个class值可以包含一个词列表
类选择符链类选择符名称可以使用多个.相连,形成类选择符链.www.dreamdu.com{ color:blue;}只有当一个元素使用了www、dreamdu、com三种选择符才能显示.www.dreamdu.com类选择符定义的样式p class="www dreamdu com">梦之都CSS 蓝色字体p>p class="www dreamdu">梦之都CS转载 2015-11-04 15:51:08 · 1879 阅读 · 0 评论 -
全屏轮播插件fullpage.js的使用
参数说明:verticalCentered字符串true内容是否垂直居中resize布尔值false字体是否随着窗口缩放而缩放slidesColor函数无设置背景颜色anchors数组无定义锚链接scrollingSpeed整数700滚动速度,单位为毫秒eas原创 2015-10-05 18:41:39 · 960 阅读 · 0 评论 -
<li><img>图片间有空隙的解决方法
在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:直接加样式img{vertical-align:bottom; display:block} 当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-ali转载 2015-10-21 11:50:22 · 821 阅读 · 0 评论 -
可替代CSS3 transition和transform的jQuery插件
插件介绍jQuery Transit是一款可制作超级平滑的CSS3 transformations 和 transitions动画的jQuery插件。它能够通过jQuery来完成CSS转换和过渡动画效果,这对于一些不支持CSS3转换和过渡属性的浏览器来说是一个非常有用的jQuery插件。点击打开链接转载 2015-11-05 20:40:37 · 501 阅读 · 0 评论 -
漫谈CSS transform动画技术
css3博大精深,真的要潜心钻研,分享一篇博文应该对你的css3学习有很大帮助http://www.webhek.com/css-animation-using-css-transforms/转载 2015-11-05 20:30:31 · 728 阅读 · 0 评论 -
IE中的CSS3不完全兼容方案
到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer,其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。Opacity透明度转载 2015-11-05 18:00:14 · 483 阅读 · 0 评论 -
让IE6/IE7/IE8浏览器支持CSS3属性
IE6/7并不支持CSS3的属性,IE8也不能很好的支持CSS3。如何让IE 6/7/8支持border-radius (rounded),box-shadow ( shadow),text-shadow等这些属性呢?这里介绍一个通过htc脚本实现这些属性的方法使用是很容易的,看下面的示例代码:.box { -moz-border-radius: 15px; /* Fire转载 2015-11-05 18:11:59 · 578 阅读 · 0 评论 -
响应式网页设计:rem、em设置网页字体大小自适应
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。em 的计算是基于父级元素的,在实际使用中给我们的转载 2015-11-26 17:44:59 · 914 阅读 · 0 评论