div_css_基础教程_div_css入门教程

1、齐博CMS：（菜鸟教程）学习制作模板（一）第一个div的建立本教程适合新新手使用，高手或已经知道的请飘过，如果你有心请帮助修正。 教程编写：toopd 一、首先我们先写一个div层 <div></div> Html中任何都是相对出现的，所以就成为上面的形式，后面的那一个多一个/。 现在我们知道上面这个层，是没有任何内容，在网页中打开也没有显示。下一步就是要我们对其进行修饰一下，让其在网页中显示出来。 二、我们为div层加上一个边框，并设置一下他的宽度 <div style=" border:1px solid #ccc; width:30%;"

2、></div> 说明：上面的样式的意思是边框宽度为1px；实线边框；边框颜色为灰色（你也可以用具体的颜色） 层的宽度为30% 这样这个div就有了一个形象的概念显示在我们的面前了。 三、充实内容，我们为div内添加两个一上一下的层 <div style="border:1px solid #ccc; width:30%;"> <div></div> <div></div> </div> 四、我们分别为这两个层添加样式 <div style="border:1px sol

3、id #ccc; width:30%;"> <div style=" border:1px solid #fff;"></div> <div style="padding:6px;"></div> </div> 我们分别再介绍一下这两个样式的含义： 第一个：border:1px solid #fff：这个就不用介绍了，上面已经做了介绍，只不过边框颜色是白色； 第二个：padding：检索或设置对象四边的补丁边距。你可以分别设置四边不同的边距，如padding:2px 3px 6p

4、x 5px（如果提供全部四个参数值，将按上右下左的顺序作用于四边，如果只提供一个，将用于全部的四条边。），通过设置边距，在这个层中的内容，将按照你设置的不同的边距，离边框产生不同的距离。 五、添加内容，设置内容的字体、颜色、样式等 复制代码 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-heig

5、ht:30px;background-color: #ccc">最新新闻</div> 3. <div style="padding:6px;">php168新版即将发布</div> 4. </div> 说明： color:字体颜色; font-weight:粗体; Padding-left:检索或设置对象左边的边距； height:层的高度; line-height:字体的间距，在这里设置字体的间距是为了让字体垂直居中，所以取值与层的高度是一致的，他只对只有一行的文字有效; background-color:背

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

7、: #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;height:30px;line

8、-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;height

9、:30px;line-height:30px;background-color: #ccc">最新新闻</div> <div style="padding:6px;">php168新版即将发布</div> </div> 现在上面是两个竖排的了，下一步是要成为横排的 三、设置为横排 <div style="width:100%;"><div style="border:1px solid #ccc;width:49.8%;float: left">

10、<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="margin-left: 5px; border:1px soli

11、d #ccc;width:49.8%;float: right "> <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> </di

12、v> 设置为两个横排的，在两个外面再加上一个div，并设置宽度。 里面两个div第一个添加样式float: left（对象浮在左边），第二个添加样式为float: right（对象浮在右边）。 两个div的宽度设置各为49.8%。 在第二个的样式加添加margin-left: 5px（检索或设置对象左边的外延边距），以与前一个（也就是左边的）有5px的间距。 相关教程：最后效果： 最新新闻php168新版即将发布最新新闻（二）php168新版即将发布齐博CMS：（菜鸟教程）学习制作模板（三）将头部背景颜色改为图片一、div的代码 复制代码 1.2. <div style="

13、;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> 

14、0;   二、将上面代码中的头部的背景颜色修改为图片显示 <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

15、;">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;height:30px;line-he

16、ight:30px;background: url( :/bbs.php168 /images/php168/head.gif) repeat-x;">最新新闻</div> <div style="padding:6px;">php168新版即将发布</div> </div>   也就是将上面的background-color: #ccc修改为background: hp168 /images/php168/head.gif) repeat-x。然后在后面添加一个参数，设置是否重复显示。 说

17、明： 如果图片地址与模板文件在同一目录，你可以用相对路径，即：background: url(head.gif) repeat-x：背景图像在横向上平铺 其它参数说明： repeat : 背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像在横向上平铺 repeat-y : 背景图像在纵向平铺 在线语录吧齐博CMS：（菜鸟教程）学习制作模板（四）初识html前三节，我们认识了div，现在我们将综合应用一下 先来认识html的结构 复制代码 1.2.  <!DOCTYPE html PUBLIC "-/W3C/DTD XHT

