欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解

  發(fā)布時間：2016-07-11 11:07:20   作者：佚名   我要評論
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、position：fixed

    鎖定位置（相對于瀏覽器的位置），例如有些網(wǎng)站的右下角的彈出窗口。

示例：

二、position：absolute

    絕對位置：

    1.外層沒有position：absolute（或relative）；那么div相對于瀏覽器定位，如下圖中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

    2.外層有position：absolute（或relative）；那么div相對于外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

示例：

三、position：relative

相對位置：

如下圖，相對于把此div包含住的div的某個位置進行固定。如果外層沒有包含他的，那就相對于瀏覽器進行相對位置的固定。

示例：

四、分層（z-index）

    在z軸方向分層，可以理解為分成一摞紙，層數(shù)越高越靠上。

在上面relative的示例中，我們看到了aa遮住了a，這是因為后寫代碼的顯示級別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa。如下：

示例：

五、float：left、right

      Left、right時不用給他規(guī)定位置（left、top），直接相對于瀏覽器。若外部被包裹，相對于外部div的除去一行的位置的左上或右上顯示。

附加：1、 overflow：hidden；    //超出部分隱藏；scroll，顯示出滾動條；

              <div ></div>   //截斷流

         2、cursor：pointer   鼠標指到上面時的形狀；

         3、半透明效果：

             <div class="box">透明區(qū)域<div>

             在樣式表中的代碼為：

             .box

             {

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

             }

 

綜上練習實例：做毒霸網(wǎng)址大全的部分格式布局

html代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  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-8" />  
  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>  

網(wǎng)頁運行顯示效果圖：

以上這篇HTML基礎(chǔ)知識——css樣式表,樣式屬性,格式與布局詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

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

相關(guān)文章

  • HTML外部樣式表如何引入CSS樣式

    這篇文章主要介紹了HTML外部樣式表如何引入CSS樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習
    2020-12-10

  • HTML基礎(chǔ)必看——全面了解css樣式表

    下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看——全面了解css樣式表。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML (css樣式規(guī)范)必看篇

    下面小編就為大家?guī)硪黄狧TML (css樣式規(guī)范)必看篇。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-27

  • html動態(tài)加載css樣式和js腳本示例

    這篇文章主要介紹了html動態(tài)加載css樣式和js腳本示例,需要的朋友可以參考下
    2014-04-16

  • 將html標簽在瀏覽器居中顯示的css樣式

    在布局過程中為了某些需求，將html標簽在瀏覽器居中顯示是很常見的做法，下面有個不錯的示例，大家可以參考下
    2014-04-15

  • 通過CSS樣式實現(xiàn)的html背景色漸變效果

    在html中可以輕松實現(xiàn)背景色漸變的下面是一個通過CSS實現(xiàn)的示例，大家若感興趣，可以參考下
    2014-03-24

  • html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式

    突然想起幾年前用過的一個隱藏樣式代碼，有些時候用它非常方便，比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到，那就加上他，嘿嘿，就隱身了,需要的朋友可以了解下
    2012-12-21

  • XHTML語言默認的CSS樣式

    html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li {
    2008-10-17

  • HTML嵌入CSS樣式的四種實現(xiàn)方法

    CSS 樣式既可以作為單獨的文件（.css類型的文件）引入到 HTML 文檔中，本文主要介紹了HTML嵌入CSS樣式的四種實現(xiàn)方法，具有一定的參考價值，感興趣的可以了解一下
    2023-11-03

最新評論