DIV+CSS常用的Html网页布局代码

合集下载

CSS+DIV布局案例

第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。

这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

第二个例子是告诉大家如何让页面居中，如何加上头部。

这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright 等内容。

CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container决定。

html5div布局与table布局详解

html5div布局与table布局详解本⽂实例为⼤家解析了html5 div布局与table布局，供⼤家参考，具体内容如下div布局：html+css实现简单布局。

#container中height不能写成百分数，必须为具体⾼度。

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>div布局</title><style type="text/css">body{margin:0;padding:0;}#container{width:100%;height:650px;background-color: aqua;}#heading{width:100%;height:10%;background-color: azure;}#content-menu{width:30%;height:80%;background-color: chartreuse;float:left;}#content-body{width:70%;height:80%;background-color: chocolate;float:left;}#footer{width:100%;height:10%;background-color: darkgrey;clear: both;}</style></head><body><div id="container"><div id="heading">头部</div><div id="content-menu">内容菜单</div><div id="content-body">内容主体</div><div id="footer">底部</div></div></body></html>效果图：table布局：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>table布局</title></head><body marginwidth="0px" marginheight="0px"><table width="100%" height="650px" style="background-color: aqua"><tr><td colspan="3" width="100%" height="10%" style="background-color: chartreuse">这是头部</td></tr><tr><td width="20%" height="80%" style="background-color: antiquewhite">左菜单</td><td width="60%" height="80%" style="background-color: coral">内容</td><td width="20%" height="80%" style="background-color: cornflowerblue">右菜单</td></tr><tr><td colspan="3" width="100%" height="10%" style="background-color: crimson">这是底部</td> </tr></table></body></html>效果图：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

div布局技巧

关于DIV布局的技巧二、DIV+CSS 网页布局的分类1、一列固定宽度一列布局是所有布局的基础，也是最简单的布局方式，用DIV+CSS 布局的代码如下：XHTML 代码：一列固定宽度CSS 代码：#main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }2、一列自适应宽度自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值，是网页设计中一种非常灵活的布局形式，用DIV+CSS 布局的代码如下：XHTML 代码：一列自适应宽度CSS 代码：#main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; }3、一列固定宽度居中页面整体居中是网页布局中最常见到形式，在传统的表格布局中，使用TABLE 的align="center" 属性来实现，在DIV+CSS 布局中采用如下代码来实现：XHTML 代码：一列自适应宽度CSS 代码：DIV+CSS 网页布局方法探析。

如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利，传统的TABLE 网页布局由于其庞大的HTML 代码，使得其在搜索引擎方面显得有些无能为力，而用DIV+CSS 进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。

但是又由于CSS 对不同浏览器存在兼容性问题，所以对于初学者来说，在使用DIV+CSS 进行网页布局过程中可能会遇到各种问题，本文就给大家探讨几点DIV+CSS 布局的技巧。

4、二列固定宽度在有一列固定宽度布局的基础上，实现二列固定宽度也就很简单了，用DIV+CSS 布局的代码如下：XHTML 代码：左侧右侧CSS 代码：#left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; }5、二列固定宽度居中从一列固定宽度居中的布局方法中，我们就不难完成二列固定宽度居中了，可以使用一个居中的DIV 作为容器，将二列分栏的DIV 放置在容器中，从而就实现二列的居中显示。

介绍网站制作DIV+CSS基本布局实现代码

介绍网站制作DIV+CSS基本布局实现代码
下面小编给大家分享的是介绍网站制作DIV+CSS基本布局实现代码，在这里详细的介绍网站制作DIV+CSS基本布局实现代码，希望对大家有所帮助.
很多企业网站制作布局都具有传统型，基本层次包括：顶部：header、主要区域：main、左侧：sidebar、右侧：containe和底部：footer。

本文主要讲诉用DIV+CSS如何实现这样的布局。

在制作之前我们先注意下浏览器的兼容问题，在IE中，正常的代码就可以完全显示，但在FF中，footer层就会消失。

这是因为FF不知道浮动以后发生的事情，不清楚main的高度为几何，我们看不到它的存在。

我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。

HTML代码如下：
;;
;;
;
;;
;;
;;
;
;;
CSS代码如下：
*{margin:0;padding:0;} //整体布局声明，边距与填充均为零。

DIV常见布局设计

DIV常见布局设计DIV布局是一种常见的网页设计布局方式，它通过使用HTML中的DIV元素（<div></div>），并通过CSS样式来控制其位置和样式。

DIV布局具有灵活性和可扩展性，可以实现各种不同的网页布局和设计效果。

下面将介绍一些常见的DIV布局设计。

1.基本网页布局基本网页布局是最常见的DIV布局设计。

一般情况下，一个网页可以分为页眉（header）、导航栏（navigation）、主内容区（content）、侧边栏（sidebar）和页脚（footer）等部分。

使用DIV布局可以为每个部分创建一个DIV元素，并使用CSS样式来控制其位置和样式。

可以使用浮动、定位、flex等CSS属性来实现不同的布局效果。

2.两栏布局两栏布局是一种常见的DIV布局设计，适用于文章页面、博客页面等。

