css
关注
分享
扫一扫
文章平均质量分 50
iteye_21028
这个作者很懒，什么都没留下…
展开
-
browse按钮可以换成随意的图片
当type="file"时，input框右侧的browse按钮可以换成图片:<style>div {width:350px;position:relative;}.file {position:absolute;top:0px;right:350px;+top:0;+right:45px;width:0px;height:25px;float:left; filter:alp...2008-01-30 16:53:20 · 450 阅读 · 0 评论 -
关于背景图片的定位(background-position)
最近仔细研究了一下关于css 背景图片的定位问题，也许有的朋友会认为这是个简单的问题，以至于在网上很难搜到关于background-position的详细解释，能搜到的帖子基本上都是千篇一律的把概念复制一下贴出来的。 不过在这里我还是先要把概念再罗嗦一遍(不想看的朋友可以直接跳过这个部分)语法： background-position : length || length...2008-06-08 16:37:03 · 750 阅读 · 0 评论 -
button按钮在 IE 中两边被拉伸的解决办法
大家在写按钮（input (type="button") 、button）的时候会发现在 IE 下：随着字数的增多，两边的间距也会越来越大。到底是什么原因呢？IE 下按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了ove...原创 2009-03-07 18:40:29 · 186 阅读 · 0 评论 -
页面输出时一些常用的小技巧(一)
页面输出时一些常用的小技巧(二) 1.菜单一 | 菜单二 | 菜单三(demo1.zip) 代码结构：<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul> 通常我们会li加cssborder-right:12009-04-07 23:43:44 · 132 阅读 · 0 评论 -
ink和@import引用css文件方法的区别
<link>元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了CSS与HTML文档结合的4中方法：1 使用<link>元素链接到外部的样式文件2 在<head>元素中使用"style"元素来指定3 使用CSS "@import"标记来导入样式表单4 在<body>内部的元素中使用"style2008-09-17 18:11:28 · 186 阅读 · 0 评论 -
图片和文字的对齐
最近工作中遇到些关于“图片和文字的对齐”的问题： 1.文字和图片，图片和图片底部对齐 类似结构 <div><img src="" />text</div>或者<div><img src="" /><img src="" /></div&a2009-11-07 15:50:43 · 247 阅读 · 0 评论 -
css命名规范
最近看到了些关于css命名方面的文章，对于这方面我也有自己的看法。我接触css有很长一段时间了，对于css的命名我也是在逐步改进。感觉工作中比较常碰见的问题：1.需要给层定义各种尺寸的宽度，高度基本是不用定义的2.层的padding和层之间的margin3.给文字高亮颜色4.各种样式的tab和button5.不同的背景色6.各种样式的border7.左浮动，右浮...2009-11-07 21:40:22 · 189 阅读 · 0 评论 -
命名规则有利于SEO
搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体...原创 2009-05-11 13:21:33 · 128 阅读 · 0 评论 -
img标签下多余空白bug解决方法
根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。 在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象即，设置img为“display:block;”。在本...原创 2009-06-25 13:56:58 · 258 阅读 · 0 评论 -
IE6默认不缓存背景图片,引起鼠标抖动的解决方法
在IE6下,如果拖动的DOM元素使用了背景图,在Drag的过程中会出现严重的鼠标抖动现象.在网上查了下,说是因为:IE6下默认不缓存背景图片，CSS里每次更改图片的位置时都会重新发起请求.可用下方法来解决(让IE6缓存背景图片):在head区（即<head>到</head>之间添加以下代码：CODE:<!--[if IE 6]><s...2008-10-09 13:51:17 · 111 阅读 · 0 评论 -
网站灰黑色CSS滤镜代码
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。如果网站没有使用CSS，可以在网页/模板的HTML代码 <head>和 </head> 之间插入： <style> htm...2008-10-24 10:32:13 · 410 阅读 · 0 评论 -
CSS滤镜
下面是一些滤镜的描述,有的有示范,有的没有.Alpha滤镜语法：Alpha(Opacity=?,FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?,FinishY=?)参数和功能： 使对象产生透明度。参数名称功能参数Opacity图片的不透明度值从0－100，0为完全透明，100为完全不透...原创 2008-10-24 14:44:39 · 190 阅读 · 0 评论 -
网页的栅格系统设计
栅格系统的形成1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。委员会由数学家尼古拉斯加宗（NicolasJaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印刷版面就有...原创 2008-10-30 21:31:15 · 166 阅读 · 0 评论 -
是时候不用考虑基于字体大小（em）的设计了
一篇不错的文章，转自：http://dancewithnet.com/2008/06/17/it-is-time-to-discard-font-size-adjustments/ 今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00)，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是“全页面缩放（Full page zoom...原创 2008-11-01 00:22:31 · 147 阅读 · 0 评论 -
文本溢出时显示省略标记
语法：text-overflow : clip | ellipsis 取值：clip：默认值。不显示省略标记(...)，而是简单的裁切.ellipsis：当对象内文本溢出时显示省略标记(...). 可惜text-overflow还只是ie的私有属性而已，也没被收录到w3c标准里. 如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容...2008-11-21 17:55:05 · 137 阅读 · 0 评论 -
chrome浏览器font-size<12px无效解决办法
当样式表里font-size<12px时，chrome浏览器里字体显示仍为12px 解决的办法有两种第一种（推荐）：只需定义样式，webkit的私有属性：html{-webkit-text-size-adjust:none;} 第二种：在chrome浏览器工具栏 选项 > 高级选项 > 更改字体和语言设置 > 语言 > ...原创 2010-11-30 15:08:42 · 588 阅读 · 0 评论 -
IE下li内元素浮动产生边距的解决办法
类似于这样的一个结构 <ul> <li><span style="float:left">left</span><span style="float:right">right</span></li> <li><sp原创 2010-07-16 14:25:33 · 219 阅读 · 0 评论 -
如何去掉链接虚线框
链接的虚线框影响整体风格，我们在工作经常会将它去掉，而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待，这种技巧经常用到，作个记录，以备不时之需。当一个链接得到焦点时，默认会有个虚线框。如图： 在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：a:focus ...原创 2011-10-08 13:58:19 · 150 阅读 · 0 评论 -
《无懈可击》读后筛选
1.a：通常ie5/win中字的现实结果总是要比其他浏览器整整大一号，为了让所有浏览器兼容，我们需要利用CSS hack。body{ font-size:x-small;/* for IE5/Win */ voice-family:"\"}\""; voice-family:inherit; font-size:small...2008-06-01 22:04:39 · 80 阅读 · 0 评论 -
相对定位和绝对定位
前言在用CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如CSS相册等等，因此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种思想：当我熟练地玩转CSS定位时，我就已是高手了。不管...原创 2008-05-30 11:03:36 · 182 阅读 · 0 评论 -
word-wrap和word-break
word-wrap : normal | break-word normal : 默认值。允许内容顶开指定的容器边界 break-word : 内容将在边界内换行。如果需要，词内换行( word-break )也将发生 word-break : normal | break-all | keep-all normal : 默认值。允许在词间换行 brea...2008-01-31 15:47:02 · 101 阅读 · 0 评论 -
css中em与px的换算方法
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与 em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了e...原创 2008-02-20 21:31:32 · 142 阅读 · 0 评论 -
锚和热点map的用法
[color=blue]链接有两种，一种是不同页面间的链接，这种最常见。另外一种则是页内链接，我们一般称为页内锚链接。[/color]1.加锚链 定义好“锚”以后，将链接指向锚位置的链接形式如下: ....,即以＃再加上id格式。 如: 第一章 第二章 第三章 .............. ...第一章内容.. .....2008-02-20 21:39:29 · 135 阅读 · 0 评论 -
css工具提示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><style><!--.tooltip{position:relative;}.t2008-02-21 13:17:42 · 88 阅读 · 0 评论 -
浏览器中line的兼容性问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><style><!--.line{background:#000;width:500px2008-02-21 16:18:51 · 275 阅读 · 0 评论 -
灵活的圆角框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><style><!--.box{ width:20em; background:#f2008-02-21 17:33:18 · 143 阅读 · 0 评论 -
常用CSS缩写语法
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1； property:value1 value2; 表...2008-02-25 22:54:45 · 128 阅读 · 0 评论 -
css技巧
[url=http://tech.163.com/06/0430/09/2FUS33NS0009158P.html]10个你未必知道的CSS技巧[/url][url=http://iceshow.blog.sohu.com/2909097.html]class和id，有意思的文章[/url][url=http://www.w3cn.org/article/translate/200...原创 2008-02-26 21:19:27 · 96 阅读 · 0 评论 -
FF、IE7、IE6的CSS问题
1. !important随着IE7对!important的支持,现在IE7和FF都支持!important，可以用!important来区分FF、IE7和IE6的高度。用法如下：<style rel="stylesheet" type="text/css"><!--.content{background:#a5a5a5;height:100px !important...2008-03-16 15:49:24 · 149 阅读 · 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><tit2008-03-16 21:36:10 · 97 阅读 · 0 评论 -
css实现垂直居中
如果是用table写的表格，那么用vertical-align:middle就可以实现垂直居中 如果是用div写的表格，那么需要这样写：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmln...2008-12-15 13:53:01 · 64 阅读 · 0 评论 -
[译文]On having layout
介绍Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout”得到解决。John Gallant 和 HollyBergevin 把这些问题归类为“尺寸bug(dimensional bugs)”，意思是这些 bug可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这...原创 2008-12-30 20:44:31 · 116 阅读 · 0 评论 -
《css实战手册》读书笔记——管理多种样式公式
最近正在看《CSS实战手册》这本书，发现第五章管理多种样式中的样式优先级公式挺实用的。 有时候我们给同样一个属性用多种方式去定义样式，来自最具体的样式的属性会胜出，但不知道到底哪种样式最具体，好在css还提供了一个公式，他根据指派给样式选择器的值决定样式的特性——标签选择器、类选择器、ID选择器，等等。这个系统是这样进行的： 1.一个标签选择器值1分。 2.一个类选择器值1...2008-03-28 23:16:42 · 122 阅读 · 0 评论 -
用条件注释为IE隔离CSS
用条件注释让你指定把样式应用给哪个IE版本，如或者，利用@import方法：这个Ite代表“less than or equal to (小于或等于)”，因此if Ite IE 6意思是“如果这个浏览器是IE6或者更早版本"再如，把所有浏览器，IE6，IE5或者更早版本的样式表分别指定：...2008-04-06 23:04:54 · 110 阅读 · 0 评论 -
zencart网店模板
帮朋友做了个zencart网店模板 香香礼品网：http://myliba.com/2008-05-04 19:38:46 · 192 阅读 · 0 评论 -
IE6下兼容position:fixed的问题
做网页时经常会有让某个层浮动在浏览器窗口的固定位置不变的需求(如图)。当出现滚动条时，移动上下滚动条时层相对浏览器边框的距离也不变。一个position:fix就可以解决，只是ie6到目前为止还不支持这个position属性。 <div id="fixed"> 我不会动</div><div id="body"> <p>t...2009-01-15 17:23:01 · 218 阅读 · 0 评论 -
用div+css模拟表格对角线
在蓝色理想上看到一篇用css写的对角线，觉得很有用。把代码down下来一看，发现原来就是巧妙地运用了border属性。以前我也曾用border属性写过三角形，http://ice-cream.iteye.com/blog/172777和对角线的原理基本一样 css代码的精华部分/*模拟对角线*/.out{ border-top:40px #d6d3d...原创 2009-02-09 10:59:55 · 326 阅读 · 0 评论 -
IE各版本的css hack
一：IE各版本的css hack HACKEXAMPLEIE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)**colorYesYesYesYesNoYes++colorYesYesYesYesNoYes--colorYesYesNoNo...原创 2012-12-06 14:34:20 · 180 阅读 · 0 评论