测试

基础篇

html基础布局介绍

• 层级关系
      javascript     <!-- 第1层: 最外层容器 -->     <div class="archive-posts list-layout list-grid-layout list2-mode">                  <!-- 第2层: 文章容器 -->         <article id="post-6" class="archive-post wow fadeinup" style="visibility: visible;">                          <!-- 第3层: 缩略图容器 -->             <div class="thumbnail-box book-thumbnail-box">                                 <!-- 第4层: 图片容器 -->                 <figure class="thumbnail standard-thumbnail">                                          <!-- 第5层: 图片链接 -->                     <a href="#" rel="external nofollow">                                                  <!-- 第6层: 图片元素 -->                         <img class="thumb-image hscaleb lazyloaded" src="#" alt="图片">                                              </a>                 </figure>             </div>                 <!-- 第3层: 内容容器 -->             <div class="post-inner">                                 <!-- 第4层: 标题区 -->                 <header class="post-header">                                          <!-- 第5层: 标题 -->                     <h2 class="post-title text-ellipsis">                                                  <!-- 第6层: 标题链接 -->                         <a class="hindent" href="#" rel="bookmark">标题</a>                                              </h2>                 </header>                     <!-- 第4层: 内容区 -->                 <div class="post-content">                                          <!-- 第5层: 摘要段落 -->                     <p class="post-excerpt line-clamp line-clamp4">内容</p>                                      </div>             </div>         </article>     </div>    

睡得好晚啊