插入图片 ＜img src="图形文件名"＞ 定义表格 ＜table＞..........＜/table＞ 显示格线 ＜table border＞ 表格标题＜caption＞..........＜/caption＞ 定义行 ………. 表头 ………. 表格数据 …….. 表格中内容排列 ……… ……….带标题的表格

letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:bold; /*文字粗体*/ vertical-align:sub; /*下标字*/ vertical-align:super; /*上标字*/ text-decoration:line-through; /*加删除线*/ text-decoration:overline; /*加顶线*/ text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align:right; /*文字右对齐*/ text-align:left; /*文字左对齐*/ text-align:center; /*文字居中对齐*/ text-align:justify; /*文字分散对齐*/ vertical-align 属性 vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/
三、CSS 符号属性：
list-style-type:none; /*不编号*/ list-style-type:decimal; /*阿拉伯数字*/ list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/ list-style-type:upper-alpha; /*大写英文字母*/ list-style-type:disc; /*实心圆形符号*/ list-style-type:circle; /*空心圆形符号*/ list-style-type:square; /*实心方形符号*/ list-style-image:url(/dot.gif); /*图片式符号*/ list-style-position:outside; /*凸排*/ list-style-position:inside; /*缩进*/
四、CSS 背景样式：
background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/ background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在 x 轴重复排列*/ background-repeat : repeat-y; /*在 y 轴重复排列*/ 指定背景位置 background-position : 90% 90%; /*背景图片 x 与 y 轴的位置*/ background-position : top; /*向上对齐*/ background-position : buttom; /*向下对齐*/ background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/
五、CSS 连接属性：
a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/ 鼠标光标样式： 链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move 加一问号 cursor:help 箭头朝左 cursor:w-resize 箭头朝上 cursor:n-resize 箭头朝右上 cursor:ne-resize 箭头朝左上 cursor:nw-resize 文字 I 型 cursor:text 箭头斜右下 cursor:se-resize 箭头斜左下 cursor:sw-resize 漏斗 cursor:wait 光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}
六、CSS 框线一览表：
border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 /*设置上框线 top 颜色*/ border-top-width :1px /*设置上框线 top 宽度*/ border-top-style : solid/*设置上框线 top 样式*/ 其他框线样式 solid /*实线框*/

dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/
七、CSS 表单运用：
文字方块 按钮 复选框 选择钮 多行文字方块 下拉式菜单 选项 1 选项 2
八、CSS 边界样式：
margin-top:10px; /*上边界*/ margin-right:10px; /*右边界值*/ margin-bottom:10px; /*下边界值*/ margin-left:10px; /*左边界值*/
九、CSS 边框空白
padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白*/
十、滚动条样式
Scrollbar-face-color:#f3f3f3;/*滚动条凸出部分的颜色*/ Scrollbar-highlight-color:#f1f1f1/*滚动条阴影部分的颜色*/ Scrollbar-shadow-color:#fcfcfc/*立体滚动条阴影颜色*/ Scrollbar-3dlight-color:#fcfcfc/*滚动条亮边的颜色*/ Scrollbar-arrow-color:#34837/*上下按钮上三角箭头的颜色*/ Scrollbar-track-color:#fcfcfc/*滚动条的背景颜色*/ Scrollbar-darkshadow-color:#66c0f4/*立体滚动条强阴影颜色*/ Scrollbar-base-color:#fcfcfc/*滚动条的基本颜色*/
CSS 基本语法规则
选择符 任何 HTML 元素都可以是一个 CSS1 的选择符。 选择符仅仅是指向特别样式的元素。 例如， P { text-indent: 3em } 当中的选择符是 P。 类选择符

