z-index及透明度opacity
z-index定義和用法
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="day114.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--name="viewport"為了適應手機端--> </head> <body> <div>這是最底層的頁面內容</div> <div class="cover"></div><div class="modal"> <h1>登入頁面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>註冊</button> </div> </body> </html>
body{ margin: 0; } .cover{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 99; } .modal{ background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; text-align: center; }
opacity定義和用法
opacity 屬性設定元素的不透明級別。預設值為1。rgba只能影響顏色，而opacity可以修改顏色和字型(元素)。
margin 0 auto什麼作用與語法重點介紹教程
margin:0 auto作用語法:
1、margin:0 auto介紹
margin:0 auto 設定物件上下間距為0，左右自動。
可拆分： margin:0 auto 0 auto（上下）
還可拆分為：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
2、作用
對DIV設定margin:0 auto樣式，是為了讓DIV在瀏覽器中水平居中。佈局居中、水平居中，均加入margin:0 auto即可。
關節點：auto(自動、自適應)
假如一個DIV我們設定寬度為500px，然後設定margin:0 auto樣式後，假如你瀏覽器視窗寬度為1000px寬，這個時候此DIV靠左和靠右間距為（auto）這個時候瀏覽器會自動辨析DIV靠左和靠右各250px寬度間距，此時這個DIV盒子自然而然就水平居中瀏覽器中。
為什麼要設定margin:0 auto？
設定此樣式讓DIV佈局水平居中於瀏覽器中，目的就是相容各大瀏覽器讓佈局居中。如果不加margin:0 autoCSS樣式，會造成佈局在有的瀏覽器中居中有的瀏覽器靠左。
禁：如果要讓DIV佈局居中瀏覽器中，加入margin:0 auto就不能加入float浮動樣式，避免邏輯錯誤，造成佈局居中不相容。
while True: print('studying...')