代码求解，每个div是干嘛用的，为什么要嵌套这么多div div的class在css中什么时候用“.”什么时候用“#”

<!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=gb2312" />
<title>网页特效观止|JsCode.CN|---用CSS设计的导航实例</title>
<style>
/* www.jscode.cn 子鼠 */
#menu{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border:1px solid #000000;
width:200px;
background-color: #FF9D1F;
text-align:center;
}
#menub{
margin:20px;
}
.w1{
margin:3px;
border-top:1px solid #FFC881;
border-right:1px solid #EE8600;
border-bottom:1px solid #EE8600;
border-left:1px solid #FFC881;
}
.w2{
border-top:1px solid #EE8600;
border-right:1px solid #FFAD42;
border-bottom:1px solid #FFAD42;
border-left:1px solid #EE8600;
}
.w3{
border-top:2px solid #D07500;
border-right:2px solid #FFB85D;
border-bottom:2px solid #FFB85D;
border-left:2px solid #D07500;
}
.w4{
border:1px solid #FC8E00;
}
.w5{
border:1px solid #000000;
}

.w7{
border-top:1px solid #FFDCAF;
border-right:1px solid #C87000;
border-bottom:1px solid #C87000;
border-left:1px solid #FFDCAF;
}
.w8{
border-top:1px solid #FFD7A4;
border-right:1px solid #FF9204;
border-bottom:1px solid #FF9204;
border-left:1px solid #FFD7A4;
}
.w9{
background:#FFC881;
border-top:1px solid #FECE8F;
border-right:1px solid #FFAE44;
border-bottom:1px solid #FFAE44;
border-left:1px solid #FECE8F;
}
#menu a{
color: #884C00;
text-decoration: none;
font-weight: bold;
}
#menu a:hover{background:#FFB85D; color:#000000;}
#menu a:hover .w7 {
border-top:1px solid #C87000;
border-right:1px solid #FFDCAF;
border-bottom:1px solid #FFDCAF;
border-left:1px solid #C87000;
}
#menu a:hover .w8 {
border-top:1px solid #FF9204;
border-right:1px solid #FFD6A1;
border-bottom:1px solid #FFD6A1;
border-left:1px solid #FF9204;
}
#menu a:hover .w9 {
background:#FFB85D;
border-top:1px solid #FFAE44;
border-right:1px solid #FECF91;
border-bottom:1px solid #FECF91;
border-left:1px solid #FFAE44;
}
</style>
</head>
<body>

<div id="menu">
<div id="menub">
<div class="w1">
<div class="w2">
<div class="w3">
<div class="w4">
<div class="w5"> <a href="http://www.jscode.cn" target="_blank">
<div class="w7">
<div class="w8">
<div class="w9"> www.jscode.cn </div>
</div>
</div>
</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>

举报该问题

推荐答案 2011-05-10

div也叫层或块，层里面的层可以想象成 photoshop 里面的图层，这个相当于一层一层的将一个按钮用div 描绘出来， css 里面的点就是类用 class 调用，可以多个地方调用， div 命名了ID的话 css 里面用 # 用 id=“xx” 调用，一个页面只能有唯一一个id ，class 类可以有很多个。
比如 <div id='menu'></div> css里面就要写 #menu{style}
如果是 <div class="menu"></div> css里面就要写 .menu{style}追问

这些div都有什么用处啊？为什么要用这么多div？学习这个真是看不懂啊

追答

这是最底层，相当于我画了一个白色的框
这是第倒数第二层层，我画了第二个框，
以下类推
。。。。。
那么这九个框按照顺序叠在一起，按照顺序 w2在w1的里面那么 w2就在w1的上面
给这九个框画不同的颜色，这样就一层一层的就组成了一个按钮。

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/n2sUsviUx.html

其他回答

第1个回答 2011-05-11

div就相当于一个盒子，.是一个公共的类来修饰div的,#是一个唯一的类也是来修饰div的不过只能被一个div引用，而.的属性可以被n个div引用

第2个回答 2011-05-12

div就是一个盒子，我们使用它后就更加容易控制它的位置大小，这么多div的用处其实不是很大，有很多代码冗余，大部分层都只是设了边框，或许是想让那个效果有层次感吧，其实没必须的，这个#menub{ margin:20px;}是让里面的内容上下左右与外边有20px的间隙，我个人比较推荐使用padding:20px;因为margin在IE6下有时会出现问题。

第3个回答 2019-05-22

楼主还在写代码吗

第4个回答 2011-05-11

整体布局用ID

当出现会重复使用的就用class

相似回答

请问标签<div>在网页制作中,是起到什么作用,什么时候要用到标签??答：<div>标签，作用是设定字、画、表格等的摆放位置。当你把文字、图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文把它称作“层次”。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格...

div的作用是什么?答：<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。当使用 CSS-P 的时候，主要把它用在 DIV（division）tag 上。当把文字，图像，或其他的放在 DIV 中，它可称作为“DI...

CSS里面为什么一个div 的class 要用两个?为什么不把两个属性定义成一...答：并不是偏要写成两个，写成两个原因是因为其中一个的样式在别的地方会用到。如果一个div效果一个一个样式的话，那样会重复很多的样式。无形中就会加大网页加载的时间。写成多个，每个分得很细，那样就会很明确。很清晰。可以看出来这个网页美工还是有功底的。

div标签的作用答：div在html中有着分割的作用，在div中可以设置页面的布局和样式，和前后代码隔开，形成一个区块。可以在div中设置字体的大小，字体的颜色，字体是否加粗。DIV元素：是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含...

网页设计中采用div+css布局,这里的DIV是什么意思?答：使用DIV+CSS设计网站的时候，不得不强调一个利用SEO思想来建设网站的问题。搜寻引擎对网站的排名顺序不是固定的。SEO的思想就是用搜索引擎的理念搭建网站，而不是单一的再网站建设好后，通过技巧和手段来使得网站搜寻引擎所喜欢进而达到好的排名效果。不管是思想指导实践，还是实践填充了思想，都是一个好...

DW中插入的div主要是干什么用的?答：DIV是分段的意思，很多时候，段与段之间的间距要大于行行之间的间距。这是就可以用DIV了。主要还是用来切割段落的。作用：设定字、画、表格等的摆放位置。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它...

大家正在搜

代码是用来干什么的网页代码div是什么网页设计代码div是什么意思 div css是什么做代码的是什么工作代码div什么意思文字居中的css代码 divcss布局模板代码打代码是什么工作