18、ML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <html xmlns=" :/ /1999/xhtml"> 4. <head> 5. </head> 6. <body> 7. </body> 8. </html> 9.HTML的结构标志向浏览器提供了文档特性的信息，比如文档的版本，介绍性信息、标题等。结构标志是HTML标志的一部分，但是大部分不在

19、浏览器里显示出来。而是在幕后工作，指示浏览器要放上哪些元素和如何显示出这些元素来，以及告诉浏览器如何解释文档的重要信息。所有的HTML都应该包括有五个结构标志。如图所示： 在线语录吧一、<!DOCTYPE>标志 <!DOCTYPE.>标志向浏览器（和验证服务）说明文档遵循的HTML版本。HTML3.2和4.0规范都要求文档输入此标志。因此需要将其放到所有的网页文档中，输入在文档的开头。如： <!DOCTYPE HTML PUBLC "-/W3C/DTD HTML 3.2 FINAL/EN"> 或 <!DOCTYPE HTML PUB

20、LC "-/W3C/DTD HTML 4.0 FINAL/EN"> 二、<html>标志 <HTML>标志表示该文档为HTML文档。技术上，这个标志在<!DOCTYPE.>标志之后显得多余，但对不支持<1DOCTYPE.>标志的旧式浏览器，这个标志是必要的。能够帮助人们阅读HTML代码。<HTML>有开始标志与结束标志组成。开始标志位于<IDOCTYPE.>的后面。例如： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN"

21、;> <HTML> <HEAD>> </HEAD> <BODY> </BODY> </HTML> 三、<HEAD>标志 <HEAD>标志中包含文档的标题，文档使用的脚本，样式定义和文档名信息。浏览器希望从<HEAD>中找到文档的补充信息。此外，<HEAD>标志还可以包含有搜索工具和索引程序所要的其它信息的标志。<HEAD>位于<HTML>间。例如： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML

22、4.0 FINAL/EN"> <HTML> <HEAD>> </HEAD> </HTML> 四、TITLE>标志 <TITLE>是HTML3.2和4.0规范要求的。它包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（<TITLT>）和结束标志(</TITLE>)间，可以放入简述文档内容的标题。位于<HEAD>标志中，如下例： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN&qu

23、ot;> <HTML> <HEAD>> <title>学习TITLE标志</title> </HEAD> </HTML> 五、<BODY>标志 <BODY>标志中放置了要在访问者浏览器中显示信息的所有标志和属性。如下例： <!DOCTYPE HTML PUBLIC "-/W3D/DTD HTML 4.0 FINAL/EN"> <HTML> <HEAD>> <title>学习TITLE标志</title>

24、 </HEAD> <BODY> <font size="14" color="green">HTML脚本基础学习</font> </BODY> </HTML> 以上为THML浏览器的概述和结构说明齐博CMS：（菜鸟教程）学习制作模板（五）外链样式表通常在网页中样式表的调用方法有四种。 第一是外链，即<link rel="StyleSheet" href = "style.css">的形式； 第二是输入样式表； 第三是在网页头部申明，

25、如<head> <style type="text/css">.； 最后是直接在对象后写样式，即<div style = "width:80%.;">的形式。 我们在本节中只讲外链形式 一、先将第一节中的div中的样式移植出来，并将内缀样式修改为类形式 代码如下： 复制代码 1.2. <div style="border:1px solid #ccc;width:30%;"> 3. <div style="border:1px solid #fff;color:#fff;

26、 font-weight:bold;padding-left:15px;height:30px;line-height:30px;background-color: #ccc">最新新闻</div> 4. <div style="padding:6px;">php168新版即将发布</div> 5. </div>   将上面网页代码中的样式（style）修改成类（class）如下： 引用 <div class="div"> <div class="hea

