第十三课 div css当中 DIV的基本格式和原理讲解
本帖最后由 asp老师 于 2014-12-1 22:51 编辑那么前几课程，我们是学习了css，那么从现在开始呢，我们就开始学习div的相关知识点了。那么请问div是个什么东西呢？
那么我来告诉大家，其实div大家可以理解为一个盒子，就是不同盒子的排列，而这个代码标签都是可以放到盒子div里面的，
好此时呢，我们新建一个13.html 和13.css文件，同时呢把13.css引入13.html当中，我们来给这个13.html写如下代码：
<font size="4"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="13.css" rel="stylesheet" type="text/css">
</head>
<body>
<b>学习来道勤，<span>我们来一起努力！</span></b>
</body>
</html></font>13.css里面我们目前还没有写任何代码；
好效果如下;<b></b>是个加粗的标签
好此时我们写这个div标签；代码如下
<font size="4"><div>大家可以加入我们的QQ交流群 226547332</div>
</font>效果如下;
大家此时可以看到在这个文字上面有个虚虚的，这个就是框架的，div就是个框架的好我们此时在加一个div
<font size="4"><b>学习来道勤，<span>我们来一起努力！</span></b>
<div>大家可以加入我们的QQ交流群 226547332</div>
<div>一起交流，论坛资源教程绝对不收费</div></font>
那么大家此时可以看到，效果如下；会有4条虚线...那么这就是2个div的效果；
大家可以看到这里<div></div> 有个特性就是占据一行。好我们继续加一个div
代码如下;
<font size="4"><b>学习来道勤，<span>我们来一起努力！</span></b>
<div>大家可以加入我们的QQ交流群 226547332</div>
<div>一起交流，论坛资源教程绝对不收费</div>
<div>免费</div></font>
好此时我们把13.html的代码改为：
<font size="4">
<body>
<div></div>
<div></div>
</body></font>
效果为;
此时我们会看到效果只有一个虚线，
看页面效果的话，我们会发现什么都没有，这是为啥呢？其实是有的就是<div></div><div></div>（我们可以通过查看源代码看到)
好看源代码；
<font size="4"><div class="aaa"></div>
<div class="bbb"></div>
</font>13.css代码
<font size="4">.aaa{background:#099;}
.bbb{ background:#F00;}</font>此时呢，我们还是可以看到，此时页面还是没有发生任何的变化，但是如果我们在这2个div当中加入我们自己的内容的话，那么效果就有了
好此时我们来给这个div设定个高度和宽度看下效果
<font size="4">.aaa{background:#099; width:900px; height:300px;}
.bbb{ background:#F00;}</font>
我们来分析下这个代码，就是让类.aaa的div标签高度和宽度分别变化为： width:900px; height:300px;
效果如下：
此时呢，下面的代码div仍然是暂居一行；
好我们此时重新定义我们的13.css样式，代码如下
<font size="4">.aaa{background:#099; width:200px; height:300px;}
.bbb{ background:#F00; width:50px; height:50px;}</font>
如果我们修改我们13.html代码为这样的话，看会出现什么情况
<font size="4"><body>
<div class="aaa"></font>如果变为这样呢：
<font size="4">
<body>
<div class="aaa">
<div class="bbb">222</div>
</div>
</body></font>那次此时呢就是我们在类为.aaa的div盒子里面装了一个类为.bbb的盒子，而且这个.bbb盒子里面有222的内容
好效果如下;'
如果我们就这样一直加div 一直加div那么大加可以自己看下效果。
页:
[1]