DIV CSS网页布局需要掌握的技巧汇总

css|技巧|网页

1.若有疑问立即检测

  在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

2.使用浮动功能时记得适当清除指令 

  浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

3.边界重合时利用padding或border来避免

  您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

4.尝试避免同时对元素指定padding/border以及高度或宽度

  Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

5.不要依赖min-width/min-height

  Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

6.若有疑问,先减少百分比

  有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

7.记住“TRouBLed”写法

  Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

8.只要不是零的值,都要指定单位

  CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)

时间: 2024-09-26 16:42:21

DIV CSS网页布局需要掌握的技巧汇总的相关文章

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

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

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

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

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

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

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

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

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义

核心提示:DIV CSS网页布局中常用的列表元素ul ol li dl dt dd释义 ol 有序列表 <ol><li>--</li><li>--</li><li>--</li></ol> 表现为 1--2--3-- ul 无序列表,表现为li前面是大圆点而不是123 <ul><li>--</li><li>--</li></ul> 很多人容

DIV+CSS网页布局对SEO优化有哪些影响

第一:DIV+CSS页面对于spider爬行效率 Div+Css的代码精简是table无法比拟的,即使DIV CSS的html加上对应CSS文件一般都小于table的html文件,div+css实现了样式和布局完全分离,前台垃圾代码大量减少,内容更加突出,让蜘蛛在你的网站上快速爬行,短时间内爬完你的网站. 第二:改善网页打开速度 众所周之:客户是上帝.搜索引擎也不例外,所以搜索引擎会优先抓取客户体验比较好的网站.真正的SEOer不只是为了追求收录.排名,快速的响应速度是提高用户体验度的基础网站.

DIV+CSS网页布局对SEO有的影响

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在Google等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 一.精简网页代码 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道. 代码精简所带来

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

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

div+css网页布局时不能滥用div元素

CSS网页布局应避免滥用DIV元素一直是我们所倡导的,以合适的HTML标签组织文档是CSS网页布局的基础. 页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们.必要及合理地使用div可以明显的增强文档的结构性,这也是我们一直提倡的. 如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥用的情况?是不是还有更好的标记来替代它们?如h1可以更好地表示所标记的内容,那你就得放弃p或span来定义. 或许这是一对矛盾,我们本身也较难把