博文

目前显示的是标签为“css”的博文

条件注释判断浏览器

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> <!–[if IE]> 所有的IE可识别 <![endif]–> <!–[if IE 6]> 仅IE6可识别 <![endif]–> <!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–> <!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–> <!–[if IE 7]> 仅IE7可识别 <![endif]–> <!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–> <!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–> <!–[if IE 8]> 仅IE8可识别 <![endif]–> <!–[if IE 9]> 仅IE9可识别 <![endif]–>   <!–[if lt IE 9]> 加载CSS1 <!–[else]> 加载CSS2 <![endif]–> 这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范, 如果把ELSE语句去掉,则正确. 方法1: 加载CSS2 <!–[if lt IE 9]> 加载CSS1(可以把要重写的写在这里). <![endif]–>  

如何居中一个浮动元素?

设置容器的浮动方式为绝对定位 然后确定容器的宽高 比如宽500 高 300 的层 然后设置层的外边距 Div { width:500px ; height:300px; margin: -150px 0 0 -250px; position: absolute; left:50%; top:50%; background-color: #000; }  

CSS 控制最小宽度( IE 与 Mozilla Firefox 都好使)

1.宽度最小值:   min-width:785px; width:expression(document.body.clientWidth < 800 ? “785px” : “100%” );   (IE 与 Mozilla Firefox 都好使)       2.高度最小值: box { min-height:100px; /*高度最小值设置为:100px*/ height:auto !important; /*兼容FF,IE7也支持 !important标签*/ height:100px; /*兼容ie6*/ overflow:visible; }

帝国CMS排行榜的调用方法

A.首先要说明,目前排行调用实现的是:一周(一月,一年)内新增的信息,按点击排行的调用. 目前的排行调用方式,比较适合新闻网站,缺点是,如果本周无更新,就什么也调不出来了。例如一天没更新,后台的24小时排行常常是无内容。具体方法:   问:帝国是否可以实现类似本月热点排行之类的功能   前提是开启标签支持SQL语句。 SQL标签的应用 已带模版的标签为例: [ecmsinfo]”select * from phome_ecms_news where newstime > UNIX_TIMESTAMP()-86400*30 order by onclick desc limit 10″,10,30,0,24,7,0[/ecmsinfo]   30 是天,当然你也可以修改为7,365,1000,自己修改合适的时间。 10 是调用多少条,自己修改为合适。 24 是SQL标签的类型,必须为24系统才会执行前面的SQL。   问:能否指定栏目调用呢? [ecmsinfo]”select * from phome_ecms_news where newstime > UNIX_TIMESTAMP()-86400*30 AND classid in(‘2′,’3’) order by onclick desc limit 10″,10,30,0,24,7,0[/ecmsinfo]   注意红色部分:可以填写你需要调用的栏目ID(注意:必须为终极类)   问:那调用当前栏目呢?这样模就更自动化了。   首先要使模版支持程序代码: 具体操作:后台—系统设置—参数设置—信息设置—模板是否支持程序代码:选择(是) 标签如下: global $navclassid; ?> [ecmsinfo]”select * from phome_ecms_news where newstime > UNIX_TIMESTAMP()-86400*30 and classid=$navclassid order by onclick desc limit 10″,10,30,0,24,7,0[/e...

DIV+CSS 常见问题及解决办法整理

【IE6】浮动双倍边距bug: 问题 :同时使用“float”和“margin”,则margin在IE6下实际显示为双倍。 解决:给浮动容器定义display:inline 【IE6】width和height值 = 最小值 问题:IE6不认min-height,但hight=min-height。若只设定min-height,IE6下等于没有高度;若只设定高度,IE6会自动将内容撑大。标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的。 解决: height: auto!important; /*使其他浏览器高度自适应*/ height: 100px; /*针对IE6 最小高度*/ min-height: 100px; /*针对其他浏览器最小高度*/ 【IE6】为什么无法定义1px左右高度的容器? 问题:这是因为默认的行高造成的 解决:(选择一种) ①、overflow:hidden; ②、zoom:0.08; ③、line-height:1px; 【IE6】mirror margin bug 问题:当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题 解决:外层元素设定border 或 设定float。 【IE6】浮动外层宽度问题 问题:float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。 解决:float元素如果作为布局用或复杂的容器,都要给个宽度。 【IE7、FF】高度不能自适应 问题:父层div不能自适应子层div的高 原因:子层设置了浮动,而父层没有浮动 解决:(按实际情况选择一种) ①、设置父层div浮动 ②、取消子层div浮动 ③、在横向浮动的多个子对象后加一个空div,并 设置clear:both; ④、为父层设置:{overflow: auto; _height:1%;} 前者针对FF、IE7;后者针对IE6 【IE7、FF】横向上的撑破容器问题 问题:如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。 解决:内容可能撑破的浮动容器需要定义width。 【All】文字本身的大小不兼容 问题:同样是font-size:14px的宋体文...

CSS打印样式表注意一览

先来了解一下什么叫打印样式?打印样式也就是说通过CSS技巧”>CSS指定给打印机来识别的打印时的输出样式。在HTML中链接的打印样式是: <link rel=”stylesheet” rev=”stylesheet” type=”text/css” media=”print” href=”/css/print.css” /> 基中的media=”print”就是表明这个样式是指定给打印设备读取的。而在显示器上使用的则是media=”screen”,用在投影仪上的则是media=”projection”。除了这些还有手持设备,可以说W3C在未来的WEB发展上做好了一定的预见性。 打印样式有哪些注意事项呢? 1、打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被设置可以打印背景的情况下才能打印出背景。(ie的高级选项中可选) 2、 打印设置使用的是物理单位 ,所以尺寸最好不要用像素(px),可以用pt也可以用cm 3、打印与网页不一样,打印一定要留下白边,单位用英寸(in)。 4、如果需要在打印内容中出现图片,请在HTML代码中加入。 5、尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。 6、隐藏不需要的或是次要的内容。 7、尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。例如,基于Gecko的浏览器(例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。(此处意见由怿飞提供) 如何测试打印样式?通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这个打印预览来做测试。

div+css布局列表元素ul ol li dl dt dd详解

dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,其实w3c提供了很多元素辅助布局都是有它的用处的,而不尽是div。 块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表。 <ol> <li>……</li> <li>……</li> <li>……</li> </ol> 表现为: 1…… 2…… 3…… ul 无序列表,表现为li前面是大圆点而不是123 <ul> <li>……</li> <li>……</li> </ul> 多人容易忽略 dl dt dd的用法 dl 内容块 dt 内容块的标题 dd 内容 以这么写: <dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>

DIV+CSS圆角的简单实现方法

做网站设计的时候,免不了和DIV+CSS打交道,而CSS圆角则是网站设计必经的一课。比较了网络上众多的CSS圆角实现的方案,包括不用图片纯CSS实现圆角的许多方案,结果是不用图片的CSS圆角无一例外,都使用了大量的冗余无意义的css代码,而且在IE、Firefox、chrome等多浏览器下的兼容性不容乐观。 总结一下,建议大家还是使用图片做背景的CSS圆角实现方案。一张图片利用CSS定位,实现DIV的四个边角都是圆角。这样的好处是,只需要一张圆形的图片,就可以实现四个圆角了。 HTML代码: <div> <div> <SPAN></SPAN> <SPAN></SPAN> 这里是主体内容…. <SPAN></SPAN> <SPAN></SPAN> </div> </div> CSS代码: .nav{ position:relative; width:500px; margin:0px auto; background:#eeeeee; } .nav2{ border:1px solid #dddddd; padding: 4px 0px 2px 0px; height:42px; text-align:center; } /*css圆角处理*/ .nav .leftTop{/*css圆角左上角*/ background:url(images/wbb.gif) no-repeat left top; width:10px; height:10px; position:absolute; left:0; top:0; } .nav .rightTop{/*css圆角右上角*/ background:url(images/wbb.gif) no-repeat right top; width:10px; height:10px; position:absolute; right:0; top:0; } .nav .leftBottom{/*css圆角左下角*/ background:url(images/wbb.gif) no-repeat left bottom; width:10px; height:10px; pos...

CSS Hack 汇总快查

屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7与IE5.0可以识别 *+html select {…} 当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 仅IE7可以识别 *+html select {…!important;} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 IE6及IE6以下识别 * html select {…} 这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 html/**/ >body select {…} 这句与上一句的作用相同。 仅IE6不识别,屏蔽IE6 select { display /*屏蔽IE6*/:none;} 这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 仅IE6与IE5不识别,屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 仅IE5不识别,屏蔽IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。 盒模型解决方法 selct {width:IE5.x宽度; voice-family :”\”}\””; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 清除浮动 select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级...

使用CSS Hack兼容浏览器

一、IE条件注释 1)针对某个具体IE版本应用样式表文件 <!– [IE条件注释,适用IE7浏览器] –> <!– [if IE 7] > <link href=”image/ie7.css” type=”text/css” rel=”stylesheet” /> <![endif]–> <!– [IE条件注释,适用IE6浏览器] –> <!– [if IE 6] > <style type=”text/css”> @import url(“ie6.css”); </style> <![endif]–> <!– [IE条件注释,适用IE5.5浏览器] –> <!– [if IE 5.5000] > <style type=”text/css”> @import url(“ie55.css”); </style> <![endif]–> 由于IE5.5的版本号有点特殊,定义时应写成IE 5.5000 2)针对所有IE版本应用样式表文件 <!– [IE条件注释,适用IE5及更高版本浏览器] –> <!– [if IE] > <style type=”text/css”> @import url(“ie.css”); </style> <![endif]–> 3)针对一定范围IE版本应用样式表文件 如果要实现在一定版本范围内IE浏览器中有效,可以结合lte、lt、gte、gt 和!关键字,指明一个使用范围,详细说明如下:  lte:Less than or equal to 的简写,也就是小于或等于的意思。  lt:Less than 的简写,也就是...

浏览器BUG处理方法整理(部分)

1. 星号* IE都能识别*,标准浏览器如FF不能识别*。 例:p { color:yellow; *color:red;} 类似的有 + 加号 只有IE解释 p{color:red; +color:blue} IE 显示blue   FF显示 red 2.!important IE6及以下将会忽略该样式,IE7 FF将支持; p{color:red !important;color:yellow;} IE7 FF将红色   IE6显示黄色 此处注意的是!important方法只是按上述格式后才被IE6及以下忽略,除此之外的提高样式权重方法可通用。 3.下划线。 IE6及以下版本将运用该样式,其他将忽略 p{color:red; _color:blue} 4、注释: p {color:red};    这种样式在IE6中是可以应用显示的,而在IE5及以下版本是不会被处理的,所以可以针对IE5/6进行区别 5、@IMPORT: 在@IMPORT中使用URL来导入样式,标准用法是将URL中的值带上引号,如下@IMPORT URL(“newstyle.css”);这种用法   可以被IE5以上的浏览器及FF支持,从而实现了IE4的样式单独处理. 另外,还有一个方法: @IMPORT URL(“noie.css”) screen; screen是用于指定设备类型的选项,screen用于屏幕显示,print用于打印设备显示但是IE对这种方法不支持,,所有的IE浏览器,从而可以进行IE和FF的区别。 6、属性选择符: 用于对具有特定属性的对象进行选择 span[class=left]{color:blue}    span[title]{color:red;}     IE6不支持,但是在FF里面工作正常,所以可以对IE和FF进行分别处理. 在实际开发中,经常要对IE和FF进行分别处理,可以用如下代码: #content{ color:red; } [xmlnx] #content{ color:blue } 此种方法我觉得很实用,也经常用,推荐朋友使用,如需更详细的说明,我可以再发贴。 7.子对象选择符: span>p{color:red} IE6也是没有支持,也可用来区别IE和FF 8、Tantek方法 #content{...