在看这节教程前，先确定把之前的一个教程弄清楚了再开始哈~~

先来总结一下，之前的那个教程，我们说了定义一个div的高度，宽度，背景，颜色，内间距。以及div和div之间的间距，还提到了div的布局方法，和清除浮动。

这节我们将学习一下，在div中编辑内容。
之前的教程最后布置了一个作业，这节课，将把那个作业拿出来扩充~~

我们先看中间部分，那块最大的草绿色的div~
我们将在其中间放一个白色的框框，一些文字，一条水平线。

这个效果里，有几个新的知识点。其他的都是大家已经掌握的内容。
A．        图片的外边框，border:2px solid #096;
图片的外边框上下左右各占2px，要算进宽度里。如果是宽度算得不对的话，右边文字会掉下来。

B：插入图片的代码是：<img src="" alt=""/>，其中src写的是链接的地址，alt是对这个图片的注解。鼠标放到图片上，会显示一串注解文字。
比如：<img src="http://www.designbus.cn" alt="设计大巴的教程~"/>

C：另外我们来说下那条水平线，一般DIV+CSS中的水平线都是用边框来表示的。我们把水平线以上部分看做一个大DIV，我们在这个大DIV中，设定margin-bottom:10px;border-bottom:1px solid #FFF;padding-bottom:10px;

看中间的那2条打斜线的部分，上面一半细一点的是padding，表示padding-bottom:10px;，这个div的高度是包括padding的，看到蓝色框框是包含padding了么~~下面那部分是margin-bottom:10px;~~那条水平线，事实上就是这块div的底部一条边框。只不过，加了上下的间距，看上去没那么紧贴上下的内容。

一般要在div里塞内容，格式是这样的：

The html Code:

<div class="m_t"><br /> <div class="m_l"><img src="http://www.designbus.cn" alt="设计大巴的教程~"/></div><br /> <div class="m_r">我是那张图片右侧的文字。。</div><br /> </div>

m_t的div里有2个div，这2个div就是包含其中的子div~~

大致的概念是这样的，先看下布局方式，是横排，还是竖排，这边显然是横排，我们先新建2个大div，然后我们再看上面那个，显然是左右的竖排结构，那么就想到要新建2个float的div，记住，所有div只要横过来排，就要float。2个div的总宽度，算的时候要把padding，border，margin算进去。分好宽度后，开始写内容。。

接下去的教程不会写的非常详细了，因为基础知识都在这边了。余下的，我会将每个标签细化告诉大家，后期，我们将学习如何应付所有的浏览器，让显示效果保持一致。学习过程中碰到问题，一定要自己先研究，然后再提问哈~多看看CSS手册，有助于解决大部分的问题。

哦，对了，CSS的样式名字，是自己随意叫的。。这句话应该上节就说，偶忘了~~
设计大巴有提供比较靠谱的叫法，可以参考：
http://club.designbus.cn/thread-791-1-3.html

附件是该节内容的html文件。

在看这节教程前，先确定把之前的一个教程弄清楚了再开始哈~~

先来总结一下，之前的那个教程，我们说了定义一个div的高度，宽度，背景，颜色，内间距。以及div和div之间的间距，还提到了div的布局方法，和清除浮动。

这节我们将学习一下，在div中编辑内容。
之前的教程最后布置了一个作业，这节课，将把那个作业拿出来扩充~~

我们先看中间部分，那块最大的草绿色的div~
我们将在其中间放一个白色的框框，一些文字，一条水平线。

这个效果里，有几个新的知识点。其他的都是大家已经掌握的内容。
A．        图片的外边框，border:2px solid #096;
图片的外边框上下左右各占2px，要算进宽度里。如果是宽度算得不对的话，右边文字会掉下来。

B：插入图片的代码是：<img src="" alt=""/>，其中src写的是链接的地址，alt是对这个图片的注解。鼠标放到图片上，会显示一串注解文字。
比如：<img src="http://www.designbus.cn" alt="设计大巴的教程~"/>

C：另外我们来说下那条水平线，一般DIV+CSS中的水平线都是用边框来表示的。我们把水平线以上部分看做一个大DIV，我们在这个大DIV中，设定margin-bottom:10px;border-bottom:1px solid #FFF;padding-bottom:10px;

看中间的那2条打斜线的部分，上面一半细一点的是padding，表示padding-bottom:10px;，这个div的高度是包括padding的，看到蓝色框框是包含padding了么~~下面那部分是margin-bottom:10px;~~那条水平线，事实上就是这块div的底部一条边框。只不过，加了上下的间距，看上去没那么紧贴上下的内容。

一般要在div里塞内容，格式是这样的：

The html Code:

<div class="m_t"><br /> <div class="m_l"><img src="http://www.designbus.cn" alt="设计大巴的教程~"/></div><br /> <div class="m_r">我是那张图片右侧的文字。。</div><br /> </div>

m_t的div里有2个div，这2个div就是包含其中的子div~~

大致的概念是这样的，先看下布局方式，是横排，还是竖排，这边显然是横排，我们先新建2个大div，然后我们再看上面那个，显然是左右的竖排结构，那么就想到要新建2个float的div，记住，所有div只要横过来排，就要float。2个div的总宽度，算的时候要把padding，border，margin算进去。分好宽度后，开始写内容。。

接下去的教程不会写的非常详细了，因为基础知识都在这边了。余下的，我会将每个标签细化告诉大家，后期，我们将学习如何应付所有的浏览器，让显示效果保持一致。学习过程中碰到问题，一定要自己先研究，然后再提问哈~多看看CSS手册，有助于解决大部分的问题。

哦，对了，CSS的样式名字，是自己随意叫的。。这句话应该上节就说，偶忘了~~
设计大巴有提供比较靠谱的叫法，可以参考：
http://club.designbus.cn/thread-791-1-3.html

附件是该节内容的html文件。