28-34

時間 2020-02-02

原文原文鏈接

position

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;

        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div id="i1">返回頂部</div>
    <div id="i2"></div>

</body>
</html>

上圖：返回頂部和灰色背景部分屬於在同一層面。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            position: fixed; 
            top: 0;
            right: 0;
        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div id="i1">返回頂部</div>
    <div id="i2"></div>

</body>
</html>

代碼：
position: fixed; 讓返回頂部這個內容懸浮在第2層面，懸浮在灰色背景的上面；
top: 0; right: 0; 讓懸浮的內容出於頂部和右側0的位置。瀏覽器

上圖：返回頂部這個內容懸浮在了灰色背景的上面。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #i1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: white;
            position: fixed;
            bottom: 20px;  <!--懸浮在頁面下方20px的位置-->
            right: 20px;   <!--懸浮在右側20px的位置-->

        }
        #i2{
            height: 5000px;
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <div onclick="GoTop();" id="i1">返回頂部</div>   <!--點擊後調用GoTop()-->
    <div id="i2"></div>
    <script>
        function GoTop(){
            document.documentElement.scrollTop= 0;   /*能夠返回頁面頂部*/
        }
    </script>

</body>
</html>

上2圖：先將滾動條向下滾動，點擊返回頂部後就直接回跳轉到頁面頂部。url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: black;
            color: white;
            position: fixed;
            top:0;
            left: 0;   <!--左側爲0-->
            right: 0;  <!--右側爲0-->
        }
        .pg-body{
            margin-top: 60px;
            background-color: #dddddd;
            height: 5000px;
        }
    </style>
</head>
<body>
    <div class="pg-header">頭部</div>
    <div class="pg-body">內容</div>
</body>
</html>

代碼：
同時設置left: 0;和right: 0; 可讓佔用寬度的100%，且調整上下的滾動條時會一直凍結在固定的位置，與excel凍結首行效果同樣，再去滾動的時候，依然能看到凍結的內容。
pg-body要調整margin-top: 60px;，否則會被pg-header覆蓋設計

上圖：能夠看到即便滾動後，頭部內容依然懸浮在最上面，不會隨着滾動而隱藏。excel

relative + absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 500px;
            height: 300px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
        }
        #i1-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            left: 0;
            bottom: 0;
            position: absolute;
        }
        #i2-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            right: 0;
            bottom: 0;
            position: absolute;
        }
        #i3-1{
            width: 50px;
            height: 50px;
            background-color: black;
            color: red;
            left: -60px;
            top: 0;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="c1" id="i1">
        <div id="i1-1">111</div>
    </div>
    <div class="c1" id="i2">
        <div id="i2-1">222</div>
    </div>

    <div class="c1" id="i3">
        <div id="i3-1">333</div>
    </div>
</body>
</html>

代碼：
absolute能夠根據父集標籤的大小，來定位，但前提是父集標籤的position=relative；
位置設置爲負數，就會定位在父集標籤的外邊。code

上圖：正數定位在父集標籤的裏邊；負數定位到了父集標籤的外邊。htm

position 多層

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
</body>
</html>

代碼：
上下左右都設置爲0，就會覆蓋整個網頁；position: fixed; 會將藍色懸浮在整個頁面的上面。
opacity: 0.7;是透明的程度；若是值是1，就不透明。圖片

上圖：綠色是第一層；藍色懸浮在綠色上面是第二層，因此當前頁面是2層的效果。ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50px;
            right: 100px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代碼：
設置三層效果；經過z-index來決定誰在上層，值越高，越在上層。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50px;
            right: 100px;
            z-index: 10;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代碼：i3設置margin: 0 auto; 想讓其居中，不過沒有任何效果，這是由於當前是懸浮的狀態。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50%;
            right: 50%;
            z-index: 10;

        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代碼：top: 50%; right: 50%;

上圖：將這個懸浮框懸浮在top 50%和 right 50%的地方；效果也生效了，可是注意是白色這個框的右上角當前出於最中間的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            position: fixed;
            background-color: cornflowerblue;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
            z-index: 9;
        }
        #i2{
            height: 5000px;
            background-color: green;
            color: red;
        }
        #i3{
            position: fixed;
            background-color: white;
            height: 400px;
            width: 500px;
            top: 50%;
            right: 50%;
            z-index: 10;
            margin-top: -200px;
            margin-right: -250px;

        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2">123</div>
    <div id="i3">aaa</div>
</body>
</html>

代碼：margin-top: -200px; margin-right: -250px; 設置的高度是400，寬度是500，因此這裏經過margin-top減去一半，margin-right減去一半，這樣就能夠居中了。

上圖：當前是三層且居中的效果。

overflow

hidden 隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;

        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

代碼：咱們設置指定的寬度和高度

上圖：能夠看到圖片超出了咱們指定的寬度和高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

代碼：overflow: hidden; 將超出指定高度和寬度的部分隱藏起來。

上圖：將超出的部分隱藏起來了

auto 滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 200px;
            width: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="i1">
        <img src="1.jpg">
    </div>
</body>
</html>

上圖：超出的部分會出現滾動條

僞類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            line-height: 48px;
            background-color: deepskyblue;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            margin: 0 50px;
            color: white;
        }
        .pg-header .menu:hover{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a>LOGO</a>
            <a class="menu">所有</a>
            <a class="menu">42區</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">abc</div>
    </div>
</body>
</html>

代碼：hover是僞類，當鼠標放在指定的標籤上時，就會根據你設計的效果變化，咱們這裏是設計了背景變成綠色。

上圖：鼠標懸浮所在的標籤，背景色變成綠色了。

background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 500px;
            width: 980px;
            background-image: url("2.png");
        }
        img{

        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

代碼：經過 background-image: url("2.png"); 來設置背景圖片

上圖：默認狀況，當圖片比背景尺寸小時，會進行橫向和垂直的平鋪。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 500px;
            width: 980px;
            background-image: url("2.png");
            background-repeat: repeat-x;
        }
        img{

        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

代碼：
默認狀況下平鋪效果屬於background-repeat: repeat;
background-repeat: repeat-x; 是隻進行橫着平鋪

ackground-repeat: repeat-y;

代碼：ackground-repeat: repeat-y; 只進行垂直平鋪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 100px;
        }
        #i2{
            height: 100px;
            background-image: url("icon_18_118.png");
            background-repeat: no-repeat;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
</body>
</html>

代碼：不重複圖片

上圖：圖片沒有重複複製

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            height: 100px;
        }
        #i2{
            height: 20px;
            width: 20px;
            background-image: url("icon_18_118.png") ;
            background-repeat: no-repeat;
            border: 1px solid red;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div id="i1"></div>
    <div id="i2"></div>
</body>
</html>

代碼：默認background-position: 0 0; 第一個值是X軸，橫向移動；第二個值是y軸，垂直移動；都是0不會移動圖標位置

background-position-y: -28px;

代碼：進行圖標垂直移動，正數是向下移動，負數是向上移動。

上圖：這樣能夠實現一個位置多個圖標變化

上圖：在瀏覽器中添加一個background，而後點擊箭頭能夠看到下面有不少選項，也就是說若是隻配置background的話，後面每一個位置能夠跟相應的參數，第2個位置是background-position-x，第3個位置是background-position-y。若是咱們配置的屬性較多的話，能夠經過這種方式在指定的位置配置相應的值便可，這樣能夠減小配置量。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。