HTML基本专业知识——css款式表,款式特性,文件格

1、positionfixed

    锁住部位(相对访问器的部位),比如一些网站的右下角的弹出对话框。

示例:

2、positionabsolute

    肯定部位:

    1.外层沒有position:absolute(或relative);那末div相对访问器精准定位,以下图中b(间距访问器右侧框为50像素,间距下边框为20像素)。

    2.外层有position:absolute(或relative);那末div相对外层边框精准定位,以下图中bb(间距d的右侧框50像素,间距d的下边框为20像素)。

示例:

3、positionrelative

相对性部位:

以下图,相对把此div包括住的div的某个部位开展固定不动。假如外层沒有包括他的,那就相对访问器开展相对性部位的固定不动。

示例:

4、分层(z-index

    z轴方位分层,能够了解为分为1摞纸,层数越高越靠上。

在上面relative的示例中,大家看到了aa遮挡住了a,这是由于后写编码的显示信息级別越靠前,那末在不更改编码次序的状况下怎样让a盖住aa。以下:

示例:

5、floatleftright

      Leftright时无需给他要求部位(lefttop),立即相对访问器。若外界被包裹,相对外界div的去除1行的部位的左上或右上显示信息。

额外:1、 overflow:hidden;    //超过一部分掩藏;scroll,显示信息出翻转条;

              <div ></div>   //断开流

         2、cursor:pointer   电脑鼠标指到上面时的样子;

         3、半全透明实际效果:

             <div class="box">全透明地区<div>

             在款式表格中的编码为:

             .box

             {

             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

             }

 

综上训练案例:做毒霸网站地址大全的一部分文件格式合理布局

html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />  
  5. <title>无题目文本文档</title>  
  6. <style type="text/css">  
  7. .a   
  8. {   
  9.     border:5px solid blue;   
  10.     width:1000px;   
  11.     height:100px;   
  12.     margin:10px;   
  13.     left:150px;   
  14.     top:80px;   
  15.     position:absolute;}   
  16. .b   
  17. {   
  18.     border:5px solid blue;   
  19.     width:240px;   
  20.     height:200px;   
  21.     margin:10px;   
  22.     left:150px;   
  23.     top:200px;   
  24.     position:absolute;}   
  25. .c   
  26. {   
  27.     border:5px solid blue;   
  28.     width:740px;   
  29.     height:300px;   
  30.     margin:10px;   
  31.     left:410px;   
  32.     top:200px;   
  33.     position:absolute;}   
  34. .d   
  35. {   
  36.     border:5px solid blue;   
  37.     width:740px;   
  38.     height:200px;   
  39.     margin:10px;   
  40.     left:410px;   
  41.     top:520px;   
  42.     position:absolute;}   
  43. .e   
  44. {   
  45.     border:5px solid blue;   
  46.     width:240px;   
  47.     height:1500px;   
  48.     margin:10px;   
  49.     left:150px;   
  50.     top:420px;   
  51.     position:absolute;}   
  52. .f   
  53. {   
  54.     border:5px solid blue;   
  55.     width:240px;   
  56.     height:150px;   
  57.     margin:10px;   
  58.     left:150px;   
  59.     top:1940px;   
  60.     position:absolute;}   
  61. .g   
  62. {   
  63.     border:5px solid blue;   
  64.     width:740px;   
  65.     height:1350px;   
  66.     margin:10px;   
  67.     left:410px;   
  68.     top:740px;   
  69.     position:absolute;}       
  70. .h   
  71. {   
  72.     border:5px solid blue;   
  73.     width:1000px;   
  74.     height:200px;   
  75.     margin:10px;   
  76.     left:150px;   
  77.     top:2110px;   
  78.     position:absolute;}   
  79. .i   
  80. {   
  81.     border:5px solid blue;   
  82.     width:1000px;   
  83.     height:200px;   
  84.     margin:10px;   
  85.     left:150px;   
  86.     top:2330px;   
  87.     position:absolute;}   
  88. </style>  
  89. </head>  
  90.   
  91. <body bgcolor="#F0F0F0">  
  92. <div class="a">a</div>  
  93. <div class="b">b</div>  
  94. <div class="c">c</div>  
  95. <div class="d">d</div>  
  96. <div class="e">e</div>  
  97. <div class="f">f</div>  
  98. <div class="g">g</div>  
  99. <div class="h">h</div>  
  100. <div class="i">i</div>  
  101. </body>  
  102. </html>  

网页页面运作显示信息实际效果图:

以上这篇HTML基本专业知识——css款式表,款式特性,文件格式与合理布局详解便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/H2921306656/archive/2016/07/10/5658870.html