单一个选择符能有不同的 CLASS(类)，因而允许同一元素有不同样式。例如，一个网页制作 者也许希望视其语言而定，用不同的颜色显示代码 : code.html { color: #191970 } code.css { color: #4b0082 } 以上的例子建立了两个类，css 和 html，供 HTML 的 CODE 元素使用。CLASS 属性是用于在 HTML 中以指明元素的类，例如，

类的声明也可以无须相关的元素: .note { font-size: small } 在这个例子，名为 note 的类可以被用于任何元素。 一个良好的习惯是在命名类的时候， 根据它们的功能而不是根据它们的外观。 上述例子中的 note 类也可以命名为 small，但如果网页制作者决定改变这个类的样式，使得它不再是小字 体的话，那么这个名字就变得毫无意义了。 ID 选择符 ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。 一个 ID 选择符的指定要有指示符"#"在名字前面。例如，ID 选择符可以指定如下: #svp94O { text-indent: 3em } 这点可以参考 HTML 中的 ID 属性:

文本缩进 3em

/* COMMENTS CANNOT BE NESTED */ 伪类和伪元素 伪类和伪元素是特殊的类和元素， 能自动地被支持 CSS 的浏览器所识别。 伪类区别开不同种 类的元素(例如，visited links(已访问的连接)和 active links(可激活连接)描述了两个定位锚 (anchors)的类型)。伪元素指元素的一部分，例如段落的第一个字母。 伪类或伪元素规则的形式如 选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 } 伪类和伪元素不应用 HTML 的 CLASS 属性来指定。一般的类可以与伪类和伪元素一起使用， 如下: 选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 } 定位锚伪类 伪类可以指定 A 元素以不同的方式显示连接(links)、 已访问连接(visited links)和可激活连接 (active links)。定位锚元素可给出伪类 link、visited 或 active。一个已访问连接可以定义为不 同颜色的显示，甚至不同字体大小和风格。 一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后，当网页的 已访问连接被重选时，又以不同颜色、更小字体显示。这个样式表的示例如下: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% } 首行伪元素 通常在报纸上的文章，例如 Wall Street Journal 中的，文本的首行都会以粗印体而且全部大 写地展示。CSS1 包括了这个功能，将其作为一个伪元素。首行伪元素可以用于任何块级元 素(例如 P、H1 等等)。以下是一个首行伪元素的例子: P:first-line { font-variant: small-caps; font-weight: bold } 首个字母伪元素 首个字母伪元素用于加大(drop caps)和其他效果。含有已指定值选择符的文本的首个字母会 按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如: P:first-letter { font-size: 300%; float: left } 会比普通字体加大三倍。 层叠顺序 当使用了多个样式表，样式表需要争夺特定选择符的控制权。在这些情况下，总会有样式表 的规则能获得控制权。以下的特性将决定互相对立的样式表的结果。 ! important 规则可以用指定的! important 特指为重要的。一个特指为重要的样式会凌驾于与之对立的 其它相同权重的样式。同样地，当网页制作者和读者都指定了重要规则时，网页制作者的规 则会超越读者的。以下是! important 声明的例子: BODY { background: url(bar.gif) white; background-repeat: repeat-x ! important }

Origin of Rules (Author's vs. Reader's) 正如以前所提及的，网页制作者和读者都有能力去指定样式表。当两者的规则发生冲突，网 页制作者的规则会凌驾于读者的其它相同权重的规则。 而网页制作者和读者的样式表都超越 浏览器的内置样式表。 网页制作者应该小心地使用! important 规则， 因为它们会超越用户任何的! important 规则。 例如，一个用户由于视觉关系，会要求大字体或指定的颜色，而且这样的用户会有可能声明 确定的样式规则为! important，因为这些样式对于用户阅读网页是极为重要的。任何的! important 规则会超越一般的规则，所以建议网页制作者使用一般的规则以确保有特殊样式 需要的用户能阅读网页。 选择符规则: 计算特性 基于它们的特性级别， 样式表也可以超越与之冲突的样式表， 一个较高特性的样式永远都凌 驾于一个较低特性的样式。这只不过是计算选择符的指定个数的一个统计游戏。 统计选择符中的 ID 属性个数。 统计选择符中的 CLASS 属性个数。 统计选择符中的 HTML 标记名格式。 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要 将数字转换成一个以三个数字结尾的更大的数。)相应于选择符的最终数字列表可以很容易 确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表: #id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */ UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */ LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */ LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */ 特性的顺序 为了方便使用，当两个规则具同样权重时，取后面 有很多方法将样式表加入到 HTML 中，每个都带有自己的优点和缺点。新的 HTML 元素和属 性已被加入以允许样式表与 HTML 文档更简易地组合起来。 连接到一个外部的样式表 嵌入一个样式表 输入一个样式表 内联样式 CLASS 属性 ID 属性 SPAN 元素 DIV 元素 关于认证的备注 -------------------------------------------------------------------------------连接到一个外部的样式表 一个外部的样式表可以通过 HTML 的 LINK 元素连接到 HTML 文档中:

