常用网页代码结构分享

标题右侧带有链接等

<div class="head-title clearfix">  <h2></h2><a class="more" href="#"></a></div>

标题类列表

/*普通形式*/<ul class="title-list">    <li><a class="title-link" href="#" title=""></a></li></ul>/*右侧带有文字形式*/<ul class="title-list title-left">    <li><a class="title-link" href="#" title=""></a><span class="grey">52</span></li></ul>

排行榜

<ul class="rate-list">    <li><i>1</i><a title="rate-title" class="title-link" href="">rate-title</a><span class="grey">2515</span>    </li></ul>

用户头像列表

<ul class="clearfix user-avatar">    <li><a href="#">        <img alt="username" src="images/img50.jpg">        <strong title="username">username</strong>    </a></li></ul>

图片标题列表

<ul class="clearfix img-title">    <li><a href="#">      <img alt="" src="images/img200.jpg">      <strong title=""></strong>    </a></li></ul><!--半透明--><ul class="clearfix img-title title-alpha">    <li><a href="#">      <img alt="" src="images/img200.jpg">      <strong title=""></strong>    </a></li></ul>

图片文字垂直项目列表

<ul class="clearfix imgtext-v">    <li>      <a href="#" class="img-link"><img width="130" height="130" src="images/img154.jpg" alt=""></a>      <h3 class="short-title"><a title="" href="#"></a></h3>      ...    </li></ul>

图文混排水平列表

<!--内容型--><div class="imgtext-h clearfix">  <a href="" class="img-left"><img src="images/img200.jpg" alt="" /></a>  <div class="text-right">    <h3></h3>    ...  </div></div><!--区块型--><ul class="imgtext-h-block clearfix">  <li>    <a href="" class="img-left"><img src="images/img100.jpg" alt="" /></a>    <div class="text-right">      <h3 class="short-title"></h3>      ...    </div>  </li></ul>

无缝滚动

<div class="carousel" id="ty_carousel">  <div class="view-content">      <ul class="inline-style clearfix" style="width:1440px;">        <li><a href="#"><img src="images/img150-116.jpg"><strong title=""></strong></a></li>        ...      </ul>  </div>  <a class="prev-btn" href="#">prev</a>  <a class="next-btn" href="#">next</a></div>

等分多列

<!-- 两列 --><div class="col-two clearfix">  <div class="col">    <h2></h2>    <div class="col-content"></div>  </div>  <div class="col">    <h2></h2>    <div class="col-content"></div>  </div></div><!-- 三列 --><div class="col-three clearfix">  <div class="col">    <h2></h2>    <div class="col-content"></div>  </div>  ...</div><!-- 四列 --><div class="col-four clearfix">  <div class="col">    <h2></h2>    <div class="col-content"></div>  </div>  ...</div>

图片滚动

<div id="imgslide" class="imgslide"><div class="slide-view"><ul class="inline-style clearfix"><li><a title="我是标题1" href="#"><img src="images/1.jpg" alt="" /></a></li><li><a title="我是标题2" href="#"><img src="images/2.jpg" alt="" /></a></li><li><a title="我是标题3" href="#"><img src="images/3.jpg" alt="" /></a></li><li><a title="我是标题4" href="#"><img src="images/4.jpg" alt="" /></a></li></ul></div><div class="slide-control"><p class="slide-title"><a href="#">我是标题1</a></p><div class="slide-bullet"><a class="active" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a></div></div><div class="slide-prev-next"><span class="prev-btn"></span><span class="next-btn"></span></div></div>

区块导航

<ul class="nav-block">  <li><a href="#"></a></li>  ...</ul>

tabs选项卡

<h2 class="tabs-nav">  <a href="#"></a>  ...</h2><div class="tabs-content-wrap">  <div class="tabs-content"></div>  ...</div>

标签过滤

<div class="tags-filter clearfix">    <strong class="tag-label">女生</strong>    <p>...</p></div>

本资源来自：http://www.w3cplus.com/ 特此声明！