随笔分类 -  CSS

摘要：有时候，我们为了用户体验，需要禁用选择文本功能。这需要用到一个CSS属性：user-select，user-select的文档点这里user-select有两个值：none：用户不能选择文本text：用户可以选择文本需要注意的是：user-select并不是一个W3C的CSS标准属性，浏览器支持的不完整，需要对每种浏览器进行调整body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-se... 阅读全文

摘要：一、base64百科Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传递较长的标识信息。某人： 唉，我彻底废柴了，为何上面明明是中文，洒家却看不懂嘞，为什么？好吧，我也不喜欢专业术语的解释。你只要知道，base64编码就是长得像下面这样子的代码：thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==上面代码大家都熟悉吧，迅雷下载链接哦（咳咳，该地址很纯洁），就是base64编码后的地址，所以以后看到这种：一堆连续字母，最后有1~2个“=”的代码就是base64。bas 阅读全文

摘要：完整PDF下载链接：《人人FED CSS编码规范》浏览器特效支持规范为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示：圆角阴影动画文字阴影透明背景渐变空间变换Chrome5+YYYYYYYFirefox 4+YYYYYYYSafari 5+YYYYYYYOperaYYYYYNYIE9+YYNNYNYChrome5-NNYYYYYFirefox 4-NNNYYNNSafari5-NYYYYNYIE8NNNNNNNIE7NNNNNNNIE6NNNNNNN[说明] Y为支持，N为不支持。文件相关规范1、文件名必须由小写字母、数字、中划线- 阅读全文

摘要：E:nth-last-child(n): 选择某个子元素，从最后一个数起 E:nth-of-type(n): 选择某个某种类型的子元素 E:nth-last-of-type(n): 选择某个某种类型的子元素，从最后一个符合条件的元素数起 E:first-child: 选择第一个子元素（这个伪类在CSS2里就有） E:last-child: 选择最后一个子元素tr:nth-child(2n+1) /* 选择表格里的单数行 */tr:nth-child(odd) /* 同上 */tr:nth-child(2n) /* 选择表格里的双数行 */tr:nth-child... 阅读全文

摘要：1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。<div class="triangle"></div>2、把它的宽高设置为height:0px; width:0px;3、设置边框border属性，用来实现三角形。首先要了解border具体是怎么样的，我写了一个这样的样式：border:50px solid #000; border-color:#f00 #000 #f0f #00f;在FF下面显示效果如下：出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，其它的设置为透明就 阅读全文

摘要：（一）滚动条样式主要涉及到如下CSS属性:overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容overflow: auto; 在需要时内容会自动添加滚动条overflow: scroll; 总是显示滚动条overflow-x: hidden; 禁止横向的滚动条overflow-y: scroll; 总是显示纵向滚动条（二）以下代码定义滚动条的样式：<STYLE>BODY {SCROLLBAR-FACE-COLOR: #f892cc; //滚动条凸出部分的颜色SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; //滚动条空白部分的颜色S 阅读全文

摘要：在Firefox里，鼠标点击一个链接时，它的周围即出现虚线画出的边框。这种例子遍地都是，在WordPress后台写这个文章的时候，随手点一下右边那些widget，就看到了这个问题（图片的右上角）在某些特殊的情况下，比如做一个导航菜单的时候，出现这个情况时效果就很糟糕了，因为Firefox会错误地扩大链接的边框： 在Firefox的地址栏输入about:config，回车。有一个配置项叫做“browser.display.focus_ring_width”，把它修改成0，点击链接时就不会出现那个边框。但这样的话，在焦点落在按钮上时也没有了边框指示。而且作为一个开发者，在浏览器里设置这个属性，无异 阅读全文

摘要：使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 阅读全文

摘要：众所周知IE6不支持position:fixed，这个bug与IE6的双倍 margin和不支持PNG透明等bug一样臭名昭著。前些天我做 自己的博客模板的时候，遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友，一起BS我……但是对于大项目或商业网站，如果有用到 这个属性的时候，是不可能直接无视的。你是如何让position:fixed在IE6中工作的？本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。如何解决“振动 阅读全文

摘要：1.你定死表格的宽度，即给表格一个宽度值（是数值，不是百分比） 2.强制不换行div{//white-space：不换行;normal 默认;nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象white-space:nowrap; }自动换行div{ word-wrap: break-word; //word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则，允许在字内换行word-break: normal; }强制英文单词断行div{word-break:break-all;}3.总结了一下，只要在CSS中定义了如下句子，可保网页不会再被撑开了。t 阅读全文

摘要：利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。)方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。<div id="wrapper"><div id="cell"><div class=&qu 阅读全文

摘要：关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：.test{color:#000000; /* FF,OP支持 */color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ；但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */[color:#000000;color:#00FF00; /* SF,CH支持 */*color:#FFFF00; /* IE7支持 */_color:#FF0000; /* IE6支持 */}很多人再研究color:#0000FF\9;中的为什么IE6-IE8支持“\9”写 阅读全文

摘要：颜色在CSS里的应用非常广泛，如：color，border，background，box-shadow等的属性都接受颜色值作为属性值。CSS颜色值的设置也是多样化的，以下是到目前为止CSS中颜色值设置的方法。CSS 预定义颜色(就是使用颜色的英文)W3C定义了一组SVG的颜色表，同样是CSS颜色模块所指的颜色，他们是一些指向特定颜色的单词，如：white, black ,red等。color:red;color:green;color:blue;transparent 关键字transparent 表示完全透明，CSS1中，它只能在 background 属性中使用，CSS2中，添加到了 bo 阅读全文

摘要：由于各大浏览器尤其IE浏览器对web标准支持情况不一，导致标准的网页在各个浏览器中的表现不一，因此，解决各浏览器兼容性问题成为了前端工程师最重要的工作之一，而所谓的hack技术则是前端开发中必用的。CSS hack的写法有很多种，其中，特殊符号的应用最为普遍，也最为简洁，下面一一介绍了特殊符号类型的CSS hack技术：1、反斜线(\)适用浏览器：IE/Mac反斜线(\)hack利用了IE/Mac的一个bug。以\*/结束的注释在IE/Mac上是不正确关闭的，所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。/*在IEMac上忽略下面的语句\*/selector{...styles 阅读全文