标记是放置在文档的 HEAD 部分。可选的 TYPE 属性用于指定媒体类型--text/css 是一 个层叠样式表--允许浏览器忽略它们不支持的样式表类型。为 CSS 文件配置服务器而将 text/css 当作 Content-type 内容发送出去也是一个好注意。 外部样式表不能含有任何像或

STYLE 元素放在文档的 HEAD 部分。必须的 TYPE 属性用于指定媒体类型，LINK 元素也一样。 同样地，TITLE 和 MEDIA 属性也可以用 STYLE 指定。 旧版本的浏览器，并不能识别 STYLE 元素，会将其当作 BODY 的一部分照常展示其内容， 从而使这些样式表对用户是可见的。要防止这样做，STYLE 元素的内容要包含一个 SGML 注 解()在里面，像上述例子那样。 嵌入的样式表可用于当一个文档具有独一无二的样式的时候。 如果多个文档都使用同一样式 表，那么外部样式表会更适用。 -------------------------------------------------------------------------------输入一个样式表 一个样式表可以使用 CSS 的@import 声明被输入。这个声明用于一个 CSS 文件或内部的 STYLE 元素: 注意其它的 CSS 规则应该仍然包括在 STYLE 元素中， 但所有的@import 声明必须放在样式 表的开始部分。任意在样式表中指定了的规则，其自身超越在输入样式表中对立的规则。例 如上例，即使一个输入的样式表包含 DT { background: aqua }，定义项(definition terms)依然 会是黄色的背景。 被输入的样式表的顺序对于它们怎样层叠是很重要的。在上述的例子中，如果 style.css 输入 的样式表指定了 STRONG 元素会显示为红色而 punk.css 样式表指定了 STRONG 元素显示为黄 色的话，那么后面的规则会获胜，而 STRONG 元素会显示为黄色。 输入的样式表对于模块性效果很有用处。 例如， 一个网站可以通过使用了的选择符分类样式 表。一个 simple.css 样式表给出公共的元素像 BODY、P、H1 和 H2。此外，一个 extra.css 样 式表给出较少共通的元素像 CODE、BLOCKQUOTE 和 DFN。一个 tables.css 样式表可以用于定 义变革元素的规则。 这三个样式表在需要的时候可以使用@import 声明包括在 HTML 中。 三 个样式表也可以通过 LINK 元素组合。 -------------------------------------------------------------------------------内联样式 样式可以使用 STYLE 属性内联。STYLE 属性可以应用于任意 BODY 元素(包括 BODY 本身)，除 了 BASEFONT、PARAM 和 SCRIPT。这个属性将任何数量的 CSS 声明当作自己的值，而每个声 明用分号隔开。以下是一个例子:

这段的样式是红色的 New Century Schoolbook 字，如果字体可用的话。

