css技术
文章平均质量分 59
wangxiaohui6687
这个作者很懒,什么都没留下…
展开
-
DIV+CSS 设计的页面,DIV高度自适应问题
解决方法:方法1: 在内层元素的最后面加入一个元素,并且设置这个元素不浮动,强制使外层元素包裹内层元素如方法2:设置外层元素css属性overfloat为hidden或者auto,zoom设置为1,设置zoom是为了兼容ie6方法4:.clearFix:after方法3:设置外层元素高度为一个固定值,这个一般不采取使用。例子1: #main{原创 2012-03-06 21:35:00 · 2382 阅读 · 0 评论 -
css命名规范
1、文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;2、常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright 导 航:menu主导航:mainMenu转载 2013-05-02 15:46:09 · 408 阅读 · 0 评论 -
IE6下MARGIN的负值不起作用(给类/id添加position:relative;)
给类/id添加position:relative;原创 2013-07-13 21:20:52 · 1023 阅读 · 0 评论 -
关于CSS文件中的注释问题(ie6中文注释问题和页面编码的问题)
浏览器兼容的问题也遇到比较多。 在写程序的时候比较喜欢写注释,但是写的是中文注释,css文件和js文件中都写了注释,后来一放到ie6下去运行,显示乱乱的,而在ie7, firefox下面能正常显示,后来上网查了下是编码的问题,所以以后写注释最好还是写英文的,整个应用程序全部是英文的,我想就不会有这样那样的额外的问题了。编码也是个让人郁闷的事情,尤其是各种文件编码不一致的情况下。转载 2013-07-16 10:16:55 · 606 阅读 · 0 评论 -
IE6-8 CSS文件中文注释引发样式问题
今天同事遇到一个问题,页面样式在其它浏览器正常,IE下失效。帮他看了一下,起因是css中包含一行中文注释,注释之后定义的样式在IE下失效了,去掉那行中文注释一切正常。这问题我自己原来也遇到过,所以后来写注释的时候都用英文,也没细研究过BUG如何触发的。今天被人问到了,总不好跟人家说你以后写注释就用英文吧,毕竟很多时候即便使用中文注释也不会出现这问题。触发原因:1、HTML页面编码与CS原创 2013-07-16 10:18:16 · 1340 阅读 · 0 评论 -
css hack 如何区分 ie7 ie8
.style { width:100px; /*火狐以及一般浏览器*/ width:200px\9; /*IE8*/ *width:150px; /*IE7*/ _width:50px; /*IE6*/ height:100px; border:1px solid red;}原创 2013-07-16 14:41:27 · 670 阅读 · 0 评论 -
css去掉谷歌浏览器input、textarea、select中黄色边框
hrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动 放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式。这是大前端调整的样式,样式统一就是好看。取消chrome下input和textarea的聚焦边框:input,button,select,textarea{outline:转载 2013-07-18 15:32:43 · 5238 阅读 · 0 评论 -
网页设计中的文字运用
如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flash动画等,其中, 文本是网页中最为重要的设计元素。对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。文字的格式化字号、字体、行距字号大小可以用不同的方式来计算原创 2013-07-22 22:50:45 · 1288 阅读 · 0 评论 -
css 背景色半透明 兼容各个浏览器ie6 ie8 火狐
第一种:只需要在css里面写上红色部分.content{background-color: #000000;/* other browsers */opacity: 0.4;/* this works in IE6, IE7, and IE8 */filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);转载 2013-07-23 09:07:27 · 5563 阅读 · 0 评论 -
行内元素设置宽高(span label a )
像span label 等元素 都是行内元素,仅用height和width控制高宽往往达不到想要的效果,一般都要加上display:block;(独占一行) 或是display:inline-block;(仍为块级元素) 块元素和行内元素也不是一成不变的,只要给块元素定义display:inline,块元素就成了内嵌元素,同样地,给内嵌元素定义了display:block就成了块元素原创 2013-02-27 10:20:30 · 2987 阅读 · 0 评论 -
IE下模拟css3中的box-shadow(阴影)
css3中的box-shadow(阴影)可以查看:http://www.css88.com/archives/2136或者http://www.css88.com/tool/css3Preview/Box-Shadow.html在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜基本语法:filter: progid:DXImageTransf转载 2013-02-20 15:29:42 · 555 阅读 · 0 评论 -
同时为一个标签添加多个属性,类名之间用空格分隔
同时给某个元素应用多个类,类名之间用空格分隔……原创 2012-12-04 16:36:25 · 3459 阅读 · 0 评论 -
文本大小写 控制
text-transform: none [正常大小] capitalize[每个单词的第一个字母转换成大写] uppercase [转换成大写] lowercase [转换成小写]原创 2012-12-04 16:45:51 · 301 阅读 · 0 评论 -
HTML中如何用CSS设置文本样式
一. 长度单位1.相对类型A. px (piexl)像素,根据显示设备的分辨率的多少而代表不同的长度,因此属于相对类型。例如一张高宽为100px的图,在800×600分辨率中比在1024×768分辨率中大。因为两个分辨率中100px代表的长度不同。B. em这是设置以目前字符的高度为单位。比如h1{margin:2em},就会以目前字符的两倍高度来显示。em作为尺度单位时是以f原创 2012-11-21 17:58:26 · 29380 阅读 · 0 评论 -
汉字直接的间距和单词之间的间距
字符间距letter-spacing:normal[默认] length [长度单位](汉字之间的距离)单词间距word-spacing:normal[默认] length [长度单位](只对英文单词起作用)letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-原创 2012-12-04 15:19:56 · 1102 阅读 · 0 评论 -
css样式特点
1、继承:网页中子元素,将继承父元素的样式例如:要控制段落p中的文字大小,可以直接给body标记加样式。2、层叠:网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式。后面定义的样式,会覆盖前面定义的样式。原创 2012-12-04 16:39:56 · 591 阅读 · 0 评论 -
CSS常用中文字体英文名称对照表
在CSS文件中,我们常看到有些字体名称变成了乱码,这是由于编写者将中文字体的名字直接写成了中文,并且再上传或者拷贝复制的时候无意间变成了乱码。 为了避免这种状况出现,在CSS文件中使用中文字体时,最好使用中文字体的英文名称,我们常用中文字体的英文名称对照表如下: Windows自带的字体:· 新细明体:PMingLiU· 细明体:MingLiU·原创 2012-12-04 16:55:32 · 659 阅读 · 0 评论 -
css,z-index属性
使用z-index属性时必须注意:1、属性值越大说明位置越靠后;2、必须加上绝对定位:position:absolute原创 2013-01-21 17:46:07 · 463 阅读 · 0 评论 -
CSS滤镜透明度
filter:alpha(opacity=50); /*IE*/-moz-opacity:0.5; /*MOZ , FF*/opacity:0.5;/*CSS3, FF1.5*/原创 2013-01-22 16:52:57 · 501 阅读 · 0 评论 -
css 组件之——文字层浮在图片之上
代码如下:说明*{padding:0;margin:0;}.images-content{position: absolute;z-index: 1;left: 0;bottom:0;width: 100%;color: #fff;background: rgba(0,0,0,.7);height:原创 2013-07-22 21:23:13 · 3321 阅读 · 0 评论 -
chrome表单自动填充去掉input黄色背景解决方案
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式:input:-webkit-autofill {background-color: #FAFFBD;background-image: none;color: #000;}在有些情况下,这个原创 2013-08-21 15:39:27 · 55666 阅读 · 2 评论 -
CSS样式规范
规范概述制定本规范的目的在于使我们的CSS代码更加易于维护和重用,从而提升效率执行本规范时建议的流程 建议使用D(esign)C(oding)D(ebug)V(alidate)R(oundup),即DCDVR的流程。首先需要规划样式并分为共有样式和页面个性化样式,然后才开始编码,编码的同时进行Debug,Validate和代码片断的总结,而不是在所有模板都完成后才进行这三个步骤。一转载 2013-08-21 15:18:45 · 673 阅读 · 0 评论 -
如何解决两个相邻的span中间有空隙
span中间不要有换行、或者空格或者在样式上加上float:left原创 2014-04-03 15:56:57 · 7998 阅读 · 0 评论 -
IE7下的select框高度设定
一:问题提出这个是一个广为人知的bug了。在IE7下面无法设定select的高度:select {height:40px;}上面的设定能够在chrome跟firefox下面有效,如下图: 在IE7下面的效果就是IE浏览器默认的高度: 应该怎样去思考这个问题?我努力尝试网上各种各样的方法,有javascript模拟的,有css模拟的。转载 2014-03-26 15:37:08 · 3410 阅读 · 0 评论 -
Placeholder for IE (input框中有提示文字 输入正式文字时,提示文字消失)
无标题文档//placeholder IE8var _placeholderSupport = function() { var t = document.createElement("input"); t.type = "text"; return (typeof t.placeholder !== "undefined");}();wi转载 2014-03-26 17:42:02 · 4633 阅读 · 1 评论 -
十大响应式Web设计框架
对于设计师而言,网站设计中的任意一环节都不容忽视。时下,借助网上的一些资源,只需简单的几个步骤你就可创建出更具吸引力的设计,包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸,还为用户带来更完美的体验,本文将分享十款最佳的响应式Web设计,助你大大简化工作流程。Gumby FrameworkGumby 2是建立在Sas转载 2014-05-14 08:51:34 · 1769 阅读 · 0 评论 -
Web 前端开发者必知的9 个 CSS 属性
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力。对于前端开发者、网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能。下面列出了一些非常实用的css3属性和使用技巧,希望能够为你的开发、设计工作带来一些帮助。1. 圆角效果如今的Web设计在不断跟进最新的开发技术,纷纷采用html5来开发多样性的Web应用。html5的优势之一,就是之前必转载 2014-05-13 09:15:56 · 923 阅读 · 0 评论 -
判断IE版本并给出提示升级浏览器
判断IE版本并给出提示升级浏览器 http-equiv="Content-Type" content="text/html; charset=utf-8"> type="text/css"> #ie6-warning{ background:rgb(255,255,225) url("背景图片地址") no-repe转载 2014-06-24 08:54:23 · 1970 阅读 · 0 评论 -
取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式。这是大前端调整的样式,样式统一就是好看,o(∩_∩)o 哈哈····看代码:取消chrome下input和textarea的聚焦转载 2014-06-09 11:11:19 · 898 阅读 · 0 评论 -
css设置最小高度 然后自适应
看代码先:min-height:400px; //(解决ie8.9.ff.chrome)*+height:100%; //(解决ie7)_height:400px; //(解决ie6) ie6超出自动溢出代码都有注释,只为了大家能看的更清晰更明白,因为有写同学不太了解hack的处理方式。下面是无注释版,复制就能用的:min-height:400px;*+height:转载 2014-06-09 11:23:07 · 991 阅读 · 0 评论 -
CSS内联元素勿随意换行
CSS内联元素勿随意换行 在写HTML代码的时候,很多人喜欢用换行来使代码排列整齐。比如: 超链接 超链接 超链接 这样写确实会提高代码的阅读性,但是要注意:如果是内联元素,你用回车换行,会被浏览器认为这是一个空格。会产生一个空格的宽度。在某些时候,对于精确定位是有影响的。例如:转载 2014-04-03 16:02:22 · 2142 阅读 · 0 评论 -
DD_belatedPNG解决IE6下PNG不透明问题
尽管大前端决定不再对IE6进行神马支持了,但这种需求还在,就整一个吧!一下是转载知更鸟的内容,实用就好。众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是expression,再到javascript+透明 GIF替转载 2014-03-10 14:23:27 · 512 阅读 · 0 评论 -
IE6 png 透明 (三种解决方法)(转来的哦)
FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的=============================================================================此效果简单,。。。。相当不错 推荐 style="FILTER: progid:DXImageTransform.Microsoft.Alp转载 2013-10-13 11:29:53 · 529 阅读 · 0 评论 -
推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范、CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。CSS书写顺序1.位置属性(position, top, right, z-index, display, flo转载 2013-09-27 16:13:15 · 595 阅读 · 0 评论 -
纯css制作三角、圆形按钮,兼容ie6
原文网址:http://dtop.powereasy.net/Item/3418.aspx以前一直用图片做小三角、圆形按钮等,但有时候实在不太方便,例如换个颜色又要打开ps弄,挺麻烦的。而且对于追求细节和极致的前端工程师来说,能不用图片就不用图片,于是参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。以下是成果,兼容主流浏览器,包括ie6。转载 2013-10-14 14:13:57 · 3931 阅读 · 0 评论 -
教你如何把彩色网页变黑白
4月20日四川雅安地震后,国内各大网站相继将彩色的网站都变成黑白,以此向地震中离世的同胞表示默哀。这里教大家一个简单的方法,让你的彩色网页变黑白的方法。这次我们将以一个现成的网站作为案例,来教大家如何在短时间内让网页变黑白。准备工具:Google浏览器准备网页:一个完整的网站首页,色彩缤纷。操作步骤:转载 2013-12-17 16:26:03 · 2161 阅读 · 0 评论 -
定义文档兼容性,让IE按指定的版本解析我们的页面
作为开发人员,特别是作为Web的前端开发人员 ,最悲催的莫过于要不断的,不断的去调试各种浏览器的显示效果,而这其中最让人头痛的莫过于MS下的IE系列浏览器,在IE系列中的调试我们将会发现没有一个是好伺候的,于是不得不学习各种Hack技术来满足各种浏览器之间的兼容。在这种痛苦中不断的挣扎,MS可能也实在是看不下去了,于是在IE8开始,微软引入了文档兼容性,而这,终于可以让前端的开发人员稍微能够喘口气转载 2014-01-26 15:24:01 · 561 阅读 · 0 评论 -
网站收藏
1、http://www.uimaker.com/ ui制造者2、http://www.qianduan.net/category/tips 前段观察3、http://beniao.blog.51cto.com/389148/310347 Silverlight & Blend动画设计系列4、http原创 2012-05-24 20:29:36 · 1340 阅读 · 1 评论 -
IE6显示PNG图片(img & bg),彻底解决了PNG透明问题
ie6下png透明是前端的障碍!很多时候都很让人头疼,网上什么解决ie6透明的办法非常多,但是没有一个真正解决的很好的,很多都是那种要么不能用,要么ie6下png透明过后图片变形,让人头疼的很!以下我在国外站点上找到的,忘记是哪个网站了,效果非常好,下面是代码:先说调用方法: EvPNG.fix('div, ul, img, li, input');转载 2014-01-29 08:44:59 · 2214 阅读 · 0 评论 -
代码在线制作工具
1、http://ecd.tencent.com/css3/tools.html css3动画在线制作工具原创 2014-02-19 18:09:14 · 905 阅读 · 1 评论