下载文档原格式
典型的DIV＋CSS布局——左中右版式中，运⽤的是浮动属性；这个实例，则运⽤了绝对定位属性。
1、在#container中设置“position:relative;”，其作⽤是使得后⾯的绝对定位的基准为#container⽽不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采⽤绝对定位，并且固定这两个div的宽度，⽽中间列#content由于需要根据浏览器⾃动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px[html]1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>2.3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.5. <html xmlns="/1999/xhtml" >6. <head runat="server">7. <title>左中右版式</title>8. </head>9. <body>10. <form id="form1" runat="server">11. <div id="wrap">12. <div id="header">header</div>13. <div id="container">14. <div id="left_side">left_side</div>15. <div id="content">content</div>16. <div id="right_side">right-side</div>17. </div>18. <div id="footer">footer</div>19. </div>20. </form>21. </body>22. </html>[css]01. #wrap{02. width:700px;03. margin:0 auto;04. }05. #header{06. margin:20px;07. height:80px;08. border:solid 1px #0000FF;09. }10. #container{11. position:relative;12. margin:20px;13. height:400px;14. }15. #left_side{16. position:absolute;17. top:0px;18. left:0px;19. border:solid 1px #0000FF;20. width:170px;21. height:100%;22. }23. #content{24. margin:0px 190px 0px 190px;25. border:solid 1px #0000FF;26. height:100%;27. }28. #right_side{29. position:absolute;30. top:0px;31. right:0px;32. border:solid 1px #0000FF;33. width:170px;34. height:100%;35. }36. #footer{37. margin:20px;38. height:80px;39. border:solid 1px #0000FF;40.41. }。
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等来实现瀑布流布局。
可以设置每列的宽度，元素会按照一定的规则排列在不同的列中，形成瀑布流效果。
经典css布局案例经典css布局案例1、CSS浮动包括：块元素和⾏内元素、display属性、浮动float。
块元素和⾏内元素的区别是：块元素有⼤⼩，⽽⾏内元素没有；块元素默认单独占⼀⾏，⾏内元素都在同⼀⾏。
既然块元素和⾏内元素有各⾃的特点，当我们需要来回切换他们的模式时，该怎么做呢？例如想要块元素都按⾏排列。
这时，就引⼊了display属性，它是规定元素应该⽣成的框的类型，即可以让块元素和⾏内元素之间进⾏切换。
2、展⽰效果3、重难点配置浮动：三个div，前两个浮动，后⾯不浮动。
（clear:both;）；左边固定，右侧满铺。
图⽚居中：div内部图⽚居中外边框显⽰含义：margin:0px 100px 0px 100px;4、⽬录结构huizong.cssdiv-huizong.htmlImage：bottom.jpg、bottom.jpg源代码演⽰<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS汇总学习</title><link rel="stylesheet" type="text/css" href="huizong.css"></head><body><div class="top-div">top-div⽹页头部</div><div class="second-div">second-div⽹页第⼆部分</div><div class="line31-div">line31-div</div><div class="line32-div">line32-div</div><div class="line41-div">line41-div⽹页中部</div><div class="line42-div">line42-div⽹页中部1</div><div class="line43-div">line43-div⽹页中部2</div><div class="line44-div">line44-div⽹页中部3</div><div class="line5-div"><div class="line51-div">line51-div</div><div class="line52-div"><div class="line52-1-div">line52-1-div⽹页</div><div class="line52-2-div">line52-2-div⽹页</div><div class="line52-3-div">line52-3-div⽹页</div><div class="line52-4-div">line52-4-div⽹页</div><div class="line52-5-div">line52-5-div⽹页</div></div></div><div class="line6-div">line6-div</div><div class="line7-div">line7-div</div><div class="line8-div"><img src="image/bottom1.jpg"></div> <div class="line9-div"><div class="line91-div"><img src="image/bottom.jpg"></div> </div></body><style>body{ margin:0;padding:0;}</style></html>样式格式：.top-div{background-color: #333333;width: 100%;height: 50px;color: #B0B0B0;text-align: center;line-height: 50px;}.second-div{width: 100%;height: 127px;text-align: center;line-height: 127px;}.line31-div{height: 293px;text-align: center;line-height: 293px;background-color: #000099;/* margin:0px 100px 0px 100px; //上,右,下,左*/ margin-left: 6%;width: 10%;float: left;margin-bottom:10px;}.line32-div{height: 293px;width: auto;text-align: center;line-height: 350px;margin-right: 6%;overflow: hidden; background-color: #0066ff; margin-bottom:10px;.line41-div{clear: both;margin-left: 6%;height: 150px;width: 10%;background-color: #660066;float: left;}.line42-div{margin-left: 100px;height: 150px;margin-left: 0.6%;width: 25.4%;float: left;overflow: hidden; background-color: #ffcc66; }.line43-div{margin-left: 0.6%;margin-right: 0.6%;height: 150px;width: 25.4%;background-color: #ff3366;float: left;}.line44-div{margin-right: 6%;height: 150px;width: 25.4%;background-color: #ccffff;float: left;}.line5-div{clear: both;height: 350px;/* margin:0px 100px 0px 100px; //上,右,下,左*/ margin: 170px 6% 10px 6%;.line51-div{height: 100px;width: 100%;text-align: center;line-height: 100px;}.line52-div{height: 350px;}.line52-1-div{ background-color: red; height: 100%;float: left;width: 19.46%;}.line52-2-div{ background-color: #bfbfbf; height: 100%;float: left;margin-left: 0.6%; width: 19.46%;}.line52-3-div{ background-color: #f1f1f1; height: 100%;float: left;margin-left: 0.6%; width: 19.46%;}.line52-4-div{ background-color: #f1f1f1; height: 100%;float: left;margin-left: 0.6%; width: 19.46%;}.line52-5-div{ background-color: #bfbfbf;height: 100%;float: left;margin-left: 0.6%;width: 19.46%;}.line6-div{height: 100px;text-align: center;line-height: 100px; background-color: #333333; margin: 110px 6% 0px 6%; }.line7-div{margin-top: 10px; height: 200px;width: 100%; background-color: #d7d7d7; }.line8-div{display: flex;justify-content: center;align-items: center;}.line8-div img{width: 100%;}.line91-div{display: flex;justify-content: center;align-items: center;}.line91-div img{width: 100%;}。
div浮动的方法div浮动的方法什么是div浮动？div浮动是一种CSS布局技术，用于在网页中按照一定的规则定位和排列元素。
通过对元素设置浮动属性，可以使其脱离文档流，并实现元素间的左右浮动效果。
浮动的基本语法和属性值在CSS中，我们可以使用float属性来设置元素的浮动效果。
该属性有三个属性值可选：left、right和none。
•left：元素向左浮动。
•right：元素向右浮动。
•none：元素不浮动，恢复默认排列方式。
div浮动的方法1. 左浮动通过左浮动可以实现元素向左排列，代码示例：div {float: left;}2. 右浮动通过右浮动可以实现元素向右排列，代码示例：div {float: right;}3. 清除浮动浮动元素会使其父元素的高度塌陷，为了避免这种情况，我们需要清除浮动。
常用的清除浮动方法有：•使用clear属性清除浮动：添加一个空的元素在浮动元素后面，并设置clear: both;。
.clear-float::after{content: "";display: block;clear: both;}•使用clearfix类清除浮动：在父元素中添加.clearfix类，并设置其样式为：.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}总结div浮动是一种常用的CSS布局技术，通过设置元素的float属性，可以实现元素的浮动效果。
左浮动和右浮动可以实现元素的左右排列，而清除浮动可以解决浮动元素带来的高度塌陷问题。
掌握这些div浮动的方法，可以帮助我们更好地进行网页的布局设计。
DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。
1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。
（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。
3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。
5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。
6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。
7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。
有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。
CSS实现左右布局，三栏布局css的两栏布局是⽐较经典的布局之⼀，⼀般是左（右）边定宽，右（左）边⾃适应。
实现的⽅式也⽐较多，今天主要介绍3种。
1.浮动⽅法，使第⼀个div浮动起来脱离⽂档流，下⾯的div⾃动向上<body><div class="left">左边</div><div class="right">右边</div></body>.left {width: 200px;height: 400px;background: yellow;float: left;}.right{height: 400px;background: #0000FF;}2.绝对定位法此⽅法的原理是将左侧的div设置为position:absolute，右侧默认宽度，并将margin-left设置为和左侧div⼀样宽（如果要留间隙，可以⼤于左侧div宽度）<body><div class="left">左边</div><div class="right">右边</div></body>.left {width: 200px;height: 400px;background: yellow;position: absolute;}.right {height: 400px;background: #ccc;margin-left: 200px;}3.弹性盒。
display:flex; 设置为弹性盒⼦，其⼦元素可以通过设置flex的数值来控制所占空间⽐例<body><div class="left">左边</div><div class="right">右边</div></body><style type="text/css">body{display: flex;}.left {width: 200px;height: 400px;background: yellow;}.right {height: 400px;background: #ccc;flex: 1;}</style>三栏布局三列⾃适应布局指的是两边定宽，中间宽度⾃适应1.绝对定位法原理是将两边absolute定位，因为绝对定位使其脱离⽂档流，后⾯的center会⾃然流动到上⾯，然后使⽤margin属性，留出左右元素的宽度，使中间的元素⾃适应。
CSSdiv和css布局⼀.div和span DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应⽤CSS样式 DIV和span的区别在于，span是内联元素，div是块级元素。
div占⽤整⾏，span只会占⽤内容⼤⼩的部分。
div可以改变size，span不可以改变size⼆.盒模型 margin 盒⼦外边距，增加的话，内盒⼤⼩不会变 padding 盒⼦内边距，增加的话，border向外扩⼤，内盒⼤⼩本⾝不会变 border 盒⼦边框宽度 width 盒⼦宽度 height 盒⼦⾼度三.布局相关的属性 1.position定位⽅式 relative 正常定位 absolute 根据⽗元素进⾏定位 fixed 根据浏览器窗⼝进⾏定位 static 没有定位 inherit 继承 2.定位 left，right，top，bottom离页⾯顶点的距离 3.覆盖顺序优先级 z-index 其值是从0，1，2... 数值越⼤，优先级越⾼，那么显⽰就在最上⾯ 4.display显⽰属性 display:none 层不显⽰ display:block 块状显⽰，在元素后⾯换⾏，显⽰下⼀个块元素。
将内联转换成块状 display:inline 内联显⽰，多个块可以显⽰在⼀⾏内。
将块状转换成内联 5.float浮动属性 left 左浮动 right 右浮动 6.clear清除浮动 clear:both 7.overflow溢出处理 hidden 隐藏超出层⼤⼩的内容 scroll ⽆论内容是否超出层⼤⼩都添加滚动条 auto 超出时⾃动添加滚动条四.兼容问题及⾼效 1.兼容性测试⼯具 IE Tester Multibrowser 2.常⽤浏览器 Google chrome Firefox opera 3.⾼效的开发⼯具 轻量级 notepad++ sublime text 记事本 重量级 webstorm Dreamweaver 4.⽹页设计⼯具 fireworks photoshop 5.判断IE的⽅法 条件判断格式 <!--[if 条件版本]> 那么显⽰ <![endif]--> 不等于 [if !IE 8] 除了IE8都可以显⽰ ⼩于 [if lt IE 5.5] 如果IE浏览器版本⼩于5.5的显⽰ ⼤于 [if gt IE 5] 如果IE浏览器版本⼤于5的显⽰ ⼩于或者等于 [if lte IE 6] 如果IE浏览器版本⼩于等于6的显⽰ ⼤于或者等于 [if gte IE 6] 如果IE浏览器版本⼤于等于6的显⽰ ⼩于和⼤于之间 [if (gt IE 5)&(lt IE 7)] 或 [if (IE 6)|(IE 7)] 仅 <!--[if IE 8]><!doctype html><html><head><title>Div+Css布局(div+span以及盒模型)</title><meta charset="utf-8"><style type="text/css">body{margin:0px;padding:0px;}/*div{background-color:green;color:#fff;}span{background-color:green;color:#fff;}div{width:500px;height:500px;padding:0px;margin:0px;border:solid 10px;}*/.div{width:600px;height:600px;margin:0 auto;background-color:green;}.diva{float:left;width:240px;height:240px;background-color:red;}.divb{float:left;width:240px;height:240px;background-color:yellow;}.div div{margin:10px;padding:10px;border:solid 10px;}</style></head><body><!--div>麦⼦学院DIV</div><div>麦⼦学院DIV</div><span>麦⼦学院SPAN</span><span>麦⼦学院SPAN</span--><div class="div"><div class="diva"></div><div class="divb"></div></div></body></html><!doctype html><html><head><title>Div+Css布局(布局相关的属性)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}/*.div{width:300px;height:300px;background-color:green;position:relative;left:10px;top:10px;z-index:0;}span{position:absolute;background-color:#ff6600;color:#fff;top:-10px;right:0;}.fixed{position:fixed;background-color:#ff6600;color:#fff;top:100px;z-index:1;}*/div{background:green;display:inline;width:200px;}span{background-color:red;display:block;width:200px;}</style></head><body><!--div class="fixed"><p>联系电话：1111111</p><p>联系QQ：782590844</p><p>联系地址：四川省成都市</p></div><div class="div"><span>浏览次数：222</span></div></div--><div>麦⼦学院</div><div>麦⼦学院</div><div>麦⼦学院</div><span>麦⼦学院</span><span>麦⼦学院</span><span>麦⼦学院</span><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html><!doctype html><html><head><title>Div+Css布局(浮动以及溢出处理)</title><meta charset="utf-8"><style type="text/css">body{padding:0;margin:0;}.div{width:960px;height:600px;margin:0 auto;background-color:#f1f1f1;}.left{float:left;width:260px;height:460px;background:#ccc;}.right{float:right;width:690px;height:460px;background:#ddd;}.clear{clear:both;}.bottom{margin-top:10px;height:200px;width:960px;background:red;}.jianjie{width:260px;height:120px;background:red;overflow:auto;}</style></head><body><div class="div"><div class="left"><div class="jianjie">麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br />麦⼦学院麦⼦学院麦⼦学院<br /></div></div><div class="right"></div><div class="clear"></div><div class="bottom"></div></div></body></html>。
DIV CSS布局：CSS浮动float属性详解在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
我们来看看float属性基本释义：该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。
也就是说，浮动对象的display特性将被忽略。
float属性的参数：none：对象不浮动left：对象浮在左边right：对象浮在右边下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：我们看下面的运行效果：Source Code to Run []<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"> <head><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><title>52CSS</title> <style type="text/css">#content_a {width:200px; height:80px; border:1px solid #000;margin:10px; background:#ccc;} #content_b {width:200px; height:80px;border:1px solid #000; margin:10px; background:#999;} </style></head> <body> <div id="content_a">这是第一个DIV</div> <divid="content_b">这是第二个DIV</div> </body> </html>[ 可先修改部分代码再运行查看效果]我们对content_a应用向左的浮动。
