Python自動化開發學習15-css補充內容

時間  2021-01-30
標籤 css html 瀏覽器 app ide 佈局 學習 測試 字體 url 欄目 Python 简体版
原文   原文鏈接

上節回顧

上一節學習的內容，有一下幾點，能夠注意一下。或者說推薦這麼作。css

class能夠設置多個值-css樣式重用

能夠給一個標籤設置多個class值，這樣咱們能夠爲每一個class應用一種樣式。標籤有多個class的話，就爲這個標籤應用了多個樣式。而且以後別的標籤要求重用其中的部分樣式，只須要設置那個class就行了。
要設置多個class的值，只須要用空格隔開每一個值便可。下面的例子分別設置了背景色、高度、寬度、外框，而後div的設置了多個class：html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
        }
        .c2{
            height: 50px;
        }
        .c3{
            width: 200px;
        }
        .c4{
            border: 3px solid black;
        }
    </style>
</head>
<body>
<div class="c1 c2 c3 c4"></div>
<div class="c1 c2 c4"></div>
</body>

div作頁面佈局的建議

把整個網頁先從上到下分紅若干塊，每一塊都按下面的思路。
先寫第一層div，能夠設置背景色，若是有須要設置高度（height）和垂直居中（line-height），設了高度就是固定的高度，咱們要確保內部的元素不會超出。不設高度，這個div的高度就靠內部的元素撐起來。
不要設置寬度。讓它能夠撐滿一整塊。
再寫第二層div，這個設置一個像素的寬度。這樣你整塊的內容都限制在這個區域內。若是頁面寬度過小，頁面下方會出現滾動條，而不會致使這裏面的內容會混亂。
第三層開始能夠寫你的內容，能夠繼續用div也能夠用別的標籤，寬度可使用百分比了。繼續用像素也ok，不過若是第二次的寬度要調整，而且裏面寬度用的是百分比的話，貌似就是自動調整好了。若是用了float，最後不要忘記clear。瀏覽器

<body>
<div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;">
    <div class="lv2" style="width: 800px;">
        <div style="width: 30%;float: left;">左邊的內容</div>
        <div style="width: 70%;float: left;">中間的內容</div>
        <div style="clear: both;"></div>
    </div>
</div>
</body>

img標籤的建議

在a標籤裏的img標籤（圖片），可能在IE上打開的時候，在最外面有一圈藍色的邊框。雖然我在本身的IE11上試了，並無，可能舊版本還有這個問題。這個邊框的顏色應該就是超連接字體的顏色，咱們所要作的就是把img外面這個邊框去掉。作法也很簡單，寫一個img的標籤選擇器，設置border爲0就沒有邊框了。咱們能夠老是在head里加上這麼一個標籤選擇器來避免這個問題，而不用擔憂對沒有相似問題的客戶端會有什麼影響：app

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border: 0;
        }
    </style>
</head>
<body>
<a href="http://www.51cto.com/">
    <img src="logo.jpg" />
</a>
</body>

css補充

上一節的css內容並無講完，這節繼續講後續的內容。ide

定位-position

position 屬性定義創建元素佈局所用的定位機制。佈局

fixed-固定在窗口的某個位置

position: fixed; ：固定在窗口的某個位置。結合top、right、botom、left，肯定固定的位置。
在頁面右下角放置一個返回頂部的按鈕，用position定位：學習

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .gotop{
            width: 45px;
            height: 45px;
            background-color: black;
            color: yellow;
            position: fixed;
            right: 15px;
            bottom: 60px;
        }
    </style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd"></div>
<div class="gotop">返回頂部</div>
</body>

