div+css教程怎么学习？
1、欢迎大家学习《十天学会
web
标准》，也就是我们常说的
DIV+CSS
。不过这里的
D
IV+CSS
是一种错误的叫法，建议大家还是称之为
web
标准。
学习本系列教程需有一定
html
和
css
基础，
也就是指您之前做过网页，
会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及
html
和
css
，建议您先去充电，否
则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到
web
标准
（
div+css
）布局，会使用
web
标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，
实例涉及到哪些关键点或难点就讲解什么，
较少讲解概
念。
因为概念这些东西很难说明白，
或者说明白你也不一定能听懂，
听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把
css
和
css
hack
单独分出，只是在用到的时候穿插入讲解了。
html
基础和
css
基础只在第一节中介绍了几点重要的。
一，盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如ＰＤＡ设备也能正常浏览。那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：
内容（ｃｏｎｔｅｎｔ）充（ｐａｄｄｉｎｇ）ｂｏｒｄｅｒ）（ｍａｒｇ， Ｃ）Ｓ盒子模式都具备这些属性。 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解
盒模型了。
＋左边框＋左填充＋内容＋右填充＋右边框＋右边界组成，而ｃｓ样式中ｗｅｉｇ所定义的宽度仅仅是内容部分的宽度，这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
如果现在您对ＣＳＳ盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒
2、
第一天
XHTML CSS
基础知识
欢迎大家学习《十天学会
web
标准》，也就是我们常说的
DIV+CSS
。不过这里的
D
IV+CSS
是一种错误的叫法，建议大家还是称之为
web
标准。
学习本系列教程需有一定
html
和
css
基础，
也就是指您之前做过网页，
会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及
html
和
css
，建议您先去充电，否
则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到
web
标准
（
div+css
）布局，会使用
web
标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，
实例涉及到哪些关键点或难点就讲解什么，
较少讲解概
念。
因为概念这些东西很难说明白，
或者说明白你也不一定能听懂，
听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把
css
和
css
hack
单独分出，只是在用到的时候穿插入讲解了。
html
基础和
css
基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习
一、
xhtml
css
基础知识
首先说一下我们这节课的知识点
1.
文档类型
2.
语言编码
3.
html
标签
4.
css
样式
5.
css
优先级
6.
css
盒模型组成
1
）文档类型
当我们用
dreamweaver
新建一下
html
格式文档时，查看源代码，会发现代码最上
部有如下这句话：
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.or
g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，
因为浏览器对
XHTML
的解析比较宽松，
允许使用
HTML4.01
中的标签，
但必须符合
XHT
ML
的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留
这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2
）语言编码
接下来我们还会发现这样一句话：
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312"
/>
它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的
gb2312
告诉
浏览器，本文档采用简体中文编码；还有一种常用的编码是
UTF-8
编码，它是国际通用的
编码。不管我们采用哪种编码，有一点就是包含的
css
样式表和其它文件也必须和本文档
的编码一样，要不就会出现乱码。
3
）
html
标签
html
标签在页面中都必须结束。成对的标签以
“/
标签名
”
结束，有些单一的标签在本
身的结尾打上
/
来结束，这是
xhtml
代码编写的规范。
成对的标签：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
{...}
......
单一的标签：
<img
src=""
/>
<br
/>
.......
还需说明一点的是按
xhtml
规范，标签必须用小写。
4
）
css
样式
加载
css
样式有以下四种
外部样式
内部样式
行内样式
导入样式
<link
href="layout.css"
rel="stylesheet"
type="text/css"
/>
这种形式是把
css
单独写到一个
css
文件内，然后在源代码中以
link
方式链接。它的
好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
<style>
h2
{
color:#f00;}
</style>
这种形式是内部样式表，它是以
<style>
和
</style>
结尾，写在源代码的
head
标签
内。这样的样式表只能针对本页有效。不能作用于其它页面。
<p
style="font-size:18px;">
行内样式
这种在标签内以
style
标记的为行内样式，
行内样式只针对标签内的元素有效，
因其没
有和内容相分离，所以不建议使用。
@import
url("/css/global.css");
链接样式是以
@import
url
标记所链接的外部样式表，它一般常用在另一个样式表内
部。如
layout.css
为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个
gl
obal.css
的文件中，然后在
layout.css
中以
@import
url("/css/global.css")
的形式链
接全局样式，这样就使代码达到很好的重用性。
5
）
css
优先级
id
优先级高于
class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
总结：单一的
(id)
高于共用的
(class)
，有指定的用指定的，无指定则继承离它最近
的
6
）
css
盒模型组成
css
盒模型是本节教程的重点。
前面几个知识点，
如果您会用表格布局的话，
就非常好
理解和掌握了。这里的盒模型是和
table
布局的一个不同点。学习
web
标准，首先要弄懂
的就是这个盒模型，这就是
DIV
排版的核心所在。传统的表格排版是通过大小不一的表格
和表格嵌套来定位排版网页内容，改用
CSS
排版后，就是通过由
CSS
定义的大小不一的
3、
两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，
我们知道让它居中的方法，所以这里需要在这两个
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
居中，那
么整体就居中了：
代码原文：
四、
xhtml
的块级元素
(div)
和内联元素
(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现；
内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后
换行，起辅助作用。
一般的块级元素诸如段落
、标题
<h1><h2>...
、列表
,<ul><ol><li>
、表格
<table>
、表单
<form>
、
DIV<div>
和
BODY<body>
等元素。而内联元素则如
:
表单
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html
xmlns="http://www.w3.org/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>