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>
      
            
 
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>
      
            
 
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>
      
            
 
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>标签的宽度,才能让项目标题对齐(注意请根据设置的dlpadding-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>