常用网页代码结构分享

<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>

<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>