DL.DT.DD的佈局簡單例子
說到無序列表你們很容易的就想到UL和LI
今天在子鼠那裏看到了一種新的方式
就是DL .DT .DD
對於有標題或不固定寬度的列表來講很適合
code代碼以下:
程序代碼
<h1>標題</h1>
<div>
<dl>
<dt><a href="32">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>
<dl>
<dt><a href="3232">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>
<dl>
<dt><a href="3232">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>...........
</div>
<div>
<dl>
<dt><a href="32">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>
<dl>
<dt><a href="3232">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>
<dl>
<dt><a href="3232">·博客裏的文章是我本身寫的！</a></dt>
<dd>做者：張三</dd>
</dl>...........
</div>
CSS部分：
程序代碼
<style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
*{ margin:0; padding:0;}
body{ font-size:12px; line-height:1.8; padding:10px;}
dl{clear:both; margin-bottom:5px;float:left;}
dt,dd{padding:2px 5px;float:left; border:1px solid #3366FF}
dd{ position:absolute; right:5px;}
h1{clear:both;font-size:14px;}
</style>
看一下效果：
HTML代碼
[Ctrl+A 所有選擇 提示：你可先修改部分代碼，再按運行]
若是說定寬？
HTML代碼
[Ctrl+A 所有選擇 提示：你可先修改部分代碼，再按運行]
相關文章
- 1. flex佈局介紹和簡單案例
- 2. PyQt4（簡單佈局）
- 3. h5-------簡單佈局
- 4. 簡單佈局1
- 5. gridlaylout 簡單佈局
- 6. Swing佈局例子(二)
- 7. flex佈局案例（骰子）
- 8. css網頁佈局例子
- 9. 簡單的流式佈局
- 10. Drools簡單例子
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Github 簡明教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. flex佈局介紹和簡單案例
- 2. PyQt4（簡單佈局）
- 3. h5-------簡單佈局
- 4. 簡單佈局1
- 5. gridlaylout 簡單佈局
- 6. Swing佈局例子(二)
- 7. flex佈局案例（骰子）
- 8. css網頁佈局例子
- 9. 簡單的流式佈局
- 10. Drools簡單例子