随笔分类 -  css

1 2 下一页
网页设计中对于图片格式与设计关系的详解
摘要：为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。 除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。 有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。.. 阅读全文
posted @ 2013-04-16 13:16 $雨$ 阅读(534) 评论(0) 推荐(0)
CSS样式层叠权重值
摘要：CSS样式层叠权重值根据CSS规范，具体性越明确的样式规则，权重值越高。计算权重值的依据，并不是许多文章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。首先来看一个便于记忆的顺序”important>内联 >ID>类 >标签 |伪类|属性选择 >伪对象 >继承 >通配符”选择器权重值的计算A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）。B： 阅读全文
posted @ 2012-12-06 09:19 $雨$ 阅读(3893) 评论(3) 推荐(3)
非常不错的空白占位符“　　　　”
摘要：在标题里面，哈哈 阅读全文
posted @ 2012-09-14 12:02 $雨$ 阅读(491) 评论(0) 推荐(0)
使用RGBa和Filter实现不影响子元素的CSS透明背景
摘要：原文发表于 2010.1.11 shukebeta 翻译译者按：这篇文章里提到的IE解决方案，还是有一些问题的。且不说IE9既支持RGBa又支持Filter会给我们带来麻烦，过滤器这种东西说不准 啥时候就会导致渲染问题。我建议对支持rgba的浏览器只使用rgba，同时为不支持rgba的浏览器留一个非透明背景的退路。以下为原文译文：今天的网页设计，几乎毫无例外地包含一些半透明元素，然而，要使用CSS得到需要的效果，需要颇费些思量。问题如果我们想要一个元素拥有半透明的背景，我们有两个选择：使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题， 阅读全文
posted @ 2012-04-05 10:23 $雨$ 阅读(6232) 评论(0) 推荐(3)
修正IE6不支持position:fixed的bug
摘要：众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做 自己的博客模板的时候，遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友，一起BS我……但是对于大项目或商业网站，如果有用到 这个属性的时候，是不可能直接无视的。你是如何让position:fixed在IE6中工作的？本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式，因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。如何解决“振动” 阅读全文
posted @ 2012-03-26 09:37 $雨$ 阅读(272) 评论(0) 推荐(0)
IE中flash遮挡div现象的解决方案
摘要：今天开始给网站首页的广告管理系统添加flash广告代码，结果出现IE中（包括IE6+）弹窗广告要flash遮挡的问题，后来想到了常用的iframe方法（参见《解决IE6 select z-index无效，遮挡div的bug》），最终成功了flash遮挡DIV的bug，但是在IE中还出现了浮动的DIV变化位置后，flash出现div碎片的拖尾现象。继续寻找解决方案。最后终于找了原来flash有个参数wmode可以设置，于是代码变成了这样：<embed src=”s.swf” quality=”high” wmode=”Opaque” width=”150″ height=”240″> 阅读全文
posted @ 2012-03-19 16:23 $雨$ 阅读(1532) 评论(0) 推荐(0)
禁止表单自动提示缓存数据
摘要：在 form 元素上加上 autocomplete="off" 这个，这样的话不管浏览器是否设置禁用自动完成，该 form 中都会被禁用。这个属性不是标准的属性，但是 IE 和 Firefox 均支持 阅读全文
posted @ 2012-03-04 18:05 $雨$ 阅读(2833) 评论(1) 推荐(0)
html 空白汉字占位符&#12288;
摘要：&#12288;可以看作一个空白的汉字 阅读全文
posted @ 2012-02-06 10:03 $雨$ 阅读(17952) 评论(0) 推荐(0)
可见即所得的CSS编辑设计
摘要：style 也是标签（在非ie内核的浏览器中支持），我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方 便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。效果演示附上我研究的代码：01<!DOCTYPE HTML>02<html >03<head>04<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /& 阅读全文
posted @ 2011-12-29 23:09 $雨$ 阅读(258) 评论(0) 推荐(0)
IE中的条件注释表
摘要：条件注释只能用于Explorer 5+ Windows(以下简称IE).如果你安装了多个IE，条件注释（Conditional comments）将会以最高版本的IE为标准（一般为IE 6）。我听说（但没测试过），当在条件注释中使用了小数点，且只安装了IE5.0的时候，将会产生一个不正确的判断。条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。条件注释从IE5开始被支持，它可能在IE5.0,5.5,6里有区别。我（译者注：指作者）自己也在顶层的框架中使用了一些条件注释。如果你以源代码形式查看本页，你将会看到： 阅读全文
posted @ 2011-10-19 14:32 $雨$ 阅读(259) 评论(0) 推荐(0)
css鼠标悬停时为其他标签设置样式
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf- 阅读全文
posted @ 2011-08-24 13:23 $雨$ 阅读(7129) 评论(0) 推荐(0)
css实现自适应屏幕高度；
摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf- 阅读全文
posted @ 2011-07-19 13:09 $雨$ 阅读(39947) 评论(1) 推荐(0)
css清除浮动各种方法
摘要：css清除浮动各种方法：1，在浮动元素后面增加<br/>标签； <br/>标签有自带的清除浮动属性；2，在浮动元素后面增加一个清除浮动层； <div> <div style="float:left"></div> <div style="float:left"></div> <div style="clear:both"></div> </div>3,给浮动元素添加overflow:auto样式；4，为最后浮动元素设 阅读全文
posted @ 2011-07-14 09:37 $雨$ 阅读(13676) 评论(2) 推荐(4)
head区的代码详解
摘要：head区是指首页HTML代码的<head>和</head>之间的内容。必须加入的标签：1.公司版权注释<!—ThesiteisdesignedbyMaketown,Inc06/2000—>2.网页显示字符集简体中文：<METAHTTP-EQUIV=”Content-Type”CONTENT=”text/html;charset=gb2312″>繁体中文：<METAHTTP-EQUIV=”Content-Type”CONTENT=”text/html;charset=BIG5″>英语：<METAHTTP-EQUIV=”Conte 阅读全文
posted @ 2011-07-13 10:11 $雨$ 阅读(386) 评论(0) 推荐(0)
常用CSS缩写语法总结
摘要：使用缩写可以帮助减少你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 阅读全文
posted @ 2011-07-08 13:35 $雨$ 阅读(194) 评论(0) 推荐(0)
css优先级
摘要：css优先级主要包含css样式表优先级和css选择符优先级两方面；样式表优先级顺序为：行内样式>内嵌样式>引入样式>导入样式；选择符优先级是根据其特殊性来判断的，关于特殊性有一套计算方式，CSS2.1是用一个四位的二进制串来表示的，CSS2.0是用三位的二进制串来表示的；每个ID选择符四位二进制表示为：0，1，0，0。每个class选择符四位二进制表示为：0，0，1，0。每个标签选择符及伪类选择符四位二进制表示为：0，0，0，1。其他选择符包括全局选择符*四位二进制表示为：0，0，0，0。按照这些规则将数字串逐位相加，就得到最终计算的特殊值，数字大的优先级高相应的优先级低；如 阅读全文
posted @ 2011-07-07 22:01 $雨$ 阅读(1279) 评论(0) 推荐(0)
em和px的区别|关系-CSS单位详解
摘要：关键点： 1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;3. Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css 阅读全文
posted @ 2011-07-07 17:57 $雨$ 阅读(476) 评论(0) 推荐(0)
css常见bug
摘要：1>,ie6出现重复字符BUG<div style="width:200px;height:48px;background:#00ffff;"> <div style="float:left;width:100px;height:24px;background:blue;"></div> <!-- 如果是IE6，你将多看到一个“影”字 --> <div style="float:left;width:100px;height:24px;overflow:hidden;backgroun 阅读全文
posted @ 2011-07-07 17:07 $雨$ 阅读(636) 评论(0) 推荐(0)
清除radio单选框外边距
摘要：<input style="margin:0;width:12px;height:12px;overflow:hidden;" type="checkbox" /> 阅读全文
posted @ 2011-07-04 17:20 $雨$ 阅读(365) 评论(0) 推荐(0)
div+css优缺点
摘要：产生背景HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多 阅读全文
posted @ 2011-07-04 17:12 $雨$ 阅读(2310) 评论(0) 推荐(0)

1 2 下一页