python全棧開發 * background 定位 z-index * 180813

時間 2019-11-19
標籤 python 開發 background 定位 index 欄目 Python 简体版
原文原文鏈接
I   back-ground    一.顏色的表示:    1.單詞    2.rgb表示法        rgb:紅色  綠色 藍色 三原色            光學顯示器每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。            用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。        (1).255 說明是純色.        (2)黑色：            background-color: rgb(0,0,0);            光學顯示器，每一個元件都不發光，黑色的        (3)白色：            background-color: rgb(255,255,255);        (4)顏色能夠疊加，好比黃色就是紅色和綠色的疊加：            background-color: rgb(255,255,0);    3.十六進制表示法    二.background-color屬性表示背景顏色    三.background-img:表示設置該元素的背景圖片(那麼發現默認的背景圖片，水平方向和垂直方向都平鋪)    四.background-repeat:表示設置該元素平鋪的方式    (一).屬性值    1.repeat                    默認。背景圖像將在垂直方向和水平方向重複。        (1)background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置        (2)屬性值:            值  描述            top left            top center            top right            center left            center center            center right            bottom left            bottom center            bottom right        注意:若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。默認值：0 0；這兩個值必須挨在一塊兒。        ***:若是是正值調整背景圖片的位置;        ***:若是是負值在一張大圖上摳小圖.    2.repeat-x                  背景圖像將在水平方向重複    3.repeat-y                  背景圖像將在垂直方向重複    4.no-repeat                 背景圖像將僅顯示一次    5.inherit                   規定應該從父元素繼承 background-repeat 屬性的設置    (二).精靈圖技術;    1.CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，        而後利用css的背景定位來顯示須要顯示的圖片部分    2.CSS 雪碧圖應用原理：        只有一張大的合併圖， 每一個小圖標節點如何顯示單獨的小圖標呢？        其實就是 截取 大圖一部分顯示，而這部分就是一個小圖標。    3.使用雪碧圖的好處:        (1)、利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；        (2)、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。        (3)、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。        (4)、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便    4.不足：        1）CSS雪碧的最大問題是內存使用        2）拼圖維護比較麻煩        3）使CSS的編寫變得困難        4）CSS 雪碧調用的圖片不能被打印    5.咱們可使用background綜合屬性製做通天banner，什麼是通天banner呢，就是通常咱們電腦的屏幕都是1439.可是設計師給我        們的banner圖都會比這個大，       那麼咱們能夠此屬性來製做通天banner。        background:  red  url('./images/banner.jpg')  no-repeat   center top;    示例:    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            *{                padding:0;                margin:0;            }            .cont{                width:100%;                height:1000px;            }            .廣告{                width:200px;                height:200px;                background-image:url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);                background-repeat:no-repeat;                border:1px solid black;                background-position:0 -200px;                background-attachment:fixed;            }        </style>    </head>    <body>        <div class="cont">            <div class="廣告">            </div>        </div>    </body>     五.background-attachment     設置fixed以後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動 II   Iconfont(字體圖標) 示例:         <!DOCTYPE html>        <html lang="en">        <head>            <meta charset="UTF-8">            <title>Title</title>            <style>                @font-face {font-family: 'iconfont';            src: url('iconfont.eot');            src: url('iconfont.eot?#iefix') format('embedded-opentype'),            url('iconfont.woff') format('woff'),            url('iconfont.ttf') format('truetype'),            url('iconfont.svg#iconfont') format('svg');        }                .iconfont{            font-family:"iconfont" !important;            font-size:16px;font-style:normal;            -webkit-font-smoothing: antialiased;            -webkit-text-stroke-width: 0.2px;            -moz-osx-font-smoothing: grayscale;}            </style>        </head>        <body>            <i class="iconfont">&#xe629;</i>        </body>        </html>III     定位定位有三種： 相對定位 絕對定位 固定定位一.相對定位:1.定義:相對於本身原來的位置定位2.現象:    (1).若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。    (2).設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right3.特性:    1.不脫標    2.形影分離    3.老家留坑（佔着茅房不拉屎，噁心人）4.用途:    1.微調元素位置    2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。5.參考點;    本身原來的位置作參考點。6.示例:微調元素    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title></title>        <style>            a{                position: relative;                top: -5px;            }            input{                font-size: 30px            }        </style>    </head>    <body>        <a href="#">百度一下</a>        <!-- <img src="../day49/images/2.jpg" alt=""> -->        <input type="text">    </body>    </html>二.絕對定位;1.特性:(1).脫標(2).作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高2.參考點;    (1)單獨一個絕對定位的盒子        *  當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置        ** 當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置    (2)以父輩盒子做爲參考點    *父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。    **果父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點    ***不單單是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點3.做用.    頁面佈局4.絕對定位的盒子居中    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            *{                padding:0;                margin:0;            }            .father{                width:100%;                height:1000px;                background-color: wheat;                position:relative;                top:30px;                border:1px solid black;            }            .child1{                width:200px;                height:200px;                background-color:blue;                position:absolute;                top:50px;                left:50%;                margin-left:-100px;            }        </style>    </head>    <body>        <div class="father">            <div class="child1"></div>            <!--<div class="child2"></div>-->        </div>    </body>    </html>注意:/*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/20  }三.固定定位;固定當前的元素不會隨着頁面滾動而滾動1.特性:    (1).脫標    (2).遮蓋，提高層級    (3).固定不變2.參考點:    (1).設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點    (2).若是用bottom描述，那麼是以瀏覽器的左下角爲參考點3.做用:    (1).返回頂部欄    (2).固定導航欄    (3).小廣告示例:    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style >            .box1{               width:200px;                height:200px;                background-color:pink;                position:fixed;                bottom:50px;                right:5px;            }                .box2{               width:500px;                height:1000px;                background-color:yellow;            }        </style>    </head>    <body>        <div class="box1"></div>        <div class="box2"></div>    </body>    </html>四.z-index特性:1.z-index 值表示誰壓着誰，數值大的壓蓋住數值小的2.只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index3.z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，    誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。4.從父現象：父親慫了，兒子再牛逼也沒用示例:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>   <style>      .tianliang{         width: 300px;         height: 300px;         background-color: green;         position: relative;         z-index: 2;         border-radius: 50%;      }      .lin{         width: 300px;         height: 300px;         background-color: yellow;         position: relative;         z-index: 3;      }      .sendie{         width: 100px;         height: 100px;         background-color: red;         position: absolute;         top: 280px;         left: 350px;         z-index: 2;      }      .timi{         width: 100px;         height: 100px;         background-color: black;         position: absolute;         top: -50px;         left: 350px;      }   </style></head><body>   <div class="tianliang">      <div class="sendie"></div>   </div>   <div class="lin">      <div class="timi"></div>   </div></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。