Html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>lalalal</title> 6 <link rel="stylesheet" href="css/css.css" type="text/css" /> 7 </head> 8 <body> 9 <div id="wrap"> 10 <div id="header"> 11 <div class="logo">前端开发教程</div> 12 <div class="nav"> 13 <ul> 14 <li><a href="#" class="activate" >CSS</a></li> 15 <li><a href="#" >HTML</a></li> 16 <li><a href="#">JavaScript</a></li> 17 <li><a href="#">jQuery</a></li> 18 <li><a href="#">Ajax</a></li> 19 </ul> 20 </div> 21 </div> 22 <div id="mainbody"> 23 <div class="left"> 24 <dl> 25 <dt>CSS 基础教程</dt> 26 <dd><a href="#">CSS 简介</a></dd> 27 <dd><a href="#">CSS 基础语法</a></dd> 28 <dd><a href="#">CSS 基础教程</a></dd> 29 <dd><a href="#">CSS 派生选择器</a></dd> 30 <dd><a href="#">CSS id选择器</a></dd> 31 <dd><a href="#">CSS 类选择器</a></dd> 32 <dd><a href="#">CSS 属性选择器</a></dd> 33 <dd><a href="#">CSS 创建</a></dd> 34 </dl> 35 <dl> 36 <dt>CSS 样式</dt> 37 <dd><a href="#">CSS 背景</a></dd> 38 <dd><a href="#">CSS 文本</dd> 39 <dd><a href="#">CSS 字体</dd> 40 <dd><a href="#">CSS 链接</dd> 41 <dd><a href="#">CSS 列表</dd> 42 <dd><a href="#">CSS 表格</a></dd> 43 <dd><a href="#">CSS 轮廓</a></dd> 44 </dl><dl> 45 <dt>CSS 盒子模型</dt> 46 <dd><a href="#">CSS 盒子模型概述</a></dd> 47 <dd><a href="#">CSS 内边距</a></dd> 48 <dd><a href="#">CSS 边框</a></dd> 49 <dd><a href="#">CSS 外边距</a></dd> 50 <dd><a href="#">CSS 外边距合并</a></dd> 51 </dl><dl> 52 <dt>CSS 定位</dt> 53 <dd><a href="#">CSS 定位概述</a></dd> 54 <dd><a href="#">CSS 相对定位</a></dd> 55 <dd><a href="#">CSS 绝对定位</a></dd> 56 <dd><a href="#">CSS 浮动</a></dd> 57 </dl><dl> 58 <dt>CSS 选择器</dt> 59 <dd><a href="#">CSS 元素选择器</a></dd> 60 <dd><a href="#">CSS 选择器分组</a></dd> 61 <dd><a href="#">CSS 类选择器详解</a></dd> 62 <dd><a href="#">CSS ID选择器详解</a></dd> 63 <dd><a href="#">CSS 属性选择器详解</a></dd> 64 <dd><a href="#">CSS 类选择器</a></dd> 65 <dd><a href="#">CSS 后代选择器</a></dd> 66 <dd><a href="#">CSS 子元素选择器</a></dd> 67 <dd><a href="#">CSS 相邻兄弟选择器</a></dd> 68 <dd><a href="#">CSS 伪类</a></dd> 69 <dd><a href="#">CSS 伪元素</a></dd> 70 </dl><dl> 71 <dt>CSS 高级</dt> 72 <dd><a href="#">CSS 对齐</a></dd> 73 <dd><a href="#">CSS 尺寸</a></dd> 74 <dd><a href="#">CSS 分类</a></dd> 75 <dd><a href="#">CSS 导航栏</a></dd> 76 <dd><a href="#">CSS 图片库</a></dd> 77 <dd><a href="#">CSS 图片透明</a></dd> 78 <dd><a href="#">CSS 媒介类型</a></dd> 79 <dd><a href="#">CSS 注意事项</a></dd> 80 <dd><a href="#">CSS 总结</a></dd> 81 </dl> 82 </div> 83 <div class="right"> 84 <h1>CSS 简介</h1> 85 <div class="page"> 86 <a href="#">上一章</a> 87 <a href="#">上一章</a> 88 </div> 89 <div class="content"> 90 <h2>你知道这些知识吗？</h2> 91 <p>在继续之前，你应该有一个以下基本认识：</p> 92 <p>· HTML / XHTML</p> 93 <p>如果您希望首先学习这些项目，我们的主页上可以找到教程。</p> 94 <div class="dashed"></div> 95 <h2>什么是CSS</h2> 96 <p>CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p> 97 <div class="dashed"></div> 98 <h2>基本信息</h2> 99 <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p> 100 <div class="dashed"></div> 101 <h2>发展历史</h2> 102 <dl> 103 <dt>CSS1</dt> 104 <dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd> 105 </dl> 106 <dl> 107 <dt>CSS2</dt> 108 <dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd> 109 </dl> 110 <dl> 111 <dt>CSS3</dt> 112 <dd>CSS3 计划将 CSS 划分为更小的模块。</dd> 113 </dl> 114 <a href="#">亲自体验一下</a> 115 </div> 116 <div class="page"> 117 <a href="#">上一章</a> 118 <a href="#">上一章</a> 119 </div> 120 <p class="tishi">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p> 121 </div> 122 </div> 123 <div id="footer"> 124 李小薇©版权所有 125 </div> 126 </div> 127 </body> 128 </html>
Css
*{margin: 0;padding: 0;font-size: 12px;color: #333;font-family:"微软雅黑"; list-style: none;} a{text-decoration: none;} a:hover{text-decoration: underline;color:#ff0000;} p{line-height: 24px;} #wrap{width: 780px;margin: 0 auto;border-left: 1px solid #ccc;border-right: 1px solid #ccc;padding: 0 10px 10px 10px ;} .activate{text-decoration: none;border-bottom: 3px solid #cc0000;} #header{width: 100%;overflow: hidden;} .logo{background: rgb(51,153,204);line-height: 80px;font-family: "微软雅黑";font-size: 30px; color: white; text-indent:30px;} .nav{width: 100%;margin-top: 10px;} .nav ul li{float: left;margin: 0 32px;} .nav ul li a{font-size: 16px; color: #7f7f7f;padding-bottom:2px;display: block;} .nav ul li a:hover{text-decoration: none;border-bottom: 3px solid #cc0000;} #mainbody{width: 100%;margin-top: 20px;overflow: hidden;position: relative;} .left{width: 178px;} .left dl{margin-bottom: 10px;} .left dt{background: rgb(51,153,204);line-height: 35px;font-family: "微软雅黑";font-size: 15px; color: white;text-indent:15px; margin-bottom: 10px;} .left dl dd{line-height: 20px;padding-left: 15px;font-size: 14px;} .right{width: 580px;height: 500px;position: absolute;top:0px; left: 200px;} .right h1{font-size: 24px;color: black;font-weight: normal;} .page{border-top: 1px solid #ccc;border-bottom: 3px solid #ccc;padding: 15px 5px;margin-top: 5px; margin-bottom: 10px;} .page a{margin: 0 10px;background: #f3f3f3;padding: 5px 20px;border: 1px solid #ccc;} .page a:hover{text-decoration: none;} .dashed{border-bottom: 1px dashed #ccc;margin: 10px 0px;} .content{line-height: 24px;} .content h2{font-size: 14px;} .content dl{margin-top: 10px;} .content dl dt{font-weight: bold;} .content a{text-decoration: underline;color: red;} .content a:hover{text-decoration: none} .tishi{color: #999;padding-top:10px; } #footer{width: 100%;background: #ddd;padding: 15px 0;text-align: center;color: #999;margin-top: 20px;}