0

所以在过去的几个月里，我自学了网页设计。当然还有很多东西要学，但我觉得我已经牢牢掌握了我目前所知道的。我最近想知道的一件事是 div 的必要性，尤其是当我最终使用绝对定位时。例如，我最近编写了以下代码：

<section id="header-section">
        <header class="main-header">
            <h1>The Voice of Jeremy Donahue</h1>
                <nav class="main-navigation">
                    <ul>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/about">About</a></li>
                        <li><a href="http://www.thevoiceofjeremydonahue.com/contact">Contact</a></li>
                    </ul>
                </nav>
        </header>
</section>

当我在很多页面上阅读源代码时，在我看来，事情通常是这样分组的，或者非常相似。当然，我的假设是，作为一名设计师，您拥有艺术许可，并且可以按照您的意愿安排您的页面，同时牢记用户体验并保持您的代码语义。

然而，很多时候我最终使用 {position: absolute} 属性来定位我的元素，而完全忽略了包含的 div。所以我的想法是，如果我有一个 H1，并且我打算按照我所描述的那样定位它，那么为什么还要费心把它放在一个 div 中呢？对于我以这种方式定位的任何其他元素也是如此。为什么不将它们作为独立元素？我想知道出于语义原因这样做是否仍然很好，或者是否只是认为以这种方式对事物进行分组的最佳实践。我希望我已经清楚地描述了这一点。

为了尽可能地进行描述，这里是我迄今为止应用到这个页面的这个特定迭代的 css。它还没有接近完成（显然），但是您可以看到我已应用于此标题部分的一些绝对定位。

/*global*/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background: rgb(234, 234, 234);
}

body, .container {
    min-height: 100%;
}

.container {
    background: white;
    margin-top: 6.25em;
}

header {
    position: absolute;
    top: 0.625rem;
    background: transparent;
    text-align: center;

}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

/*typography*/

h1 {
    font-family: 'Parisienne', cursive;
    font-size: 2.5rem;
    color: #2713e7;
    position: relative;
    top: 1.25rem;

}

/*lists*/

.main-navigation {
    position: relative;
    top: 2.5rem;
}

.main-navigation li  {
    position: absolute;
    top: 10px;
    display: inline-block;
    margin-right: 10%;
    font-family: 'Atomic Age', cursive;
    font-size: 1.5625rem;

}

/*borders*/

.main-navigation {
    border: 2px solid black;
}

.main-navigation li  {
    display: inline-block;
    border: 2px solid black;


}
4

1 回答 1

1

1. 所以在过去的几个月里，我自学了网页设计。

做得好！保持。

2. 然而，很多时候我最终使用 {position: absolute} 属性来定位我的元素，而完全忽略了包含的 div。

不好，你不想每次都从画布上定位你的元素。你？position: absolute将根据它最近的相对定位的祖先定位一个元素，如果它没有，你将不得不根据画布定位它。

3所以我的想法是，如果我有一个 H1，并且我打算按照我所描述的那样定位它，那么为什么还要费心把它放在一个 div 中呢？对于我以这种方式定位的任何其他元素也是如此。为什么不将它们作为独立元素？

有很多方法可以给猫剥皮，做你觉得最舒服的事情，这样说。你不会发现很多网页设计师都在做这种设置。并将每个元素分别放置在页面上，因为您最终会在文档中添加很多很多类，这是一个很大的禁忌。

于 2013-10-07T02:45:01.180 回答