个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在每个网页中，div 中都有 div，div 中有 div，div 中有 div……永无止境的 div 池。他们都有自己的 ID 或类(class)。为什么会这样。为什么不在一个地方定义所有属性？这种技术有什么意义？
<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)。冰箱、水槽、炉灶等元素(类/ID)。
<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;
}
编辑:
人们使用 div 是因为它们是 HTML 中最通用的元素之一。它们基本上没有给出它们包含的内容的上下文。就像在房子里一样，它们只是表示房子里的空间。而其他元素，如 p、h1、h2 等，则提供了将包含一些文本的上下文。
关于html - html/css 初学者 : Why do web pages have so many levels of divs? 为什么不在一个类中定义所有属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35242337/
25
4
0
我是 PHP 新手。我在 WordPress 中遇到了这种语法.该代码的最后一行是做什么的？ $page = $_SERVER['REQUEST_URI']; $page = str_replace(
为了清楚起见 - 这是我在这个问题中谈论的盒子的图片: 背景:我为客户构建了一个相对复杂的 WP 网站，它更像是一个 CMS 而不是博客，并且依赖于正在构建的页面层次结构。 (嗯，它们实际上是设置了
GitHub Help显示了 GitHub Pages 的以下选项: gh-pages 分行 主分支 master 分支/docs 文件夹 那么我们可以使用名称不是 master 或 gh-pages
我正在使用 AngularJS 框架为我的前端开发一个 Web 应用程序。对于我的登录页面，我必须阻止用户浏览除登录页面和注册之外的其他页面。但是我现在所做的代码也阻止用户导航到注册页面。以下是我的代
如果不将/1 粘贴到 url 上，是否可以改变 Zend_Paginator 来处理 URL？当前用户转到/aaron/studio。然后用户应该点击页面并开始访问 URL，例如:/aaron/stu
目前，我创建了一个可以生成PDF的系统。 PDF 中的数据来自 MySQL 数据库。现在，我像这样显示数据 第一页:仅显示一条数据。 第二页文字:将显示数据(每页最多 3 个数据) 说得更清楚一点，比
我正在尝试构建我的 ASP.NET MVC 4.5 项目以使用搜索引擎友好的 URL。我正在使用以下路由映射。 routes.MapRoute( name: "Default", ur
我为打印按钮使用了以下代码: Data.str = null; //Data.str = textBox24.Text.ToString(); string s = "select * from te
我们有一个带有两个 View 的单页应用程序(本质上是一个项目列表和所选项目的详细信息页面)。两个 View 都在单独的 html 文件中，我们使用 sammy.js 在页面之间进行转换/导航。在我们
(如果有人需要更多信息或更好的描述，请告诉我) 您好，我从这里添加了 viewPagerLibrary:http://viewpagerindicator.com/#introduction今天在我的
我是网页的新手，刚刚开始学习它。在创建新的 Razor 网站后，当我点击添加新项目时，我会看到可以添加的项目的多个选项。它们是: Layout Page(Razor) 这些类似于Master Page
我正在尝试使用 activeadmin 和 awesome_nested_set 创建页面模型。我一直在试图弄清楚如何使用正确的尾随 slug(例如/page1/page1subpage/a-subp
我正在尝试将 DotNetOpenAuth 与 Razor/MVC3 一起使用。大多数 DotNetOpenAuth HTML 助手都接受 System.Web.UI.Page 作为参数之一，使用 W
在我们的应用程序中，当我们在某些页面之间导航时，我们会在进入下一页之前发出服务器请求。发生这种情况时，当前页面上会显示加载图形。奇怪的是，在等待服务器响应完成时，下一页的样式会应用到当前页面。这会导致
我正在使用 ASP.NET Core 3.1 MVC 和 Razor 页面构建 Web 应用程序。 我是 Razor 页面的新手。 我使用上面的方法创建了一个基本应用程序。我想在应用程序启动时加载登录
我遇到了一个我似乎无法解释的问题。我在 Umbraco 中设置了一个主模板和 2 个子模板，但出现以下错误: Content controls have to be top-level control
我正在创建一个网络应用程序，允许用户选择他们当前的部门、他们将临时借调到哪个部门、他们正在执行的任务以及在任务上花费的时间。我需要写一些声明，根据他们当前部门的选择来确定他们所在的团队(当前的或新的)
当我导航到一个页面时，我得到了404错误页面，该页面说，在我刷新浏览器之前，没有包含此URL的页面，然后该页面才会显示。。我尝试使用@REACH/ROUTER来导航，而不是使用REACT-ROUTER
我正在使用 Html2Pdf 将一些 HTML 文件转换为 PDF。我还需要添加分页符来划分文档的各个部分。为此，我使用 标签。 我有以下 HTML 片段: ...
我正在使用另一个静态网站生成器，我希望能够将源文件(以markdown格式)以及生成的网站 checkin 到我的username.github.com存储库中。因此，很像Jekyll，但我没有使用J
我是一名优秀的程序员,十分优秀！