-
禁止缓存:给css/js加上时间戳
所属栏目:[经验] 日期:2018-10-20 热度:173
好多服务器端或CDN都会对CSS、JS和图片这些静态的内容设置缓存,到了IE这里又会在本地做一个缓存。所以当我们更新了CSS文件之后,常常会出现客户端没有更新,导致显示出现问题。之前我一直使用时间戳参数的方法来解决: 每次更改了css文件就把参数time的值[详细]
-
CSS border三角的一个应用实例
所属栏目:[经验] 日期:2018-10-20 热度:92
早上了解到一个名为css border三角的技术,纯css2实现,兼容各浏览器(包括Ie6),且效果非常好,当时即内牛满面,顿感牛人之强大。自己不敢不有样学样,赶紧做了个应用demo,练手之余也能向更多的盆友介绍此技术。效果如下: 常用联系人 常用联系人 常用联系人[详细]
-
CSS兼容性(IE和Firefox)技巧大全
所属栏目:[经验] 日期:2018-10-13 热度:66
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DO[详细]
-
自定义样式的input[type=range]
所属栏目:[经验] 日期:2018-10-13 热度:80
今天下午有人在群里提出个问题,能不能把自定义样式应用到HTML 5中的range元素上。晚上研究了一下,是可以实现上述的需求的。请用 Chrome 查看Demo。 代码如下: Copy to Clipboard 引用的内容:[www.veryhuo.com]!DOCTYPE html html head meta http-equiv[详细]
-
CSS3创建多重边框
所属栏目:[经验] 日期:2018-10-13 热度:109
是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。 可是,你想象过可以为每1px的border单独设置颜色么?这是个什么概念?就是说,如果你为一个元素设置了10px的border,那么这10px的边[详细]
-
direction实例代码:文本排列方向的改变
所属栏目:[经验] 日期:2018-10-13 热度:103
direction用法示例:改变文本排列的方向,类似左对齐、右对齐的功能,不过又有着很大的差别,在ASP(HTML): direction是设置阴影的强度,但用在CSS中,好像还没有明确定义。 Copy to Clipboard 引用的内容:[www.veryhuo.com]!DOCTYPE html PUBLIC -//W3C//[详细]
-
css控制滚动条位置 css控制文字方向
所属栏目:[经验] 日期:2018-10-13 热度:84
CSS 控制滚动条的位置及文本方向,运用direction改变文本方向,用overflow的scroll属性控制滚动条的位置,有意思吧,可以将滚动条显示在一块区域的左边,有反常态的使用。 Copy to Clipboard 引用的内容:[www.veryhuo.com]!DOCTYPE html PUBLIC -//W3C//D[详细]
-
CSS换行实例:word-break 强制换行代码
所属栏目:[经验] 日期:2018-10-13 热度:142
word-break 强制换行的CSS实现,他们大家展示word-break 分别以normal、break-all、keep-all三种方式聚会后的效果,用的最多一般是break-all,但是在国外网站,normal属性使用较多。 Copy to Clipboard 引用的内容:[www.veryhuo.com]!DOCTYPE html PUBLIC[详细]
-
CSS实例:overflow 控制文本溢出代码
所属栏目:[经验] 日期:2018-10-13 热度:132
用CSS控制文本溢出,主要是使用了CSS中的overflow属性,关于文本溢出属性的实例,注意文本中段首部分的显示效果。平时我们用到的比较多,因此overflow的用法和使用场合有必要掌握。 html head meta http-equiv=Content-Type content=text/html; charset=ut[详细]
-
css属性实例:两个div边框内外嵌套
所属栏目:[经验] 日期:2018-10-13 热度:162
css属性实例:两个div边框内外嵌套,代码如下: html head meta http-equiv=Content-Type content=text/html; charset=gbk / titlecss属性实例/title style .main{ border:2px solid #333333;} .include{ margin:50px; border:2px solid #333333; width:500[详细]
-
DIV模块交叉在一起 CSS边框交互效果
所属栏目:[经验] 日期:2018-10-13 热度:123
css边框嵌套的实现代码,两个Div彼此交叉在一起,平时我们不多见吧?主要是想练习一下布局的方法,掌握两个元素边框交叉,你就可以轻易学会在网页中布局其它的小Div。 运行演示: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.[详细]
-
使用word-wrap:break-word使文本自动换行
所属栏目:[经验] 日期:2018-10-13 热度:70
文本框连续输入 数字111111111111111111或者 英文单词adkjsakfjsalfkjsalkdjaslkfjsalkf 会造成什么结果呢?---文字溢出,一般的处理方法是用overflow:hidden隐 藏文 字,有没有更好的解决文案呢?QA的童鞋要求自动换行. 用word-wrap:break-word即可 css手册上[详细]
-
CSS 忍者:安全的 CSS hacks 秘籍
所属栏目:[经验] 日期:2018-10-06 热度:128
你如何搞定 IE 这只难以驯服的怪兽?使用 CSS Hacks 或者条件注释么?恐怕没有什么解决方案是完美的。每个设计师或者前端码农都会有自己打败 IE 行之有效的方法。所有这些技术都各有利弊,让我们一起来看看。 通过条件判断引入样式表 使我们能很容易在 IE[详细]
-
需要掌握的30个最常用css选择器解析
所属栏目:[经验] 日期:2018-10-06 热度:164
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。 1. 星状选择符会在页面上的每一个元素[详细]
-
IE6 下的神奇 CSS 字体 bug
所属栏目:[经验] 日期:2018-10-06 热度:75
一直用的 Aptana 当编辑器,这玩意儿有一个很强大的代码格式化功能。你看: 不过格式化后就出问题了,注意格式化后 font 属性的写法。问题出在 font 属性的合并写法,12px 和 1.5 之间除斜杠之外的空格,IE6 下会导致后面设置的 arial 字体不生效。也就是[详细]
-
input标签与图片按钮水平对齐的解决方法
所属栏目:[经验] 日期:2018-10-06 热度:192
在日常的网页制作当中,我们可能会遇到input标签与图片在同一行的情况,这时候你会发现,无论你的css怎么写都会出现input文本框与图片链接无法在同一水平线上。昨日,烈火小编的朋友就来咨询,说他也遇到了这个问题,并且使用margin、padding等Css语法,都[详细]
-
图片延迟加载处理的实现
所属栏目:[经验] 日期:2018-10-06 热度:148
页面中图片过多能够让图片延迟加载会大大提高页面的加载速度,提高用户可用性。 1、有的页面是页面过长或过宽,可以考虑只加载显示区域附近的图片。 2、图片所在窗口不显示,比如Tab内容切换,内容轮播等也要考虑把没有显示的图片延迟加载 第一种情况推荐[详细]
-
表单中的隐藏域重置
所属栏目:[经验] 日期:2018-10-06 热度:97
在 DOM 中,表单重置非常简单,使用 input type=reset 或者 button type=reset 即可。原生 DOM 也提供了 reset() 方法用于表单重置。 但是在 Firefox / Chrome 浏览器中,如果字段是隐藏域(type=hidden)的话,使用 reset 是无法将字段值还原为初始值的。[详细]
-
如何使用 CSS3 伪类
所属栏目:[经验] 日期:2018-10-06 热度:135
CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为基本的选择器。许多强大的新伪类选择器(最新的 W3C 规范中列出了 16 条)使得我们能够在新的标准范围内[详细]
-
关于CSS Selector的优先级
所属栏目:[经验] 日期:2018-10-06 热度:150
今天在google reader上看到一篇博文,然后在问了组里的几位同事之后才发现自己曾经一直对css selector的理解存在着误区。据说老外的文章中很早就提到了关于css selector是优先级算法,只是到了国内被部分人员翻译之后,误解了其中的含义,导致现在很多人以[详细]
-
CSS自定义滚动条样式
所属栏目:[经验] 日期:2018-10-06 热度:158
相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下。当然,兼容所有浏览器的滚动条样式目前是不存在的。 IE下的滚动条样式[详细]
-
JavaScript计算iframe高度
所属栏目:[经验] 日期:2018-10-06 热度:106
Java Script 计算iframe高度,方便做到高度自适应: Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);[详细]
-
CSS实例:纯CSS打造斜角
所属栏目:[经验] 日期:2018-09-29 热度:97
关于CSS打造斜角,先说一下历史,在CSS+DIV流行以前,也就是用表格作为网页框架的时候,人们通过在一个单元格里加入一个斜角图片来来做这种效果的。这种技术现在已经完全过时了,这里不讨论。CSS+DIV兴起以后,出现了两种制作斜角效果的方法,一个是通过ba[详细]
-
CSS技巧:字体属性简写规则
所属栏目:[经验] 日期:2018-09-29 热度:192
当使用css定义字体时你可能会这样做: 事实上你可以简写这些属性: 现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定font-size和font-family属性,其他的属性(如font-weight, font-style,font-varient)如未指定将自动使用默认值。[详细]
-
IE6/IE7/FireFox CSS兼容的解决方法
所属栏目:[经验] 日期:2018-09-29 热度:188
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 wi[详细]