默认地接受所有媒体， 因为没有任何的为内联样式指定明确的媒体的语句。 这种方法应该尽 量少用， 如当一个样式会应用在所有媒体到一个元素的个别情况。 如果样式会被应用到单一 元素的场合，但只能使用确认的媒体的话，使用 ID 属性代替 STYLE 属性。 -------------------------------------------------------------------------------CLASS 属性 CLASS 属性用于指定元素属于何种样式的类。例如，样式表可以加入 punk 和 warning 类: .punk { color: lime; background: #ff80c0 } P.warning { font-weight: bolder; color: red; background: white } 这些类可以使用 CLASS 属性在 HTML 中引用:

欢迎访问 Web Design Group 及 TV water 168!

整个文档当中的每个 ID 属性的值都必须是唯一的。 其值必须是一个以字母开头紧接字母、 识字或连字符。字母限于 A-Z 和 a-z。 注意 HTML 4.0 允许在 ID 属性中有句号， CSS1 不允许在 ID 选择符中有句号。 但 也要注意 CSS1 允许 Unicode 字符 161-255 而且忽略 Unicode 字符为一个数字代码， HTML 4.0 不允许这些 但 字符在一个 ID 属性值当中。 当一个样式只需要在任何文档中应用一次时，使用 ID 是很适合的。 ID 与 STYLE 属性相比， 在于 ID 允许指定媒体的样式，而且也可以被应用于多个文档(虽然每个文档只用一次)。 -------------------------------------------------------------------------------SPAN 元素 SPAN 元素被加入到 HTML 中以允许网页制作者给出样式但无须附加在一个 HTML 的结构元 素上。SPAN 在样式表中作为一个选择符使用，而且它也能接受 STYLE、CLASS 和 ID 属性。 SPAN 是一个内联元素， 所以它可以作为 HTML 中的元素如 EM 和 STRONG 使用。 最重要的差 别在于虽然 EM 和 STRONG 带有结构的意义，但 SPAN 就没有这样的意义。它的存在纯粹是 应用样式，所以当样式表失效时它就没有任何的作用。 一些 SPAN 例子如下:

前面是 段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文 字的样式为Arial.

-------------------------------------------------------------------------------DIV 元素 DIV 元素在功能上与 SPAN 元素相似，最主要的差别在于 DIV ("division"，"部分"的简称) 是一个块级元素。DIV 可以包含段落、标题、表格甚至其它部分。这使 DIV 便于建立不同集 成的类，如章节、摘要或备注。例如:

Divisions/部分

DIV 元素在 HTML 3.2 中有定义，但 HTML 3.2 中只有 ALIGN 属性能兼容。HTML 4.0 在属性中加入 CLASS、STYLE、和 ID 属性。

因为 DIV 可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用 的。

要求关闭标记。

闭指定元素及其子元素的显示！ -------------------------------------------------------------------------------空白 语法: white-space: <值> 允许值: normal | pre | nowrap 初始值: normal 适用于: 块级元素 向下兼容: 是 空白属性将决定如何处理元素内的空格. 该属性的值取以下三个中的一个: normal (将多个空格折叠成一个) pre (不折叠空格) nowrap (不允许换行，除非遇到
标记) -------------------------------------------------------------------------------目录样式类型 语法: list-style-type: <值> 允许值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 初始值: disc 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式项属性指定目录项标记的类型，当目录样式图象值为 none 或当图象载入选项 被关闭时使用。 例如: LI.square { list-style-type: square } UL.plain { list-style-type: none } OL { list-style-type: upper-alpha } /* A B C D E etc. */ OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */ OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */ -------------------------------------------------------------------------------目录样式图象 语法: list-style-image: <值> 允许值: | none 初始值: none 适用于: 带有显示值的目录项元素 向下兼容: 是 当图象载入选项打开时， 目录样式图象属性在指定目录项标记使用哪个图象代替由目录 样式类型属性指定的标记。 例如: UL.check { list-style-image: url(/LI-markers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) } -------------------------------------------------------------------------------目录样式位置 语法: list-style-position: <值> 允许值: inside | outside

初始值: outside 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式位置属性可以取值 inside(内部) or outside(外部)，其中 outside 是缺省值。整个 属性决定关于目录项的标记应放在那里。如果使用 inside 值，换行会移到标记下，而不是缩 进。应用的例子如下: Outside rendering: * List item 1 second line of list item Inside rendering: * List item 1 second line of list item -------------------------------------------------------------------------------目录样式 语法: list-style: <值> 允许值: <目录样式类型> || <目录样式位置> || 初始值: 未定义 适用于: 带有显示值的目录项元素 向下兼容: 是 目录样式属性是目录样式类型、目录样式位置，和目录样式图象属性的略写。 例如: LI.square { list-style: square inside } UL.plain { list-style: none } UL.check { list-style: url(/LI-markers/checkmark.gif) circle } OL { list-style: upper-alpha } OL OL { list-style: lower-roman inside } 上边界 语法: margin-top: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 上边界属性用一个指定的长度或百分比值来设置元素的上边界。 百分比值参考上级元素 的宽度。允许使用负值边际。 例如，以下的规则将消除文件的上边界。 BODY { margin-top: 0 } 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。 -------------------------------------------------------------------------------右边界 语法: margin-right: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否

右边界属性用一个指定的长度或百分比值来设置元素的右边界。 百分比值参考上级元素 的宽度。允许使用负值边际。 例如: P.narrow { margin-right: 50% } 注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。 -------------------------------------------------------------------------------下边界 语法: margin-bottom: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 下边界属性用一个指定的长度或百分比值来设置元素的下边界。 百分比值参考上级元素 的宽度。允许使用负值边际。 例如: DT { margin-bottom: 3em } 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。 -------------------------------------------------------------------------------左边界 语法: margin-left: <值> 允许值: <长度> | <百分比> | auto 初始值: 0 适用于: 所有元素 向下兼容: 否 左边界属性用一个指定的长度或百分比值来设置元素的左边界。 百分比值参考上级元素 的宽度。允许使用负值边际。 例如: ADDRESS { margin-left: 50% } 注意如果边界在水平方向邻接(重叠)了，不会改用其它边界值。 -------------------------------------------------------------------------------边界 语法: margin: <值> 允许值: [ <长度> | <百分比> | auto ]{1,4} 初始值: 未定义 适用于: 所有元素 向下兼容: 否 边界属性用一到四个值来设置元素的边界，每个值都是长度、百分比或者自动。百分比 值参考上级元素的宽度。允许使用负值边际。 如果四个值都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它 被应用于所有边界。如果两个或三个值给出了，省略了的值与对边相等。 边界声明包括以下例子： BODY { margin: 5em } /* 所有边界设为 5em */ P { margin: 2em 4em } /* 上和下边界为 2em，左和右边界为 4em */ DIV { margin: 1em 2em 3em 4em } /* 上边界为 1em，右边界为 2em，下边界为 3em，左

边界为 4em */ 注意如果边界在垂直方向邻接(重叠)了，会改用其中最大的那个边界值。而水平方向则 不会。 使用边界属性可以一次性地设置所有边界；也可以选择使用上边界、下边界、左边界和 右边界属性。 -------------------------------------------------------------------------------上补白 语法: padding-top: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 上补白属性描述上边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分 比。百分比的值参考上级元素的宽度。不能使用负值。 -------------------------------------------------------------------------------右补白 语法: padding-right: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 右补白属性描述右边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分 比。百分比的值参考上级元素的宽度。不能使用负值。 -------------------------------------------------------------------------------下补白 语法: padding-bottom: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 下补白属性描述下边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分 比。百分比的值参考上级元素的宽度。不能使用负值。 -------------------------------------------------------------------------------左补白 语法: padding-left: <值> 允许值: <长度> | <百分比> 初始值: 0 适用于: 所有对象 向下兼容: 否 左补白属性描述左边框和选择符的内容之间有多少间隔。该值可以是一个长度或百分 比。百分比的值参考上级元素的宽度。不能使用负值。

实验DivCSS网页布局

实验九 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/

├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

DIV+CSS：网站首页布局实例教程

DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/

├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例1：设置网页整体居中的代码

DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;

边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none

网页设计基础Div+CSS布局入门教程

网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 以下为引用的内容： DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/

│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

DIV+CSS布局大全

目录 div＋css布局入门 (4) XHTML下css+div布局总结 (6) 网页设计DIV+CSS——第1天:选择什么样的DOCTYPE (9) 第一天 (9) 什么是DOCTYPE (10) 我们选择什么样的DOCTYPE (10) 补充 (10) 网页设计DIV+CSS——第2天:什么是名字空间 (10) 网页设计DIV+CSS——第3天:定义语言编码 (11) 网页设计DIV+CSS——第4天:调用样式表 (11) 外部调用样式表 (11) 双表法调用样式表 (12) 网页设计DIV+CSS——第5天:head区的其他设置 (12) 收藏夹小图标 (12) 为搜索引擎准备的内容 (12) 网页设计DIV+CSS——第6天:XHTML代码规范 (12) 1.所有的标记都必须要有一个相应的结束标记 (13) 2.所有标签的元素和属性的名字都必须使用小写 (13) 3.所有的XML标记都必须合理嵌套 (13) 4.所有的属性必须用引号""括起来 (13) 5.把所有<和&特殊符号用编码表示 (13) 6.给所有属性赋一个值 (13) 7.不要在注释内容中使“--” (13) 网页设计DIV+CSS——第7天:CSS入门 (14) 1.基本语法规范 (14) 2.颜色值 (14) 3.定义字体 (14)

5.派生选择器 (14) 6.id选择器 (14) 6.类别选择器 (15) 7.定义链接的样式 (15) 网页设计DIV+CSS——第8天:CSS布局入门 (15) 1.定义DIV (15) 2.CSS2盒模型 (16) 3.辅助图片一律用背景处理 (17) 网页设计DIV+CSS——第9天:第一个CSS布局实例 (17) 1.确定布局 (18) 2.定义body样式 (18) 3.定义主要的div (18) 4.100%自适应高度? (20) 网页设计DIV+CSS——第10天:自适应高度 (20) 网页设计DIV+CSS——第11天:不用表格的菜单 (21) 1.不用表格的菜单(纵向) (21) 2.不用表格的菜单(横向) (22) 网页设计DIV+CSS——第12天:校验及常见错误 (24) 1.XHTML校验 (24) 2.CSS2校验 (25) CSS的十八般技巧 (25) WEB打印实例教程 (30) Div+CSS布局入门教程 (37)

DivCSS布局入门教程相当经典

在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

网页设计-页面布局篇(Css+Div)

网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)

