DivCSS布局入门教程相当经典
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样式简单布局说明详细介绍
}
这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如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入门教程
第三章
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 这种标签。
- 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、请养成良好的注释习惯，这是非常重要的；。