Top

循环列表布局

×
目录导航 ol,ul,li dl,dt,dd

所有列表布局元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) <ol>、<ul>、<li>标签布局

<li>标签小图标是基于图片的，您可以根据图要修改图片样式,Dsure提供12种不同的项目符号供您选择
<li>标签默认和普通的文字行距一致，如果您要控制<li>标签的行距，请根据需要自己增加CSS样式控制<li>标签的外边距，使用margin属性设置

项目图标 HTML代码  (您可以根据需要叠加通用样式) ul内嵌li元素
<ul class="dsure-list-li dsure-list-img1">...</ul>
<ul class="dsure-list-li dsure-list-img2">...</ul>
<ul class="dsure-list-li dsure-list-img3">...</ul>
<ul class="dsure-list-li dsure-list-img4">...</ul>
<ul class="dsure-list-li dsure-list-img5">...</ul>
<ul class="dsure-list-li dsure-list-img6">...</ul>
<ul class="dsure-list-li dsure-list-img7">...</ul>
<ul class="dsure-list-li dsure-list-img8">...</ul>
<ul class="dsure-list-li dsure-list-img9">...</ul>
<ul class="dsure-list-li dsure-list-img10">...</ul>
<ul class="dsure-list-li dsure-list-img11">...</ul>
<ul class="dsure-list-li dsure-list-img12">...</ul>

没有日期

 
HTML代码:

<ul class="dsure-list-li dsure-list-img1">
    <li><a href="#">网站框架在线演示项目文字列表</a></li>
    <li><a href="#">网站框架在线演示项目文字列表</a></li>
    <li><a href="#">网站框架在线演示项目文字列表</a></li>
</ul>

项目日期居最后边

 
HTML代码:

<ul class="dsure-list-li dsure-list-img1">
    <li><a href="#">网站框架在线演示项目文字列表<span class="dsure-list-date">2014.2.1</span></a></li>
    <li><a href="#">网站框架在线演示项目文字列表<span class="dsure-list-date">2014.2.1</span></a></li>
    <li><a href="#">网站框架在线演示项目文字列表<span class="dsure-list-date">2014.2.1</span></a></li>
</ul>

三列 (您只要指定<li>标签的百分比宽度即可)

 
HTML代码:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:33%"><a href="#">网站框架在线演示项目文字列表</a></li>
</ul>

双列 (您只要指定<li>标签的百分比宽度即可)

 
HTML代码:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li style="width:49.5%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:49.53%"><a href="#">网站框架在线演示项目文字列表</a></li>
    <li style="width:49.5%"><a href="#">网站框架在线演示项目文字列表</a></li>
</ul>

流动并列

 
HTML代码:

<ul class="dsure-list-li dsure-list-img1 dsure-li-inlineblock">
    <li><a href="#">网站框架</a></li>
    <li><a href="#">在线演示</a></li>
    <li><a href="#">项目文字列表</a></li>
    <li><a href="#">网站框架</a></li>
    <li><a href="#">在线演示</a></li>
    <li><a href="#">项目文字列表</a></li>
</ul>

流动并列并居中

 
HTML代码:

<ul class="dsure-list-li dsure-list-li-center dsure-list-img1 dsure-li-inlineblock">
    <li><a href="#">li文字居中</a></li>
    <li><a href="#">li文字居中</a></li>
    <li><a href="#">li文字居中</a></li>
</ul>

有序列表

  1. 项目文字有序列表
  2. 项目文字有序列表
  3. 项目文字有序列表
  1. 项目文字有序列表
  2. 项目文字有序列表
  3. 项目文字有序列表
  1. 项目文字有序列表
  2. 项目文字有序列表
  3. 项目文字有序列表
  1. 项目文字有序列表
  2. 项目文字有序列表
  3. 项目文字有序列表
  1. 项目文字有序列表
  2. 项目文字有序列表
  3. 项目文字有序列表
 
HTML代码:

<ol class="dsure-list-ol dsure-list-ol-type1"> 
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type2"> 
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type3"> 
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type4"> 
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
</ol>

<ol class="dsure-list-ol dsure-list-ol-type5"> 
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
 <li><a href="#">项目文字有序列表</a></li>
