每一步的编写过程都在代码里面书写了，暂且记录下来
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="This is a meta data" name="dengyexun"> 5 <title>Title</title> 6 <link rel="stylesheet" type="text/css" href="home.html"> 7 <style> 8 body { 9 10 } 11 a:link{ 12 color: burlywood; 13 text-decoration: none; 14 } 15 a:visited{ 16 color: #FF0000; 17 text-decoration: none; 18 } 19 a:hover{ 20 color: blueviolet; 21 text-decoration: underline; 22 } 23 a:active{ 24 color: darkmagenta; 25 } 26 p.fix_pos { 27 font-family: SansSerif, 'Times New Roman'; 28 font-size: 30px; 29 font-style: italic; 30 font-weight: bold; 31 position: fixed; 32 top: 300px; 33 right: 10px; 34 } 35 {# h1 {#} 36 {# color: cornflowerblue;#} 37 {# text-align: center;#} 38 {# }#} 39 #hcolor { 40 color: aquamarine; 41 letter-spacing: 2px; 42 text-align: center; 43 text-shadow: 2px 2px #FF0000; 44 } 45 a { 46 display: block; 47 width: 80px; 48 background-color: #98bf21; 49 } 50 #getIn { 51 height: 20px; 52 width: 100px; 53 background-color: burlywood; 54 } 55 ul.animal{ 56 list-style-type: square; 57 } 58 ul.trans{ 59 list-style-type: circle; 60 } 61 #info{ 62 font-family: SansSerif; 63 width: 40%; 64 border-collapse: collapse; 65 } 66 #info td, #info th{ 67 font-size: 1em; 68 border: 1px solid #98bf21; 69 padding: 3px 7px 2px 7px; 70 } 71 #info th{ 72 font-size: 1.1em; 73 text-align: left; 74 padding-top: 5px; 75 padding-bottom:4px; 76 background-color: #a7c942; 77 color: #ffffff; 78 } 79 #info tr.alt td{ 80 color: #000000; 81 background-color: #eaf2d3; 82 } 83 84 div.ex{ 85 width: 220px; 86 padding: 10px; 87 border-top-style: groove; 88 border-right-style: solid; 89 border-bottom-style: groove; 90 border-left-style: solid; 91 margin: 5px; 92 outline: dotted green; 93 } 94 h2.left_pos{ 95 position: absolute; 96 top: 50px; 97 left: 20px; 98 } 99 h2.right_pos{ 100 position: relative; 101 right: 20px; 102 } 103 #clip_pic{ 104 position: absolute; 105 clip: rect(30px,200px,200px,20px); 106 } 107 div.scroll{ 108 background-color: gray; 109 width: 100px; 110 height: 180px; 111 overflow: scroll; 112 } 113 div.container{ 114 width: 100%; 115 border: 1px solid gray; 116 margin:0px; 117 line-height: 150%; 118 } 119 div.header , div.footer { 120 padding: 0.5em; 121 background-color: gray; 122 clear: left; 123 color: white; 124 } 125 h1.header{ 126 padding: 0px; 127 margin: 0px; 128 } 129 div.left{ 130 float: left; 131 width: 180px; 132 margin: 1px; 133 padding: 1em; 134 } 135 div.content{ 136 margin-left: 190px; 137 border-left: 1px solid gray; 138 padding: 1em; 139 } 140 div.auto_center{ 141 margin-left: auto; 142 margin-right: auto; 143 width: 70%; 144 } 145 div.left { 146 position: absolute; 147 left: 8px; 148 width: 100px; 149 } 150 a.wei:visited { 151 color: #98bf21; 152 } 153 p:first-line{ 154 color: #98bf21; 155 font-family: SansSerif; 156 } 157 p:first-letter{ 158 color: black; 159 font-size: x-large; 160 } 161 h1:before{ 162 content: url("/static/img/dyx.png"); 163 } 164 h1:after{ 165 content:url("/static/img/dyx.png"); 166 } 167 ul{ 168 list-style-type: none; 169 margin: 10px; 170 padding: 0px; 171 } 172 </style> 173 </head> 174 <body> 175 176 <input id="getIn" type="text" name="one"/> 177 <p class="fix_pos">This is a fixed position</p> 178 <script> 179 document.write('hello!') 180 </script> 181 <br> 182 <br> 183 <br> 184 <br> 185 <br> 186 <br> 187 <h2 class="left_pos">This is a relative position</h2> 188 <h2 class="right_pos">This is a relative position</h2> 189 <h2>This is a relative position</h2> 190 191 192 <ul class="animal"> 193 <li>cat</li> 194 <li>dog</li> 195 <li>pig</li> 196 </ul> 197 <ul class="trans"> 198 <li>bike</li> 199 <li>car</li> 200 <li>plane</li> 201 </ul> 202 <table> 203 <tr> 204 <th>list_01</th> 205 <th>list_02</th> 206 <th>list_03</th> 207 </tr> 208 <tr> 209 <td>dog</td> 210 <td>cat</td> 211 <td>bird</td> 212 </tr> 213 <tr> 214 <td>flower</td> 215 <td>green</td> 216 <td>blue</td> 217 </tr> 218 </table> 219 <br> 220 221 <table id="info"> 222 <tr> 223 <th>name</th> 224 <th>age</th> 225 <th>sex</th> 226 </tr> 227 <tr class="alt"> 228 <td>Brown</td> 229 <td>23</td> 230 <td>male</td> 231 </tr> 232 <tr> 233 <td>Alice</td> 234 <td>18</td> 235 <td>female</td> 236 </tr> 237 <tr class="alt"> 238 <td>Bob</td> 239 <td>33</td> 240 <td>male</td> 241 </tr> 242 <tr> 243 <td>Tom</td> 244 <td>17</td> 245 <td>male</td> 246 </tr> 247 <tr class="alt"> 248 <td>Jerry</td> 249 <td>18</td> 250 <td>female</td> 251 </tr> 252 <tr> 253 <td>King</td> 254 <td>5</td> 255 <td>male</td> 256 </tr> 257 </table> 258 259 <div class="ex"> 260 This is a temp 261 I like you 262 I would like to give you some colors see see! 263 </div> 264 265 266 {# <img id="true_pic" src="/static/img/dyx.png" width="300" height="350" alt="this is a picture">#} 267 {# <img id="clip_pic" src="/static/img/dyx.png" width="300" height="300">#} 268 269 <div class="scroll"> 270 键盘上有3个指示灯,左边两个对应于常用的Num lock和Caps Lock键，想必大家都熟悉,下面为大家介绍对应最右边指示灯的Scroll Lock键： 271 Scroll Lock键最早出现在IBM的PC/XT机型的83键盘和AT接口的84键盘上，这个键不仅仅出现在PC机的101键盘上，连苹果机的“增强”型键盘上也加上了该按键。该键在DOS时期用处很大，由于当时显示技术，限制了屏幕只能显示宽25行、长80个字符的文字，在阅读文档时，使用该键能非常方便地翻滚页面。 272 </div> 273 274 <span style="cursor: text"> 275 text 276 </span> 277 <span style="cursor: alias"> 278 alias 279 </span> 280 <span style="cursor: crosshair"> 281 crosshair 282 </span> 283 <span style="cursor: inherit"> 284 inherit 285 </span> 286 287 <br> 288 <br> 289 <br> 290 <div class="container"> 291 <div class="header"><h1 class="header">I am very sad yesterday and today!Because I lost my IDcard</h1> </div> 292 <div class="left">Don't be afraid! I can got it! you must love the life</div> 293 <div class="content">国家科技部国际合作科技项目评审专家；国家科技部人才留学评审专家； 294 301 国际国内学术期刊Neurocomputing, IEEE 会刊，中国科学E辑、自然科学进展、电子学报、软件学报、自动化学报等评审专家</div> 302 <div class="footer">Copyright 2017 by deng</div> 303 304 </div> 305 306 <br> 307 <div class="auto_center"> 308 国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家 309 </div> 310 <br> 311 <br> 312 <a class="wei" href="show.html">点击</a> 313 <p>国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目<br> 314 评审专家国家科技部国际合作科技项目评审专家评审专家国家科技部国际合作科技项目评审专家</p> 315 <ul> 316 <li><a href="home.html">Home</a></li> 317 <li><a href="home.html">News</a></li> 318 <li><a href="home.html">Contact</a></li> 319 <li><a href="home.html">About</a></li> 320 </ul> 321 322 </body> 323 </html>