第5章Divcss网页布局.
div+css(5)原创
第三章【DIV】div——block块状对象（块级元素），显示为一个方块，默认状态下占据一行，其他对象将在下一行显示。
in-line行间对象（内联元素），允许下一个对象与之共享一行进行显示。
【XHTML标签与功能】-----------结构标签-----------html 根元素head 头部区域body 主体区域div 区块定义标签span 行间区块定义标签-----------Meta信息-----------DOCTYPE 文档类型指定title 浏览器标题栏link 链接到扩展资源meta Meta信息vstyle 样式表区域-----------文本控制-----------p 段落h1~h6 标题1~6级strong 加重重点em 重点/强调abbr 定义文本的简写词acronym 定义首字母简写词address 标签联系信息bdo 字母顺序左右反转blockguote 块状引用内容cite 行间引用内容q 行间小型的引用-----------链接-----------a 链接vbase 基础链接类-----------图像和对象-----------img 插入图像area 图像热区细节map 图像热区object 插入对象patam 对象的参数-----------列表-----------ul 无序列表ol 有序列表li 列表项dl 带描述的列表dt 描述列表中的名词dd 描述列表中的描述-----------表格-----------table 表格tr 行td 单元格th 表头tbody 表格主体thead 表格头部tfoot 表格底部col 表格列colgroup 表格列的集合caption 表格的标题-----------表单-----------form 表单区域input 输入框textarea 文本域select 下拉列表option 下拉列表项optgroup 下拉列表项集合button 按钮label 标签fieldset 标签页legent 标签页的标题-----------脚本-----------script 脚本区域noscript 无法执行脚本的替代-----------表现-----------b 加粗i 斜体tt 打字机字体sub 下标sup 上标big 加大small 减小hr 分割线【定位】--------------------------------- 【两列右侧自适应】--------------------------------- #left{background-color:#999;border:2px #000 solid;width:100px;height:300px;float:left;}#right{background-color:#999;border:2px #000 solid;height:300px;}---------------------------------绝对定位position:static;（默认）absolute;（漂浮，可使用top，right，bottom，left）relative;---------------------------------【三列，左右两列固定，中间列自适应】主要在blog中应用，大型网站设计较少使用。
divcss制作网页模板的基本步骤(divcss网页页面效果制作
divcss制作网页模板的基本步骤（divcss网页页面效果制作导读大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div ...大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div CSS制作网页模板的基本步骤在当今数字化的世界里，网站已成为公司、组织、个人宣传以及推广业务的关键。
为了制作优质的网站，设计师们需要掌握许多技术和方法，其中之一是使用Div CSS。
本文将介绍Div CSS制作网页模板的基本步骤，帮助初学者了解如何应用这一技术，确保网页的美观和难忘。
一、确定网页结构每个网页都有一个独特的结构。
在开始使用Div CSS之前，您需要知道您想要创建的网页类别。
是一个单页网站，还是包含多个页面？您使用的是静态页面还是动态页面？这些因素都将影响您的设计。
二、设计布局设计布局是网站设计中的重要一步。
您可以使用Div CSS创建各种不同的布局，比如多列、单列、网格等。
您可以使用float属性设置网页中内容的布局。
通过复制和粘贴，您可以创建一个包含多个元素的布局，然后使用float属性对它们进行排列。
三、使用CSS设置样式CSS是Cascading Style Sheets的缩写，用于定义HTML元素的外观和布局，使网站看起来更具吸引力。
您可以使用CSS设置文字、颜色、背景、边框、文本、间距等。
Div CSS的一个关键特性是可以在HTML模板中分离布局和样式。
然后，通过CSS样式表拾取器来应用这些样式。
四、使用CSS优化网站在优化网站时，可以通过CSS的各种技术提高性能和用户体验。
在页面加载时，如果使用过多的CSS或大型背景图像，会使页面加载速度变慢。
流线型CSS是一种有效的优化网页的方式。
通过移除旧版的CSS，使用高效代码重写新的CSS，并将其中的重复内容与变量合并，可在较短的时间内实现较快的加载速度。
巧用DIV和CSS进行网页布局
页 的优 势 远 远 不 只这 些 。下 面 一起 来 感受
一
一
个 目的 是 让 代 码 易 读 ，区块 分 明 ，强 化
下用 Ｃ Ｓ Ｓ盒 子 模式 排版 的优 势 。
代 码 重 用 ，所 以结 构 很 重 要 。如 果 用 Ｃ Ｓ Ｓ 实现不了的效果 ， 一 般 用 表 格 也 是 很 难 实
＜／ ｄ ｉ ｖ ＞
（ ｂ ｏ ｒ ｄ ｅ ｒ ） 、边 界 （ ｍａ ｒ ｇ ｉ ｎ ） ， 而 Ｃ Ｓ Ｓ盒 子 模 不 满 意 ，特 别 是 色 调 的 话 ，那 么 改 起 来 就
式都具备这些属性 。
■＾ ＲＯ Ｉ Ｎ进葬 置子之冀曲难膏
Ｂ ＯＲ Ｄ Ｅ Ｒ Ａ ‘
设 计 中 常 听 到 一 些 属 性 名 如 ： 内 容 实 用 的 好 处 ，如 果 是 接 单 做 网站 的 ，如 果 ＝ ｎａ ｙ ＞ ＜／ ｄ ｉ ｖ ＞ ＜ｄ ｉ ｖ ？ｉ ｄ 一”ｃ ｏ ｎ ｔ ｅ ｎ ｔ ＞
Ｓ Ｓ排版 网 页 ， 做 到 后 来 客 户 有 什 么 ＜ ／ ｄ ｉ ｖ ＞＜ｄ ｉ ｖ ？ｉ ｄ 一”ｆ ｏ ｏ ｔ ｅ ｒ ＞ ＜／ ｄ ｉ ｖ ＞ （ ｐ ａ ｄ ｄ ｉ ｎ ｇ） 、 边 框 用 了 Ｃ
相 当 容 易 ，甚 至 还 可 以 定 制 几 种 风 格 的
最 外 边 的大 盒 子 要 让 它 在 页 面 居 中 ，
６ ０像 素 ，同 时加 上 边 Ｃ Ｓ Ｓ文 件 供 客 户 选择 ，又 或 者 写 一 个 程 序 并 重 定义 其宽 度 为 ９
。 － Ｉ
、
Ｐ Ａ 。 Ｂ 蕈 竞 谊予 且 妇 簟 吏尊
的 大 小 不 一 的 盒 子 和 盒 子 的 嵌 套 来 编 排 离
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 学习目标：了解HTML的基本结构掌握如何使用标签来创建网页的基本元素1.2 教学内容：HTML简介：HTML的作用和重要性HTML基本结构：`<!DOCTYPE >`、`<>`、`<head>`、`<body>`标签网页元素：、段落、、图片等标签的使用1.3 教学活动：演示HTML的基本结构及其功能示例：创建一个简单的网页，包含、段落和图片学生练习：创建一个网页，使用HTML的基本元素1.4 作业：完成一个简单的HTML练习，创建一个包含、段落和图片的网页第二章：CSS基础2.1 学习目标：了解CSS的作用和重要性掌握如何使用CSS来样式化网页元素2.2 教学内容：CSS简介：CSS的作用和重要性内联样式：使用`style`属性来添加样式内部样式表：使用`<style>`标签来添加样式外部样式表：使用`.css`文件来添加样式2.3 教学活动：演示CSS的作用和重要性示例：使用内联样式、内部样式表和外部样式表来样式化网页元素学生练习：创建一个简单的网页，使用CSS来样式化、段落和图片2.4 作业：完成一个简单的CSS练习，创建一个包含、段落和图片的网页，并使用CSS来样式化它们第三章：DIV标签3.1 学习目标：了解DIV标签的作用和重要性掌握如何使用DIV标签来创建布局3.2 教学内容：DIV标签简介：DIV的作用和重要性使用`<div>`标签来创建块级元素使用CSS来样式化DIV元素3.3 教学活动：演示DIV标签的作用和重要性示例：使用DIV标签来创建一个简单的布局学生练习：创建一个简单的网页布局，使用DIV标签来创建不同的区域3.4 作业：完成一个简单的DIV标签练习，创建一个包含、段落和图片的网页布局第四章：定位和布局4.1 学习目标：了解定位的作用和重要性掌握如何使用CSS定位技术来对元素进行精确布局4.2 教学内容：定位概述：静态定位、相对定位、绝对定位和固定定位使用`position`属性来设置元素的定位方式使用`top`、`right`、`bottom`和`left`属性来控制元素的位置了解`z-index`属性的作用4.3 教学活动：演示不同定位方式的原理和效果示例：使用定位技术创建一个导航栏布局学生练习：创建一个网页布局，使用定位技术来实现一个水平导航栏4.4 作业：完成一个定位练习，创建一个包含导航栏的网页布局。
CSSdiv和css布局
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基础代码网页布局+实例教程
Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。
二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。
首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。
例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整CSS 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=gb2312" /><title>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和常用标签1.2 教学内容HTML简介：HTML的概念、作用和发展历程HTML基本语法：标签、属性、注释等常用HTML标签：、段落、图片、、列表等1.3 教学步骤讲解HTML的基本概念和作用演示HTML的基本语法和常用标签让学生通过实例练习编写简单的HTML页面1.4 课后作业编写一个简单的HTML页面，包括、段落、图片和第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和常用选择器2.2 教学内容CSS简介：CSS的概念、作用和发展历程CSS基本语法：选择器、属性、注释等常用CSS选择器：标签选择器、类选择器、ID选择器等2.3 教学步骤讲解CSS的基本概念和作用演示CSS的基本语法和常用选择器让学生通过实例练习编写简单的CSS样式2.4 课后作业编写一个简单的CSS样式，设置一个HTML页面的背景颜色、字体大小和颜色第三章：DIV布局基础3.1 教学目标了解DIV布局的基本概念和作用掌握DIV布局的基本方法和技巧3.2 教学内容DIV布局简介：DIV的概念、作用和应用场景盒模型：盒子模型概念、宽高设置、内外边距等浮动布局：浮动的概念、原理和应用定位布局：定位的概念、原理和应用3.3 教学步骤讲解DIV布局的基本概念和作用演示盒模型、浮动布局和定位布局的方法和技巧让学生通过实例练习编写一个简单的DIV布局页面3.4 课后作业编写一个简单的DIV布局页面，包括头部、主体和尾部三个部分第四章：响应式布局4.1 教学目标了解响应式布局的基本概念和作用掌握响应式布局的实现方法和技巧4.2 教学内容响应式布局简介：响应式布局的概念、作用和应用场景媒体查询：媒体查询的概念、语法和使用方法弹性布局：弹性布局的概念、原理和应用网格布局：网格布局的概念、原理和应用4.3 教学步骤讲解响应式布局的基本概念和作用演示媒体查询、弹性布局和网格布局的方法和技巧让学生通过实例练习编写一个简单的响应式布局页面4.4 课后作业编写一个简单的响应式布局页面，包括不同屏幕尺寸下的布局调整。
第5章 CSS和DIV的应用
第5章 CSS和DIV的应用
5.1 CSS样式 5.1.3 创建CSS样式 在Dreamweaver CS6中，执行“窗口”|“CSS样式” 命令，打开“CSS样式”面板，如图5.1所示。在 “CSS样式”面板的底部排列有几个按钮，具体内容 如下。 “附加样式表”：可以在HTML文档中链接一 个外部的CSS文件。 “新建CSS规则”：可以编辑新的CSS样式文件。
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“CSS规则定义”对话框左侧的“分类”列表框中选择“区块”选项可 以定义标签和属性的间距和对齐设臵，如图5.5所示。
图5.5 区块样式的定义
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“区块”中的各选项参数如下： • Word-spacing：设臵单词的间距，若要设臵特定的值，在下拉列表框 中选择“值”选项，然后输入一个数值，在第二个下拉列表框中选择 度量单位。 • Letter-spacing：增加或减小字母或字符的间距。若要减少字符间距， 指定一个负值，字母间距设臵覆盖对齐的文本设臵。 • Vertical-align：指定应用它的元素的垂直对齐方式。仅当应用于＜img ＞标签时，Dreamweaver才在文档窗口中显示该属性。 • Text-align：设臵元素中的文本对齐方式。 • Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出， 但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才 S和DIV的应用
5.1.4 定义CSS样式属性 在“类型”中的各选项参数如下： • Font-weight：对字体应用特定或相对的粗体量。“正常”等于 400,“粗体”等于700。 • Font-variant：设臵文本的小型大写字母变量。Dreamweaver不在文 档窗口中显示该属性。 • Text-transform：将选定内容中的每个单词的首字母大写或将文本设 臵为全部大写或小写。 • color：设臵文本颜色。
CSS布局（五）网页布局方式
CSS布局（五）⽹页布局⽅式⽹页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。
三种关系：相邻，嵌套，重叠。
下⾯介绍⽹页布局的常⽤⼏种⽅式1.⼀列布局：⼀般都是固定的宽⾼，设置margin : 0 auto来⽔平居中，⽤于界⾯显著标题的展⽰等；.main{width: 200px;height: 100px;background-color: grey;margin: 0 auto;}<div class="main"></div>2.两列布局： 说起两列布局，最常见的就是使⽤来实现。
float浮动布局的缺点是浮动后会造成⽂本环绕等效果，以及需要及时。
设置左左浮动，或设置左右浮动（这是需要确定⽗级元素的宽度） 如何⽗级元素没有设置⾼度，则需要设置overflow:hidden来清除浮动产⽣的影响 对于⾃⼰相邻元素清除浮动产⽣的影响⽤：clear：both;<div class="main"><div class="left">left</div><div class="right">right</div></div>.main{width: 400px;background: red;overflow: hidden;}.left{background: yellow;float: left;}.right{background: green;float: left;}3.三列布局：两侧定宽中间⾃适应⾸先设置⽗级元素的宽度，可以左左右设置浮动。
然后中间设置margin调整间距。
也可以都设置成左浮动，设置margin，调整间距。
同样注意清除浮动的影响！<div class="main"><div class="left">left</div><div class="middle">middle</div><div class="right">right</div></div>.main{width: 100%;background: red;overflow: hidden;}.left{background: yellow;float: left;width: 100px;}.middle{background: rosybrown;float: left;width: cacl(100%-200px);}.right{background: green;float: right;width: 100px%;}或着为⽗级元素设置relative属性，再为⼦元素设置absolute属性，再分别定位，调间距。
第5章 CSS样式和Div标签
图 5-2-5 “背景”栏
图 5-2-6 “区块”栏
（3）“垂直对齐”下拉列表框：用它可以设置选中的对象相对于上级对象或相对所在行的值。 （4）“文本对齐”下拉列表框：用来设置首行文字的对齐方式。 （5）“文字缩进”文本框：用来输入文字的缩进量。 （6）“空格”下拉列表框：设置文本空白的使用方式。“正常”选项表示将所有空白填满，“保留”选项表示 由用户输入时控制，“不换行”选项表示只有加入标记<BR>时才换行。 （7）“显示”下拉列表框：在其中可以选择区块需要显示的格式。 3．定义 CSS 的列表属性 选择图 5-2-4 所示的对话框内左边“分类”列表框内的“列表”栏，此时该对话框 右边的显示如图 5-2-7 所示。其中各选项的作用如下： （1）“类型”下拉列表框：用来设置列表的标记。该下拉列表框内有九个选项，包 括“圆点”、“圆圈”等。
（3）过滤器中几个常用滤镜的显示效果如下： ① “Blur”（模糊）效果：选择该选项后，其选项内容为“Blur（Add=?，Direction=?，Strength=?）”，用 户需要用数值取代其中的“？”，即给这三个参数赋值。Add 用来确定是否在模糊移动时使用于图像一般选“1”；Direction 决定了模糊移动的角度，可在 0～360 之间 取值，表示 0°～360°；Strength 决定了模糊移动的力度，如果设置为 Blur（Add=1，Direction=60，Strength=90）， 则图 5-2-9 所示的图像在浏览器中看到的则是图 5-2-10 所示的样子。 ②“翻转图像”（FlipH/FlipV）效果：选择“FlipV”（垂直翻转图像）选项后，图 5-2-9 所示的图像在浏览 器中看到的是图 5-2-11 所示的样子；选择“FlipH”（水平翻转图像）选项后，图 5-2-9 所示的图像在浏览器中 看到的是图 5-2-12 所示样子。
DIVCSS学习(入门)教程
Div+CSS布局入门教程页面布局与计划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中咱们将会用到一些有关于HTML的大体知识，而在你学习这篇入门教程之前，请确信你已经具有了必然的HTML基础。
下面咱们就开始一步一步利用DIV+CSS进行网页布局设计吧。
所有的设计第一步确实是构思，构思好了，一样来讲还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处置软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，咱们需要依照构思图来计划一下页面的布局，认真分析一下该图，咱们不难发觉，图片大致分为以下几个部份：一、顶部部份，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:依照上图，我再画了一个实际的页面布局图，说明一基层的嵌套关系，如此明白得起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与计划已经完成，接下来咱们要做的确实是开始书写HTML代码和CSS。
写入整体层结构与CSS接下来咱们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-ivID。
若是id="divID"那个层中包括了一个<img></img>，那么那个img在CSS中对应的设置语法应该是#divID img {}，一样，若是是包括在class="divID"那个层中时，那么设置语法应该是.divIDimg {}，这一点希望大伙儿要分清楚了。
div布局
5.4 盒子的浮动
5.4.1 浮动
浮动（float）是使用率较高的一种定位方式。浮动元素 可以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。
语法：float : none | left |right
【演练 5-13】向右浮动的元素。本例页面5-13.html的布局的初始状态如图517（a）所示，元素box-1向右浮动后的结果如图5-17（b）所示。
5.3.2 相对定位 相对定位（ position:relative; ）指的是通过设置水平 或垂直位置的值，让这个元素“相对于”它原始的起点进行 移动。
【演练5-9】相对定位 。使用上面的示例深入讨论，将id="box"的块级元素向 下移动50px，向右移动50px。编写相应的CSS样式，生成的文件5-9.htm教程第5版
机械工业出版社同名教材 配套电子教案
第5章 Div+CSS布局技术
5.1 Div布局理念 5.2 CSS盒模型 5.3 盒子的定位 5.4 盒子的浮动 5.5 CSS常用布局样式 5.6 实训——什锦果园水果沙拉页面的布局
5.1 Div布局理念
5.1.1 Div布局页面的优点
传统的HTML标签中，既有控制结构的标签（如<title> 标签和<p>标签），又有控制表现的标签（如<font>标签 和<b>标签），还有本意用于结构后来被滥用于控制表现的 标签（如<h1>标签和<table>标签）。页面的整个结构标 签与表现标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是 它是一种块级元素，更容易被CSS代码控制样式。
网页制作5CSS盒子模型
信息工程学院
1、边框属性
（5）圆角边框
在网页设计中，经常需要设置圆角边框，运用CSS3中的border-radius属性可以将 矩形边框圆角化，其基本语法格式如下：
border-radius:参数1/参数2 其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数 之间 用“/”隔开。 值得一提的是，border-radius属性同样遵循值复制的原则，其水平半径（参数 1）和垂直半径（参数2）均可以设置1-4个参数值，用来表示四角圆角半径的大 小。
度 和 总
高
度
信息工程学院
✎
5.1 知识点讲解
3、盒子的宽与高
• 盒子模型的总宽度与总高度
信息工程学院
结 ➢ 盒子的总宽度= width+左右内边距之和+左右
论
边框宽度之和+左右外边距之和
➢ 盒子的总高度= height+上下内边距之和+上 下边框宽度之和+上下外边距之和
5.1 知识点讲解
信息工程学院
来替代大多数的文本标记。
.one{ width:450px; height:30px; line-height:30px; background:#FCC; font-size:18px; font-weight:bold; text-align:center;
}
/*设置宽度*/ /*设置高度*/ /*设置行高*/ /*设置背景颜色*/ /*设置字体大小*/ /*设置字体加粗*/ /*设置文本水平居中对齐*/
/*盒子模型的内边距*/
margin:20px;
/*盒子模型的外边距*/
}
</style>
DivCss布局一两栏布局
DivCss布局一两栏布局通常网页的布局只有几种：平铺式、两栏式、三栏式，有人会说没有听说过什么平铺式，呵呵，这是我自己起的名字，指的是那种整个网页内容都在一块区域全部列出来的页面。
DivCss布局--两栏布局来源：黄超[点击放大]在制作网页的时候，不管水平方向有多少行，我们都是按照垂直方向进行整体大布局的，所以两栏和三栏的布局是十分重要的，需要熟练掌握。
本文先讲解两栏布局的基本制作方法，首先大家看一下图一，我们要制作的两栏布局就是如图一所示的，包含header（网站抬头banner）、footer（页脚，版权信息）、sidebar （边侧的工具栏）和mainbody（主要内容区域）四块内容。
拿到这个页面结构图时，首先要考虑一下页面基本结构的制作方法，要用到几个Div，虽然这个布局也能用table进行制作，但我们的目的是学习Div布局，所以一定要用Div 加上css来完成。
下面我来列举几点制作页面时我经常想到的几点：∙页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；∙是否居中，考虑页面是否要居中显示；∙页面数量和可重复元素，由于网站页面不可能只有一个，所以需要统计页面数量，并且确定页面中是否有需要重复利用的元素，比如标题、导航、工具栏等。
利用好这些元素可以提高制作速度、效率，也能使页面风格统一。
∙整体布局的Div嵌套关系。
再看下图一，在首页以外的其他网页中可能用到的可重复元素有Header、Footer、和SideBar，经常变换和更换的只有MainBody里的内容了。
而且页面宽度是固定的，所以要在所有的元素外面做一个外框。
在心中打完草稿后，在着手制作就不是那么困难了。
按照以上的设想，页面的结构基本如下：<div id="Wrap"><!--页面层容器--><div id="Header">页面头部</div><div id="PageBody"><!--页面主体--><div id="Sidebar">侧边栏</div><div id="MainBody">主体内容</div></div><div id="Footer">页面底部</div></div>新建一个网页，将以上代码复制到<body>与</body>之间。
5.DIV+CSS布局、边框、背景
定位属性—绝对定位
• 绝对定位是元素完全脱离文档流，页面中的 其他元素视他不存在，也就是说绝对定位元 素不会影响到其他元素
1. 2. 3. 4. 5. 6. 7. <html> <head> <meta charset="UTF-8"/> <style type="text/css"> div{width:300px; height: 100px;color:#fff;} div.houdun{background:blue;} div.houdunwang{background:red;position: absolute;top:20px;left:80px;} 8. {background:#666;} 9. </style> 10.</head> 11.<body> 12.<div class="houdun"> 13. 14.</div> 15.<div class="houdunwang"> 16. 17.</div>
有时候，子元素的宽高会超出父元素的尺寸，我们 需要对超出的内容做一些设置。 • hidden
– 将超出的内容隐藏
• visible
– 全部显示内容
• auto
– 根据实际情况做出调整，如果说没有超出那么正常显 示，否则将会出现滚动条。
• scroll
– 始终出现滚动条
边框、宽度与高度
• border-width • 设置四个方面的边框宽度，可以通过设置bordertop-width、border-right-width、borderbottom-width、border-left-width对某一面的边框 宽度单独设置，值为：具体的数字或是
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
└#Container {} /*页面层容器*/ ├#Header {} ├#Nav {} ├#Banner {} └#Footer {} /*页面头部*/ /*页面导航*/ /*页面广告*/
├#Content {} /*主体内容*/ /*页面底部*/
《商务网页设计与制作》
任务1：首页DIV框架制作
表示部分的意思。页面分块如下图所示：
《商务网页设计与制作》
任务1：首页DIV框架制作
实际的页面布局及嵌套关系如下图所示。
长沙民政
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
根据上图的分析，本页面DIV结构如下（此处用样式来区分不同的DIV）
│body {} /*HTML元素，具体不做说明*/
本文档采用简体中文编码；还有一种常用的编码是UTF- 8编码，它是国际
通用的编码。不管采用哪种编码，本文档中包含的css样式表或包含的其它 文件中的代码必须和本文档的代码编码一致，否则会出现乱码。
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
在<body></body>标签对中写入DIV的基本结构，代码如下： <body> <DIV id="container"><!--页面层容器--> <DIV id="Header"><!--页面头部--></DIV> <DIV id="Banner"><!--页面广告--></DIV> <DIV id="Nav"><!--页面导航--></DIV> <DIV id="Content"><!--主体内容--></DIV>
2、网页DIV布局实现
长沙民政
新建站点，在该站点中新建index.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=gb2312" /> </head> <body> </body> </html>
《商务网页设计与制作》
长沙民政
例如在某个页面<body></body>中输入如下代码： <body>
<div></div>
<div></div> </body> 在设计模式下，产生的效果如下图所示。
Div示意图
《商务网页设计与制作》
长沙民政
在<head></head>中插入以下代码，用来定义一个名为zw的样式： <head> <style type="text/css"> <!-#zw {font-size: 12px; width:200px; } --> </style> </head> <body> <div id="zw">This is a test</div> <div>This is a test</div> </body> 产生的效果如下图所示。
长沙民政
第五章 DIV+css网页布局
《商务网页设计与制作》
长沙民政
学习目标
• • 掌握DIV+CSS方法布局网页 熟练运用CSS 美化网页
《商务网页设计与制作》
长沙民政
项目概述
• 小小李所在的项目团队承接了长沙市碧雅园花卉苗木基地网站建设业务，通 过前期需求分析，网页美工小王已绘制了网站首页的效果图。经理让小李在 两天时间内根据效果图，为该苗木基地网站制作静态的前台页面。为方便与 网站后台系统集成，要求小李使用DIV+CSS技术制作网站的前台页面DIV+CSS已成为网站标准（或称“WEB标准”）中常用术语之一，其中DIV 是一个标签，称为块元素（或层元素）。DIV元素是用来为html文档内大 块（block-level）的内容提供结构和背景的元素，类似于表格技术中的 <tabele>标签。DIV的起始标签和结束标签之间的所有内容都是用来构成 这个块的。块的大小和位置由其属性来控制，或者是通过使用样式表（即 CSS）格式化这个块来进行控制。
都采用过渡类型。因浏览器对XHTML的解析比较宽松，允许使用HTML4.01
中的标签，但必须符合XHTML的语法。建议保留这句话，删除它可能引 起某些样式表失效，或产生其它意想不到的问题。
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 表示文档的语言编码，类似平时说的汉语、英语。“gb2312”是告诉浏览器，
《商务网页设计与制作》
最终网站首页效果图
长沙民政
将本项目的实施分解为以下几个子任务：
任务1：首页DIV框架制作 任务2：内容制作 任务3：CSS特效导航栏制作
《商务网页设计与制作》
长沙民政
CSS：层叠样式表(Cascading Style Sheet ),定义了如何显示HTML元素， 用来控制网页的样式和布局。
CSS控制div外观示意图
《商务网页设计与制作》
长沙民政
由此可见，应用了CSS的Div外观和字体大小都与默认的样式不同。 因此，人们常用不同的CSS来区分DIV。（在这里#ZW为一个ID样式，
其细节说明参考后续内容）
《商务网页设计与制作》
任务1：首页DIV框架制作
1、网页DIV层次规划
长沙民政
通过分析，网页可以分成几个大的区域，将页面用DIV分块。DIV是HTML的标签，
《商务网页设计与制作》
任务1：首页DIV框架制作
长沙民政
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 以上语句说明该文档是过渡类型，另外还有框架和严格类型，目前一般