divcss基础教程divcss入门教程.pdf

该【divcss基础教程divcss入门教程 】是由【小辰GG】上传分享，文档一共【32】页，该文档可以免费在线阅读，需要了解更多关于【divcss基础教程divcss入门教程 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
齐博CMS:(菜鸟教程)学****制作模板(一)-第一个div的建立
本教程适合新新手使用,高手或已经知道的请飘过,如果你有心请帮助修正。
教程编写:toopd
一、首先我们先写一个div层
<div></div>
Html中任何都是相对出现的,所以就成为上面的形式,后面的那一个多一个/。
现在我们知道上面这个层,是没有任何内容,在网页中打开也没有显示。下一步就是要我们对其进行修饰
一下,让其在网页中显示出来。
二、我们为div层加上一个边框,并设置一下他的宽度
<divstyle="border:1pxsolid#ccc;width:30%;"></div>
说明:上面的样式的意思是边框=宽度为1px;实线边框;边框颜色为灰色(你也可以用具体的颜色)
层的宽度为30%
这样这个div就有了一个形象的概念显示在我们的面前了。
三、充实内容,我们为div内添加两个一上一下的层
<divstyle="border:1pxsolid#ccc;width:30%;">
<div></div>
<div></div>:.
</div>
四、我们分别为这两个层添加样式
<divstyle="border:1pxsolid#ccc;width:30%;">
<divstyle="border:1pxsolid#fff;"></div>
<divstyle="padding:6px;"></div>
</div>
我们分别再介绍一下这两个样式的含义:
第一个:border:1pxsolid#fff:这个就不用介绍了,上面已经做了介绍,只不过边框颜色是白色;
第二个:padding:检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距,如padding:2px3
px6px5px(如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边,如果只提供一个,将用
于全部的四条边。),通过设置边距,在这个层中的内容,将按照你设置的不同的边距,离边框产生不同
的距离。
五、添加内容,设置内容的字体、颜色、样式等
复制代码
1.<divstyle="border:1pxsolid#ccc;width:30%;">
2.<divstyle="border:1pxsolid#fff;color:#fff;font-weight:bold;padding-left:15px;height:30px;line-heig
ht:30px;background-color:#ccc">最新新闻</div>
3.<divstyle="padding:6px;">php168新版即将发布</div>
4.</div>
说明:
:.
color:字体颜色;
font-weight:粗体;
Padding-left:检索或设置对象左边的边距;
height:层的高度;
line-height:字体的间距,在这里设置字体的间距是为了让字体垂直居中,所以取值与层的高度是一致的,
他只对只有一行的文字有效;
background-color:背景颜色。
通过上面的设置,一个简单的div层就建立起来了。
最终效果:
php168新版即将发布
齐博CMS:(菜鸟教程)学****制作模板(二)-两个div层并排显示
一、一个div的代码
复制代码
1.
2.<divstyle="border:1pxsolid#ccc;width:30%;"><divstyle="border:1pxsolid#fff;color:#fff;font-
weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div><di
vstyle="padding:6px;">php168新版即将发布</div></div>
二、再复制一个
<divstyle="border:1pxsolid#ccc;width:30%;">
<divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div>
<divstyle="padding:6px;">php168新版即将发布</div>
</div>
<divstyle="border:1pxsolid#ccc;width:30%;">
<divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div>
<divstyle="padding:6px;">php168新版即将发布</div>
</div>
现在上面是两个竖排的了,下一步是要成为横排的:.
三、设置为横排
<divstyle="width:100%;"><divstyle="border:1pxsolid#ccc;width:%;float:left">
<divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div>
<divstyle="padding:6px;">php168新版即将发布</div>
</div><divstyle="margin-left:5px;border:1pxsolid#ccc;width:%;float:right">
<divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻(二)
</div>
<divstyle="padding:6px;">php168新版即将发布</div>
</div></div>
设置为两个横排的,在两个外面再加上一个div,并设置宽度。
里面两个div第一个添加样式float:left(对象浮在左边),第二个添加样式为float:right(对象浮在右边)。
%。
在第二个的样式加添加margin-left:5px(检索或设置对象左边的外延边距),以与前一个(也就是左边的)
有5px的间距。
相关教程:
最后效果:
php168新版即将发布
php168新版即将发布
齐博CMS:(菜鸟教程)学****制作模板(三)-将头部背景颜色改为图片
一、div的代码
复制代码
1.
2.<divstyle="border:1pxsolid#ccc;width:30%;"><divstyle="border:1pxsolid#fff;color:#fff;font-
weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div><di
vstyle="padding:6px;">php168新版即将发布</div></div>
:.
二、将上面代码中的头部的背景颜色修改为图片显示
<divstyle="border:1pxsolid#ccc;width:30%;"><divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color:#ccc">最新新闻</div>
<divstyle="padding:6px;">php168新版即将发布</div></div>
也就是将红色部分修改为图片,因为我们是在论坛上,所以就使用论坛上的图片来添加。
论坛各版块的头部图片的地址是:
我们将上面的代码修改为:
<divstyle="border:1pxsolid#ccc;width:30%;"><divstyle="border:1pxsolid#fff;color:#fff;
font-weight:bold;padding-left:15px;height:30px;line-height:30px;background:
url()repeat-x;">最新新闻</div><div
style="padding:6px;">php168新版即将发布</div></div>
也就是将上面的background-color:#ccc修改为background:
url()repeat-x。然后在后面添加一个参数,设置是否重复显
示。
说明:
如果图片地址与模板文件在同一目录,你可以用相对路径,即:background:url()
repeat-x:背景图像在横向上平铺
其它参数说明:
repeat:背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向平铺
在线语录吧
齐博CMS:(菜鸟教程)学****制作模板(四)-初识html:.
前三节,我们认识了div,现在我们将综合应用一下
先来认识html的结构
复制代码
1.
2.<!DOCTYPEhtmlPUBLIC"-//W3C////EN""
R/xhtml1/DTD/xhtml1-">
3.<htmlxmlns="">
4.<head>
5.</head>
6.<body>
7.</body>
8.</html>
9.
HTML的结构标志向浏览器提供了文档特性的信息,比如文档的版本,介绍性信息、标题等。结构标志是
HTML标志的一部分,但是大部分不在浏览器里显示出来。而是在幕后工作,指示浏览器要放上哪些元素
和如何显示出这些元素来,以及告诉浏览器如何解释文档的重要信息。所有的HTML都应该包括有五个结
构标志。如图所示:
:.
在线语录吧
一、<!DOCTYPE>标志
<!DOCTYPE....>标志向浏览器(和验证服务)说明文档遵循的HTML版本。
文档输入此标志。因此需要将其放到所有的网页文档中,输入在文档的开头。如:
<!DOCTYPEHTMLPUBLC"-//W3C////EN">
或
<!DOCTYPEHTMLPUBLC"-//W3C////EN">
二、<html>标志
<HTML>标志表示该文档为HTML文档。技术上,这个标志在<!DOCTYPE...>标志之后显得多余,但对不
支持<1DOCTYPE..>标志的旧式浏览器,这个标志是必要的。能够帮助人们阅读HTML代码。<HTML>有
开始标志与结束标志组成。开始标志位于<IDOCTYPE..>的后面。例如:
<!DOCTYPEHTMLPUBLIC"-//W3D//">
<HTML>
<HEAD>>
</HEAD>
<BODY>
</BODY>
</HTML>
三、<HEAD>标志
<HEAD>标志中包含文档的标题,文档使用的脚本,样式定义和文档名信息。浏览器希望从<HEAD>中找
到文档的补充信息。此外,<HEAD>标志还可以包含有搜索工具和索引程序所要的其它信息的标志。
<HEAD>位于<HTML>间。例如:
<!DOCTYPEHTMLPUBLIC"-//W3D//">
<HTML>
<HEAD>>
</HEAD>
</HTML>
四、TITLE>标志
<TITLE>。它包含文档的标题。它不显示在浏览器窗口中,只显示在浏览器:.
标题栏中。在起始标志(<TITLT>)和结束标志(</TITLE>)间,可以放入简述文档内容的标题。位于<HEAD>
标志中,如下例:
<!DOCTYPEHTMLPUBLIC"-//W3D//">
<HTML>
<HEAD>>
<title>学****TITLE标志</title>
</HEAD>
</HTML>
五、<BODY>标志
<BODY>标志中放置了要在访问者浏览器中显示信息的所有标志和属性。如下例:
<!DOCTYPEHTMLPUBLIC"-//W3D//">
<HTML>
<HEAD>>
<title>学****TITLE标志</title>
</HEAD>
<BODY>
<fontsize="14"color="green">HTML脚本基础学****lt;/font>
</BODY>
</HTML>
以上为THML浏览器的概述和结构说明
齐博CMS:(菜鸟教程)学****制作模板(五)-外链样式表
通常在网页中样式表的调用方法有四种。
第一是外链,即<linkrel="StyleSheet"href="">的形式;
第二是输入样式表;
第三是在网页头部申明,如<head><styletype="text/css">...;
最后是直接在对象后写样式,即<divstyle="width:80%...;">的形式。
我们在本节中只讲外链形式
一、先将第一节中的div中的样式移植出来,并将内缀样式修改为类形式
代码如下:
复制代码
1.
2.<divstyle="border:1pxsolid#ccc;width:30%;">
3.<divstyle="border:1pxsolid#fff;color:#fff;font-weight:bold;padding-left:15px;height:30px;line-heig:.
ht:30px;background-color:#ccc">最新新闻</div>
4.<divstyle="padding:6px;">php168新版即将发布</div>
5.</div>
将上面网页代码中的样式(style)修改成类(class)如下:
引用
<divclass="div">
<divclass="head">最新新闻</div>
<divclass="content">php168新版即将发布</div>
</div>
然后将样式表记录整理如下:
引用
/******************************************
下面是最外面的div
******************************************/
.div{
border:1pxsolid#ccc;
width:30%
}
/******************************************
下面是头部的样式,即“最新新闻”
******************************************/:.
.{
border:1pxsolid#fff;
color:#fff;
font-weight:bold;
padding-left:15px;
height:30px;
line-height:30px;
background-color:#ccc
}
/******************************************
下面是内容处的样式,即“php168新版即将发布”
******************************************/
.{
padding:6px;
}
说明:
/******************************************
下面是内容处的样式,即“php168新版即将发布”
******************************************/
上面的文字在样式表中出现,只起到注释的作用,而不会对网页布局有任何影响。
:.
二、将上面修改后的网页代码添加到网页中,并保存样式表,(假设样式表文件放在im
ages文件夹中)
引用
<!DOCTYPEhtmlPUBLIC"-//W3C////EN""
1/DTD/xhtml1-">
<htmlxmlns="">
<head>
<linkrel="stylesheet"type="text/css"href="images/">
</head>
<body>
<divclass="div">
<divclass="head">最新新闻</div>
<divclass="content">php168新版即将发布</div>
</div>
</body>
</html>
上面“<linkrel="stylesheet"type="text/css"href="images/">”,即外链样式表文件的地址,需要添
加到head之间。这样我们就完成了外链样式表的任务。
三、外链样式表的好处
第一,简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减
少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞
大的站点时,显得格外有用。避免了一个一个网页的修改,大大减少了重复劳动的工作量。
四、说明
什么是class:class是设置标签的类。
齐博CMS:(菜鸟教程)学****制作模板(六)-样式表应具备的基本要素:.
前一节,我们学****了外链样式表的方法,但我们的样式表中还需要添加一些基本的要素,比如通用的样式
和链接样式;控制整个网页的宽度等等。
一、通用样式
复制代码
1.
2.
3./******************************************
:网页宽度
:网页外延边距
:0;设置内边距空隙都为0
-size:12px;没有链接的字体大小
:#333333;没有链接的字体的颜色
9.*******************************************/
{
:990px;
:auto;
:0;
-size:12px;
:#333333;
16.}
17.
二、通用链接样式
复制代码:.
1.
2./******************************************
-size:12px;超级链接字体大小
:字体颜色
-decoration:none;
,
:link没有点击过的超级链接样式
:visited被点击过的超级链接样式
:hover鼠标指向时的超级链接样式
:active被用户激活(在鼠标点击与释放之间发生的事件)
11.*******************************************/
{
-size:12px;
14.}
:link{
:#333333;
-decoration:none;
18.}
:visited{
-decoration:none;
:#333333;
22.}
:hover{
-decoration:underline;
:#4E667B;
26.}
:active{
-decoration:none;:.
29.}
30.#header{
:990px;
32.}
三、最后,我们与上节的样式合并在一起。
复制代码
1.
2./******************************************
:网页宽度
:网页外延边距
:0;设置内边距空隙都为0
-size:12px;没有链接的字体大小
:#333333;没有链接的字体的颜色
8.*******************************************/
{
:990px;
:auto;
:0;
-size:12px;
:#333333;
15.}
16./******************************************
-size:12px;超级链接字体大小
:字体颜色
-decoration:none;:.
,
:link没有点击过的超级链接样式
:visited被点击过的超级链接样式
:hover鼠标指向时的超级链接样式
:active被用户激活(在鼠标点击与释放之间发生的事件)
25.*******************************************/
{
-size:12px;
28.}
:link{
:#333333;
-decoration:none;
32.}
:visited{
-decoration:none;
:#333333;
36.}
:hover{
-decoration:underline;
:#4E667B;
40.}
:active{
-decoration:none;
43.}
44.#header{
:990px;
46.}
47./******************************************:.

49.******************************************/
50..div{
:1pxsolid#ccc;
:30%
53.}
54./******************************************
,即“最新新闻”
56.******************************************/
57..{
:1pxsolid#fff;
:#fff;
-weight:bold;
-left:15px;
:30px;
-height:30px;
-color:#ccc
65.}
66.
67./******************************************
,即“php168新版即将发布”
69.******************************************/
70..{
:6px;
72.}
这样就组成了一个相对完整的样式表了,当然还有其它一些通用的样式,需要你慢慢的添加完整。
齐博CMS:(菜鸟教程)学****制作模板(七)-实战:简单的三列布局:.
简单的三列布局,通过以上各节的学****应该能看明白,和两个DIV并列显示的道理是一样的。
一、为了能够说明问题,对照参看,下面样式采用的是网页头部申明形式
第一是外链,即<linkrel="StyleSheet"href="">的形式;
第二是输入样式表;
第三是在网页头部申明,如<head><styletype="text/css">...;
最后是直接在对象后写样式,即<div