×

div+css基础教程63086

下载文档

ID：6008023

大小：217.00 KB

页数：29页

时间：2017-12-30

收藏

资源描述：

《div+css基础教程63086》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、学习制作模板（一）－第一个div的建立一、首先我们先写一个div层

Html中任何都是相对出现的，所以就成为上面的形式，后面的那一个多一个/。现在我们知道上面这个层，是没有任何内容，在网页中打开也没有显示。下一步就是要我们对其进行修饰一下，让其在网页中显示出来。二、我们为div层加上一个边框，并设置一下他的宽度

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

2、层的宽度为30%这样这个div就有了一个形象的概念显示在我们的面前了。三、充实内容，我们为div内添加两个一上一下的层

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

3、iv>我们分别再介绍一下这两个样式的含义：第一个：border:1pxsolid#fff：这个就不用介绍了，上面已经做了介绍，只不过边框颜色是白色；第二个：padding：检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距，如padding:2px3px6px5px（如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边，如果只提供一个，将用于全部的四条边。），通过设置边距，在这个层中的内容，将按照你设置的不同的边距，离边框产生不同的距离。五、添加内容，设置内容的字体、颜色、样式等

4、order:1pxsolid#ccc;width:30%;">最新新闻php168新版即将发布说明：color:字体颜色;font-weight:粗体;Padding-left:

5、检索或设置对象左边的边距；height:层的高度;line-height:字体的间距，在这里设置字体的间距是为了让字体垂直居中，所以取值与层的高度是一致的，他只对只有一行的文字有效;background-color:背景颜色。通过上面的设置，一个简单的div层就建立起来了。最终效果：最新新闻php168新版即将发布学习制作模板（二）－两个div层并排显示一、一个div的代码

6、;color:#fff;font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻php168新版即将发布  二、再复制一个

7、ht:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻php168新版即将发布

8、ht:30px;line-height:30px;background-color:#ccc">最新新闻php168新版即将发布现在上面是两个竖排的了，下一步是要成为横排的三、设置为横排