Python Day15(CSS)
1、CSS概述
1.簡介
css是英文Cascading Style Sheets的縮寫,稱爲層疊樣式表，用於對頁面進行美化。
存在方式有三種：元素內聯、頁面嵌入和外部引入，比較三種方式的優缺點。
語法：style = 'key1:value1;key2:value2;'
- 在標籤中使用 style='xx:xxx;'
- 在頁面中嵌入 < style type="text/css"> </style > 塊
- 引入外部css文件
必要性：美工會對頁面的色彩搭配和圖片的美化負責，開發人員則必須知道是如何實現的。
PS：css註釋 /* */
2.標籤選擇器
id選擇區:css
#i1{ background-color: #2459a2; height: 48px; }
class選擇器 ******html
.名稱{ ... } <標籤 class='名稱'> </標籤>
標籤選擇器:bootstrap
div{
...
}
全部div設置上此樣式
層級選擇器（空格隔開） ******ide
.c1 .c2 div{
}
組合選擇器（逗號） ******佈局
#c1,.c2,div{ }
屬性選擇器 ******字體
對選擇到的標籤再經過屬性再進行一次篩選ui
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 優先級，標籤上style優先，編寫順序，就近原則
3.補充CSS書寫順序
- 位置屬性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其餘(animation, transition等)
2、CSS各類屬性
1.邊框：url
border: 1px solid red border-top # 上 border-bottom # 下 border-left # 左 border-right # 右
2.background：spa
background-color; # 背景顏色 background-image:url('image/4.gif'); # 默認，div大，圖片重複放 background-repeat: repeat-y; # 是否重複 background-position-x: # 圖片x軸位置 background-position-y: # 圖片y軸位置 background: url(icon_18_118.png) 0 -119px no-repeat; # 簡寫
3.經常使用屬性：指針
height; # 高度 百分比 width; # 寬度 像素，百分比 text-align: center; # 水平方向居中 line-height; # 垂直方向根據標籤高度居中 color; # 字體顏色 font-size; # 字體大小 font-weight; # 字體加粗 text-decoration:none; # 去除超連接的下劃線 opcity: 0.6; # 透明度 z-index: 10; # 高的在上面 overflow: hidden,auto # 規定當內容溢出元素框時發生的事情,隱藏或者出現滾動條 hover # 選擇鼠標指針浮動在其上的元素，並設置其樣式 a:hover{background-color:yellow;} min-width # 最小寬度 max-width # 最大寬度
4.float：
讓標籤浪起來，塊級標籤也能夠堆疊
<div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div>
控制不住加上：<div style="clear: both;"></div>
5.display：
display: none; -- 讓標籤消失 display: inline; # 行內 display: block; # 塊級 display: inline-block; 具備inline,默認本身有多少佔多少 具備block，能夠設置高度，寬度，padding margin ****** 行內標籤：沒法設置高度，寬度，padding margin 塊級標籤：設置高度，寬度，padding margin
6.margin(外邊距)能夠改變位置
CSS Margin(外邊距)屬性定義元素周圍的空間。
margin清除周圍的元素（外邊框）的區域。margin沒有背景顏色，是徹底透明的
margin能夠單獨改變元素的上，下，左，右邊距。也能夠一次改變全部的屬性。
PS：margin: 0 auto
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin:100px 50px;
ps:縮寫若是寫全的話，順序是上右下左，其實就是順時針方向.
7.padding（填充）改變自身
CSS Padding（填充）屬性定義元素邊框與元素內容之間的空間。
當元素的 Padding（填充）（內邊距）被清除時，所"釋放"的區域將會受到元素背景顏色的填充。
單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
padding:25px 50px;
8.position：
fiexd (固定在頁面的某個位置)
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
relative + absolute
<div style='position:relative;'> <div style='position:absolute;top:0;left:0;'></div> </div>
3、CSS補充
1.頁面佈局
主站
<div class='pg-header'> <div style='width:980px;margin:0 auto;'> 內容自動居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
後臺管理佈局：
position:
- fiexd -- 永遠固定在窗口的某個位置
- relative -- 單獨無心義
- absolute -- 第一次定位，能夠在指定位置，可是隨着滾動條的滾動則會發生變化
第一種佈局:
左側菜單跟隨滾動條
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 <style> 9 body{ 10 margin: 0; 11 } 12 13 .pg-header{ 14 height: 48px; 15 background-color: #2459a2; 16 line-height: 48px; 17 } 18 19 .pg-nav{ 20 position: absolute; 21 top: 48px; 22 bottom: 0; 23 left: 0; 24 width: 200px; 25 background-color: #dddddd; 26 } 27 28 .pg-body{ 29 position: absolute; 30 top: 48px; 31 right: 0; 32 bottom: 0; 33 left: 200px; 34 background-color: pink; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="pg-header"></div> 40 <div class="pg-nav"></div> 41 <div class="pg-body"> 42 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 43 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 44 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 45 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 46 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 47 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 48 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 49 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 50 </div> 51 </body> 52 </html>
第二種佈局:
左側以及上不不動
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>Title</title> 8 <style> 9 body{ 10 margin: 0; 11 } 12 13 .pg-header{ 14 height: 48px; 15 background-color: #2459a2; 16 line-height: 48px; 17 } 18 19 .pg-nav{ 20 position: absolute; 21 top: 48px; 22 bottom: 0; 23 left: 0; 24 width: 200px; 25 background-color: #dddddd; 26 overflow: auto; 27 } 28 29 .pg-body{ 30 position: absolute; 31 top: 48px; 32 right: 0; 33 bottom: 0; 34 left: 200px; 35 background-color: pink; 36 overflow: auto; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="pg-header"></div> 42 <div class="pg-nav"> 43 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 44 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 45 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 46 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 47 </div> 48 <div class="pg-body"> 49 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 50 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 51 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 52 <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p> 53 </div> 54 </body> 55 </html>
2.hover高級用法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> 8 <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 9 <title>Title</title> 10 <style> 11 body{ 12 margin: 0; 13 } 14 .c1{ 15 height: 48px; 16 line-height: 48px; 17 background-color: #1c5a9c; 18 } 19 .c2{ 20 width: 1100px; 21 height: 48px; 22 margin: 0 auto; 23 } 24 .c3{ 25 position: relative; 26 width: 50px; 27 height: 48px; 28 line-height: 48px; 29 text-align: center; 30 } 31 .c3:hover { 32 background-color: #5956dc; 33 } 34 .c3:hover .c4 { 35 display: block; 36 } 37 .c4 { 38 display: none; 39 position: absolute; 40 width: 100px; 41 top: 48px; 42 left: -25px; 43 background-color: #f1f2f7; 44 } 45 .c4 a{ 46 display: block; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="c1"> 52 <div class="c2"> 53 <div class="c3"> 54 <a href="#"><i class="fa fa-user-o" aria-hidden="true"></i></a> 55 <div class="c4"> 56 <a href="">個人資料</a> 57 <a href="">註銷</a> 58 </div> 59 </div> 60 </div> 61 </div> 62 </body> 63 </html>
相關文章
- 1. python開發學習-day15(前端部分知識、web框架、Django建立項目)
- 2. Python, Python, Python
- 3. Python【Python】
- 4. Python!Python!
- 5. 〖Python〗-- Python目錄
- 6. python-初識python
- 7. Python - python package organization
- 8. 【Python】學習Python
- 9. Python - 初識Python
- 10. Python——ipython（python programming）
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • Docker 安裝 Python - Docker教程
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
