DivCSS布局入门教程相当经典
- 格式：doc
- 大小：28.50 KB
- 文档页数：11
下载文档原格式
合集下载
div+css网页标准布局、经典布局
设置完图片的格式后，就可以存储了，这里选择到images的上一级目录就行了，ps会自动创 建images目录并把图片文件放入，如果已存在，直接放入。在格式处选择仅限图像，如果选 择html和图像，ps会自动生成一个表格式的网页，这个页面不是我们需要的，就不让它生成 了；还有一个需要注意的地方就是选择所有用户切片，这样只把我们手动切割的图片保存下 来，其它的就不保存了。保存后的图片如下所示，其中hot_bg.gif这张图片切割时没有隐藏上 边的文字，一会儿在ps里再处理一下把文字抹掉。
从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的
header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这 些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。 增加后的代码如下：
<div id="container"> <div id="header">此处显示 id "header" 的内容</div> <div id="nav">此处显示 id "nav" 的内容</div> <div id="maincontent"> <div id="main">此处显示 id "main" 的内容</div> <div id="side">此处显示 id "side" 的内容</div> </div> <div id="footer">此处显示 id "footer" 的内容</div> </div>
DIVCSS入门教程
DIVCSS入门教程一、DIV的基本用法```html<div><!--这里可以放入其他HTML元素--></div>```二、DIV的布局和样式1.宽度和高度可以使用CSS样式属性来设置DIV的宽度和高度，如下所示：```cssdivwidth: 200px; /* 设置DIV的宽度为200像素 */height: 100px; /* 设置DIV的高度为100像素 */```2.背景颜色和背景图片可以使用CSS样式属性来设置DIV的背景颜色和背景图片，如下所示：```cssdivbackground-color: red; /* 设置DIV的背景颜色为红色 */ background-image: url("bg.jpg"); /* 设置DIV的背景图片为bg.jpg */```3.边框和边框样式可以使用CSS样式属性来设置DIV的边框和边框样式，如下所示：```cssdivborder: 1px solid black; /* 设置DIV的边框为1像素的实线黑色边框 */border-radius: 5px; /* 设置DIV的边框圆角为5像素*/```4.文本样式可以使用CSS样式属性来设置DIV内文本的样式，如下所示：```cssdivcolor: white; /* 设置DIV内文本的颜色为白色 */ font-size: 16px; /* 设置DIV内文本的字体大小为16像素 */text-align: center; /* 设置DIV内文本的水平居中对齐*/line-height: 30px; /* 设置DIV内文本的行高为30像素*/```5.浮动布局可以使用CSS样式属性来设置DIV的浮动布局，如下所示：```cssdivfloat: left; /* 设置DIV的浮动为左浮动 */clear: both; /* 设置DIV下方没有浮动元素，用于清除浮动影响 */```6.盒模型可以使用CSS样式属性来设置DIV的盒模型，如下所示：```cssdivmargin: 10px; /* 设置DIV的外边距为10像素 */ padding: 10px; /* 设置DIV的内边距为10像素 */box-sizing: border-box; /* 设置DIV的盒模型为border-box，包含边框在内的宽度不变 */```以上是DIV的基本用法和常见的CSS样式属性。
DIV+CSS网页布局教程
DIV+CSS网页布局教程一、传统table布局传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。
二、table布局的缺点1、设计复杂，改版时工作量巨大2、表现代码与内容混合，可读性差3、不利于数据调用分析4、网页文件量大，浏览器解析速度慢如蜗牛三、web标准的构成结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等..主要技术就是CSS,目前版本2.0行为：是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)四、web标准布局基于Web标准的网站设计的核心目的：如何使网页的表现与内容分离！这样做的好处：高效率的开发与简单维护信息跨平台的可用性降低服务器成本；加快网页解析速度更良好的用户体验那么，CSS2.0从真正意义实现了设计代码与内容分离真正的表现与内容完全分离，代码可读性强，样式可重复应用五、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>测试页</title><link href="css/style1.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><div id="header">头部</div><div id=“content”>主体</div><div id="footer">尾部</div></div></body></html>Css代码：* {font-family: Arial, Helvetica, sans-serif, "宋体";font-size: 12px;margin: 0px;text-align:center;}#container {width: 810px;margin:auto;background:#CCCCCC;}#header {height: 100px;width: 800px;padding:5px;background-color: #6699FF;}#content {height: 400px;width: 800px;padding:5px;background-color#FF9900;}#footer {width: 800px;height: 50px;padding:5px;background-color: #6699FF;}六、向web标准过度/HTML基础为什么要使用XHTML?XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。
Div+CSS布局入门实战教程(3)
Div+CSS布局入门实战教程(3)Div+CSS布局入门教程之三-页面顶部制作当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：/*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}a:link,a:visited {font-size:12px;text-decoration:none;}a:hover{}/*页面层容器*/#container {width:800px;margin:10px auto}样式说明：a:link,a:visited {font-size:12px;text-decoration:none;}a:hover {}这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
#container {width:800px;margin:10px auto}指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。
接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。
由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha 透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。
到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。
DIV+CSS样式简单布局说明详细介绍
padding: 0px;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
<style type="text/css">
<!--
* {
margin: 0px;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
Байду номын сангаас}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：
<style type="text/css">
<!--
* {
margin: 0px;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
Байду номын сангаас}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
Div+CSS网站布局应用教程第1章 网页和网站的基础知识
1.4.4
遵循Web标准的好处
首先最为明显的就是用web标准制作的页面代码量小，可以节省带宽。 这只是web标准附带的好处，因为DIV的结构本身就比Table简单，Table布 局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页 面用DIV+CSS比用Table布局的节省2/3的代码，这是web标准直接的好处。
1.2.1
什么是网页设计
随着时代的发展、科学的进步、需求的不断提高，网页设计已经在短短 数年内跃升成为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统 的艺术设计门类而言，它更突出艺术与技术的结合、形式与内容的统一、交 互与情感的诉求。
1.2.2
网页设计的特点
与当初的纯文字和数字的网页相比，现在的网页无论是在内容上，还是 在形式上都已经得到了极大的丰富，网页设计主要具有以下特点：交互性、 版式的不可控性、技术与艺术结合的紧密性、多媒体的综合性、多维性。
1.1.2
网页的基本构成元素
网页由网址（URL）来识别于存取，当 访问者在浏览器的地址栏中输入网址后，通 过一段复杂而又快速的程序，网页文件会被 传送到访问者的计算机内，然后浏览器把这 些HTML代码“翻译”成图文并茂的网页。 虽然网页的形式与内容不相同，但是组成网 页的基本元素是大体相同的，一般包含文本 和图像、超链接、动画、表单、音频视频等 内容。 网页作为上网的主要依托，由于人们频繁地使用网络而变得越来越重要， 这使得网页设计也得到快速发展。每天无数的信息在网络上传播，而形态各 异、内容繁杂的网页就是这些信息的载体。如何设计网站页面，对于每一个 网站来说都是至关重要的。
在学习使用Div+CSS对网页进行布局制作之前，还需要清楚什么是 Web标准。WБайду номын сангаасb标准也称为网站标准，通常所说的Web标准是指进行网站 建设所采用的基于XHTML语言的网站设计语言。
DIV+CSS网页布局初级入门系列教程-2要点
第三天二列和三列布局今天学习《十天学会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。
预览结果如下：当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。
这里设置margin-left:120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，大家可以试一下。
<!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" /> <style>#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }</style></head><body><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></body></html>提示：可以先修改部分代码后再运行二、两列固定宽度有了前面的基础，两列固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值，如下图：三、两列固定宽度居中两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：<div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div>操作方法：在源代码里选中这两个div的代码后，点击工具栏上插入div按钮，填写id后确定，得到如上的代码下面就需要设置#content的样式了，我们知道，#side的宽度为120px，#main 宽度为350px，那么#content的宽度应该为这两者之和，然后设置#content居中，那么整体就居中了：<!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" /> <style>#content { width:470px; margin:0 auto;}#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }</style></head><body><div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div></body></html>提示：可以先修改部分代码后再运行四、xhtml的块级元素(div)和内联元素(span)块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
DIV CSS入门教程
DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站 HTML 页面，只需要重新写 CSS，再用新 CSS 覆盖以前的 CSS 就可以实现改版了。方便吧。 第三点，搜索引擎更友好，确实能够对 SEO 起到一定的帮助。 通过 DIV+CSS 对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛 爬取。这对于 SEO 也有帮助。 综上所述，个人感觉 DIV+CSS 不能太迷信它的很好很强大，它作为制作网页，美化网页 的一个重要辅助是很强大方便的。 可以弥补 table 制作框架和表格时的很多不足和美工上的 缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我 个人觉得用 table+DIV+CSS 是最好的组合，也是最省时省力的办法。 还需要再说明一下，本节讲得是 Table 布局页面和 CSS 布局页面的问题，讨论的是"布局页 面" 上用谁更好， 并不是说在 CSS 布局的页面内不能用 Table， 真正厉害的人物是 DIV、 Table、 CSS 用得恰到好处，他们三个各做各的事情，DIV 布局页面，Table 存储数据，CSS 给页面穿 衣服！
第三章
xHTML+CSS 与 SEO 的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对 xHTML+CSS 与 SEO 有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给 搜索引擎看的，所以不能不提提 xHTML+CSS 与 SEO 的关系。 1)将页面中最重要的内容用 h1 标签括起来， 的内容就和页面 title 很自然的包含了 h1 站点或者页面的核心关键词，搜索引擎很重视 h1 标签的内容哟 2)合理的运用 h2、h3 等标题标签，他们对于页面来说就是文章不同的等级或者不同的 功能区域的标志性元素 3)页面 meta 信息不可忽视，一定要包含页面核心的内容 4)为了便于搜索引擎更方便的抓取，要尽可能的保证 HTML 页面代码纯净，强调一下， 既然是 xHTML+CSS 布局页面，所以 CSS 代码要单独写在一个文件内，保证 CSS 部分和 HTML 部分彻底分离； html 页面中使用 id 和 class， 尽可能的避免 style="";尽量使用标准的 CSS 命名规范， 从这里就可以看出你这个页面重构师是否专业哟； 尽量使用 CSS 的缩写以节省代 码，例如 padding:10px 20px 10px 20px;缩写为 padding:10px 20px;最好不要在 HTML 页面 用 font、center 这种标签。
第三章
xHTML+CSS 与 SEO 的内容，后面章节会详细给大家介绍，这里就先说一些，让大家对 xHTML+CSS 与 SEO 有一定的认识，为后面制作页面打基础，毕竟我们做出来的页面还是要给 搜索引擎看的，所以不能不提提 xHTML+CSS 与 SEO 的关系。 1)将页面中最重要的内容用 h1 标签括起来， 的内容就和页面 title 很自然的包含了 h1 站点或者页面的核心关键词，搜索引擎很重视 h1 标签的内容哟 2)合理的运用 h2、h3 等标题标签，他们对于页面来说就是文章不同的等级或者不同的 功能区域的标志性元素 3)页面 meta 信息不可忽视，一定要包含页面核心的内容 4)为了便于搜索引擎更方便的抓取，要尽可能的保证 HTML 页面代码纯净，强调一下， 既然是 xHTML+CSS 布局页面，所以 CSS 代码要单独写在一个文件内，保证 CSS 部分和 HTML 部分彻底分离； html 页面中使用 id 和 class， 尽可能的避免 style="";尽量使用标准的 CSS 命名规范， 从这里就可以看出你这个页面重构师是否专业哟； 尽量使用 CSS 的缩写以节省代 码，例如 padding:10px 20px 10px 20px;缩写为 padding:10px 20px;最好不要在 HTML 页面 用 font、center 这种标签。
经典div+css网页标准布局实例教程
第一章XHTML CSS基础知识学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html 基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一章的学习一、xhtml css基础知识首先说一下我们这节课的知识点文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML 的语法。
许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2）语言编码接下来我们还会发现这样一句话：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />它标示文档的语言编码。
DIVCSS网页布局初级入门系列教程-4.
第七天横向导航菜单今天我们开始学习《十天学会web标准(div+css)》的html 列表，包含以下内容和知识点：▪▪▪横向列表菜单用图片美化的横向导航 css Sprites 一、横向列表菜单前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。
把第四节的代码拿过来直接用，修改后的代码如下： <!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" /> <style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { border: 1px solid #CCC; height:26px; background: #eee;} #menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; } </style> </head><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网页版式布局</a></li><li><a href="#">div+css教程</a></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li></ul></div></body></html>提示：可以先修改部分代码后再运行最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。
DIV+CSS布局入门
邮kait整理div＋css布局入门你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：第一种可能是你还没有理解CSS处理页面的原理。
在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。
这篇文章将告诉你应该怎样把HTML结构化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。
当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。
结构化HTML我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。
然后我们用Photoshop或者Fireworks画出来、切割成小图。
最后再通过编辑HTML将所有设计还原表现在页面上。
如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。
外观并不是最重要的。
一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。
CSS Zen Garden帮助我们最终认识到CSS的强大力量。
HTML不仅仅只在电脑屏幕上阅读。
你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。
但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考首先要学习什么是"结构"，一些作家也称之为"语义"。
这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：标志和站点名称主页面内容站点导航(主菜单)子菜单搜索框功能区(例如购物车、收银台)页脚(版权和有关法律声明)我们通常采用DIV元素来将这些结构定义出来，类似这样：<div id="header"></div><div id="content"></div><div id="globalnav"></div><div id="subnav"></div><div id="search"></div><div id="shop"></div><div id="footer"></div>这不是布局，是结构。
Div+CSS布局入门
间隙(margin) 间隙(margin)
div
填充(padding) 填充(padding)
背景色(background背景色(background-color) 背景图(background背景图总结：两个要点
1.
元素的类型
行元素 块元素
2.
元素的构造属性
谢谢大家！
DIV + CSS 布局入门
UE研究室: UE研究室:郭福恩
阶段一：页面元素的类型
div 是什么
div的全称: div的全称: division (区分) (区分) 使用方法：<div>……</div> 使用方法：<div>……</div> 职责：负责页面的结构 特性：
容器性质。 可内嵌table，还可嵌文本和其它的html代码。 可内嵌table，还可嵌文本和其它的html代码。
h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容 address - 地址 dir - 目录列表 fieldset - form控制组
文字或元素的颜色 color 背景颜色 background-color background背景图像 background-image background字体 font-family font文字大小 font-size font列表样式 list 鼠标样式 cursor 边框样式 border 内补白 padding 外边距 margin 等
<div class=“contentR”> 右侧内容区 </div>
DIV+CSS网页布局初级入门系列教程-3
第五天超链接伪类今天我们开始学习《十天学会web标准(div+css)》超链接伪类，包含以下内容和知识点：▪链接的四种样式▪将链接转换为块状▪用css制作按钮▪首字下沉一、超链接的四种样式本来计划这节课放到第九章中讲解，但下边的章节都涉及到了，所以提前来学习一下，上节课讲解的内容比较多，这节课就少讲些，只要理解了伪类，就轻松多了。
超链接可以说是网页发展史上一个伟大的发明，它使得许多页面相互链接从而构成一个网站。
说到超链接，它涉及到一个新的概念：伪类，我们先看下超链接的四种样式：a:link {color: #FF0000} /* 未访问的链接*/a:visited {color: #00FF00} /* 已访问的链接*/a:hover {color: #FF00FF} /* 鼠标移动到链接上*/a:active {color: #0000FF} /* 选定的链接*/以上分别定义了超链接未访问时的链接样式，已访问的链接样式，鼠标移上时链接样式和选定的链接样式。
之所以称之为伪类，也就是说它不是一个真实的类，正常的类是以点开始，后边跟一个名称，而它是以a开始后边跟个冒号，再跟个状态限定字符；比如第三个a:hover的样式，只有当鼠标移动到该链接上时它才生效，而a:visited只对已访问过的链接生效。
伪类使得用户体验大大提高，比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的，设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
下面来做一个默认状态下是蓝色，鼠标放上是红色加下划线，选定（按下）时为紫色，已访问过为灰色加删除线的实例来讲解一下。
首先插入两个带超链接的内容：<p><a href="#">这里是链接</a></p><p><a href="10.html">这里也是链接</a></p>从上图中可以看出，插入的超链接默认是蓝色来下划线的，这是标签的默认样式所致，下来我们在css样式中定义设置完a:link的样式后，下面分别设置a:visited ，a:hover ，a:active的样式生成的源代码如下：<!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" /> <style type="text/css">a:link { color: #06F; text-decoration: none; }a:visited { color: #999; text-decoration: line-through; }a:hover { color: #F00; text-decoration: underline; }a:active { color: #F0F; }</style></head><body><p><a href="#">这里是链接</a></p><p><a href="10.html">这里也是链接</a></p></body></html>提示：可以先修改部分代码后再运行注意：四种状态的顺序一定不能颠倒，否则有些不生效二、将链接转换为块级元素链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。
div+css经典二
文本
(8)整数＋"符号单位",符号单位有：象素px，点数pt，英寸in，毫米mm等 (9)整数+%,表示当前字体大小是父字体大小的百分比(相对字体实用技巧) 3-3.html
文本
三 字体颜色 color 3-5.html
语法：{color: 数值} 作用：字体颜色 说明：颜色参数取值范围 ·以RGB值表示 如：#ff0000 ·以默认颜色的英文名ight （行高） 3-13.html 相对比例
css图片效果
4-1—10.html 理解记忆
页面背景
背景属性： background （缩写形式） background-color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量）
文本
四 font-weight（粗细） 3-6.html 语法：{font-weight:100-900|bold|bolder|lighter|normal} 说明：浏览器默认的字体粗细为400。 (1)bold 表示黑体字(相当于数值700 ) (2)bolder 表示比黑体还要黑的字 (3)lighter 表示比黑体颜色要浅 (4)normal 正常体(相当于数值400) (5)可以指定100-900之间的3位整数,400表示正常 (6) inherit:继承
页面背景
长度值: body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }
背景属性的经典应用3-2
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在网页制作中，有许多的术语，例如：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布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：
为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：
把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：
1、请养成良好的注释习惯，这是非常重要的；。