常用网页代码结构分享

标题右侧带有链接等

<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/ 特此声明！