div+css布局教程系列1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单布局div+css</title>
<style type="text/css">
#container {
width: 1000px;
margin: 0 auto;
background:#CF3
}<!--这里并没有对container设置height，也就是说，用多少，就会有多少。-->
#header { height:80px; background:#093;}<!--这里同理没有设置宽度width，默认是container的宽度吧？自己认为的，不能代表官方看法-->
#logo{ padding-left:50px; padding-bottom:50px; padding-top:20px;}
#content{ overflow:auto; margin-top:20px; background:#0FF;}<!--此处设置overflow的标签是正统的做法，不建议设置content的高度，能用多少他就给多杀-->
#content-left{ float:left; height:500px; background:#90C; width:200px; margin:20px; text-align:center}
#content-right{ float:left; height:500px; background:#90c; width:700px; margin:20px; text-align:center}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
.clear{ clear:both;}<!--使用float设置了一行多列之后，最好在后面紧接着使用clear：both清除一下上面的格式，防止出错。上面的布局可能会影响到下面。-->
#footer{ height:80px; background:#093;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">这里放置的是logo</div>
</div>
<div id="content">
<div id="content-left">左半边翅膀</div>
<div id="content-right">右半边翅膀</div>
</div>
<div class="clear"></div>
<div id="footer">页脚</div>
</div>
</body>
</html>
在使用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>
文章来自:雨田SEOER
div+css布局教程系列1的更多相关文章
- div+css布局教程系列2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- <转载>Div+Css布局教程（-）CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- Div+Css布局教程（-）CSS必备知识
目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...
- div+css布局教程（1）
margin:Margin属性用于设置两个元素之间的距离. 后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
随机推荐
- python009 Python3 列表
Python3 列表序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.Python有6个序列的内置类型,但最常见的是 ...
- php引入PHPMailer发送邮件
昨天做了一个发送邮件的功能,如果直接用mail()函数,需要拥有自己的邮件服务器,所有引入PHPMailer类方便快捷,简单写一下开发步骤: 一.拥有自己的邮箱账号(作为发件人邮箱) 分两种情况: 1 ...
- hexo干货系列：（二）hexo主题下载及配置
前言 上一篇文章介绍了hexo+gitHub简易搭建属于自己的个人独立博客,但是主题是默认的landscape,略显简单,今天的教程推荐Jacman主题. Jacman是一款为Hexo打造的一款扁平化 ...
- msp430项目编程26
msp430中项目---串行存储器接口 1.I2C工作原理 2.I2C通信协议 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习
- Flex设置PopUpManager创建modal(模态)窗口的背景样式
有一个需求 , 使用PopUpManager弹出的窗口modal模式不可操作的地方颜色太浅, 这样弹出的窗口就不够突出, 搜了下没发现解决办法, 翻看了PopUpManagerImpl源码 , 找到了 ...
- Swift--方法（函数）
方法是执行特殊任务的自包含代码块.你可以给方法名字来表示它的功能,而且在需要的时候调用这个名字的方法来执行它的任务. Swift方法的语法表达很灵活,从类似c的没有参数名的方法到oc复杂的带有名字和参 ...
- eclipse 修改Java代码 不用重新启动tomcat
例子: 1.在tomcat server.xml文件配置加上这句话: <Context debug="0" docBase="C:\Users\admin\Desk ...
- 洛谷——P1546 最短网络 Agri-Net
P1546 最短网络 Agri-Net 题目背景 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 题目描述 约翰已经给他的农场安排了一 ...
- hdu6196 happpy happy happy (meet in middle + 剪枝)
题意 从1到n共计n(<=90)个物品,每个物品有一个价值a[i],儿子和爸爸轮流做游戏,儿子先手.儿子每次选价值最大的{最左边,最右边}的物品,如果价值一样大, 则选取最左边的物品. 爸爸每次 ...
- git获取远程分支
运行 git checkout -b local-branchname origin/remote_branchname 就可以将远程分支映射到本地命名为local-branchname 的一分支 ...