对div或者是id与class比较迷茫的进。 - html吧

level 9

云尧妖楼主

首先申明楼楼不是高手，只是同在学习的菜鸟。
刚div+css高于段落。
刚刚看到有2个童鞋的帖子，手机回复了一下，
感觉可能没有表达清楚，
就打开电脑再发一个帖子简单说明一下：

2013年11月26日 06点11分 1

level 9

云尧妖楼主

div就是一个块或者说是一片，正规定义就是一个容器，
我们看到的网页，一般可以分几块，比如头顶一块，中间一块，最底部一块。
在这里我们可以理解为：这三大一块一块的就是三个div。
在我们写网页的时候通常在body里面先写一个div最为顶级容器，
(相当于就是网页整个一大块，)
<div>
<div></div>
<div></div>
<div></div>
</div>
看懂了的童鞋可以自己试试，没懂的继续。

2013年11月26日 06点11分 2

level 9

云尧妖楼主

然后我们继续说到id，class，
id是唯一的，我们一般用来修饰大块，比如楼上的三大块
<div id="container">
<div id="header"> </div>
<div id="main"> </div>
<div id="footer"> </div>
</div>
这样写了以后，
1，我们在css里面分别给顶级容器container一个宽度，高度通常不给。
2，分别给顶部，中部，底部，一个宽度，高度，
3，这个时候保存发现什么也没变（什么也没有），我们在分他们3个不同的颜色，
你会发现。。。。（下面给效果图。）

2013年11月26日 06点11分 3

level 9

云尧妖楼主

2013年11月26日 06点11分 4

level 9

云尧妖楼主

@绝望碑

2013年11月26日 06点11分 5

level 9

云尧妖楼主

这个时候对块的理解，是否初步理解了
这个时候我们就可以在不同的块里，编辑自己需要的东西了，
比如h1写标题了，表单表格，插入图片什么的，
块不一定是div，不过初期你可以就认为一块就是一个div，
用多了，你就知道什么时候该用什么时候可以不用
用css修饰的时候，就方便多了，
比如我要修饰头部的标题
#main h1{ }
比如头部里面的图片我需要修饰
#main img{ }
比如头部里面的a标签我需要给个醒目的颜色
#main a{color:red; }
不能用这种修饰的时候，再添加类，或者一些特殊点类，比如宽度10，宽度20，左浮动，右浮动就可以单独定义一个类

2013年11月26日 06点11分 6

level 9

云尧妖楼主

2013年11月26日 06点11分 7

level 9

云尧妖楼主

2013年11月26日 06点11分 8

level 9

云尧妖楼主

这东西应该很好理解，反正左右是这么个回事，多敲敲代码，就知道了。
说的不好，凑合看吧，大神不要笑。

2013年11月26日 06点11分 9

level 9

云尧妖楼主

@HAONANREN2002

2013年11月26日 06点11分 10

贴吧用户_0aUU1MM

知道了

2013年11月26日 08点11分

level 11

逍遥老四

谢谢分享

2013年11月26日 07点11分 11

level 7

贴吧用户_0G7WS7t

好。

2013年11月27日 15点11分 12

level 11

老妈我去修仙了

不懂帮顶

2013年11月27日 18点11分 13

level 11

老妈我去修仙了

不知道回复什么了

2013年11月27日 22点11分 14

云尧妖

随便拉拉家常

2013年11月28日 05点11分

level 1

绝望碑

我来顶一下…明白点了，不是一点不懂了…

2013年11月28日 01点11分 15

云尧妖

搞懂什么是块，在网页是怎么体现的就好了，加油

2013年11月28日 05点11分

level 1

陆同归😾

请问两个块的登陆页面该怎么做？

2013年11月28日 06点11分 16

陆同归😾

在左边和右边

2013年11月28日 06点11分

云尧妖

你要搞清楚两块在那里，和周围块是并列关系还是包含关系，实在有点朦胧你可以写一个块，给一个不一样的颜色，走一个看效果就豁然开朗了。

2013年11月28日 12点11分

level 3

无奈的我0000

<html>
<head>
<title>这个是一个模块</title>
<style type="text/css">
div#container{width:300px;}
div#header{background:red;width:100px; height:500px;}
div#muen{background:yellow;width:100px;height:500px;}
div#footer{background:grey;width:100px;height:500px;}
</style>
</head>
<body>
<div id="container">
<div id="header">头部文件
<div ></div>
<div></div>
</div>
<div id="muen">目录</div>
<div id="footer">底部文件</div>
</div>
</body>
</html>

2013年11月29日 07点11分 18