第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：

实验四--Div+CSS网页布局

实验四 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

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

单行一列 以下是引用片段： 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; } 单行三列 绝对定位

表格与DIV+CSS的布局设计分析

表格与DIV+CSS的布局设计分析 摘要：网页的布局是给浏览者的第一印象，往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而div+css布局是一种新的排版布局理念，可以使页面载入得更快，修改设计时更有效率而代价更低。 关键词：网页布局表格 div+css 中图分类号：tp393.092 文献标识码：a 文章编号：1007-9416(2011)12-0191-01 随着互联网应用的日渐普遍，网络应用进入了人们生活的多个层面，进而人们对网站需求的增大，市场对网页制作人员的需求也大大增加。对于一个网站来说,要要给用户带来好的享受，就必须提高网页布局设计的美观度。网页就好比一张图纸，通过排版布局之间的对比才凸显它的美，网页布局的效果直接影响到网页设计的质量。目前常见的网页布局技术有表格技术和div+css技术。 1、表格布局技术 1.1 表格布局技术的特点 表格是网页的一个非常重要的元素，表格主要由行、列和单元格组成。在使用表格布局时，设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格，而表格的行、列数则由该表格中所包含的版块数目来决定。对于复杂的版块，

还必须在里面插入嵌套表格来完成。 1.2 表格布局技术的优势 对于初学者来说，表格可能是最好的布局方式，容易上手。表格布局能对不同对象加以处理，而又不用担心不同对象之间的影响；而且表格在定位图片和文本上比起用css更加方便。网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。 1.3 表格布局技术的缺陷 使用table布局会生产很多冗余代码，会影响浏览速度以及占用过多服务器空间。而且，表格结构单一，难以体现出层次感，无法将设计的美感流畅地通过网页表现出来。 2、div+css布局技术 2.1 div+css布局技术介绍 div+css的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过div，我们可以将网页中的这些内容元素放置到各个div中，构成网页的“结构”；然后，我们再根据页面的设计需要运用css样式表文件设置其中的文字、图片和列表等元素的“表现”效果。 在div+css的布局技术中，设计者运用html来确定网页的结构和内容，而用css来控制网页中内容的表现形式，很好地实现了内容与形式的分离。