</ol>

li列表中嵌入网格系统 (您可以插入图片，图文并茂)

  • 3/12浮动于左边的内容 9/12浮动于右边的内容
  • 3/12浮动于左边的内容 9/12浮动于右边的内容
  • 3/12浮动于左边的内容 9/12浮动于右边的内容 
 
HTML代码:

<ul class="dsure-list-li">
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12浮动于左边的内容</span>
              <span class="dsure-small-9 dsure-columns">9/12浮动于右边的内容</span>
        </span> 
    </li>
    
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12浮动于左边的内容</span>
              <span class="dsure-small-9 dsure-columns">9/12浮动于右边的内容</span>
        </span> 
    </li>
    
    <li>
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">3/12浮动于左边的内容</span>
              <span class="dsure-small-9 dsure-columns">9/12浮动于右边的内容</span>
        </span> 
    </li>
</ul>

li流水式列表中嵌入网格系统 (您只要指定<li>标签的百分比宽度即可，您可以插入图片，图文并茂)

  • 这是第一块左 这是第一块右
  • 这是第二块左 这是第二块右
  • 这是第三块左 这是第三块右
  • 这是第四块左 这是第四块右
  • 这是第五左 这是第五块右 
 
HTML代码:

<ul class="dsure-list-li dsure-li-inlineblock">
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">这是第一块左</span>
              <span class="dsure-small-9 dsure-columns">这是第一块右</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">这是第二块左</span>
              <span class="dsure-small-9 dsure-columns">这是第二块右</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">这是第三块左</span>
              <span class="dsure-small-9 dsure-columns">这是第三块右</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">这是第四块左</span>
              <span class="dsure-small-9 dsure-columns">这是第四块右</span>
        </span> 
    </li>
    
    <li style="width:49.5%">
        <span class="dsure-row">
              <span class="dsure-small-3 dsure-columns">这是第五左</span>
              <span class="dsure-small-9 dsure-columns">这是第五块右</span>
        </span> 
    </li>                      
</ul>

(2) <dl>、<dt>、<dd>标签布局

左右分居 (您可以任意指定<dt>标签的宽度和样式控制图片大小)

请叠加通用样式或者自定义控制<dl>的外边距，默认无边距

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

普通民众对学者、专家、科学有时候期望比较高，比如希望医生能够治好所有的病，希望地震局能够预测所有的地震，希望经济学能够正确解释所有的经济现象、给出完全正确的决策建议。

列表标题文字在这里

经济学积累了比较丰富的社会观察资料，包括经济数据、包括个案研究。从绝对数量上看肯定是海量的，但是与社会真实的经济活动相比还还远远不够。 

 
HTML代码:

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="120" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            普通民众对学者、专家、科学有时候期望比较高，比如希望医生能够治好所有的病，希望地震局能够预测所有的地震，希望经济学能够正确解释所有的经济现象、给出完全正确的决策建议。
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl"> 
    <dt style="padding:5px;"><a href="#"><img width="160" src="css/images/335x260-3.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            经济学积累了比较丰富的社会观察资料，包括经济数据、包括个案研究。从绝对数量上看肯定是海量的，但是与社会真实的经济活动相比还还远远不够。
          </p>    
    </dd> 
</dl>

横向信息流水式 (您可以任意指定<dt>标签的宽度和样式控制图片大小)

a) 必须指定标签<dl>的宽度，可以固定可以百分比
b) 请叠加通用样式或者自定义控制<dl>的外边距，默认无边距

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计... 

 
HTML代码:

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
<dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-3.jpg"></a></dt>
<dd> 
      <h3><a href="#">列表标题文字在这里</a></h3>
      <p>
        这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
      </p>    
</dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-4.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img width="80" src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>

纵向信息流水式 (您可以任意指定<dt>标签的宽度和样式控制图片大小)

a) 必须指定标签<dl>的宽度，可以固定可以百分比
b) 请叠加通用样式或者自定义控制<dl>的外边距，默认无边距

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...

列表标题文字在这里

这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计... 

 
HTML代码:

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-1.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-2.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>    

