div_css_基础教程_div_css入门教程.pdfVIP

齐博CMS：（菜鸟教程）学习制作模板（一）－第一个div的建立 本教程适合新新手使用，高手或已经知道的请飘过，如果你有心请帮助修正。 教程编写：toopd 一、首先我们先写一个div层 div/div Html中任何都是相对出现的，所以就成为上面的形式，后面的那一个多一个/ 。 现在我们知道上面这个层，是没有任何内容，在网页中打开也没有显示。下一步就是要我们对其进行修饰 一下，让其在网页中显示出来。 二、我们为div层加上一个边框，并设置一下他的宽度 div style= border:1px solid #ccc; width:30%;/div 说明：上面的样式的意思是边框＝宽度为1px；实线边框；边框颜色为灰色（你也可以用具体的颜色） 层的宽度为30% 这样这个div就有了一个形象的概念显示在我们的面前了。 三、充实内容，我们为div内添加两个一上一下的层 div style=border:1px solid #ccc; width:30%; div/div div/div /div 四、我们分别为这两个层添加样式 div style=border:1px solid #ccc; width:30%; div style= border:1px solid #fff;/div div style=padding:6px;/div /div 我们分别再介绍一下这两个样式的含义： 第一个：border:1px solid #fff：这个就不用介绍了，上面已经做了介绍，只不过边框颜色是白色； 第二个：padding：检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距，如padding:2px 3px 6px 5px （如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边，如果只提供一个，将 用于全部的四条边。），通过设置边距，在这个层中的内容，将按照你设置的不同的边距，离边框产生不 同的距离。 五、添加内容，设置内容的字体、颜色、样式等 复制代码 4. 1. div style=border:1px solid #ccc;width:30%; 2. div style=border:1px solid #fff;color:#fff; font-weight:bold;padding- left:15px;height:30px;line-height:30px;background-color: #ccc最新新 闻/div 3. div style=padding:6px;php168新版即将发布/div 4. /div 说明： color:字体颜色; font-weight:粗体; Padding-left:检索或设置对象左边的边距； height:层的高度; line-height:字体的间距，在这里设置字体的间距是为了让字体垂直居中，所以取值与层的高度是一致的， 他只对只有一行的文字有效; background-color:背景颜色。 通过上面的设置，一个简单的div层就建立起来了。 最终效果： 最新新闻 php168新版即将发布 齐博CMS：（菜鸟教程）学习制作模板（二）－两个div层并排显示 一、一个div的代码 复制代码 2. 1. 2. div style=border:1px solid #ccc;width:30%; div style=border:1px solid #fff;color:#fff; font-weight:bold;padding- left:15px;height:30px;line-height:30px;background-color: #ccc最新新 闻/div div style=padding:6px;php168新版即将发布/div /div 二、再复制一个 div style=border:1px solid #ccc;width:30%; div style=border:1px solid #fff;color:#fff; font-weight:bold;padding-left:15px;hei