DIV适用场合及其他常用布局标签

开发 前端
本文向大家介绍一下DIV的应用场合,虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位,希望本文介绍对你有所帮助。

在学习网页布局的过程中,你可能会遇到DIV的使用问题,这里和大家分享一下DIV的适用场合,相信本文介绍一定会让你有所收获。

什么时候应该用DIV?

  虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位。例如我们要定义一块头部的区域,一般会这样定义一个DIV:

  这里就是头部框架里要写的内容

  当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.

  查看如下定义代码
  

  1. <ulidulid="navbar"> 
  2.   <liidliid="articles"> 
  3.   Articles</li> 
  4.   <liidliid="topics"> 
  5.   Topics</li> 
  6.   <liidliid="about"> 
  7.   About</li> 
  8.   <liidliid="contact"> 
  9.   Contact</li> 
  10.   <liidliid="contribute"> 
  11.   Contribute</li> 
  12.   <liidliid="feed"> 
  13.   Feed</li> 
  14.   </ul> 
  15.   <h1idh1id="masthead"> 
  16.   <ahrefahref="/"> 
  17.   <imgsrcimgsrc="/pix/alalogo.gif"alt="ALISTApart:ForPeopleWhoMakeWebsites"/> 
  18.   </h1> 

  No.214
  定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.
  他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义
  
其它最常用的布局标签

  h1
  这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了^_^

  ul
  这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)

  b
  这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择

  h2
  h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p
 

【编辑推荐】

  1. DIV+CSS网页重构概念详解
  2. 解析DIV绝对定位和相对定位
  3. 深入剖析DIV概念和用法
  4. Div+CSS布局入门之写入整体层结构与CSS
  5. DIV+CSS开发过程中影响SEO的制作细节

 

 

责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-06-13 16:53:15

UML类

2010-06-07 13:51:59

Hadoop简介

2017-12-07 14:40:05

前端FlexCSS

2010-09-09 16:36:36

DIV标签

2010-08-24 10:11:26

DIV标签

2022-03-09 18:09:47

前端CSS代码

2010-08-27 13:46:58

DIV+CSS

2010-08-24 09:52:55

DIV标签

2019-05-20 10:38:42

UDP协议场合

2009-06-17 14:13:10

Eclipse常用技巧

2011-05-05 09:45:34

云计算试点城市

2010-08-19 13:43:07

marginpadding

2010-08-24 10:01:05

DIV

2010-08-27 10:59:11

DIVTable

2020-07-20 14:00:26

架构运维技术

2010-08-27 08:53:18

CSS类id命名DIV

2010-09-14 08:53:06

DIVTable

2023-11-29 07:43:30

2010-08-04 16:08:23

DB2 物化查询表

2010-08-24 11:00:55

DIV CSS
点赞
收藏

51CTO技术栈公众号