<转载>div+css布局教程之div+css常见布局结构定义
在使用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常见布局结构定义的更多相关文章
- Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)
[Android布局学习系列] 1.Android 布局学习之--Layout(布局)具体解释一 2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数) ...
- Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)
[Android布局学习系列] 1.Android 布局学习之——Layout(布局)详解一 2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数) 3.And ...
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- <转载>Div+Css布局教程(-)CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- Div+Css布局教程(-)CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- css关于控制div靠左或靠右的排版布局
关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...
随机推荐
- BZOJ 1029: [JSOI2007]建筑抢修
1029: [JSOI2007]建筑抢修 Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有 ...
- 本地机apache配置基于域名的虚拟主机详解
1.打开apache的httpd.conf文件,找到# Virtual hosts#Include conf/extra/httpd-vhosts.conf这一段把Include conf/extra ...
- 搭建你的持续集成server - CruiseControl step by step(1)
CruiseControl是CIserver的老者,诞生已是多年,在很多方面,CruiseControlserver已经成为持续集成实践的同义词.而如今,CruiseControl已发展成为一个家族式 ...
- 公共 DNS server IP 地址
公共 DNS server IP 地址 名称 DNS server IP 地址 CNNIC SDNS 1.2.4.8 210.2.4.8 114 DNS 114.114.114.114 114.114 ...
- stm32之PWM
PWM是pulse width modulation的缩写,即脉冲宽度调制.其通过对一系列脉冲的宽度进行调制,来等效地获得所需要波形: 1.PWM是一种对模拟信号电平进行数字编码的方法.通过高分辨率计 ...
- iOS开发关于AppStore程序的上传流程
主要内容: 1.创建唯一标示符App ID(前提是你的程序在真机上测试没有任何问题) 2.申请发布证书 3.申请发布描述文件 4.iTunes Connect创建App并填写信息 5.选择证书编译打包 ...
- goahead 移植
1.网上下载goahead-3.1.-0-src.tgz包 2.解压 tar -zxvf goahead-3.1.-0-src.tgz 3.编译 cd goahead-3.1.-0 make CC=a ...
- 乐观锁&悲观锁
悲观&乐观,只是对数据加锁的时机与粒度. 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这 ...
- Solr4.7从数据库导数据
实际工程应用中,从数据库导出数据创建索引再常见不过了,现在实验一下从数据库导入数据创建索引. 一.版本说明 Solr版本:4.7.0 数据库:sqlserver2005 二.配置步骤 1. 准备的j ...
- Observer设计模式【利用商品概念解释】
每个人都想过着富有的生活,这是很正常的. 这里以开店进货为例. 在讲之前解释英语单词: Observer:查看:遵守 Observable:可见的,公开的. 从单词可以知道:商品用来卖,所以公开,继承 ...