synzhang

<!--
 * @desc 标题类列表（普通形式）
 *       Emmet: ul.title-list>li>a[title].title-link
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

<ul class="title-list">
  <li><a class="title-link" href="#" title=""></a></li>
</ul>

synzhang

<!--
 * @desc 排行榜
 *       Emmet: ul.rate-list>li>i+a[title].title-link+span.grey
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 用户头像列表
 *       Emmet: ul.user-avatar.clearfix>li>a>img+strong[title]
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 图片标题列表
 *       Emmet: ul.img-title.clearfix>li>a>img+strong[title]
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 图片文字垂直项目列表
 *       Emmet: ul.imgtext-v.clearfix>li>(a>img)+(h3.short-title>a[title])+p
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 图文混排水平列表（内容型）
 *       Emmet: .imgtext-h.clearfix>(a.img-left>img)+(.text-right>(h3>a[title])+p)
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

<div class="imgtext-h clearfix">
  <a href="" class="img-left"><img src="images/img200.jpg" alt="" /></a>
  <div class="text-right">
    <h3></h3>

synzhang

<!--
 * @desc 无缝滚动
 *       Emmet: .carousel>(.view-content>ul>li>a>img+strong[title])+a.prev-btn+a.next-btn
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 区块导航
 *       Emmet: ul.nav-block>li>a
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

<!--
 * @desc 图片滚动
 *       Emmet: .imgslide>(.silde-view>ul.inline-style.clearfix>li*4>a[title]>img)+.slide-control>(p.slide-title+(.slide-bullet>a*4)+(.slide-prev-next>a.prev-btn+a.next-btn))
 * @see  http://www.w3cplus.com/framework/page/demo.php
-->

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

synzhang

/**
 * @desc Truncate String with Ellipsis
 * @see  http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
 */

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;