在每个网页中,在div内部div内部有一个div ...永远不会结束div.他们都有自己的ids或班级.为什么这样做呢.为什么不在一个地方定义所有属性？这种技术有什么意义？
<div id="body-top">
<div id="body-bot">
<div id="about-box">
<h2><b>About</b> our music</h2>
<img src="images/pic_1.jpg" width="112" height="92" alt="Pic 1" class="left" />
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </li>
<li>Cras semper erat ut mi. </li>
<li>Proin lobortis ipsum ac erat. </li>
<li>Morbi nec enim vitae est posuere luctus.</li>
</ul>
</div>
<div id="express-box">
<h2><b>Express</b> Learning</h2>
<img src="images/pic_2.jpg" width="112" height="92" alt="Pic 2" class="left" />
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="narrow-text">
<p><a href="#">It is a long</a> established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<p><a href="#">The point of using</a> Lorem Ipsum is that it has a more-or-less normal distribution of letters...</p>
</div>
<p class="more"><a href="#"><img src="images/more.gif" width="68" height="14" alt="More" /></a></p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="foot">
<div id="foot-top">
<div id="foot-bot">
<div id="what-box">
<h2><b>What</b> we offer</h2>
<img src="images/pic_3.jpg" width="86" height="77" alt="Pic 3" class="left" />
<ul>
<li><a href="#">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit.</li>
<li>Cras semper erat ut mi. </li>
<li>Proin lobortis ipsum ac erat. </li>
<li>Morbi nec enim vitae est posuere luctus.</li>
</ul>
</div>
<div id="news-box">
<h2><b>News</b> & events</h2>
<img src="images/pic_4.jpg" width="86" height="77" alt="Pic 4" class="left" />
<ul>
<li><a href="#">Nullam</a> scelerisque consequat libero. </li>
<li><a href="#">Vivamus</a> mattis augue ut augue.</li>
</ul>
<p class="more clear"><a href="#"><img src="images/more.gif" width="68" height="14" alt="More" /></a></p>
</div>
<div class="clear"></div>
</div>
</div>
让我们用一个类比.
让我们说你正在设计一个房子的布局.
您将房屋的总面积划分为较小的部分(第一级div).这些部分是您的不同房间(您给div的类/ ID).
<body>
<div class="bedroom room"></div>
<div class="bedroom room"></div>
<div class="kitchen room">
</div>
<div class="washroom room"></div>
</body>
然后让我们说厨房将需要一些在厨房中获得自己的部分/空间的物品(div的第二级).冰箱,水槽,炉灶等物品(类/ ids).
<div class="kitchen room">
<div class="kitchenItem" id="fridge"></div>
<div class="kitchenItem" id="stove"></div>
<div class="kitchenItem" id="sink"></div>
</div>
您可以在房子每个部分的元素细分中详细说明,类似于如何使用div设计网页,然后为这些div提供类和ID.
现在假设您的所有房间都有相同类型的颜色,因此使用CSS,您可以使用以下方法应用此常见样式:
.room{
//your common styles here
background-color: white;
}
但是现在让我们说一个设计变化,你希望你的卧室涂成蓝色而不是白色.所以你使用第二个类bedroom来改变所有卧室的CSS:
.room.bedroom{
background-color: blue;
}
编辑:
人们使用divs,因为它们是HTML中最常用的元素之一.它们基本上没有给出它们包含的内容.就像在房子里一样,它们只是表示房子里的空间.而其他元素,如p,h1,h2,等给它会包含一些文本的上下文.
| 归档时间： |
|
| 查看次数： |
97 次 |
| 最近记录： |