27、d">最新新闻</div> <div class="content">php168新版即将发布</div> </div> 然后将样式表记录整理如下： 引用 /* 下面是最外面的div */  .div     border:1px solid #ccc;     width:30% /* 下面是头部的样式，即“最新新闻” */  .div .head     border:1px solid

28、#fff;     color:#fff;     font-weight:bold;     padding-left:15px;     height:30px;     line-height:30px;     background-color: #ccc   /* 下面是内容处的样式，即“php168新版即将发布” */  .div .content    

29、 padding:6px; 说明： /* 下面是内容处的样式，即“php168新版即将发布” */  上面的文字在样式表中出现，只起到注释的作用，而不会对网页布局有任何影响。 二、将上面修改后的网页代码添加到网页中，并保存样式表，命名为style.css（假设样式表文件放在images文件夹中） 引用   <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

30、t;> <html xmlns=" :/ /1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="images/style.css"> </head> <body> <div class="div"> <div class="head">最新新闻</div> <div class=&

31、quot;content">php168新版即将发布</div> </div> </body> </html> 上面“<link rel="stylesheet" type="text/css" href="images/style.css">”，即外链样式表文件的地址，需要添加到head之间。这样我们就完成了外链样式表的任务。 三、外链样式表的好处 第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码

32、数量(因为重复设置的格式将被只保存一次)。  第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。 四、说明 什么是class：class是设置标签的类。 齐博CMS：（菜鸟教程）学习制作模板（六）样式表应具备的基本要素前一节，我们学习了外链样式表的方法，但我们的样式表中还需要添加一些基本的要素，比如通用的样式和链接样式；控制整个网页的宽度等等。 一、通用样式 复制代码 1.2.3. /* 4. width:网页宽度 5. margin:网页外延边距 6. padd

33、ing: 0;设置内边距空隙都为0 7. font-size: 12px;没有链接的字体大小 8. color: #333333;没有链接的字体的颜色 9. */ 10. body 11.     width:990px; 12.     margin:auto; 13.     padding: 0; 14.     font-size: 12px; 15.     color: #333333; 16. 17.二、通用链接样式 复制代码 1.

34、2.  /* 3. font-size: 12px;超级链接字体大小 4. color:字体颜色 5. text-decoration: none;没有下画线.要有下画线.改none为underline 6. a 为统一超级链接, 7. a:link没有点击过的超级链接样式 8. a:visited 被点击过的超级链接样式 9. a:hover 鼠标指向时的超级链接样式 10. a:active 被用户激活(在鼠标点击与释放之间发生的事件)时的样式.少用 11. */ 12. a 13.  font-size: 12px; 14. 15. a:link 16.  

35、color: #333333; 17.  text-decoration: none; 18. 19. a:visited 20.  text-decoration: none; 21.  color: #333333; 22. 23. a:hover 24.  text-decoration: underline; 25.  color: #4E667B; 26. 27. a:active 28.  text-decoration: none; 29. 30. #header 31.  width:990px; 32. 三

36、、最后，我们与上节的样式合并在一起。 复制代码 1.2.  /* 3. width:网页宽度 4. margin:网页外延边距 5. padding: 0;设置内边距空隙都为0 6. font-size: 12px;没有链接的字体大小 7. color: #333333;没有链接的字体的颜色 8. */ 9. body 10.     width:990px; 11.     margin:auto; 12.     padding: 0; 13.     font

37、-size: 12px; 14.     color: #333333; 15. 16.  /* 17. font-size: 12px;超级链接字体大小 18. color:字体颜色 19. text-decoration: none;没有下画线.要有下画线.改none为underline 20. a 为统一超级链接, 21. a:link没有点击过的超级链接样式 22. a:visited 被点击过的超级链接样式 23. a:hover 鼠标指向时的超级链接样式 24. a:active 被用户激活(在鼠标点击与释放之间发生的事件)时的样式.少用 2

38、5. */ 26. a 27.  font-size: 12px; 28. 29. a:link 30.  color: #333333; 31.  text-decoration: none; 32. 33. a:visited 34.  text-decoration: none; 35.  color: #333333; 36. 37. a:hover 38.  text-decoration: underline; 39.  color: #4E667B; 40. 41. a:active 42.  tex

