dl dt dd 实例

最新推荐文章于 2022-03-24 10:01:48 发布

ringtoping

最新推荐文章于 2022-03-24 10:01:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/ring_to_ping/article/details/45562843

版权

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