WEB标准的CSS网页布局技巧5则

2016-02-20 00:01 8 1 收藏

下面图老师小编跟大家分享一个简单易学的WEB标准的CSS网页布局技巧5则教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）　　WEB标准的CSS网页布局，需要注意的地方有很多。我们在webjx.com上作过很多介绍，今天介绍五个需要注意的地方。

一、永远使用小写字母

不好的做法：
DIV
PHere's an interesting fact about corn. /P
/DIV
好的做法：
div
pHere's an interesting fact about corn. /p
/div
二、让引号伴随着属性

不好的做法：
class=wwwwebjxcom
正确的做法：
class="wwwwebjxcom"

三、有必要的代码注释

　　使得你的代码在长时间内依然能够保持容易理解和维护。
　　作为开发人员，有必要给代码进行注释。
　　有注释的代码，它能帮助我们阅读，保持清晰的思维和思路。
　　日后也方便快速修改和调试。不仅方便了自己，也方便了别人。

四、切勿使用直线

　　或许大家有疑问，为什么不提倡使用直线呢，这是一个很有用的标签。
　　但大家不要忘记，Web标准和webjx.com一直强调的是表现与内容的分离。
　　直线是表现的一部分，将它写放于HTML文档中，显然是不合适的。因而切勿使用直线。

五、切勿使用内嵌样式

　　样式表文件分离到外部样式表文件中，与HTML文档分开。使用内嵌样式就失去了CSS网页布局的意义。

　　但内嵌样式可以在调试是使用，在最终发布网站时，需要去除所有的内嵌样式。

来源:http://www.tulaoshi.com/n/20160220/1631074.html

上一篇： jQuery插件实现css3效果
下一篇：把网页按钮伪装成超链接

看过《WEB标准的CSS网页布局技巧5则》的人还看了以下文章更多>>

WEB标准布局的Div + CSS 高度自适应解决方法

标签： Web开发

自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同，用 Table 很容易实现，但采用 Div + CSS 就显得比较麻烦了。按照一般的做法，大都采用背景图填充或 JS 脚本的方法使高度相同，但这些都不是最好的办法，我认为… 下面介绍采用“隐藏容器溢出”和“...

css布局实例:网页布局的方法

标签： Web开发

许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居中或顶部对齐显示。但是你又不喜欢用table来实现他，那怎么办呢？实现的方法很多，有根据视觉错觉实现的，有用JS控制使高度相等的，还有采用容器溢出部分隐藏和列的负底边...

css网页制作实用技巧9则

标签： Web开发

本篇总结了一些css常用技巧，为网站重构打下基础，但愿您能学到一点有用的东西。一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《css基本语法》。二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100，但是在CSS中，你必须给一个准确的...

网页设计 CSS网页制作实用技巧九则

标签： Web开发

一.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《css基本语法》。二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100，但是在CSS中，你必须给一个准确的单位，比如：" width:100em。只有两个例外情况可以不定义单位：行高和0值。除...

css教程：网页布局

标签： Web开发

用CSS 来布局很容易。如果你已经习惯用表格布局的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或相对地用彼块取代此块。定位定位属性position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或...

查看更多精彩>>