如何用div+css布局页面
如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
解成一个容器,它可以放文字,图片,表格等等.
| |
| header |
| |
|------------------------------------|
| |
| |
| midbody |
| |
| |
| |
| |
| |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
<div id="header">/*上*/
</div>
<div id="midbody">/*中*/
</div>
<div id="foot">/*下*/
</div>
</div>
解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码:
#container{
width:90%;/*宽度*/
margin: 0 auto;/*边界auto为自动,这里用到了缩写形式意思为上下为0,
左右自动*/
}
/*页面头*/
#header{
width:780px;
height: 130px;
margin: 0 auto;
overflow:hidden;/*防止div被撑开,超过div大小就隐藏*/
background:#999999;/*背景色*/
}
/*页面中间*/
#midbody{
width:780px;
height: auto;
height:auto;
margin:0 auto;
overflow:hidden;
background: #990000;
/*页面底部*/
#foot{
width:780px;
height:100px;
margin:0 auto;
background: #99FFCC;
}
看完整体就要研究部分了,对于部分来说无非就是上下或左右结构了,例如下面的中间又分
为左右。
| |
| header |
| |
|------------------------------------|
| | |
| | midbody |
| | |
|leftside| rightside |
| | |
| | |
| | |
| | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
于是 div结构可写成:
<div id="container">
<div id="header">
</div>
<div id="midbody">
<div id="leftside">
</div>
<div id="rightside">
</div>
</div>
<div id="foot">
</div>
</div>
width:220px;
float:left;/*该层位于外层的左边*/
height:500px;
background:#167692;
}
#rightside{
width:558px;
height:500px;
float:right;/*该层位于外层的右边*/
background: #CCCC00;
}
如果是这样的结构:
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | rightside |
| | rtop |
| | |
|leftside|---------------------------|
| | |rbottom |
| | left | right |
| | | |
| | | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
则div结构为:
<div id="container">
<div id="header">
</div>
<div id="midbody">
<div id="leftside">
</div>
<div id="rightside">
<div id="rtop">
</div>
<div id="rbottom">
<div id="left">
</div>
<div id="right">
</div>
</div>
</div>
</div>
<div id="foot">
</div>
</div>
#rtop{
width:558px;
height:200px
margin:0 auto;
background: #CCCC00;
}
#rbottom{
width:558px;
height:300px;
margin:0 auto;
background: #CCee00;
}
#left{
width:258px;
float:left;
height:300px;
background: #CCCCed;
}
#rightside{
width:300px;
height:300px;
float:right;
background: #Cdfd00;
}
应该很清楚了吧?只要看懂了最外层的到里面都是一样的道理。
如何用div+css布局页面相关推荐
- 使用DIV+CSS布局页面——1
1.什么是div div是一个容器.在HTML页面中的每个标签对象几乎都可以称得上时个容器,例如使用<p>段落的标签. <p>段落</p> <p>标签作 ...
- DIV+CSS布局心得
DIV+CSS布局心得 文章目录 DIV+CSS布局心得 1,清空所有原有样式 随时对HTML和CSS进行注释 2,分析页面布局 DIV+CSS布局页面 页面常用HTML标签 CSS常用选择器 CSS ...
- DIV CSS布局-固定页面开度布局
DIV CSS布局中主要CSS属性介绍: Float: Float属性是DIV CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
- Div+CSS布局入门教程(五) 页面制作-用好border和clear 附加:1.DIV+CSS设计原则 2.DIV+CSS中标签ul ol li dl dt dd用法
这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性. 首先,如果你曾用过table制作网页,你就应该知道,如果要在表格中绘制一条虚线该如何做,那需要制作一个很小的图片来填充,其 ...
- div css教程 属性,Div+CSS布局入门教程
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- 关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局 表格布局 导航 推荐文章 一个猴子成长史 你看个毛线 我就瞅你咋地 村里出了个半边天 一个猴子的成长 ...
- DIV+CSS布局的优势和弊端
DIV+CSS的优势 1.符合W3C标准.这保证您的网站不会因为将来网络应用的升级而被淘汰. 2.对浏览者和浏览器更具亲和力.由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到 ...
- html中表格布局还是div布局,Table布局 VS Div+CSS布局,选哪个?
Table布局 和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
最新文章
- 十分钟理解Java泛型擦除
- 2019年有三AI“春季”划,给我一个荣耀,还你一生荣耀
- 预习-上课-复习:让机器像人一样学习对话
- 一个人的成功取决于晚上的8点至10点--经典语录必读
- 交流电路中的功率和功率因数
- idea terminal 不支持中文
- java同样作用的方法_Java的接口用途和方法
- 参考文献中杂志名字问题
- mysql分页查询所有数据库,数据库分页查询
- android编辑配置文件,如何在android studio中修改配置文件
- l开头的英文车标是什么车_行业冷知识 | 为什么汽车品牌都喜欢用动物做车标?...
- oracle国家字符集
- 如何给AWARD BIOS刷L5420微码?
- 十大排序算法之二路归并排序(难点为对于递归的理解)
- property中ref、value、name的区别
- java编写car类_java编写一个汽车类,有属性:品牌、型号、排量、速度,有方法:启动、加速、转弯、刹车、息火...
- wordcloud的常用函数
- 马士兵内部共享—1658页《Java面试突击核心讲》,面试神技
- Serverless:云时代的软件架构核心思想
- mongodb journal文件格式