Python自動化開發學習15-css補充內容
上一節學習的內容，有一下幾點，可以註意一下。或者說推薦這麽做。
class可以設置多個值-css樣式重用
可以給一個標簽設置多個class值，這樣我們可以為每個class應用一種樣式。標簽有多個class的話，就為這個標簽應用了多個樣式。並且之後別的標簽要求重用其中的部分樣式，只需要設置那個class就好了。
要設置多個class的值，只需要用空格隔開每個值即可。下面的例子分別設置了背景色、高度、寬度、外框，然後div的設置了多個class：
<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裏加上這麽一個標簽選擇器來避免這個問題，而不用擔心對沒有類似問題的客戶端會有什麽影響：
<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內容並沒有講完，這節繼續講後續的內容。
定位-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單獨的應用場景不多，主要是結合下面要將講的相對定位一起使用。把一個元素絕對定位到另一個相對定位的元素上。
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 ：只能縱向平鋪
定位背景圖（摳圖）
有這麽一張圖：
好吧，是很多個小圖標拼成的一張圖，現在要顯示其中的一個圖標。我們可以這麽做：
<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框，類似這樣的：
運用上面講的定位和背景圖片的方法，把圖標定位到方框的右邊。
這裏要註意，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>Python自動化開發學習15-css補充內容