<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;
}
时间： 2024-10-06 15:08:50