article --- 关于HTML5 标签 

 1 <section class="services">
 2     <div class="fluid-container">
 3         <h1>Services</h1>                    
 4         <h2>Our in-house team is comprised of Creatives &amp; Coders</h2>                    
 5         <article>
 6             <header>
 7                 <hgroup>
 8                     <a href="http://werkpress.com/services/" title="Design">
 9                         <div class="icon" style="background:#35404f url(http://werkpress.com/wp-content/uploads/2013/04/eye.png) no-repeat center center; box-shadow: 0px 6px 1px rgba(0,0,0,.4), 0px 6px 1px #35404f;"></div>    
10                     </a>
11                     <h1>Design</h1>
12                 </hgroup>
13             </header>
14             <div class="copy">
15                 <p>Our versatile design team specializes in creating kick-ass stuff. We are passionate about the design process and love to watch as designs come to life for our clients. We focus on the following:</p>
16                 <ul>
17                     <li><span style="line-height: 13px;">Custom theme design</span></li>
18                     <li>Custom plugin design</li>
19                     <li>Logo design</li>
20                     <li>Header design</li>
21                     <li>Site/Theme design</li>
22                     <li>Plugin UI/UX design</li>
23                 </ul>
24             </div><!-- copy -->
25             <a href="http://werkpress.com/services/" class="all-services-link">View all of our services</a>
26         </article>
27     </div>
28 </section>

1. 定义和用法

<article> 标签定义独立的内容。

可能的 article 实例：

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

2. 结构

article标签可包含header

3.HTML5 标签 hgroup 已经被废除

相关链接：http://blog.wpjam.com/2013/04/17/html5-tag-hgroup-has-been-deprecated/



The 网站链接：
http://werkpress.com/

li 前面的 绿色方形      写法是当成一个元素来处理，所以无论是写:after还是:before效果还是一样的，区别是z-index, :after的z-index会比:before低

section.services article .copy ul li:after, section.services article .copy ol li:after {
    content: "";
    display: block;
    height: 8px;
    width: 6px;
    background: #a3d39c;
    position: absolute;
    left: -15px;
    top: 2px;
}

 

 

posted @ 2013-11-11 16:36  2公子  阅读(276)  评论(0)  编辑  收藏  举报