dl dt dd 例項
阿新 • • 發佈：2019-01-22
<body> <div class="head"> <div class="logo">前端開發教程</div> </div> <div class="nav"> <ul> <li class="current"><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </div> <div class="tab"> <div class="dc"> <dl> <dt>CSS 基礎教程</dt> <dd class="current"><a href="#">CSS 簡介</a></dd> <dd><a href="#">CSS 基礎語法</a></dd> <dd><a href="#">CSS 高階語法</a></dd> <dd><a href="#">CSS 派生選擇器</a></dd> <dd><a href="#">CSS id 選擇器</a></dd> <dd><a href="#">CSS 類選擇器</a></dd> <dd><a href="#">CSS 屬性選擇器</a></dd> <dd><a href="#">CSS 建立</a></dd> </dl> <dl> <dt>CSS 樣式</dt> <dd><a href="#">CSS 背景</a></dd> <dd><a href="#">CSS 文字</a></dd> <dd><a href="#">CSS 字型</a></dd> <dd><a href="#">CSS 連結</a></dd> <dd><a href="#">CSS 列表</a></dd> <dd><a href="#">CSS 表格</a></dd> <dd><a href="#">CSS 輪廓</a></dd> </dl> <dl> <dt>CSS 盒子模型</dt> <dd><a href="#">CSS 盒子模型概述</a></dd> <dd><a href="#">CSS 內邊距</a></dd> <dd><a href="#">CSS 邊框</a></dd> <dd><a href="#">CSS 外邊距</a></dd> <dd><a href="#">CSS 外邊距合併</a></dd> </dl> <dl> <dt>CSS 定位</dt> <dd><a href="#">CSS 定位概述</a></dd> <dd><a href="#">CSS 相對定位</a></dd> <dd><a href="#">CSS 絕對定位</a></dd> <dd><a href="#">CSS 浮動</a></dd> </dl> <dl> <dt>CSS 選擇器</dt> <dd><a href="#">CSS 元素選擇器</a></dd> <dd><a href="#">CSS 選擇器分組</a></dd> <dd><a href="#">CSS 類選擇器詳解</a></dd> <dd><a href="#">CSS ID 選擇器詳解</a></dd> <dd><a href="#">CSS 屬性選擇器詳解</a></dd> <dd><a href="#">CSS 後代選擇器</a></dd> <dd><a href="#">CSS 子元素選擇器</a></dd> <dd><a href="#">CSS 相鄰兄弟選擇器</a></dd> <dd><a href="#">CSS 偽類</a></dd> <dd><a href="#">CSS 偽元素</a></dd> </dl> </div> <div class="right"></div> <div class="content"> <h2>CSS簡介</h2><hr/> <div class="pageto"><a href="#">上一章</a><a href="#">下一章</a></div><hr class="hrc"/> <h3>你應該知道這些知識</h3> <p>在繼續之前，你應該有一個以下基本認識：</p> </div> </div> </body>
*{ padding:0px; margin:0px; } body{ padding:0px; font:14px normal 'Microsoft YaHei'; height:3000px; } a{ text-decoration:none; } a:link{ color:#000000; } .tab dl{ margin-left:8px; display:inline; width:240px; } .tab dl dt{ font:16px normal 'Microsoft YaHei'; background:#39F; display:inline-block; width:200px; height:20px; padding:10px; margin-bottom:10px; } dd{ margin-left:30px; line-height:25px; } .head{ width:60%; height:80px; margin:0px auto; background:#39F; padding-top:30px; } .logo{ font-size:30px; font-family:'微軟雅黑'; color:#FFF; text-indent:30px;//縮排 } .tab{ width:60%; height:1800px; border:1px solid #CCC; margin:0px auto; } .nav{ width:60%; height:20px; margin:0px auto; margin-bottom:20px; margin-top:10px; } .nav ul{ list-style:none; font-size:20px; } .nav li{ float:left; margin-left:30px; } .nav li.current{ border-bottom:3px solid #cc0000; } .nav li a:hover{ border-bottom:3px solid #cc0000; } .content{ margin-top:10px; margin-left:15px; clear:both; width:98%; } h2{ font-weight:normal; } hr{ width:98%; } .pageto a{ display:block; float:left; width:60px; height:25px; background:#F5F5F5; margin-left:30px; text-align:center; margin-top:5px; padding-top:5px; margin-bottom:5px; } .hrc{ width:98%; border:3px solid #CCC; } .right{ height:1100px; background:#FF0; width:570px; float:right; } .tab div{ float:left; }