Div+CSS基础代码网页布局+实例教程

Div+css 一，什么是CSS CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。 二．DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构（框架）标签，像、

、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。 表格 以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。 例子：

分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码：

https://www.sodocs.net/doc/9f18492423.html,演示，内容 测试内容高度超出演示实例，divcss5实例

完整CSS html最小高度实例代码：

DIV+CSS布局

Css 样式表
1.1、html 标签
静态结构 ＜html＞ ＜head＞ ＜title＞标题＜title＞ ＜/head＞ ＜body＞..........文件内容.......... ＜/body＞ ＜/html＞ 1.文件标题 ＜title＞..........＜/title＞ 2.文件更新--＜meta＞ 【1】10 秒后自动更新一次 ＜meta http-equiv="refresh" content=10＞ 【2】10 秒後自动连结到另一文件 ＜meta http-equiv="refresh" content="10；URL=欲连结文件之 URL"＞ 3.查询用表单--＜isindex> 若欲设定查询栏位前的提示文字： ＜isindex prompt="提示文字"＞ 4.预设的基准路径--＜base> ＜base href="放置文件的主机之 URL"＞

......

列块容器 标题.......... #=1~6；h1 为最大字，h6 为最小字 段落************* 链接…… 图像 注释 平行线

---

用于分割内容 换行

