DIV+CSS布局设计 项目二
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决定。
典型的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容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
css两端对齐之div+css布局实现2端对齐的4种方法总结
css两端对齐之div+css布局实现2端对齐的4种⽅法总结div+css布局实现2端对齐是我们⽹页排版中经常会使⽤到的，这篇⽂章将总结⼀下可以实现的⽅法：html结构实现demo⾥⾯的div通过Css进⾏2端对齐。
<div class="box"><div class="demo"><div>1</div><div>2</div><div>3</div></div></div>1.margin负值的⽅式该⽅法需要外⾯多嵌套⼀层来实现，通过元素的间距，做为中间层的margin溢出值来实现<style>.box{width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;}.box .demo{margin-left:-10px;width:310px}.box .demo div{width:93.333px;/*(计算：（300-10*2）/3)*/float:left;margin-left:10px;}</style>2.display:inline-block/text-align:justify⽅式justify⽅式⽐较简单⽅便。
只要⼀个简单元素做了声明，⾥⾯的元素就⾃动等间距两端对齐布局啦！根本⽆需计算每个列表元素间的margin间距，更不⽤去修改⽗容器的宽度。
注意⼀点：demo结构内元素必须存在【换⾏符】或【空格符】，否则直接连着写将不会⽣效<style>.demo{margin:0;padding:0;text-align:justify;text-align-last:justify;/*解决IE的⽀持*/line-height:0;/*解决标准浏览器容器底部多余的空⽩*/}@media all and (-webkit-min-device-pixel-ratio:0){.demo{font-size:0;/*webkit清除元素中使⽤[换⾏符]或[空格符]后，最后元素多余的空⽩*/}}.demo:after{/*text-align-last:justify只有IE⽀持，标准浏览器需要使⽤ .demo:after 伪类模拟类似效果*/display:inline-block;overflow:hidden;width:100%;height:0;content:'';vertical-align:top;/*opera浏览器解决底部多余的空⽩*/}.demo div{width:20%;display:inline-block;text-align:center;/*取消上层元素的影响*/text-align-last:center;font-size:12px;}</style>3.css3 属性 space-between该⽅法基于webkit内核的webapp开发和winphone IE10及以上，常⽤于移动端布局。
超级牛最详细的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年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
DIV+CSS教程——第三天 二列和三列布局
第三天二列和三列布局文章出处：标准之路(/div_css/904.shtml)编辑：杨雨晨思今天学习《十天学会web标准(div+css)》的二列和三列布局，将涉及到以下内容和知识点▪二列自适应宽度▪二列固定宽度▪二列固定宽度居中▪xhtml的块级元素(div)和内联元素(span)▪float属性▪三列自适应宽度▪三列固定宽度▪三列固定宽度居中▪IE6的3像素bug一、两列自适应宽度下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。
首先创建html代码如下：<div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div>按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。
div创建完成后，开始创建css样式表，代码如下：#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }先创建#side的样式，为了便于查看，设置了背景色。
注意，side的浮动设置为向左浮动；然后创建#main样式，注意这里设置#main的左边距为120px。
预览结果如下：三、两列固定宽度居中两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：<div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div>操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写i d后确定，得到如上的代码下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main 宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：从上图的例子可以看出，块级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。
7.2使用Div进行页面布局
第七单元制作“专业教程”网页
任务二使用Div进行页面布局
一、提出任务
1．任务目标
根据任务一画出的页面布局结构图，实现“专业教程”页面布局。
2．解决的问题
本任务通过完成任务一中设计好的页面布局，学习添加Div标签、设置Div样式以及用Div进行页面布局的方法。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：AP元素、CSS规则。
二、教学目标
1. 知识目标
⑴掌握添加Div标签。
⑵掌握设置Div样式。
⑶掌握盒子模型。
⑷掌握使用Div进行页面布局的方法。
2. 能力目标
能够熟练地根据页面布局结构图，使用Div+CSS技术进行页面布局。
3. 情感目标
正确看待自己在团队中的作用，提高团队协作能力。
三、教学分析与准备
1. 教学重点
⑴掌握设置Div样式。
⑵掌握使用Div进行页面布局的方法。
2．教学难点
设置Div样式。
3. 教学方法
提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。
4. 课时安排
2课时。
5. 教学环境
多媒体网络教室。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
fnot01
全局字体颜色
Fnot01 全局字体颜色
font-size:18px; font-family:"微软雅黑"; line-height:30px; color:#5ca900;
南京新华电脑专修学院 课件教改系列
PART/02 CSS外部文件详细2
#box {
box
main
width:1007px; height:888px; margin:auto;
后续扩展
动态页面扩展 移动设备扩展
南京新华电脑专修学院 课
HEADER头部 FOOTER脚部
30%
70%
南京新华电脑专修学院 课件教改系列
CONTENT主体内容 MAIN MENU主菜单
PART/01 图例 时间分配图
75%
CONTENT 页面主体 MAIN MENU 主菜单 主体设计
Left/main/right 主窗体设计
南京新华电脑专修学院 课件教改系列
PART/02 CSS外部文件详细1
* 统一布局 margin:0px; border:0px; padding:0px;
*
统一布局
BODY
主体样式
Body 主体样式
font-family:"宋体"; font-size:12px; color:#666666; background-image:url(../images/2501.jpg); background-repeat:no-repeat;
PART/03 页面代码分段设计
尾部代码设计片段：
尾部设计 边条设计
南京新华电脑专修学院 课件教改系列
PART/03 学生分组实现及评比
A组
其余各组评价
页面运行正确性
B组
D组
C组
页面完成时效性
页面布局合理性
南京新华电脑专修学院 课件教改系列
我的页面我设计
THANKS
谢谢
南京新华电脑专修学院 课件教改系列
南京新华电脑专修学院 课件教改系列
我的页面我设计
PART/第三步
页面设计
PART/03 页面设计剖析图
整体设计
头部设计
主体设计
尾部设计
边条设计
南京新华电脑专修学院 课件教改系列
PART/03 页面代码分段设计
头部代码设计片段：
头部设计
主体设计
主体代码设计片段：
南京新华电脑专修学院 课件教改系列
我的页面我设计
静态网页设计之
布局之美
DIV+CSS布局设计 项目二
南京新华电脑专修学院 课件教改系列
我的页面我设计
PART/第一步
规划网站
PART/01 规划网站
功能使用 色彩搭配
设计主色调 配色的数量
头部图片链接
对比和调和
轻快到浓烈
布局设计
MAIN MENU主菜单 HEADER头部 CONTENT主体内容 SIDE BAR边条 FOOTER脚部
25%
HEADER 头部对象 FOOTER 脚部对象
附属设计
南京新华电脑专修学院 课件教改系列
我的页面我设计
PART/第二步
样式设计
PART/02 创建模板及文件目录
创建HTML模板 代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> </body> </html>
南京新华电脑专修学院 课件教改系列
PART/02 创建模板及文件目录
创建网站的大框，即建立一个宽1007px、高888px的盒子，它将包含网站 的所有元素。 代码如下：
在<link href="style/div.css" rel="stylesheet" type="text/css" />
#box {
}
top
bottom
#top { width:950px; height:379px; margin:auto; }
南京新华电脑专修学院 课件教改系列
PART/02 CSS外部文件详细2
#main {
#main-left { width:258px; height:400px; float:left; line-height:20px; margin:0px 28px 0px 28px; } #main-main { width:258px; height:400px; float:left; line-height:20px; margin:0px 28px 0px 28px; }
width:1007px; height:888px; margin:auto; }
南京新华电脑专修学院 课件教改系列
PART/02
DIV设计布局
# span
#span
#top #box #bottom #main
#bottom span 尾部字段 #top 头部导航设计 #bottom 尾部设计
box
main
}
width:942px; height:400px; margin:auto;
top
bottom
#bottom { width:1007; height:89px; color:#000; text-align:center; line-height:20px; background-image:url(../images/2506.png); background-repeat:no-repeat; background-position:center bottom; border-top:#093 dashed 1px; margin-top:20px; } #main-right { width:258px; height:400px; float:left; margin:0px 28px 0px 28px; line-height:20px; }