齐博CMS：（菜鸟教程）学习制作
模板
个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载
（一）－第一个div的建立
本教程适合新新手使用，高手或已经知道的请飘过，如果你有心请帮助修正。
复制代码
1.
2.
最新新闻
3.
php168新版即将发布
4.
说明：
color:字体颜色;
font-weight:粗体;
Padding-left:检索或设置对象左边的边距；
height:层的高度;
line-height:字体的间距，在这里设置字体的间距是为了让字体垂直居中，所以取值与层的高度是一致的，他只对只有一行的文字有效;
background-color:背景颜色。
通过上面的设置，一个简单的div层就建立起来了。
最终效果：
最新新闻
php168新版即将发布
齐博CMS：（菜鸟教程）学习制作模板（二）－两个div层并排显示
一、一个div的代码
复制代码
1.
二、再复制一个
现在上面是两个竖排的了，下一步是要成为横排的
三、设置为横排
设置为两个横排的，在两个外面再加上一个div，并设置宽度。
里面两个div第一个添加样式float: left（对象浮在左边），第二个添加样式为float: right（对象浮在右边）。
两个div的宽度设置各为49.8%。
在第二个的样式加添加margin-left: 5px（检索或设置对象左边的外延边距），以与前一个（也就是左边的）有5px的间距。
相关教程：
最后效果：
最新新闻
php168新版即将发布
最新新闻（二）
php168新版即将发布
齐博CMS：（菜鸟教程）学习制作模板（三）－将头部背景颜色改为图片
一、div的代码
复制代码
1.
二、将上面代码中的头部的背景颜色修改为图片显示
也就是将红色部分修改为图片，因为我们是在论坛上，所以就使用论坛上的图片来添加。
论坛各版块的头部图片的地址是：
我们将上面的代码修改为：
也就是将上面的background-color: #ccc修改为background: url(http://bbs.php168.com/images/php168/head.gif) repeat-x。然后在后面添加一个
参数
转速和进给参数表a氧化沟运行参数高温蒸汽处理医疗废物pid参数自整定算法口腔医院集中消毒供应
，设置是否重复显示。
说明：
如果图片地址与模板文件在同一目录，你可以用相对路径，即：background: url(head.gif)
repeat-x：背景图像在横向上平铺
其它参数说明：
repeat : 背景图像在纵向和横向上平铺
no-repeat : 背景图像不平铺
repeat-x : 背景图像在横向上平铺
repeat-y : 背景图像在纵向平铺
在线语录吧http://zx568.cn
齐博CMS：（菜鸟教程）学习制作模板（四）－初识html
前三节，我们认识了div，现在我们将综合应用一下
先来认识html的结构
复制代码
1.
2.
3.
4.
5.
6.
7.
8.
HTML的结构标志向浏览器提供了文档特性的信息，比如文档的版本，介绍性信息、标
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
等。结构标志是HTML标志的一部分，但是大部分不在浏览器里显示出来。而是在幕后工作，指示浏览器要放上哪些元素和如何显示出这些元素来，以及告诉浏览器如何解释文档的重要信息。所有的HTML都应该包括有五个结构标志。如图所示：
在线语录吧http://zx568.cn
一、标志
标志向浏览器（和验证服务）说明文档遵循的HTML版本。HTML3.2和4.0规范都要求文档输入此标志。因此需要将其放到所有的网页文档中，输入在文档的开头。如：
或
二、标志
标志
表
关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf
示该文档为HTML文档。技术上，这个标志在标志之后显得多余，但对不支持<1DOCTYPE..>标志的旧式浏览器，这个标志是必要的。能够帮助人们阅读HTML代码。有开始标志与结束标志组成。开始标志位于
的后面。例如：
>
三、标志
标志中包含文档的标题，文档使用的脚本，样式定义和文档名信息。浏览器希望从中找到文档的补充信息。此外，标志还可以包含有搜索工具和索引程序所要的其它信息的标志。位于间。例如：
>
四、TITLE>标志
是HTML3.2和4.0规范要求的。它包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（<TITLT>）和结束标志()间，可以放入简述文档内容的标题。位于标志中，如下例：
>
学习TITLE标志
五、标志
标志中放置了要在访问者浏览器中显示信息的所有标志和属性。如下例：
>
学习TITLE标志
HTML脚本基础学习
以上为THML浏览器的概述和结构说明
齐博CMS：（菜鸟教程）学习制作模板（五）－外链样式表
通常在网页中样式表的调用
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
有四种。
第一是外链，即的形式；
第二是输入样式表；
第三是在网页头部申明，如
46.
47.
48. 头部
49. 左侧
50. 中侧
51. 右侧
52.
53.
54.
说明：clear:both; 是清除浮动。
二、为什么要清除浮动，转载一篇文章，你看看就明白了
引用
在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：。
例如：
此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。
若将代码修改为：
注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：
Some Content
定义CSS类，进行“浮动清理”的控制：
Code:
.clearfix:after {
content: “.”;
clear: both;
height: 0;
visibility: hidden;
display: block;
}
这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素
.clearfix {
display: inline-block;
}
/* 这是对 Mac 上的IE浏览器进行的处理 */
* html .clearfix {height: 1%;}
/* 这是对 win 上的IE浏览器进行的处理 */
.clearfix {display: block;}
/* 这是对display: inline-block;进行的修改，重置为区块元素*/
会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。
clear元素的margin-top被重置为零
齐博CMS：（菜鸟教程）学习制作模板（八）－实战：完善三列布局内容
上一节中我们讲到了一个简单的三列布局，本节讲如何来完善他。我们知道上一节中简单的三列布局可以作为一个网页基本的大框架，然后我们在这个大框架中填充我们需要的内容，这就是本节要讲的问题，如何完善网页，丰富网页内容。
在线语录吧http://zx568.cn
一、先来看一下“简单的三列布局”
复制代码
1.
2.
3.
4.
简单的三列布局
5.
46.
47.
48.
头部
49.
左侧
50.
中侧
51.
右侧
52.
53.
54.
有了上面的基本框架，以此为基础，做一下规划，首先，我们将上面的代码修改一下：
简单的三列布局
头部
左侧
中侧
右侧
在线语录吧http://zx568.cn
1、修改一下div的高度为100%，目的是让他根据内容自由伸展。
2、调整左、中、右的宽度，让其美观一下。
3、因为三列布局是一个基本的大框架，起到一个控制网页的作用，所以他的线框，可以将其去掉（即上面蓝色部分）。
4、下一步就是充实绿色部分了。
二、充实内容，丰富网页
复制代码
1.
2.
3.
4.
简单的三列布局
5.
41.
42.
43.
头部
44.
左侧
45.
中侧
46.
右侧
47.
48.
49.
上面是经过修改后的代码，下一步就是充实了，我们找到第一节中制作的div代码：
复制代码
1.
2.
最新新闻
3.
php168新版即将发布
4.
css样式表：
在线语录吧http://zx568.cn
复制代码
1. /******************************************
2. 下面是最外面的div
3. ******************************************/
4. .div {
5. border:1px solid #ccc;
6. width:30%
7. }
8. /******************************************
9. 下面是头部的样式，即“最新新闻”
10. ******************************************/
11. .div .head{
12. border:1px solid #fff;
13. color:#fff;
14. font-weight:bold;
15. padding-left:15px;
16. height:30px;
17. line-height:30px;
18. background-color: #ccc
19. }
20.
21. /******************************************
22. 下面是内容处的样式，即“php168新版即将发布”
23. ******************************************/
24. .div .content{
25. padding:6px;
26. }
为避免与上面的类重复冲突，需要作一下修改，将div这个类修改为其它的名称，如toopd ，再就是要将head修改一下，也是为了避免与头部的冲突，我们将头部的修改为header。
在线语录吧http://zx568.cn
下面是我们将第一节中的div代码重复使用的（即蓝色部分），你也可以再新作一个（就是用不同的类，重新写入样式），复制进去，以让其有不同的变化，丰富网页。
最后整理如下：
引用
简单的三列布局
说明：
上面的toopd的类，将宽度修改为100%（原来是30%）。因为此div是重复使用，为与上一个div有一定间距，所以添加了margin-top:5px;
，即与上面外距为5PX。
在线语录吧http://zx568.cn
浙公网安备 33021202002483