标签：
源码在下方仅供参考，自己动手设计一款类似的版式，然后亲自动手试一下。
1 <html> 2 <head> 3 <title>昱歌——可乐瑜伽</title> 4 <!-- <script type="text/javascript" src="js/jquery.js"></script> --> 5 <style> 6 *{ 7 margin: 0; 8 padding:0; 9 border:0; 10 list-style-type: none; 11 font-size: 14px; 12 font-family: "微软雅黑"; 13 color:#fff; 14 } 15 a{ 16 text-decoration: none; 17 color: #fff; 18 font-size: 20px; 19 } 20 a:hover{ 21 text-decoration: underline; 22 } 23 body{ 24 background-color: #282828; 25 } 26 #box{ 27 width: 1004px; 28 background: url("../test/images/bj.jpg") #2a76cc repeat-x 0 0; 29 margin: 0 auto; 30 } 31 #head{ 32 width: 1004px; 33 height: 306px; 34 } 35 .w1b{ 36 width: 256px; 37 height: 243px; 38 background: #ccc url("../test/images/w1b.jpg") no-repeat 0 0; 39 margin-top: 6px; 40 float:left; 41 } 42 43 .w2b{ 44 width: 392px; 45 height: 243px; 46 background: #ccc url("../test/images/w2b.jpg") no-repeat 0 0; 47 margin-top: 6px; 48 float:left; 49 } 50 51 .w3b{ 52 width: 343px; 53 height: 243px; 54 background: #ccc url("../test/images/w3b.jpg") no-repeat 0 0; 55 margin-top: 6px; 56 float:right; 57 } 58 .buttons{ 59 width: 1004px; 60 height: 51px; 61 float: left; 62 line-height: 51px; 63 } 64 65 .buttons li.htmlBtn{ 66 float: left; 67 margin-left: 120px; 68 } 69 .buttons li.cssBtn{ 70 float: left; 71 margin-left: 300px; 72 } 73 .buttons li.jsBtn{ 74 float: right; 75 margin-right: 120px; 76 } 77 #main{ 78 width: 1004px; 79 height: 500px; 80 background-color: #4e5454; 81 padding-top: 25px; 82 } 83 .maincontent{ 84 width: 750px; 85 height: 130px; 86 background-color: #fff; 87 border: 1px border #000; 88 padding: 10px 120px; 89 margin: 0 auto 10px auto; 90 } 91 h2{ 92 display: block; 93 width: 764px; 94 height: 16px; 95 } 96 h2 span{ 97 display: block; 98 float: left; 99 font-size: 20px; 100 line-height: 20px; 101 font-weight: bolder; 102 color:#000; 103 } 104 h2 span.rect{ 105 width: 22px; 106 height: 22px; 107 background-color: #f3002e; 108 margin-right: 10px; 109 line-height: 22px; 110 text-align: center; 111 color:#fff; 112 } 113 .rectlist{ 114 margin-top: 10px; 115 float: left; 116 text-indent: 2em; 117 color:#000; 118 } 119 #footer{ 120 width: 1004px; 121 height: 30px; 122 background-color: #000; 123 text-align: center; 124 line-height: 30px; 125 } 126 </style> 127 </head> 128 <body> 129 <div id="box"> 130 <div id="head"> 131 <div class="w1b" id="w1b"></div> 132 <div class="w2b" id="w2b"></div> 133 <div class="w3b" id="w3b"></div> 134 <ul class="buttons"> 135 <li class="htmlBtn"><a href="#" onmouseover="w1bOverFunction()" onmouseout="w1bOutFunction()">HTML</a></li> 136 <li class="cssBtn"><a href="#" onmouseover="w2bOverFunction()" onmouseout="w2bOutFunction()">CSS</a></li> 137 <li class="jsBtn"><a href="#" onmouseover="w3bOverFunction()" onmouseout="w3bOutFunction()">JavaScript</a></li> 138 </ul> 139 </div> 140 <div id="main"> 141 <div class="maincontent"> 142 <h2> 143 <span class="rect">1</span> 144 <span>HTML<span> 145 </h2> 146 <div class="rectlist"> 147 指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了，经历了多个版本的发展，已经发展到5.0版了，得力于W3C建立的标准和规范，已普遍升级到了XHTML，XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）， XHTML 于2000年的1月26日成为 W3C 标准，是更严格更纯净的 HTML 代码，XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的，XHTML 是作为一种 XML 应用被重新定义的 HTML，是一个 W3C 标准。W3C 将 XHTML 定义为最新的HTML版本。所有新的浏览器都支持 XHTML。 148 </div> 149 </div> 150 151 <div class="maincontent"> 152 <h2> 153 <span class="rect">2</span> 154 <span>CSS<span> 155 </h2> 156 <div class="rectlist"> 157 级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。 158 </div> 159 </div> 160 161 <div class="maincontent"> 162 <h2> 163 <span class="rect">3</span> 164 <span>JavaScript<span> 165 </h2> 166 <div class="rectlist"> 167 是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。 168 </div> 169 </div> 170 </div> 171 <div id="footer"> 172 <a href="http://www.cnblogs.com/yuge790615">http://www.cnblogs.com/yuge790615</a> 173 </div> 174 </div> 175 </body> 176 </html> 177 178 <script type="text/javascript"> 179 function w1bOverFunction(){ 180 var img = document.getElementById("w1b"); 181 img.style.background = "url(‘../test/images/w1b2.jpg‘) no-repeat 0 0"; 182 } 183 function w1bOutFunction(){ 184 var img = document.getElementById("w1b"); 185 img.style.background = "url(‘../test/images/w1b.jpg‘) no-repeat 0 0"; 186 } 187 function w2bOverFunction(){ 188 var img = document.getElementById("w2b"); 189 img.style.background = "url(‘../test/images/w2b2.jpg‘) no-repeat 0 0"; 190 } 191 function w2bOutFunction(){ 192 var img = document.getElementById("w2b"); 193 img.style.background = "url(‘../test/images/w2b.jpg‘) no-repeat 0 0"; 194 } 195 function w3bOverFunction(){ 196 var img = document.getElementById("w3b"); 197 img.style.background = "url(‘../test/images/w3b2.jpg‘) no-repeat 0 0"; 198 } 199 function w3bOutFunction(){ 200 var img = document.getElementById("w3b"); 201 img.style.background = "url(‘../test/images/w3b.jpg‘) no-repeat 0 0"; 202 } 203 </script>
标签：
原文地址：http://www.cnblogs.com/yuge790615/p/4727508.html
