CSS网页布局实用小技巧

  1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

  2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。

  3、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

  临时解决方法:选择符{属性名:B !important;属性名:A}

  4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

  5、li标签前面的图标推荐使用background-image,而不是list-style-image。

  6、IE分不清继承关系和父子关系的差别,全部都是继承关系。

  7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

  8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

  9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  10、与内容无关的图片请使用background

  11、定义颜色可以缩写#8899FF=#89F

  12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

  13、<script>没有language这个属性,应该写成这样:

  以下是引用片段:

  <script type=”text/javascript”>

  14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以 以下是引用片段:

  <h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1>

  15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) 以下是引用片段:

  table{border-collapse:collapse;}

  td{border:#000 solid 1px;}

  16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。

  17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

  18、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效

  <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>

  <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR>

  19、在IE中可能由于注释带来的文字重复问题时可以把注释改为:

  <!–[if !IE]>Put your commentary in here…<![endif]–>

  20、如何用CSS调用外部字体

  语法:

  @font-face{font-family:name;src:url(url);sRules}取值:

  name:字体名称。任何可能的 font-family 属性的值

  url(url):使用绝对或相对 url 地址指定OpenType字体文件

  sRules:样式表定义

  21、如何让一个表单中的文本框中的文字垂直居中?

  如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

  22、定义A标签要注意的小问题:

  当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。

  只定义了一个a:link时,一定要记得把其它三种状态定义出来!

  23、并不是所有样式都要简写:

  当样式表前定义了如p{padding:1px 2px 3px 4px}时,

  在后续工程中又增加了一个样式上补白5px,下补白6px。

  我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。

  可以写成p.style1{padding-top:5px;padding-right:6px;},

  你可能会感觉这样写还不如原来那样好,但你想没想过,

  你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!

  如果以后前一个样式P变了话,你定义的p.style1的样式也要变。

  24、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。

  25、几个常用到的CSS样式:

  1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;

  2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

  3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。

  4)<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

  5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;

  6)FLASH透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。

  针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”

  7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:

  .pictures img {

  filter: alpha(opacity=45); }

  .pictures a:hover img {

  filter: alpha(opacity=90); }

时间: 2025-01-05 20:23:25

CSS网页布局实用小技巧的相关文章

DIV CSS网页布局需要掌握的八大技巧

  你对DIV CSS网页布局需要掌握的技巧是否熟悉,这里和大家分享一下,良好的习惯可能会使你的设计周期加倍缩短. DIV CSS网页布局需要掌握的技巧汇总 以下是进行CSS设计时的八个必要的小技巧,良好的习惯可能会使你的设计周期加倍缩短. 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见.请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,

CSS网页制作技巧:DIV+CSS网页布局常犯错误汇总

文章简介:随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 一.检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检

告诉CSS新手20个小技巧

感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 在过去,我们大量依靠网站设计人员和程序员来帮忙更新网站,甚至一个十分简单的网页也是如此.感谢有了CSS,真是由于她的灵活性,网页的样式可以完全与代码分离.现在,你仅仅需要有CSS的基础知识,甚至是一个初学者也能够轻易的改变网站的外观. 无论你是准备用CSS来创建你自己的网页,还是仅仅想用她来改变你博客的外观,学习CSS基本原则都有助于为你打下CSS的

使用DIV+CSS网页布局在SEO优化的优势

css|seo|优化|网页布局 SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在Google等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 一.精简网页代码 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道. 代码精简所带来的直接好处有两点:一是提高Spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行

CSS网页布局错位:CSS宽度计算

文章简介:CSS网页布局错位. 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px正确代码: <!DOCTYPE html><head><meta http-equiv=&q

CSS网页布局的好与坏

国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉,比较上手: 但是,它却阻碍了一种更好的,更有亲和力的,更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一,使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打

Div+CSS网页布局中CSS无效的十个常见原因

核心提示:我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能. 我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能.下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决

网页图片特效小技巧

技巧|特效|图片特效|网页 这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句.css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子. 图片循环渐显渐隐 效果描述:图片循环渐显渐隐-- 实现方法: 1.把如下代码加入<body>区域中: <img src="http://www.webjx.com/htmldata/2005-05-25/image1.gif" name="u"

DIV CSS网页布局学习中容易出现的问题汇总

css|网页|问题 应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题.现在总结一下,以便大家能够看到明白问题出在那里. 一.CSS校验的问题 我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验.有些未通过CSS2.0校验,主要校验错误都是:"Line : 0 font-family: 建议你指定一个种类族科作为最后的选择"W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束.例如"sans-serif"就