标签:
<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; }
标签:
原文地址:http://blog.csdn.net/ring_to_ping/article/details/45562843