這裏並不能實現返回頂部的效果，咱們還須要後面纔會學的JavaScript才能實現點擊以後返回頁面頂部。
再來實現一個始終顯示在頁面頂部的菜單：測試

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar{
            height: 48px;
            line-height: 48px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body style="margin: 0 auto">
<div class="bar">菜單</div>
<div class="bar" style="top: 50px;left: unset;right: unset;">菜單2</div>
<div style="height: 2000px;background-color: #dddddd;margin-top: 100px">主要內容</div>
</body>

和以前學的float同樣，這裏使用position樣式以後，div也再也不撐滿一整行了。咱們經過設置left和right屬性，讓他往兩邊都撐滿了。下面的菜單2是沒有設置left和right的效果。
另外，由於使用position，會有一個分層的效果。下面的div標籤的內容也是從頁面頂部開始顯示的。爲了避免讓菜單蓋住主要內容，咱們給下面的div設置了外邊距（margin-top）。分開了兩部分的內容。字體

absolute-絕對定位

這個和fixed都是決定定位。因此主要來看看和fixed的差異。把上面的返回頂部的例子裏的position屬性修改成absolute，看看效果。乍一看，貌似同樣，可是若是滾動滾輪，就是發現，他會一塊兒移動。也就是absolute絕對定位了以後，就會固定在父級元素之上。
把上面菜單的例子也改爲absolute，菜單依然在頁面頂上，可是往下流量頁面 後，菜單就會向上滾出屏幕了。
ablolute單獨的應用場景很少，主要是結合下面要將講的相對定位一塊兒使用。把一個元素絕對定位到另外一個相對定位的元素上。url

relative-相對定位

上面測試absolute的時候提到，他是絕對定位到它的父級元素上的。上面的例子中實際是決定定位在了整個頁面上。若是要將它定位在另一個元素裏，簡單的在外層加上一個元素標籤是沒用的。還須要在元素上加上 position: relative; 這個屬性，纔會被識別爲 absolute 的父級標籤。

<body>
<div style="height: 50px;width: 100px;border: 1px solid black;position: relative;">
    <div style="background-color: red;position: absolute;bottom: 0;left: 0;right: 0;">相對定位</div>
</div>
</body>

設置偏移量：這裏也有top、right、bottom、left屬性。這裏設置的偏移量。若是設置偏移屬性，就是相對於其正常位置所進行的偏移。

定位在屏幕中間

用了position屬性以後，經過 margin: 0 auto 沒法實現居中了。那麼如今居中要怎麼作呢。
偏移量的屬性不但可使用像素（px），也是可使用百分比的。設置爲50%天然就居中了。可是這裏定位是元素的起始位置，即左上角而不是中心。因此還得計算元素高度和寬度的一半，用外邊距把元素撐回去：

<body>
<div style="background-color: red;height: 80px;width: 80px;
position: fixed;top: 50%;left: 50%;
margin-top: -40px;margin-left: -40px;">正中間</div>
</body>

分層（z-index）

元素應用了position屬性以後，就會出現分層的狀況。position元素會始終位於其餘標準元素的上層。以下的例子，不管div的前後順序如何，都是position元素在上層：

<body>
<div style="position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>

如此，咱們就把頁面分紅了2層。那麼有2層，就能有3層甚至多層。
z-index 屬性，設置元素的堆疊順序。僅能在定位元素上奏效（例如 position:absolute;）。數值越大，處於外層，能夠是負數。不設置的話應該是0

<body>
<div style="z-index: 10;position: fixed;top: 30px;left: 30px;background-color: yellow;height: 50px;width: 50px;"></div>
<div style="z-index: 5;position: fixed;top: 20px;left: 20px;background-color: red;height: 70px;width: 70px;"></div>
<div style="height: 100px;width: 100px;background-color: blue;"></div>
</body>

例子中，若是不設置z-index，或者值設置的同樣，那麼層級的關係就是不肯定的。調整標籤的順序，效果會不同（後面的標籤會蓋住前面的）。設置了z-index後，咱們就能肯定定位元素的層級關係。

透明度-opacity

上面已經學了網頁的層級，下層的頁面會被上層的頁面覆蓋掉。這裏咱們能夠設置標籤的opacity屬性，使得上層頁面不是徹底覆蓋下面的內容，而是有一點的透明度。
opacity 屬性，透明度。取值範圍從 0.0 （徹底透明）到 1.0（徹底不透明）。

<body>
<div style="font-size: 48px">網頁的內容</div>
<div style="opacity: 0.8;background-color: #dddddd;position: fixed;top: 0;left: 0;bottom: 0;right: 0"></div>
</body>

小結-綜合應用

咱們能夠設計一個這樣的頁面。平時顯示正常的內容（這是第一層）。當咱們點擊了一個按鈕須要提交數據的時候，這時候須要屏蔽掉用戶對以前的頁面內容的操做。這時候出現一個第二層，半透明的覆蓋層，就如透明度裏的例子那樣。而後再在頁面的中間彈出一個表單（第三層），讓用戶提交數據。這三層的代碼大概是這樣的：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .lv1{
            background-color: aquamarine;
            font-size: 64px;
        }
        .lv2{
            background-color: #dddddd;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            opacity: 0.8;
        }
        .lv3{
            height: 50px;
            width: 100px;
            position: fixed;
            top: 30px;
            left: 50%;
            z-index: 3;
            margin-left: -50px;
        }
        .disappear{
            display: none;
        }
    </style>
</head>
<body>
<div class="lv1">網頁的內容</div>
<div class="lv2 disappear">
    <!--覆蓋掉網頁的內容的半透明層-->
</div>
<div class="lv3 disappear">
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd" title="搜索內容" />
        <input type="submit" value="搜索" />
    </form>
</div>
</body>

直接打開頁面，應該只顯示了第一層的內容，另外兩層暫時設置了 display :none; 隱藏了。這裏JS還沒學，網頁的內容裏能夠加上一個按鈕，觸發一個JS，修改一下.disappear裏的display屬性，改爲unset（就是沒有設置）。這裏咱們只能暫時先手動改一下看一下效果了。修改後，第二層和第三層的內容就都顯示出來了。先覆蓋掉頁面的內容，此時用戶沒法在選擇第一層的內容了。而後中間是彈出的交互界面，用戶能夠輸入內容提交表單，或者是之後會學的其餘交互內容。

溢出處理-overflow

先來看一下顯示圖片的例子。找一張大一點的圖片，而後放在一個div裏。div設置小一點的高度和寬度。效果以下：

<body>
<div style="height: 100px;width: 80px;">
    <img src="1.jpg" />
</div>
<div style="background-color: red;">看看這個內容在哪裏</div>
</body>

這裏雖然div設置了範圍，可是div中的圖片會按照正常尺寸顯示出來，並無受到上一層div標籤尺寸的限制，即溢出了。後面還加了一個div，能夠看到是接在前一個div的範圍後顯示的。
要處理這個問題，咱們能夠爲圖片也設置一個尺寸，好比：style="height: 100%" 。這樣能夠顯示出整張完整的圖片，可是會自適應一個尺寸。
這裏要講的是經過在div裏設置overflow屬性，來處理溢出內容的處理規則（圖片尺寸不變）。
overflow: hidden; ：內容會被修剪，而且其他內容是不可見的。
overflow: auto; ：若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
overflow: scroll; ：同上，和auto同樣。
這裏拿圖片舉例，可是實際應用中，各類可能會有溢出的狀況均可以這麼處理。通常圖片的處理更多的應該是設置一個img的尺寸，作一下縮放。而在一個有限大小的區域內要顯示不少的文字，更加適合用overflow：

<body>
<div style="background-color: #dddddd;height: 100px;width: 150px;overflow: auto;">
    這個屬性定義溢出元素內容區的內容會如何處理。
    若是值爲 scroll 或 auto，則會提供一種滾動機制。
    若是值爲 hidden，則溢出的部分會被修剪並隱藏。
    默認值是 visible。
</div>

:hover 僞類

當鼠標移動到元素上時，纔會生效的css屬性。下面是一個菜單的例子，應用了hover實現了當鼠標放上去的時候，指向的那項會改變樣式：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            line-height: 48px;
            background-color: blue;
        }
        .pg-body{
            margin-top: 48px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            color: white;
            /*默認行內標籤不能設置高度，*/
            /*這裏設置了display: inline-block;，*/
            /*這樣標籤就能有高度了*/
            /*這樣a標籤就撐滿了整個區域。*/
            /*這裏也沒設置具體的高度，貌似默認就撐滿了。*/
            display: inline-block;
            padding: 0 10px;
        }
        .pg-header .menu:hover{
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="w">
        <a class="menu">文件</a>
        <a class="menu">編輯</a>
        <a class="menu">查看</a>
        <a class="menu">收藏</a>
    </div>
</div>
<div class="pg-body">
    <div class="w">主要的內容</div>
</div>
</body>

另外這裏a標籤樣式的設置也值得參考。這裏設置了 display: inline-block; ，使得a標籤的高度能夠撐滿整個div的高度。若是註釋掉display，a標籤的高度就只有文字的那點高度（能夠經過鼠標懸停看到效果）。橫向的寬度這裏推薦是用內邊距（padding）撐開的。

背景圖片-background

以前都是用background設置背景色，咱們也能夠用圖片當背景。代碼以下：

<body>
<div style="background-image: url('1.jpg');height: 800px;width: 600px"></div>
</body>

這裏的效果會重複使用這張圖片平鋪在整個區域中。圖片的比例不變，多出的部分會裁剪掉。

網頁漸變色背景

利用平鋪的特性，能夠實現漸變色背景的效果。作一個寬1像素，長1000像素的漸變圖片，在這張圖片裏搞好漸變，而後做爲背景圖片。被平鋪以後，就是一個漸變色背景了。這個方法應該是通用的。

限制平鋪的方向

在上面的基礎上，再增長一個background-repeat屬性能夠顯示圖片進行平鋪。

<body>
<div style="background-image: url('1.jpg');height: 800px;width: 600px;background-repeat: no-repeat"></div>
</body>

background-repeat: no-repeat ：不容許平鋪
background-repeat: repeat-x ：只能橫向平鋪
background-repeat: repeat-y ：只能縱向平鋪

定位背景圖（摳圖）

有這麼一張圖：
Python自動化開發學習15-css補充內容
好吧，是不少個小圖標拼成的一張圖，如今要顯示其中的一個圖標。咱們能夠這麼作：

<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>

這樣顯示第一個圖標沒問題，若是要顯示下面的圖標，咱們須要把圖片往上移，這就用到了background-position屬性，給背景圖作一個定位：

<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
background-position: 1px -119px;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>

background-position-x 和 background-position-y 是單獨調整x軸和y軸。
上面的background屬性還能夠簡寫成這樣：background: url(2.png) 1px -119px no-repeat; ，圖片路徑、縱向位移、橫向位移、是否平鋪。
這樣作的好處是，一次請求就得到了好幾個圖標，減小了客戶端和服務端的交互次數。若是每個小圖標都保存一張獨立的圖片，那麼每次要獲取到一個新圖標可能還會發起一次請求。因此對於這種小圖標能夠拼接在一張圖中使用。

小結-課堂練習

作一個右邊有圖標的input框，相似這樣的：
Python自動化開發學習15-css補充內容

運用上面講的定位和背景圖片的方法，把圖標定位到方框的右邊。
這裏要注意，input的文字的輸入範圍右邊要小於整個邊框的範圍，不然最右邊的內容會被圖標擋住。

<body>
<div style="height: 24px;width: 150px;position: relative;">
    <input type="text" style="height: 24px;width: 125px;padding-right: 25px;" />
    <span style="background: url(2.png) 1px -119px no-repeat;
    display: inline-block;
    height: 20px;width: 20px;
    position: absolute;top: 5px;right: 0;"></span>
</div>
</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程