页面的内容一般分为主内容区和侧边栏两部分。

可以使用浮动或flex布局来实现。

主内容区和侧边栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。

3.三栏布局三栏布局是一种常见的DIV布局设计，适用于网站的主页面、新闻页面等。

页面的内容一般分为左侧栏（left sidebar）、主内容区和右侧栏（right sidebar）三部分。

可以使用浮动或flex布局来实现。

左侧栏和右侧栏的宽度可以通过CSS样式控制，可以固定宽度或自适应宽度。

4.响应式布局响应式布局是一种适应不同设备和不同屏幕尺寸的DIV布局设计。

可以使用CSS媒体查询来检测设备的屏幕尺寸，并根据不同的尺寸应用不同的CSS样式。

可以通过设置不同的宽度、隐藏或显示一些元素来实现响应式布局。

此外，还可以使用CSS框架如Bootstrap等来实现响应式布局。

5.瀑布流布局瀑布流布局是一种以瀑布流式排列元素的DIV布局设计，适用于图片墙、相册等页面。

可以使用flex布局或JavaScript库如Masonry等来实现瀑布流布局。

可以设置每列的宽度，元素会按照一定的规则排列在不同的列中，形成瀑布流效果。

div标签的用法

div标签的用法<div>标签是HTML中最常用的元素之一，用于定义HTML文档的一个区域或部分。

<div>标签没有特定的语义，只是一个用于划分区域的容器。

它通常被用于创建网页的布局或组织网页内容。

<div>标签可以包含任何其他HTML元素，如文本、图像、链接、表格、表单等。

通常，我们可以使用CSS样式来控制<div>元素的样式或布局。

