基础的CSS描绘测试
时间：2020-08-11 09:25:50
收藏：0
阅读：82
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>测试CSS页面</title> 6 <style> 7 body{ 8 background-color: #d0e4fe; 9 background-image: url("timg.jpg");/*CSS 中给字段设置图片背景*/ 10 /*background-repeat: repeat-x;!*图像只在水平方向平铺 (repeat-x)*!*/ 11 background-repeat: no-repeat;/*设置背景图像是否及如何重复*/ 12 background-attachment: fixed;/*图像不会随着页面的其他部分滚动*/ 13 background-position: right top;/*利用 background-position 属性改变图像在背景中的位置*/ 14 /*background: url("timg.jpg") no-repeat right top;!*属性合并在同一个属性中*!*/ 15 } 16 /*h1 {*/ 17 /* color: orange;*/ 18 /* text-align: center;*/ 19 /*}*/ 20 p{/*CSS 中p标签来定义*/ 21 font-family: "Times New Roman"; 22 font-size: 20px; 23 } 24 p.para_inden{ 25 text-indent: 50px;/*段落缩进*/ 26 } 27 #para1{/*CSS 中 id 选择器以 "#" 来定义*/ 28 text-align: center; 29 color: red; 30 } 31 .center{/*CSS 中 class 选择器以 "." 来定义*/ 32 text-align: center; 33 } 34 p.center1{/*CSS 中 所有的 p 元素使用 class="center" 让该元素的文本居中*/ 35 text-align: center; 36 } 37 p.just{text-align: justify;}/*文本两端对齐*/ 38 a{text-decoration: none;}/*删除链接下划线*/ 39 h1.underscore1{ 40 text-decoration: overline;/*上划线*/ 41 text-transform: uppercase;/*全部大写*/ 42 } 43 h2.underscore2{ 44 text-decoration: line-through;/*中划线*/ 45 text-transform: lowercase;/*全部小写*/ 46 } 47 h3.underscore3{ 48 text-decoration: underline;/*下划线*/ 49 text-transform: capitalize;/*全部首字母大写*/ 50 } 51 h1.letter_space1{letter-spacing: 2px;} 52 h1.letter_space2{letter-spacing: -3px;} 53 h1.letter_space3{word-spacing: 30px;} 54 h1.letter_space4{word-spacing: -30px;} 55 p.small{line-height: 70%;} 56 p.big{line-height: 200%;} 57 p.white_space{white-space: nowrap;} 58 img.top{vertical-align: text-top;} 59 img.bottom{vertical-align: text-bottom;} 60 h1.text_shadow1{text-shadow: -5px -5px #FFFF00;} 61 h1.text_shadow2{text-shadow: 2px 2px #FF0000;} 62 63 p.serif{font-family: "Times New Roman",Times,serif;} 64 p.sansserif{font-family: Arial, Helvetica,sans-serif;} 65 66 p.normal{font-style: normal;} 67 p.italic{font-style: italic;}/* italic 是使用文字的斜体*/ 68 p.oblique{font-style: oblique;}/* oblique 是让没有斜体属性的文字倾斜*/ 69 70 p.normal1{font-weight: normal;} 71 p.light{font-weight: lighter;} 72 p.thick{font-weight: bold;} 73 p.thicker{font-weight: 900;} 74 75 p.normal2{font-variant: normal;} 76 p.small1{font-variant: small-caps;} 77 78 p.all{font: italic bold 12px/30px Georgia,serif;} 79 80 a.diff_style:link{/* 未访问连接*/ 81 color: #000000; 82 background-color: #B2FF99; 83 text-decoration: none; 84 } 85 a.diff_style:visited{/* 已访问连接*/ 86 color: #00FF00; 87 background-color: #FFFF85; 88 text-decoration: none; 89 } 90 a.diff_style:hover{/* 鼠标移动到链接上*/ 91 color: #FF00FF; 92 background-color: #FF704D; 93 text-decoration: underline; 94 } 95 a.diff_style:active{/* 鼠标点击时*/ 96 color: #0000FF; 97 background-color: #FF704D; 98 text-decoration: underline; 99 }/* 1、a:hover 必须跟在 a:link 和 a:visited后面；2、a:active 必须跟在 a:hover后面*/ 100 101 ul.a{list-style-type: circle;} 102 ul.b{list-style-type: square;} 103 ul.b1{list-style-image: url("timg.jpg")} 104 /*ul.b{list-style: square url("timg.jpg")}*/ 105 ol.c{list-style-type: upper-roman;} 106 ol.d{list-style-type: lower-alpha;} 107 li.link{display: inline;}/*inline把列表项显示为内联元素;block把span元素作为块元素;display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间;visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间*/ 108 109 table,td,th{border: 1px solid black;border-collapse: collapse;}/*border-collapse: collapse表格单边框*/ 110 /*border-style：属性1，属性2，属性3，属性4------上->右->下->左 111 border-style：属性1，属性2，属性3------上->左右->下 112 border-style：属性1，属性2------上下->左右 113 border-style：属性1-------------上下左右属性相同*/ 114 table{width: 100%;} 115 caption{caption-side: bottom;} 116 th{ 117 height: 50px; 118 background-color: green; 119 color: white; 120 } 121 td{ 122 text-align: center; 123 height: 30px; 124 vertical-align: bottom; 125 padding: 55px;/*表中的内容与边框之间的距离*/ 126 } 127 128 p.none{border-style: none;} 129 p.dotted{border-style: dotted;} 130 p.dashed{border-style: dashed;} 131 p.solid{ 132 border-style: solid; 133 /*border-top-style: solid;!*单独设置各边top；right；bottom；left*!*/ 134 border-top-color: #FF704D;/*单独设置各边top；right；bottom；left*/ 135 outline-style: dotted;/*绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，类似边框border*/ 136 } 137 p.double{border-style: double;} 138 p.groove{border-style: groove;} 139 p.ridge{border-style: ridge;} 140 p.inset{border-style: inset;} 141 p.outset{border-style: outset;} 142 p.hidden{border-style: hidden;} 143 144 p.ex1{margin-top: 2cm;} 145 p.pos_fixed{top:30px;right:5px;position: fixed;}/*fixed即使窗口是滚动的它也不会移动;relative相对定位元素的定位是相对其正常位置;absolute相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>*/ 146 div.sticky{ 147 position: sticky; 148 top: 0; 149 padding: 5px; 150 background-color: #FF704D; 151 border: 2px solid #FFFF00; 152 } 153 img.z_index{ 154 position: absolute; 155 /*left: 0px;*/ 156 /*top: 0px;*/ 157 z-index: -1; 158 clip: rect(0px,100px,200px,0px);/*被剪裁成这种形状，并显示出来*/ 159 /*overflow属性创建一个滚动条;style="cursor:crosshair"改变光标*/ 160 } 161 p img.float{float: right;}/*clear:both;属性指定元素两侧不能出现浮动元素*/ 162 163 .dropbtn{/* 下拉按钮样式 */ 164 background-color: #FF704D; 165 color: white; 166 padding: 16px; 167 font-size: 16px; 168 border: none; 169 cursor: pointer;/*鼠标样式*/ 170 } 171 .dropdown{/* 容器 <div> - 需要定位下拉内容 */ 172 position: relative; 173 display: inline-block; 174 } 175 .dropdown-content{/* 下拉内容 (默认隐藏) */ 176 display: none; 177 position: absolute; 178 background-color: #FFFF00; 179 min-width: 160px; 180 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 181 padding: 12px 16px; 182 } 183 .dropdown-content a{/* 下拉菜单的链接样式 */ 184 color: black; 185 padding: 12px 16px; 186 text-decoration: none;/* 下划线去除*/ 187 display: block; 188 } 189 .dropdown-content a:hover{background-color: #00FF00}/* 鼠标移上去后修改下拉菜单链接颜色 */ 190 191 .dropdown:hover .dropdown-content{display: block;}/*在鼠标移上去后显示下拉菜单；:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。*/ 192 193 .dropdown:hover .dropbtn{background-color: #0000FF}/* 当下拉内容显示后修改下拉按钮的背景颜色 */ 194 195 .tooltip{/* Tooltip 容器 */ 196 position: relative; 197 display: inline-block; 198 border-bottom: 1px dotted black;/* 悬停元素上显示点线 */ 199 } 200 .tooltip .tooltiptext{/* Tooltip 文本 */ 201 visibility: hidden; 202 width: 120px; 203 background-color: black; 204 color: #0000FF; 205 text-align: center; 206 border-radius: 6px;/* 给元素设置圆角边框 */ 207 padding: 5px 0; 208 /* 定位 */ 209 position: absolute; 210 z-index: 1; 211 /*top: -5px;*/ 212 /*left: 105%;*//*文本显示在左侧;*/ 213 /*right: 105%;!*文本显示在右侧;*!*/ 214 /*top: 100%;!*文本显示在上面;*!*/ 215 bottom: 100%;/*文本显示在下面;*/ 216 left: 50%; 217 margin-left: -60px;/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */ 218 /* 淡入 - 1秒内从 0% 到 100% 显示: */ 219 opacity: 0; 220 transition: opacity 1s; 221 } 222 .tooltip .tooltiptext::after{ 223 content: ""; 224 position: absolute; 225 top: 100%;/*在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部*/ 226 left: 50%;/*left: 50% 用于居中对齐箭头*/ 227 margin-left: -5px; 228 border-width: 5px; 229 border-style: solid; 230 border-color: black transparent transparent transparent;/* 设置顶部边框为黑色，其他是透明的 */ 231 } 232 .tooltip:hover .tooltiptext{ 233 visibility: visible;/* 鼠标移动上去后显示提示框 */ 234 opacity: 1; 235 } 236 237 div ol{ 238 counter-reset: section1; 239 list-style-type: none; 240 } 241 div li::before{ 242 counter-increment: section1; 243 content: counters(section1,".") " "; 244 } 245 246 247 </style> 248 </head> 249 <body> 250 <h1>CSS实例！</h1> 251 <p class="para_inden">这是一个段落。</p> 252 <hr> 253 <p id="para1">Hello World!</p><!--ID属性不要以数字开头--> 254 <hr> 255 <h1 class="center">标题居中</h1><!--类名的第一个字符不能使用数字--> 256 <hr> 257 <h1 class="center1">这个标签不受影响</h1> 258 <p class="center1">这个段落居中对齐</p> 259 <hr> 260 <p class="just">两端对齐</p> 261 <hr> 262 <a href="http://www.baidu.com" target="_blank">百度一下</a> 263 <h1 class="underscore1">This is heading 1</h1> 264 <h2 class="underscore2">This is heading 2</h2> 265 <h3 class="underscore3">This is heading 3</h3> 266 <hr> 267 <p>增加或减少字符之间的空间</p> 268 <h1 class="letter_space1">This is heading 1</h1> 269 <h1 class="letter_space2">This is heading 2</h1> 270 <p>增加或减少单词之间的空间</p> 271 <h1 class="letter_space3">This is heading 3</h1> 272 <h1 class="letter_space4">This is heading 4</h1> 273 <hr> 274 <hr> 275 <p>指定在一个段落中行之间的空间</p> 276 <p>这是一个标准行高的段落。<br> 277 这是一个标准行高的段落。<br> 278 大多数浏览器的默认行高约为110%至120%。<br></p> 279 <p class="small">这是一个更小行高的段落。<br> 280 这是一个更小行高的段落。<br> 281 这是一个更小行高的段落。<br> 282 这是一个更小行高的段落。<br> 283 这是一个更小行高的段落。<br> 284 </p> 285 <p class="big">这是一个更大行高的段落。<br> 286 这是一个更大行高的段落。<br> 287 这是一个更大行高的段落。<br> 288 这是一个更大行高的段落。<br> 289 这是一个更大行高的段落。<br> 290 </p> 291 <hr><p>禁用一个元素内的文字环绕（即不换行）</p> 292 <p class="white_space">这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 293 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 294 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 295 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。 296 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。</p> 297 <hr><p>设置文本的垂直对齐图像</p> 298 <p>一个<img src="test01.jpg" alt="测试图片" width="270" height="50"/>默认对齐的图像。</p> 299 <p>一个<img class="top" src="test01.jpg" alt="测试图片" width="270" height="50"/>text-top对齐的图像。</p> 300 <p>一个<img class="bottom" src="test01.jpg" alt="测试图片" width="270" height="50"/>text-bottom对齐的图像。</p> 301 <hr><p>设置文本阴影：Text-shadow 效果</p> 302 <h1 class="text_shadow1">Text-shadow 效果1</h1> 303 <h1 class="text_shadow2">Text-shadow 效果2</h1> 304 <hr><h1>CSS font-family</h1> 305 <p class="serif">这一段字体是 Times New Roman</p> 306 <p class="sansserif">这一段字体是 Arial.</p> 307 <hr><h1>斜体文字</h1> 308 <p class="normal">这是一个段落，正常。normal</p> 309 <p class="italic">这是一个段落，斜体。italic</p> 310 <p class="oblique">这是一个段落，斜体。oblique</p> 311 <hr><h1>设置字体的加粗</h1> 312 <p class="normal1">这是一个段落，正常。normal</p> 313 <p class="light">这是一个段落。light</p> 314 <p class="thick">这是一个段落。thick</p> 315 <p class="thicker">这是一个段落。thicker</p> 316 <hr><h1>设置字体的转变</h1> 317 <p class="normal2">My name is Hege Refsnes.</p> 318 <p class="small1">My name is Hege Refsnes.</p> 319 <hr><h1>字体属性设置在一个声明之内</h1> 320 <p class="all">My name is Hege Refsnes.</p> 321 <hr><h1>链接样式</h1> 322 <a class="diff_style" href="http://www.baidu.com" target="_blank">这是一个连接</a> 323 <hr><h1>列表属性</h1> 324 <p>无序列表实例：</p> 325 <ul class="a"> 326 <li>咖啡</li> 327 <li>茶</li> 328 <li>饮料</li> 329 </ul> 330 <ul class="b"> 331 <li>咖啡</li> 332 <li>茶</li> 333 <li>饮料</li> 334 </ul> 335 <ul class="b1"> 336 <li>咖啡</li> 337 <li>茶</li> 338 <li>饮料</li> 339 </ul> 340 <p>有序列表实例：</p> 341 <ol class="c"> 342 <li>咖啡</li> 343 <li>茶</li> 344 <li>饮料</li> 345 </ol> 346 <ol class="d"> 347 <li>咖啡</li> 348 <li>茶</li> 349 <li>饮料</li> 350 </ol> 351 <hr><h1>链接列表的水平显示</h1> 352 <ul> 353 <li class="link"><a href="timg.jpg" target="_blank">HTML</a></li> 354 <li class="link"><a href="timg.jpg" target="_blank">CSS</a></li> 355 <li class="link"><a href="timg.jpg" target="_blank">JavaScript</a></li> 356 <li class="link"><a href="timg.jpg" target="_blank">XML</a></li> 357 </ul> 358 <hr><h1>表格</h1> 359 <table> 360 <caption>Table 1.1 Customers</caption> 361 <tr> 362 <th>Firstname</th> 363 <th>Lastname</th> 364 </tr> 365 <tr> 366 <td>Peter</td> 367 <td>Griffin</td> 368 </tr> 369 <tr> 370 <td>Lois</td> 371 <td>Griffin</td> 372 </tr> 373 </table> 374 <hr><h1>边框样式</h1> 375 <p class="none">无边框</p> 376 <p class="dotted">虚线边框</p> 377 <p class="dashed">虚线边框</p> 378 <p class="solid">实线边框</p> 379 <p class="double">双边框</p> 380 <p class="groove">凹槽边框</p> 381 <p class="ridge">垄状边框</p> 382 <p class="inset">嵌入边框</p> 383 <p class="outset">外凸边框</p> 384 <p class="hidden">外凸边框</p> 385 <hr><h1>margin外边距</h1> 386 <p>一个没有指定边距大小的段落</p> 387 <p class="ex1">一个2厘米上边距的段落</p> 388 <p>一个没有指定边距大小的段落</p> 389 <hr><h1>元素的位置相对于浏览器窗口是固定位置</h1> 390 <p class="pos_fixed">这段文字不会随着窗口的下滑滚动，而变动</p> 391 <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> 392 <hr><h1>sticky 定位,粘性定位,基于用户的滚动位置来定位</h1> 393 <p>尝试滚动页面</p> 394 <div class="sticky">这是一个粘性定位！</div> 395 <div> 396 <p>滚动</p> 397 <p>来回滚动</p> 398 <p>滚动</p> 399 <p>来回滚动</p> 400 <p>滚动</p> 401 <p>来回滚动</p> 402 </div> 403 <hr><h1>重叠的元素</h1> 404 <p>This is a heading</p> 405 <img src="timg.jpg" class="z_index" width="500" height="320"> 406 <p>因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后</p> 407 <hr><h1>图像是右浮动，下面的文本流将环绕在它左边</h1> 408 <p>在下面的段落中，我们添加了一个<b>float:right</b>的图片。导致图片将会浮动在段落的右边。</p> 409 <p> 410 <img src="timg.jpg" class="float" width="500" height="320"> 411 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 412 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 413 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 414 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 415 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 416 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 417 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 418 因为图像元素设置了z-index属性值为-1，所以它会显示在文字之后 419 </p> 420 <hr><h1>使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果</h1> 421 <div class="dropdown"> 422 <button class="dropbtn">下拉菜单</button> 423 <div class="dropdown-content"> 424 <a href="http://www.baidu.com" target="_blank">百度1</a> 425 <a href="http://www.baidu.com" target="_blank">百度2</a> 426 <a href="http://www.baidu.com" target="_blank">百度3</a> 427 </div> 428 </div> 429 <hr><h1>提示框(Tooltip)</h1> 430 <div style="text-align: center;"> 431 <div class="tooltip">鼠标移动到这来 432 <span class="tooltiptext">提示文本</span> 433 </div> 434 </div> 435 <hr><h1>计数器也可用于列表</h1> 436 <div> 437 <ol> 438 <li>item</li> 439 <li>item 440 <ol> 441 <li>item</li> 442 <li>item</li> 443 <li>item 444 <ol> 445 <li>item</li> 446 <li>item</li> 447 <li>item</li> 448 </ol> 449 </li> 450 </ol> 451 </li> 452 <li>item</li> 453 <li>item</li> 454 </ol> 455 <ol> 456 <li>item</li> 457 <li>item</li> 458 </ol> 459 </div> 460 461 462 </body> 463 </html>
评论（0）