<dl class="dsure-list-dl dsure-list-dl-fluid dsure-list-dl-fluid-v" style="width:33%"> 
    <dt style="padding:5px;"><a href="#"><img src="css/images/335x260-3.jpg"></a></dt>
    <dd> 
          <h3><a href="#">列表标题文字在这里</a></h3>
          <p>
            这里是描述，也可以是项目简介内容，文字的样式和大小有您自己设计...
          </p>    
    </dd> 
</dl>

信息分行分列式

a) 必须指定标签<dl>的宽度才能流水式布局，您也可以去掉.dsure-list-dl-fluid单行布局
b) 必须指定标签<dt>和<dd>的宽度才能满足信息标题和信息内容的对齐
c) 请叠加通用样式或者自定义控制<dl>的外边距，默认无边距

作者姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
作者姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
作者姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
 
HTML代码:

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>作者姓名：</strong></dt>
    <dd style="width:80%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:20%"><strong>年龄：</strong></dt>
    <dd style="width:80%">38岁</dd>   
    
    <dt style="width:20%"><strong>描述：</strong></dt>
    <dd style="width:80%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       
</dl>    


<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>作者姓名：</strong></dt>
    <dd style="width:80%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:20%"><strong>年龄：</strong></dt>
    <dd style="width:80%">38岁</dd>   
    
    <dt style="width:20%"><strong>描述：</strong></dt>
    <dd style="width:80%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       
</dl>   


<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:45%"> 
    <dt style="width:20%"><strong>作者姓名：</strong></dt>
    <dd style="width:80%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:20%"><strong>年龄：</strong></dt>
    <dd style="width:80%">38岁</dd>   
    
    <dt style="width:20%"><strong>描述：</strong></dt>
    <dd style="width:80%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       
</dl>

图文信息分行分列式

a) 必须指定标签<dl>的宽度才能流水式布局，您也可以去掉.dsure-list-dl-fluid单行布局
b) 必须指定标签<dt>和<dd>的宽度才能满足信息标题和信息内容的对齐
c) 必须指定<dd>标签内的<em>标签的宽度，才能让项目标题对齐(注意请根据设置的dl的padding-left值等量适配dd的原始宽度,避免溢出)
d) 必须指定<dl>标签的padding-left属性，才能完成图片和文字左右分离(注意请根据设置的padding-left的值等量适配dl的原始宽度,避免溢出)
e) 您可以设置样式.dsure-list-dl-info-img的的宽度和样式来控制图片大小
f) 请叠加通用样式或者自定义控制<dl>的外边距，默认无边距

姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
姓名：
卢卡·佛洛瑞（Luca Flores）
年龄：
38岁
描述：
这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.
 
HTML代码:

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-1.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>姓名：</strong></dt>
    <dd style="width:78%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:12%"><strong>年龄：</strong></dt>
    <dd style="width:78%">38岁</dd>   
    
    <dt style="width:12%"><strong>描述：</strong></dt>
    <dd style="width:78%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       

</dl>    

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-2.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>姓名：</strong></dt>
    <dd style="width:78%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:12%"><strong>年龄：</strong></dt>
    <dd style="width:78%">38岁</dd>   
    
    <dt style="width:12%"><strong>描述：</strong></dt>
    <dd style="width:78%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       

</dl>    

<dl class="dsure-list-dl dsure-list-dl-info dsure-list-dl-fluid" style="width:35%; padding-left:10%"> 

    <dt class="dsure-list-dl-info-img">
        <a href="#"><img width="80" height="120" src="css/images/335x260-3.jpg"></a>
    </dt>
    <dd class="dsure-list-dl-info-img"></dd>
    
    <dt style="width:12%"><strong>姓名：</strong></dt>
    <dd style="width:78%">卢卡·佛洛瑞（Luca Flores）</dd> 
    
    <dt style="width:12%"><strong>年龄：</strong></dt>
    <dd style="width:78%">38岁</dd>   
    
    <dt style="width:12%"><strong>描述：</strong></dt>
    <dd style="width:78%">这位天才音乐家，年幼时在非洲目睹母亲车祸身亡，他始终认为是自己导致悲剧发生，在心中留下长年的懊悔，也为其脆弱与敏感的灵魂留下深刻的伤痛.</dd>       

</dl>