html 样式 font-family:verdana 字体 color:red 颜色 font-size:10 大小 text-align:center 文本对齐 bgcolor:red 背景颜色 background=”URL”背景图像

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

div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的 几种布局代码： 单行一列 以下是引用片段： 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; }

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

单行一列 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;} //https://www.sodocs.net/doc/9f18492423.html, 单行三列绝对定位

Div+CSS布局示例

实训六Div+CSS布局示例 主要内容： 本周需要完成的任务：根据前几周的设计， 各组创建自己的站点文件夹，并把站点内文件夹结构创建好，搜集相关素材； 使用Div+CSS实现网页框架。 参考图： 操作部分：Div标签及盒子模型 提示：请务必做好准备工作。 在硬盘上创建一个自己的文件夹，专门存放网页素材和制作的网页。如在E:/盘创建一个“myweb“文件夹。 将从FTP上下载下来的”images”文件夹（专门存放图片），存放在自己的“myweb” 文件夹内，以备制作网页时使用。 将从FTP上下载下来的 test.html 文件，存放在自己的“myweb”文件夹内，这是一个网页HTML代码的标准模版。 将 test.html 复制一份，重命名之后以记事本的方式打开，开始编辑代码。 1.在上一节制作的网页的基础上，继续修改，使三个盒子都能居中显示。

保存后测试。 2.会发现得到如下结果：

原因：#red和#blue都被添加了float:left;属性,而#green没有float属性。 结论：margin:0 auto;这种居中对齐方法，对于有浮动属性的div不起作用。 解决办法：将显示在同一行的、需要浮动的盒子，用一个大盒子套起来，这个大盒子不必浮动，也就能使margin:0 auto;这种居中对齐方法有效。 然后修改CSS文件： 注意：HTML文件和CSS文件都保存，测试。

知识链接： 使用CSS实现居中的方法： Margin:0 auto; 注：此方法不适用与具有浮动（float）属性的Div。 Div+CSS应用示例 以如下网页为例，分步讲解： 1.首先，确定网页布局，先横向划分大盒子，划分结果如下：

div,css布局模板

竭诚为您提供优质文档/双击可除 div,css布局模板 篇一：div+css布局例子 div+css布局入门教程 |20xx-6-1810:34:00 一、页面布局与规划 在网页制作中，有许多的术语，例如：css、html、dhtml、xhtml等等。在下面的文章中我们将会用到一些有关于html 的基本知识，而在你 学习这篇入门教程之前，请确定你已经具有了一定的html基础。下面我们就开始一步一步使用diV+css进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用photoshop或Fireworks(以下简称ps或Fw)等图片处理软件将需要制作的界面布 局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：

1、顶部部分，其中又包括了logo、menu和一幅banner 图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图： 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 diV结构如下：│body{}/*这是一个html元素，具体我就不说明了*/└#container{}/*页面层容器*/├ #header{}/*页面头部*/├#pagebody{}/*页面主体*/ │├#sidebar{}/*侧边栏*/ │└#mainbody{}/*主体内容*/ └#Footer{}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写html代码和css。 二、写入整体层结构与css 接下来我们在桌面新建一个文件夹，命名为“diV+css 布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：

Div+CSS布局入门教程(全套)

Div+CSS布局入门教程（全套） 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:

根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/

至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 无标题文档 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在标签对中写入DIV的基本结构，代码如下：

为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS 信息，代码如下： /*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。 关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）： 1、请养成良好的注释习惯，这是非常重要的； 2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了； 3、讲解一些常用的CSS代码的含义： font:12px Tahoma； 这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式； margin:0px； 也使用了缩写，完整的应该是：

相关主题

• divcss布局