随笔分类 -  CSS

css 连续编号
摘要：.orderList:nth-of-type(1) { counter-reset: ol; } .orderList > li { counter-increment: ol; } .orderList > li::marker { content: counter(ol) ". "; } 阅读全文
posted @ 2024-05-28 11:12 百里水上 阅读(11) 评论(0) 推荐(0)
文档视图(DocumentView)和元素视图(ElementView)方法
摘要：文档视图(DocumentView)和元素视图(ElementView)旗下有四个方法，如下：elementFromPoint()返回给定坐标处所在的元素。是个在目前而言，兼容性不错的方法getBoundingClientRect() 得到矩形元素的界线，返回的是一个对象，包含top,left,ri... 阅读全文
posted @ 2015-09-16 11:34 百里水上 阅读(593) 评论(0) 推荐(0)
css移动端实现与pc端一样的:acitve效果
摘要：方式一：document.body.addEventListener('touchstart', function () { });方式二：-webkit-tap-highlight-color:transparent;来源：http://www.jb51.net/css/229841.html 阅读全文
posted @ 2015-09-16 11:22 百里水上 阅读(357) 评论(0) 推荐(0)
-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
摘要：webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示：webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1... 阅读全文
posted @ 2015-08-05 10:59 百里水上 阅读(1011) 评论(0) 推荐(0)
CSS浏览器兼容性相关
摘要：浏览器兼容性.all IE{property:value\9;}.gte IE 8{property:value\0;} .IE 8/9{property:value\0;}.lte IE 7{*property:value;}.IE 9{property:value\9\0;} /*仅IE9支持*/.IE 7{+property:value;}.IE 6{_property:value;}.not IE{property//:value;}text-indent在IE6/IE7中的位置偏移BUGtext-indent一般用来实现文字缩进，不过更多的时候是用来实现文字隐藏。发现在IE6... 阅读全文
posted @ 2013-10-21 14:47 百里水上 阅读(173) 评论(0) 推荐(0)
禁止文字被选择
摘要：div中禁止文字被选择在做div的点击计数事件时，遇到一个小问题。因为div里面有文字，所以当点击多次时，特别是鼠标点的比较快的时候，文字会被选中。查了下，用css和javascript可以实现禁止选择。css代码：/* css style: */html,body{-moz-user-select: none;-khtml-user-select: none;user-select: none;} some text 说明：unselectable针对IEonselectstart针对Chrome、Safari-moz-user-select是firefox专有的 阅读全文
posted @ 2013-07-03 12:30 百里水上 阅读(203) 评论(0) 推荐(0)
IE中“浏览器模式”和“文档模式”的区别
摘要：1浏览器模式：影响浏览器的版本及IE的条件注释<!–[if IE 7]><style type=”text/css”>.content{color:#F00;}</style><![endif]–>2文档模式：影响IE的排版引擎和对DOM的渲染<style type=”text/css”>.content{*color:#F00;}</style>IE7一下都为红色字体<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7&qu 阅读全文
posted @ 2013-05-31 11:42 百里水上 阅读(167) 评论(0) 推荐(0)
避免常见的6种HTML5错误用法
摘要：一、不要使用section作为div的替代品二、只在需要的时候使用header和hgroup三、不要把所有列表式的链接放在nav里四、figure元素的常见错误五、不要使用不必要的type属性这是个常见的问题，但并不是一个错误，我认为我们应该通过最佳实践来避免这种风格。在HTML5中，script和style元素不再需要type属性。然而这些很可能会被你的CMS自动加上，所以要移除也不是那么的轻松。但如果你是手工编码或者你完全可以控制你的模板的话，那真的没有什么理由再去包含type属性。所有的浏览器都认为脚本是javascript而样式是css样式，你没必要再多此一举了。<!-- 请不要 阅读全文
posted @ 2013-05-15 10:10 百里水上 阅读(154) 评论(0) 推荐(0)
CSS常用提示浮出层的写法
摘要：CSS常用浮出层的写法<div class="poptip"> <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span> <span class=&qu 阅读全文
posted @ 2013-05-15 10:02 百里水上 阅读(535) 评论(0) 推荐(0)
清除浮动
摘要：.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }解释：1) display:block 使生成的元素以块级元素显示,占满剩余空间;2) height:0 避免生成内容破坏原有布局的高度。3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他 阅读全文
posted @ 2012-12-17 16:37 百里水上 阅读(221) 评论(0) 推荐(0)
打败 IE 的葵花宝典：CSS Bug Table
摘要：问题浏览器DEMO解决方法Hacking Rules: property:all-ie9; property:gte-ie8;*property:lte-ie7; +property:ie7; _property:ie6;1input[button | submit] 不能用 margin:0 auto; 居中IE8bug | fixed为input添加width2body{overflow:hidden;}没有去掉滚动条IE6/7bug | fixed设置html{overflow:hidden;}3hasLayout的标签拥有高度IE6/7bug | fixed*h... 阅读全文
posted @ 2012-12-04 16:20 百里水上 阅读(96) 评论(0) 推荐(0)