码迷,mamicode.com
首页 > Web开发 > 详细

<转载>div+css布局教程之div+css常见布局结构定义

时间:2015-09-24 23:59:46      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:

在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块:

页面层容器、页面头部、标志和站点名称、站点导航(主菜单)、主页面内容、子菜单、搜索框、页脚(版权和有关法律声明)。

通常采用DIV元素来将这些结构定义出来,类似这样:

<div id="Container"></div> 页面层容器

<div id="header"></div> 页面头部

<div id="content"></div> 页面主体

<div id="globalnav"></div> 站点导航

<div id="subnav"></div> 子菜单

<div id="search"></div> 搜索框

<div id="footer"></div>  页脚

这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。

良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如,原先的代码<table width="80%" cellpadding="3" border="2" align="left">,现在可以只在HTML中写<table>,所有控制表现的东西都写到CSS中去,在结构化的HTML中,table就是表格,而不是其他什么(比如被用来布局和定位)。

举例列举一个常见网站布局结构:

上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到"container"层中又有其它层,结构类似这样:

<div id="Container">

<div id="Header">

<div id="Logo"></div>

<div id="GlobalNav"><ul>a list</ul></div>

</div>

<div id="Content">

<div id="Content-Left"><ul>a list</ul></div>

<div id="Content-Main"></div>

</div>

<div id="Footer"></div>

</div>页面布局如下图:

技术分享

嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#container一个规则让列表居右,再给#GlobalNav一个规则让列表居左,而给# Content-Left的list另一个完全不同的表现。

<转载>div+css布局教程之div+css常见布局结构定义

标签:

原文地址:http://www.cnblogs.com/tianxuan/p/4836840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!