39、t-decoration: none; 43. 44. #header 45.  width:990px; 46. 47. /* 48. 下面是最外面的div 49. */ 50. .div 51.     border:1px solid #ccc; 52.     width:30% 53. 54. /* 55. 下面是头部的样式，即“最新新闻” 56. */ 57. .div .head 58.     border:1px solid #fff; 59.   

40、0; color:#fff; 60.     font-weight:bold; 61.     padding-left:15px; 62.     height:30px; 63.     line-height:30px; 64.     background-color: #ccc 65. 66.   67. /* 68. 下面是内容处的样式，即“php168新版即将发布” 69. */ 70. .div .content 71

41、.     padding:6px; 72. 这样就组成了一个相对完整的样式表了，当然还有其它一些通用的样式，需要你慢慢的添加完整。 齐博CMS：（菜鸟教程）学习制作模板（七）实战：简单的三列布局简单的三列布局，通过以上各节的学习，应该能看明白，和两个DIV并列显示的道理是一样的。 一、为了能够说明问题，对照参看，下面样式采用的是网页头部申明形式 第一是外链，即<link rel="StyleSheet" href = "style.css">的形式； 第二是输入样式表； 第三是在网页头部申明，如<head

42、> <style type="text/css">.； 最后是直接在对象后写样式，即<div style = "width:80%.;">的形式。 即用的第三种形式 复制代码 1. <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 2. <HTML> 3. <HEAD> 4. <TITLE>简单的三列布局</T

43、ITLE> 5. <style type="text/css"> 6. body 7. width:800px; 8. margin:auto; 9. 10. div 11.  height:150px; 12. 13. .left 14. width:150px; 15. float:left; 16. clear:right; 17. border:1px solid #ff9900; 18. margin-top:5px; 19. 20. .center 21. width:485px; 22. float:left; 23. clear:

44、right; 24. border:1px solid #ff9900; 25. margin:5px 5px 0 5px; 26. 27. .right 28. width:150px; 29. float:left; 30. clear:right; 31. border:1px solid #ff9900; 32. margin-top:5px; 33. 34. .head 35. width:100%; 36. clear:both; 37. border:1px solid #ff9900;  38.    39. .foot 40. width:100

45、%; 41. clear:both; 42. border:1px solid #ff9900; 43. margin-top:5px; 44. 45. </style> 46. </HEAD> 47. <BODY> 48. <div class="head">头部</div> 49. <div class="left">左侧</div> 50. <div class="center">中侧</div> 51. <div

46、class="right">右侧</div> 52. <div class="foot">尾部</div> 53. </BODY> 54. </HTML> 说明：clear:both; 是清除浮动。 二、为什么要清除浮动，转载一篇文章，你看看就明白了 引用 在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：<div style=”clear:both;”></div>。 例如： <div style=”background:#666;”> &#

47、160;     <div style=”float:left; width:30%; height:40px;background:#EEE; “>Some Content</div> </div> 此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。 若将代码修改为： <div style=”background:#666;”> <div style=”float:left; width:30

48、%; height:40px;background:#EEE; “>Some Content</div> <div style=”clear:both”></div> </div> 注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为： <div  class=”clearfix” style=”background:#666;”> <div style=”float:left; width:30%; height:40px;backg

49、round:#EEE; “>Some Content</div> </div> 定义CSS类，进行“浮动清理”的控制： Code: .clearfix:after   content: “.”;   clear: both;   height: 0;   visibility: hidden;   display: block; 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 .clearfix   display: inline-block; &

50、#160;                 /* 这是对 Mac 上的IE浏览器进行的处理 */ * html .clearfix height: 1%;       /* 这是对 win 上的IE浏览器进行的处理 */ .clearfix display: block;       /* 这是对display: inline-

51、block;进行的修改，重置为区块元素*/ 会发现即使子元素进行了浮动，父元素float container仍然会将其包围，进行高度自适应。 clear元素的margin-top被重置为零 齐博CMS：（菜鸟教程）学习制作模板（八）实战：完善三列布局内容上一节中我们讲到了一个简单的三列布局，本节讲如何来完善他。我们知道上一节中简单的三列布局可以作为一个网页基本的大框架，然后我们在这个大框架中填充我们需要的内容，这就是本节要讲的问题，如何完善网页，丰富网页内容。 在线语录吧一、先来看一下“简单的三列布局” 复制代码 1.2. <!DOCTYPE HTML PUBLIC "-/W3

