CSS+DIV布局案例
典型的DIV＋CSS布局——左中右版式
典型的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. }。
第7章 第2节 DIV+CSS布局网页 课件
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
第19章 DIV+CSS页面布局实例：制作
19.7
制作个人博客分页
个人博客的分页包括article.html、archives.html、 、 个人博客的分页包括 、 guestbook.html和about.html。这四个网页的结构和首 和 。 是一致的。 页index.html是一致的。所以在制作完成 是一致的 所以在制作完成index.html后 后 制作其他分页就变得非常简易。这也是DIV+CSS布局 ，制作其他分页就变得非常简易。这也是 布局 的一大优点。 的一大优点。有的网站在构架时候为每个分页都设置一 文件。 个CSS文件。但这样做会使网站的文件量增大，也会为 文件 但这样做会使网站的文件量增大， 后期维护修改带来一定的麻烦。 后期维护修改带来一定的麻烦。本章实例只使用一个 CSS文件，就是 文件， 文件 就是index.css。在这个文件中包含整个网站 。 样式。 的CSS样式。 样式
19.4.2 制作左边栏中网文的样式
如图19.7所示，网文没有添加任何样式，但其结构和位置都 所示，网文没有添加任何样式， 如图 所示 是正确的。接着对网文进行样式美化。 是正确的。接着对网文进行样式美化。首先对文章标题 添加样式。文章标题使用article_marker.gif图片来作为 添加样式。文章标题使用 图片来作为 背景图，设置其padding-left属性后，图片就会与文字分 属性后， 背景图，设置其 属性后 在标题中有超链接“阅读全文” 离。在标题中有超链接“阅读全文”，选择该链接后会 跳转到article.html页面。 页面。 跳页头部（header） 制作个人博客的首页头部（header）
在完成首页的整体基本布局后， 在完成首页的整体基本布局后，就可以对页面进行分块制作 首先制作网页头部header。 ，首先制作网页头部 。 header分为左右两个部分，左边是网站的 分为左右两个部分， 分为左右两个部分 左边是网站的logo，右边是网 ， 站的导航。这两个部分分别用logo和nav的容器嵌入页面 站的导航。这两个部分分别用 和 的容器嵌入页面 。在nav容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
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表⽰换⾏，不过换⾏是换到这⼀⾏的上⾯去。
div+css布局完整代码
3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
网上流传的，我觉得很经典了，你可以看原地址更清楚些。
CSS常用布局实例
一列
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
div+css布局基础
html 静态网页设计
实例1 利用DIV+CSS来完成两列固定宽度布局(P271页)
html 静态网页设计
练习1 简单的DIV+CSS布局(P268页)
1.一列固定宽度布局：打开DW8，新建一个网页，切换到布局模式的标准模式，在当前网页中绘制 一个层，将层的ID修改为“layer”，双击CSS样式的#layer样式，按照P268页，设置背景色：
html 静态网页设计
练习2 操作提示
在DW中新建一个网页，在layout.css文件中定义样式。每个部分的样式如下所示。 1. body样式：宋体，14象素，边距为0，文字对齐居中。 2. container样式：上下边距为0，左右自动；宽度为900象素。
3. header样式：高度为100象素，背景色为：#6cf，下边空5象素。
3.新建一个类样式.blue，设置文字颜色为蓝色，并且将样式存放在bb.css文件中，在代码 中将链接到bb.css的那条代码删除，在网页中写上文字：文字蓝色，应用该样式，看找得 到该样式吗。然后在style标签之间输入：@import url(“bb.css”)，继续应用样式，思 考属于P192页的哪种添加CSS的方法；以上这条语句也可以写在外部样式文件中。
html 静态网页设计
练习3 添加样式的方法
1.新建一个HTML文件，新建一个样式body，设置宋体、12字号，并且将样式存放在aa.css 文件中，思考属于P192页的哪种添加CSS的方法；
2.新建一个类样式.hongse，设置文字颜色为红色，仅对此文档起作用，在网页中写上文字： 文字红色，应用该样式，思考属于P192页的哪种添加CSS的方法；
求来设置属性。保存预览。
html 静态网页设计
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：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决定。
第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。
这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及了另三个要点，是很多朋友在CSS定义时经常遇到的问题。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;}p{margin:0;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="menu">这是导航</div><div id="mainContent"><p>1列固定宽度居中+头部+导航+尾部</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图本例有三个关键要点1、p标签有默认值一样都是“margin-bottom:5px;”，如果仔细比较以前的示例，会发现，mainContent的上边界比较宽，超出了5px，原因是mainContent里嵌套了一个<p>。
“p{margin:0;}”是将<p>的默认值清空。
一样的代码有body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, td{margin:0; padding:0;}p标签有默认值为：p{margin:1em 0;} /* p标签上下外间距为16px; */ul标签有默认值为：ul{padding-left:40px;margin:1em 0;} /* ul 标签上下外间距为16px;左内间距为40px; */2、px和em的换算16px = 1em12px = 0.75em10px = 0.625em3、文字垂直对齐说到文字垂直对齐，很多人第一反应是vertical-align:middle; 但，其实如想设置文字垂直居中，那么一定要设置ling-height的属性值和height值一样，这样才会使文字垂直居中，单独设置vertical-align:middil是不会使文字垂直居中的。
所以在“menu”的样式定义中我没有使用“vertical-align:middil”而是使用了“ line-height:30px”。
从这个例子开始，我们开始讲左右的布局的CSS，DIV左右布局是CSS中最复杂的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { margin-bottom:5px;}#sidebar { float:left; width:200px; height:500px; background:#9ff;}#content { float:right; width:695px; height:500px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><div id="sidebar">这是工具栏</div><div id="content">2列固定宽度左窄右宽型+头部</div></div></div></body>效果下图显示：点击看大图本居中的关键是一左一右“float:left; float:right;”本例子讲的是DIV中最复杂的DIV3列并排居中，这是DIV左右布局最复杂的，也是最难做的地方，很多新手都不能将三列并排显示，其实DIV3列并排是非常简单的。
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; margin-bottom:5px;}#sidebar { float:left; width:200px; height:300px; background:#9ff;}#sidebar2 { float:right; width:200px; height:300px; background:#9ff;}#content { margin:0 205px; height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><div id="sidebar">这是左列</div><div id="sidebar2">这是右列</div><div id="content">3列固定宽度居中+头部</div></div></div></body>效果下图显示：点击看大图本例中的关键是先写左右，再写中间。