齐博CMS：（菜鸟教程）学习制作模板（一）－第一个div的建立
本教程适合新新手使用，高手或已经知道的请飘过，如果你有心请帮助修正。

教程编写：toopd

一、首先我们先写一个div层

<div></div>

Html中任何都是相对出现的，所以就成为上面的形式，后面的那一个多一个/。

现在我们知道上面这个层，是没有任何内容，在网页中打开也没有显示。下一步就是要我们对其进行修饰一下，让其在网页中显示出来。

二、我们为div层加上一个边框，并设置一下他的宽度

<div ></div>

说明：上面的样式的意思是边框＝宽度为1px；实线边框；边框颜为灰（你也可以用具体的颜）
层的宽度为30%

这样这个div就有了一个形象的概念显示在我们的面前了。

三、充实内容，我们为div内添加两个一上一下的层

<div >
<div></div>
<div></div>
</div>

四、我们分别为这两个层添加样式

<div >
<div ></div>
<div ></div>
</div>

我们分别再介绍一下这两个样式的含义：

第一个：border:1px solid #fff：这个就不用介绍了，上面已经做了介绍，只不过边框颜是白；

第二个：padding：检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距，如padding:2px 3px 6px 5px（如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边，如果只提供一个，将用于全部的四条边。），通过设置边距，在这个层中的内容，
将按照你设置的不同的边距，离边框产生不同的距离。

五、添加内容，设置内容的字体、颜、样式等
复制代码
1.<div >
2.<div >最新新闻</div>
3.<div >php168新版即将发布</div>
4.</div>


说明：

color:字体颜;
font-weight:粗体;
Padding-left:检索或设置对象左边的边距；
height:层的高度;
line-height:字体的间距，在这里设置字体的间距是为了让字体垂直居中，所以取值与层的高度是一致的，他只对只有一行的文字有效;
background-color:背景颜。


通过上面的设置，一个简单的div层就建立起来了。
最终效果：
最新新闻
php168新版即将发布
齐博CMS：（菜鸟教程）学习制作模板（二）－两个div层并排显示
一、一个div的代码
复制代码
1.
2.<div > <div >最新新闻</div> <div >php168新版即将发布</div> </div> 


二、再复制一个

<div >
<div >最新新闻</div>
<div >php168新版即将发布</div>
</div>
<div >
<div >最新新闻</div>
<div >php168新版即将发布</div>
</div>

帝国cms教程网现在上面是两个竖排的了，下一步是要成为横排的

三、设置为横排

<div ><div rtcscls-2-s_r_0 rtcscls-2-r_13">float: left">
<div >最新新闻</div>
<div >php168新版即将发布</div>
</div> <div rtcscls-2-s_r_0 rtcscls-2-r_13">margin-left: 5px; border:1px solid #ccc;width:49.8%;float: right ">
<div >最新新闻（二）</div>
<div >php168新版即将发布</div>
</div> </div>

设置为两个横排的，在两个外面再加上一个div，并设置宽度。
里面两个div第一个添加样式float: left（对象浮在左边），第二个添加样式为float: right（对象浮在右边）。
两个div的宽度设置各为49.8%。
在第二个的样式加添加margin-left: 5px（检索或设置对象左边的外延边距），以与前一个（也就是左边的）有5px的间距。


相关教程：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。