52、C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 3. <HTML> 4. <HEAD> 5. <TITLE>简单的三列布局</TITLE> 6. <style type="text/css"> 7. body 8. width:800px; 9. margin:auto; 10. 11. div 12.  height:150px; 13. 14. .left 15. width:150px; 16

53、. float:left; 17. clear:right; 18. border:1px solid #ff9900; 19. margin-top:5px; 20. 21. .center 22. width:485px; 23. float:left; 24. clear:right; 25. border:1px solid #ff9900; 26. margin:5px 5px 0 5px; 27. 28. .right 29. width:150px; 30. float:left; 31. clear:right; 32. border:1px solid #ff9900; 33

54、. margin-top:5px; 34. 35. .head 36. width:100%; 37. clear:both; 38. border:1px solid #ff9900;  39.    40. .foot 41. width:100%; 42. clear:both; 43. border:1px solid #ff9900; 44. margin-top:5px; 45. 46. </style> 47. </HEAD> 48. <BODY> 49. <div class="head"

55、;>头部</div> 50. <div class="left">左侧</div> 51. <div class="center">中侧</div> 52. <div class="right">右侧</div> 53. <div class="foot">尾部</div> 54. </BODY> 55. </HTML>   有了上面的基本框架，以此为基础，做

56、一下规划，首先，我们将上面的代码修改一下： <!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>简单的三列布局</TITLE> <style type="text/css"> body width:800px; margin:auto; div  height:100%; .left widt

57、h:180px; float:left; clear:right; border:1px solid #ff9900; margin-top:5px; .center width:400px; float:left; clear:right; border:1px solid #ff9900; margin:5px 5px 0 5px; .right width:206px; float:left; clear:right; border:1px solid #ff9900; margin-top:5px; .head width:100%; clear:both; border:1px so

58、lid #ff9900;     .foot width:100%; clear:both; border:1px solid #ff9900; margin-top:5px; </style> </HEAD> <BODY> <div class="head">头部</div> <div class="left">左侧</div> <div class="center">中侧</div> <d

59、iv class="right">右侧</div> <div class="foot">尾部</div> </BODY> </HTML> 在线语录吧1、修改一下div的高度为100%，目的是让他根据内容自由伸展。 2、调整左、中、右的宽度，让其美观一下。 3、因为三列布局是一个基本的大框架，起到一个控制网页的作用，所以他的线框，可以将其去掉（即上面蓝色部分）。 4、下一步就是充实绿色部分了。 二、充实内容，丰富网页 复制代码 1. <!DOCTYPE HTML PUBLIC &quo

60、t;-/W3C/DTD HTML 4.01/EN"  " :/ /TR/html4/strict.dtd"> 2. <HTML> 3. <HEAD> 4. <TITLE>简单的三列布局</TITLE> 5. <style type="text/css"> 6. body 7. width:800px; 8. margin:auto; 9. 10. div 11.  height:100%; 12. 13. .left 14. width:180px

61、; 15. float:left; 16. clear:right; 17. margin-top:5px; 18. 19. .center 20. width:400px; 21. float:left; 22. clear:right;  23. margin:5px 5px 0 5px; 24. 25. .right 26. width:206px; 27. float:left; 28. clear:right;  29. margin-top:5px; 30. 31. .head 32. width:100%; 33. clear:both;  34.

62、   35. .foot 36. width:100%; 37. clear:both; 38. margin-top:5px; 39. 40. </style> 41. </HEAD> 42. <BODY> 43. <div class="head">头部</div> 44. <div class="left">左侧</div> 45. <div class="center">中侧</div> 46. &l

63、t;div class="right">右侧</div> 47. <div class="foot">尾部</div> 48. </BODY> 49. </HTML> 上面是经过修改后的代码，下一步就是充实了，我们找到第一节中制作的div代码： 复制代码 1.2. <div class="div"> 3. <div class="head">最新新闻</div> 4. <div class="content"