0

六个月以来，我第一次创建了一个新网站，而不是维护一个蹩脚的旧网站。因为我喜欢正确地做事，所以我正在研究如何设置这件事。

因为这个网站需要响应和模块化，所以我正在研究某些元素的良好结构。我做了一个我想在油漆中使用的模型。不看配色，就是为了展示我想要达到的效果，嘿嘿。

在此处输入图像描述

这是我正在考虑使用的代码：

<div class="">
    <header class="new-icon">
        News feed title
    </header>
    <ul>
        <li>
            <article>
                <header>News item title</header>
                <p>Lorem ipsum</p>
                <p>Lorem ipsum</p>
                <p>Lorem ipsum</p>
                <footer>
                    <a href="#">Read more</a>
                    <span>category</span>
                </footer>
            </article>
        </li>
    </ul>
    <footer>
        <a href="#">
            Read more
        </a>
    </footer>
</div>

查看 html 5 文档，我可能必须将周围的 div 设置为一个部分，尽管在每个页面上都有大约三个列表，并且文档告诉我要避免“过多”使用它。此外，在 li 中使用页眉/页脚对我来说似乎很奇怪，但同时也是合乎逻辑的。

我觉得我不知道自己在做什么，它是这样工作的，但它也正确吗？

4

2 回答 2

0

对我来说看起来很对，虽然新闻标题应该是标题标签？另外，我假设新闻故事是按日期/时间降序排列的？如果是这样，ol 会更有意义，因为它是一个有序列表。

于 2013-07-18T09:24:47.867 回答
0

我不认为有任何对与错。它更多的是你想要的。我会做这样的事情。

如果您真的只想使用 html5，article 是一个 html5 元素。

<article class="post">  
<header>  
<h1>This is Blog Post Title</h1>  
<div class="post-meta">  
    <ul>  
        <li class="author">Author Name</li>  
        <li class="categories">Save in Categories</li>  
    </ul>  
</div>  
</header>  

<div class="post-content">  
    BLABLABLA   
</div>

编辑：哦，抱歉没有看到你也使用它。所以你的代码看起来是正确的。

于 2013-07-18T09:25:45.227 回答