0

我正在尝试构建一个 Wordpress 主题，使用媒体查询进行响应式布局。我在保持一些语义标记的同时获得正确的布局有一些问题。

基本上，对于小于 764 像素宽的页面中的发布日期，我希望内联显示日期、项目符号和帖子类别；如果页面大于此大小，则发布日期应显示为列（条目日期），与主帖子列（主列）一起显示。

我想我已经成功了，但只是想知道这段 html 代码是否有效，因为我试图在帖子中保留页眉和页脚部分以使其在语义上有意义。

有没有人有任何反馈？

谢谢，约翰

<article class="post">
    <div class="entry-date">
        <span><span>30<sup>th</sup></span> Sep 2013</span>
    </div>              
    <div class="main-column">
        <span class="bullet">&#x25CF;</span>
        <header class="entry-header">
            <span class="entry-category"><a href="#">Cars</span>                    
            <h1 class="entry-title"><a href="#" title="" rel="bookmark">A new car from Ferrari</a></h1>
            <span class="entry-authors vcard">by <a href="#" title="" rel="me">John Smith</a> </span>   
            <div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div> 
        </header><!-- .entry-header -->
        <div class="entry-content">
            <p>Ferrari have released a great new car, which is very fast.</p>
            <span class="continue-reading"><a href="#">Continue reading</a></span>
        </div><!-- .entry-content -->
        <footer class="entry-meta">
            <span class="entry-tags"><a href='#'>Sports cars</a></span>
        </footer><!-- .entry-meta -->
    </div>
</article><!-- #post-1234 -->
4

1 回答 1

1

评论完全关闭，验证与语义无关，这是一个完全不同的主题。语义是为您的代码赋予意义。

目前你有这个

<div class="entry-date">
    <span><span>30<sup>th</sup></span> Sep 2013</span>
</div>

这将更具语义性，避免使用不必要的标签（不要仅为样式添加标签，寻找 css 解决方案）。

<div class="entry-date">
    30<sup>th</sup>Sep 2013
</div>
于 2013-06-12T10:40:43.657 回答