以下是<div>标签的一些常见用法：- 创建网页的头部、主体、底部等区域- 创建网页的导航菜单- 创建网页的侧边栏- 分割页面内容为多个区域或列- 创建网页的网格布局- 包裹其他HTML元素，方便进行样式或布局控制例如，下面的代码演示了如何使用<div>标签创建一个简单的网页布局：```html<!DOCTYPE html><html><head><title>网页布局示例</title>#header {background-color: gray;height: 100px;text-align: center;}#content {background-color: lightgray; height: 400px;text-align: center;}#footer {background-color: darkgray; height: 100px;text-align: center;}</style></head><body><div id="header"><h1>网页头部</h1></div><div id="content"><h2>网页内容</h2><p>这是网页的主要内容。

DIV+CSS网页设计常用布局代码

DIV+CSS⽹页设计常⽤布局代码01. 单⾏⼀列02.03. body{margin:0px;padding:0px;text-align:center;}04. #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}05.06. 两⾏⼀列07.08. body{margin:0px;padding:0px;text-align:center;}09. #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}10. #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}11.12. 三⾏⼀列13.14. body{margin:0px;padding:0px;text-align:center;}15. #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}16.17. #content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}18. #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}19.20. 单⾏两列21.22. #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}23. #bodycenter#dv1{float:left;width:280px;}24. #bodycenter#dv2{float:right;width:410px;}25.26. 两⾏两列27.28. #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}29. #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}30.31.32. #bodycenter#dv1{float:left;width:280px;}33. #bodycenter#dv2{float:right;width:410px;}34.35. 三⾏两列36.37. #header{width:700px;margin-right:auto;margin-left:auto;}38. #bodycenter{width:700px;margin-right:auto;margin-left:auto;}39. #bodycenter#dv1{float:left;width:280px;}40. #bodycenter#dv2{float:right;width:410px;}41. #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}42. //43.44. 单⾏三列绝对定位45.46. #left{position:absolute;top:0px;left:0px;width:120px;}47. #middle{margin:20px190px20px190px;}48. #right{position:absolute;top:0px;right:0px;width:120px;}49.50. float定位⼀51. xhtml:52.53. <divid="warp"><divid="column"><divid="column1">这⾥是第⼀列</div><divid="column2">这⾥是第⼆列</div><divclass="clear"></div></div><divid="column3">这⾥是第三列</div><divclass="clear"></div></div>54.55. CSS:56.57. #wrap{width:100%;height:auto;}58. #column{float:left;width:60%;}59. #column1{float:left;width:30%;}60. #column2{float:right;width:30%;}61. #column3{float:right;width:40%;}62. .clear{clear:both;}63.64. float定位⼆65. xhtml:66. <divid="center"class="column"><h1>Thisisthemaincontent.</h1></div><divid="left"class="column"><h2>Thisistheleftsidebar.</h2></div><divid="right"class="column"><h2>Thisistherightsidebar.</h2></div>67.68. CSS:69.70. body{margin:0;padding-left:200px;padding-right:190px;min-width:240px;}71. .column{position:relative;float:left;}72. #center{width:100%;}73. #left{width:180px;right:240px;margin-left:-100%;}74. #right{width:130px;margin-right:-100%;}75.76. 两⾏三列77. xhtml:<divid="header">这⾥是顶⾏</div><divid="warp"><divid="column"><divid="column1">这⾥是第⼀列</div><divid="column2">这⾥是第⼆列</div><divclass="clear"></div></P><P></div><divid="column3">这⾥是第三列</div><divclass="clear"></div></div>78.79. CSS:80.81. #header{width:100%;height:auto;}82. #wrap{width:100%;height:auto;}83. #column{float:left;width:60%;}84. #column1{float:left;width:30%;}85. #column2{float:right;width:30%;}86. #column3{float:right;width:40%;}87. .clear{clear:both;}88.89. 三⾏三列90. xhtml:91. <divid="header">这⾥是顶⾏</div><divid="warp"><divid="column"><divid="column1">这⾥是第⼀列</div><divid="column2">这⾥是第⼆列</div><divclass="clear"></div></div><divid="column3">这⾥是第三列</div><divclass="clear"></div></div><divid="footer">这⾥是底部⼀⾏</div>92.93. CSS:94.95. #header{width:100%;height:auto;}96. #wrap{width:100%;height:auto;}97. #column{float:left;width:60%;}98. #column1{float:left;width:30%;}99. #column2{float:right;width:30%;}100. #column3{float:right;width:40%;}101. .clear{clear:both;}102. #footer{width:100%;height:auto;}。

HTML的三种布局：DIV+CSS、FLEX、GRID

HTML的三种布局：DIV+CSS、FLEX、GRIDDiv+css布局也就是盒⼦模型，有W3C盒⼦模型，IE盒⼦模型。

盒⼦模型由四部分组成margin、border、padding、content。

怎么区别这两种模型呢，区别在于w3c中的width是content的宽，IE的width是content+border+padding。

具体的可以看下⾯的图：W3C盒⼦（标准盒⼦）：IE盒⼦：Flex弹性布局通过使⽤display：flex；或者display：inline-flex；坏处就是不能再设置⼦元素的float、clear、vertical-align。

在这⾥⾯主要是在元素⾥建⽴主轴（main axis、横向的、⽔平的），交叉轴（cross axis、垂直的，竖向的）。

主轴从左到右，左是main start，右是main end，之间是main size。

交叉轴是从上到下，上是cross start，下是cross end，之间是cross size。

如图所⽰：就⽤这个为例⼦嘛：<div class="box"> <p class="item">1</p> <p class="item">2</p></div>在⽗元素div.box中可以设置的属性有六个：1.flex-direction：row | row-reverse | column | column-reverse;解释：这个主要⽤于设置⼦元素的排列顺序。

row表⽰横向排列，从左到右；row-reverse表⽰横向排列，从右到左；column 表⽰竖向排列，从上到下；column-reverse表⽰竖向排列，从下到上。

2.flex-warp:nowarp | warp | warp-reverse;解释：设置元素的换⾏，nowarp表⽰不换⾏；warp表⽰换⾏，按⼀般的规律换到下⾯去；warp-reverse表⽰换⾏，不过换⾏是换到这⼀⾏的上⾯去。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

单行一列以下是引用片段：body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }两行一列以下是引用片段：body { margin: 0px; padding: 0px; text-align: center;}#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}三行一列以下是引用片段：body { margin: 0px; padding: 0px; text-align: center; }#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }单行两列以下是引用片段：#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;}#bodycenter #dv2 {float: right;width: 410px;}两行两列以下是引用片段：#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }#bodycenter #dv1 { float: left; width: 280px;}#bodycenter #dv2 { float: right;width: 410px;}三行两列以下是引用片段：#header{ width: 700px;margin-right: auto; margin-left: auto; }#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }#bodycenter #dv1 { float: left;width: 280px;}#bodycenter #dv2 { float: right; width: 410px;}#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }单行三列绝对定位以下是引用片段：#left { position: absolute; top: 0px; left: 0px; width: 120px; }#middle {margin: 20px 190px 20px 190px; }#right {position: absolute;top: 0px; right: 0px; width: 120px;}float定位一xhtml:以下是引用片段：<div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div>CSS:以下是引用片段：#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;}float定位二xhtml:以下是引用片段：<div id="center" class="column"> <h1>This is the main content.</h1> </div> <div id="left" class="column"> <h2>This is the left sidebar.</h2> </div> <div id="right" class="column"> <h2>This is the right sidebar.</h2> </div>CSS:以下是引用片段：body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}.column {position: relative;float: left;}#center {width: 100%;}#left {width: 180px; right: 240px;margin-left: -100%;}#right {width: 130px;margin-right: -100%;}两行三列xhtml:以下是引用片段：<div id="header">这里是顶行</div> <div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </P> <P></div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div>CSS:以下是引用片段：#header{width:100%; height:auto;}#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;}三行三列xhtml:以下是引用片段：<div id="header">这里是顶行</div> <div id="warp"> <div id="column"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列</div> <div class="clear"></div> </div> <div id="column3">这里是第三列</div> <div class="clear"></div> </div> <div id="footer">这里是底部一行</div>CSS:以下是引用片段：#header{width:100%; height:auto;}#wrap{ width:100%; height:auto;}#column{ float:left; width:60%;}#column1{ float:left; width:30%;}#column2{ float:right; width:30%;}#column3{ float:right; width:40%;}.clear{ clear:both;}#footer{width:100%; height:auto;}。