关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一、CSS HACK 以下两种方法几乎能解决现今所有HACK. &nbs
我们看看list-style-type在IE与FF中希奇的现象解析,我们看下面的代码: 经典论坛原文 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢? 我们可以采取"视觉欺骗大法"——定义渐变边框来实现 代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
white-space: nowrap当中文文字很长的时候(中间没有空格也没有换行符号),不管是IE还是firefox,到达边界都会自动换行。但是有的情况,我们并不希望这样。比如:当在几个li并排排列,不想让每行的最后的一个li的文字自动换行,那就可以用本属性了。使用这个css属
1.css 字体简写规则当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写这些属性:
有朋友使用DIV居中,但是却发现DIV居中失灵了,是怎么回事呢?下面给大家解决一下问题,呵呵! 1、一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
目前用来清除"闭合(清除)浮动"的方法,主要是一下四种: 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYP
以下为引用的内容:<style>/* -----页面统一设置----- */html,body{ margin:0px; padding:0px; background:url(images/boydBg.gif) repeat-x;}img{ border:0px; } /* -----开始顶部统一设置----- */#head{ width:1000px;
之前就见过很多网站在侧边栏上使用<dl />标签对来完成侧边栏栏目的布局,最近在研究DEDECMS的默认模板时,也发现该模板在大量的地方使用<dl></dl>标签对来完成页面的布局,比如模板首页的栏目循环以及侧边栏的栏目都是用<dl></dl>标
在表格布局时代,不需要过多的考虑垂直居中的问题,在单元格中,默认就是垂直居中的,一行文字是垂直居中,三行文字同样也会垂直居中。进行CSS网页布局,这样的形式改变了。文字默认是居于容器顶部。如下所示: <!DOCTYPE html PUBLIC &
IE6.0环境中双倍边距BUG。先看下面的CSS代码。 div {float:left;margin-left:10px;width:420px;height:150px;border:1px solid red} 这样设置以后。本来左边距设置为10px,但IE6.0解释为20px,
同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋,下面让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。 CSS常见的让元素水平居中显示方法 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表
字体大小 CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符。另外,该数值后可能有一个可选的单位标识符。 另外,CSS2规范定义了两个单位类型:绝对单位和相对单位。
我今天晚上,做一个快印公司的网站布局,在Div镶套布局中,父标签DIV的高度不变。在IE下没有问题,但是在FIREFOX下就有问题了。如图:发了两张同样的怕百度盗链,另一张放在我网站上,在教育网内http://hiphotos.baidu.com/one2two/pic/item/a7c3653de3c3f1de9f3d6
初学div css网页布局的设计者经常会被一个问题困扰着。在IE和其他(Mozilla、Opera等)浏览器里显示的效果经常会偏差2px。这是因为IE对盒之间距离的解释的bug造成的。一个技巧提示帮我们找到了解决的方法:用!important。!important是CSS1就定义的语法,作用是提高指
CSS网页布局,说难,其实很简单。说它容易,往往有很多问题困扰着新手,介绍了非常多的技巧,这些小技巧与知识能事半功倍的给大家以帮助。然而更多的时候,我们往往被一些小问题缠着不能轻松。今天向大家介绍八个技巧,这些技巧显得很有用。一、若有疑问立即检测在
text-overflow:ellipsis大家用过吧,在win上大家都知道IE跟Opera可以搞定,假如你看下面的代码你会不会兴奋呢?text-overflow:ellipsis;-o-text-overflow:ellipsis;-icab-text-overflow: ellipsis;-khtml-text-overflow: ellipsis;-moz-text-overflow: ellipsis;-w
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 和 width, 但
CSS命名规范一.文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;二.常用类/ID命名规范页 眉:header内 容:content容 器:container页
CSS Expression也称为CSS表达式,它是动态设置CSS属性的强大方法,但也存在着一定的危险性。在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中
其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使
CSS兼容方案 最新的一些技巧 让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了。 .e {/*FF OP*/background-color: #FF0000}html* .e{/*Sa I
今天做了FLASH上加入一个链接的效果,通常情况下这种事应该改一下FLASH原文件就可以,但在非凡情况下需要我们加入一个层然后加入一个链接的方法实现。 先简单说一下实现这种效果的一般方法: 建好一个块模型DIV,然后放入两个子元素DIV,一个用来放FLASH,另
今天要学习的CSS特点包括: 字模系列字号字重字体风格字体参数文字变形文字修饰字体 2.2 按照字体名称调用字体第1个问题:你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗?很
这篇文章主要讲了CSS对背景图片渲染效率的一些经验和研究:书写高效的CSS - 漫谈CSS的渲染效率http://www.52css.com/article.asp?id=787CSS对Web页面载入效率的影响http://www.52css.com/article.asp?id=751树型结构竖线用样式表(背景图)来实现,样式表背景图片只
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器,以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在52CSS.com大量的技术文档中,也包含了这方面的内容。轻松的解决CSS bug是
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对于这个属性的理解大家都不成问题的。但是对于"浮
本篇文章适合css新手学习,对于已经掌握了css的朋友们也可以通过本片文章来复习知识。 作者通过实践,认为在有些情况下css的代码是可以更加简洁的,多数情况下是因为新手对于一些具有多属性的元素代码不能精简来写造成的。 精简的代码对于网页是有莫大的
今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可
用HTML制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果,这并不是正确的工具和灵活性就可以实现的。 任何使用过HTML一个多星期的人都知道HTML是一种非常好的网页制作工具。所以有时候我们不得不制作体积相当大的GI
一、CSS字体属性简写规则一般用CSS设定字体属性方法:font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;可以把它们全部写到一行上去:font: bold italic small-caps 1em/1.5em verdan
一个网站能切换不同的CSS风格大家应该都了解,像众所周知的腾讯在今年改版时也增加了切换皮肤的功能。根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意。下面说
区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green !important;background:blue;区别IE7与FF:background:orange; *background:green;区别FF,IE7,IE6:background:orange;*background:green !important;*backgrou
屏蔽IE浏览器(IE下不显示)*:lang(zh) select {font:12px !important;} /*FF,OP可见*/select:empty {font:12px !important;} /*safari可见*/这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7识别* html {…}当面临需要只针对IE7做
一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。 所以下面的代码: p {
在进行CSS网页布局开发时,您肯定遇到过形形色色的布局问题,虽然有大量的教程提供帮助,但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。 一、有疑问,先验证 在调试时,先对您的代码进行验证往往
本文向大家描述一下解决XHTML+CSS兼容性的五个方案!虽然使用XHTML+CSS构架好处不少,但也确实存在一些问题,这里和大家分享一下解决方案。 解决XHTML+CSS兼容性的五个方案! 使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思
浏览器显示页面是一行一行的按顺序执行代码,也就是说写在前面的先执行显示,而对于左中右3栏布局的设计,代码要么是从左-->中-->右来书写,要么就是到过来从右-->中-->左来书写,要做到要求的效果,那首先要书写的是中栏的代码。 所以我首先定
CSS+DIV是网站标准(或称"WEB标准")中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误
1、导航菜单使用图片、FLASH 导航菜单使用图片、FLASH当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和FLASH。如果你非要使用漂亮的图片来做导航的话,可以使用背景替换的方法(我会在下次谈到这一个方法的);如果你要使用FLASH做导航,那我就没你办
一个样式(Style)的语法由三部分构成:Selector(中文叫选择器有点怪怪的,就用英文吧),属性(Property),属性值(Value)。selector {property: value}举个例子,下面的代码p就是selector,color就是属性,blue就是属性值。p {color:blue}HTML中所有的Tag都可以作为se
今天有一好友MSN上突然问我这个话题,突然想到其实在论坛里面,关于DIV和TABLE表格的使用疑问有不少人发过贴子问过,这里我想整理一下我的思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于C
使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。 清除容器浮动 #main { overflow:hidden;} 不让链接折行
CSSdiv网页布局对SEO的影响漫谈SEO是指搜索引擎优化,主要就是通过对网站的结构、标签、排版等各方面的优化,使搜索引擎更容易抓取网站的内容,并且让网站的各个网页在等搜索引擎中获得较高的评分,从而获得较好的排名。DIVCSS网页布局对SEO有着积极而富有意义的影
不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能
这段时间在学习css,总结了一些技巧来和大家分享下: 1、使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。 2、清除容器浮动
总结出关于W3C CSS标准的一些经验: 一、少用偏门。类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。 二、center不是float的值。很多新手都会把center误认为是float的值
在大多数文章中,我们并未特别注意CSS文件的可维护与可读性的问题,当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很