设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > CSS网页布局DIV标签的正确使用_div+css 学习笔记(十九)
CSS网页布局DIV标签的正确使用_div+css 学习笔记(十九)
发布时间: 2014-06-09
div+css网页布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。

什么时候应该用DIV?

虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位。CSS DIV网页布局应该避免滥用div元素一直是我们倡导的,以合适的HTML标签组织文档是CSS网页布局的基础。避免过多使用或单一使用div标签进行网页布局,为大家介绍多标签使用思想与图例说明适当使用其它标签网页。
        也就是说要以多种html标签组合使用,这样多标签组合使用好处不但网页结构具有条理性对搜索引擎排名也有好处。
        页面中div与span元素的使用是一个新问题,我们也容易过多的使用它们。必要及合理的使用div可以明显的增强文档的结构性。

有时候span可以适当替代div来架构布局。

        如果你审视你的HTML文档,发现有着很多的div与span,那你就得换一个眼光来看问题了,是不是存在滥用的情况?

       是不是还有更好的标记来替代它们?若h1可以更好的表示所标记的内容,那你就得放弃p标签或span来定义。

或许这是一对矛盾,我们本身也较难把握该如何正确的使用它们,也或许我们根本就得不到一个明确的答案。

        但有一点需要阐明,我们应该使文档在逻辑上具有清晰的结构,而且更加容易应用样式我们可以将div仅看着是一个容器,或者叫做文档的组成“部分”。我们使用太多的容器,并不是一个明智的模式。而恰到好处居于合理位置的容器,可以让整个文档显的很有条理。
具体多标签使用详解如下:


一、h1 h2 h3标签适当使用


        比如遇到文章标题、栏目标题布局,大家可能采用是div标签来布局设置其字体大小、加粗、字体等样式。
        这里大家不妨使用h1、h2、h3标签来布局,如果页面多次使用h3标签可以赋予不同命名类来区别布局。

DIVCSS5首页栏目标题使用h3标签布局

DIVCSS5最终文章页面标题,我们使用h1标签布局
对H型标签扩展认识
1、h1 h2 h3认识
2、h1 h2 h3标签使用原则
3、css去掉h1 h2 h3加粗样式

二、em标签适当使用

在布局局部小参数、时间等我们可以使用html em标签来布局,布局前将em标签默认斜体样式去掉,再赋予新的想要的CSS样式。

淘宝宝贝页面宝贝价格等参数使用em标签


三、b标签或strong标签适当使用
有时我们对一些有意义的内容想以加粗方式,除了使用css加粗样式外,不妨使用b加粗或strong加粗标签试试。这样可以有利于搜索引擎优化布局。


四、ul li列表使用

对于li标签布局相信大家都明白,通常列表性的布局排版,我们使用ul li来布局比较合适,并且让网页根据条理性。

DIVCSS5栏目页面文章标题列表是最具典型ul li布局运用
ul li相关知识阅读
1、html ul li
2、html ol li
3、css li布局
4、css li不换行

五、dl dt dd组合标签使用
对于新手可能对dl dt dd标签使用不是那么熟悉,不过大家可以将ul li标签布局进行对比看看:
<dl> 
    <dt>栏目标题</dt> 
    <dd>文章标题一</dd> 
    <dd>文章标题二</dd> 
    <dd>文章标题三</dd> 
</dl> 
 
<ul> 
    <li>文章标题一</li> 
    <li>文章标题二</li> 
    <li>文章标题三</li> 
</ul> 
大家进行对比结构不难发现,dl dt dd比ul li就多了一个dt类似专为标题的标签。

可以使用dl dt dd标签布局。




文章来源:森动网小鱼儿,转载请注明出处!