路飞学城Python-Day46
生活随笔
收集整理的這篇文章主要介紹了
路飞学城Python-Day46
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
16-如何正確的使用類選擇器及總結 一般情況下盡量不要去使用id選擇器，因為id選擇器有很大的限制性，id一般都是JS配合使用的，類選擇器都是和CSS配合使用的，特殊性情況可以用id選擇器。 類的使用想要用好首先要找共有的屬性 一定要有“公共類”的概念，不要試圖用一個類去寫所有的屬性，標簽要攜帶多個類，共同設置標簽的樣式，每個類要盡可能的小，最好只有一個樣式
17-高級選擇器
18-屬性選擇器 屬性選擇器是CSS3中的新的選擇器，之前的選擇器都是CSS2中的 屬性選擇器通常使用在表單控件中比較頻繁 找到所有title屬性等于hello的元素： [title="hello"] { color: red; } 找到所有title屬性以hello開頭的元素： [title^="hello"] { color: red; } 找到所有title屬性以hello結尾的元素： [title$="hello"] { color: red; } 找到所有title屬性中包含（字符串包含）hello的元素： [title*="hello"] { color: red; } 找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素： [title~="hello"] { color: red; }
19-偽類選擇器(a標簽的愛恨原則) 偽類選擇器就是CSS3中的選擇器，一般是用在a標簽上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style> /*沒有被訪問的a標簽的樣式*/ /*div ul li[class='item1'] a:link{*/ /*color: green;*/ /*}*/ /*訪問過后的鏈接樣式*/ /*div ul li[class='item2'] a:visited{*/ /*color: green;*/ /*}*/ /*鼠標懸浮的時候改變*/ /*div ul li[class='item3'] a:hover{*/ /*color: green;*/ /*}*/ /*鼠標選中后的樣式*/ /*div ul li[class='item4'] a:active{*/ /*color: green;*/ /*}*/ </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="https://www.baidu.com">百度</a> </li> <li class="item2"> <a href="https://www.processon.com">processon</a> </li> <li class="item3"> <a href="https://www.luffycity.com">路飛學城</a> </li> <li class="item4"> <a href="#">路飛學城2</a> </li> </ul> </div> </body> </html>
20-偽類選擇器(nth-child用法) 沒有訪問的超鏈接a標簽樣式： a:link { color: blue; } 訪問過的超鏈接a標簽樣式： a:visited { color: gray; } 鼠標懸浮在元素上應用樣式： a:hover { background-color: #eee; } 鼠標點擊瞬間的樣式： a:active { color: green; } input輸入框獲取焦點時樣式： input:focus { outline: none; background-color: #eee; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style> /*沒有被訪問的a標簽的樣式*/ /*div ul li[class='item1'] a:link{*/ /*color: green;*/ /*}*/ /*訪問過后的鏈接樣式*/ /*div ul li[class='item2'] a:visited{*/ /*color: green;*/ /*}*/ /*鼠標懸浮的時候改變*/ /*div ul li[class='item3'] a:hover{*/ /*color: green;*/ /*}*/ /*鼠標選中后的樣式*/ /*div ul li[class='item4'] a:active{*/ /*color: green;*/ /*}*/ /*選擇標簽內的子類*/ /*div ul li:nth-child(1){*/ /*color: green;*/ /*}*/ div ul li:nth-child(2n-1){ color: green; font-size: 30px; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="https://www.baidu.com">百度</a> </li> <li class="item2"> 2 <a href="https://www.processon.com">processon</a> </li> <li class="item3"> 3 <a href="https://www.luffycity.com">路飛學城</a> </li> <li class="item4"> 4 <a href="#">路飛學城2</a> </li> </ul> </div> </body> </html>
21-偽元素選擇器 偽元素選擇器中的before和after是經常用到的選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素選擇器</title> <style type="text/css"> /*選中當前的第一個首字母,設置樣式*/ /*p:first-letter{*/ /*color: red;*/ /*}*/ /*通常和content聯合使用，使用不是很頻繁*/ /*p:before{*/ /*content: 'panda';*/ /*color: red;*/ /*}*/ /*和content聯合使用，使用很頻繁*/ /*p:after{*/ /*content: '偽類選擇器，在標簽后加內容'和布局有很大關聯（清除浮動）;*/ /*font-size: 28px;*/ /*}*/ </style> </head> <body> <p> 這是一個段落 </p> </body> </html>
22-css的繼承性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS繼承性</title> <style type="text/css"> /*繼承的屬性有一些是可以繼承的*/ div[class='father']{ color: red; background-color: green; } </style> </head> <body> <!--繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這是CSS中的繼承 有一些屬性可以繼承下來 color font text line 文本的元素 像一些盒子元素，定位的元素(浮動，絕對定位，固定定位)不能繼承--> <div class="father" id="egon"> <p>alex</p> </div> </body> </html>
23-css的層疊性 層疊性：權重大的標簽覆蓋權重小的標簽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS層疊性</title> <style type="text/css"> #box{ color: green; } .container{ color: red; } p{ color: yellow; } </style> </head> <body> <!--CSS是具有權重性的，誰的權重大就選擇誰 如何判斷誰的權重大？ id的數量，class的數量，標簽的數量 --> <p id="box" class="container">顏色的顯示(層疊性)</p> </body> </html>
24-css權重比較
25-層疊性權重相同處理和繼承的權重為0 總結：先看有沒有被選中，如果選中了，就數數(id,class,標簽數量)誰的權重大，就顯示誰的屬性 如果沒有被選中，繼承的屬性權重為0 如果屬性都是繼承下來的，權重都是0，以就近原則，描述距離標簽近的就顯示，就近原則一樣時選擇權重 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層疊性權重處理</title> <style type="text/css"> /*權重111*/ #box1 .wrap2 p{ color: red; } /*權重111*/ #box2 .wrap3 p{ color: yellow; } </style> </head> <body> <!--權重相同的時候，以后來者居上為主--> <!--繼承來的屬性權重為0--> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>顏色展示層疊性</p> </div> </div> </div> </body> </html>
26-!important屬性介紹 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>權重深入</title> <style type="text/css"> p{ color: red; font-size: 30px; } .spe1{ color: yellow!important; font-size: 40px; } .spe2{ color: green; font-size: 50px; } </style> </head> <body> <!--!important表示的是最高的權限，強制執行，但是不能影響繼承的權重的，只能影響選中的元素--> <div> <p class="spe1 spe2">1.多個類的選擇順序</p> <p class="spe2 spe1">2.多個類的選擇順序</p> </div> </body> </html>
27-盒模型介紹 瀏覽器里顯示的所有的標簽都被看做是一個盒子 Margin(外邊距)?- 清除邊框外的區域，外邊距是透明的。 Border(邊框)?- 圍繞在內邊距和內容外的邊框。 Padding(內邊距)?- 清除內容周圍的區域，內邊距是透明的。 Content(內容)?- 盒子的內容，顯示文本和圖像。
28-盒模型五個屬性介紹 在網頁中都是用方框實現的 width：內容的寬度，而不是整個盒的寬度 height：內容的高度，而不是整個盒的高度 Margin(外邊距)?- 清除邊框外的區域，外邊距是透明的。 Border(邊框)?- 圍繞在內邊距和內容外的邊框。 Padding(內邊距)?- 清除內容周圍的區域，內邊距是透明的。 Content(內容)?- 盒子的內容，顯示文本和圖像。
29-盒模型的計算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> #space{ width: 200px; height: 200px; padding: 20px; margin: 1px; border: 5px solid red; } #box{ width: 400px; height: 400px; padding: 0; border: 1px solid red; } </style> </head> <body> <div id="space"> </div> <div id="box"> </div> </body> </html>
30-認識padding padding就是內邊距，padding的區域是有背景顏色的，并且背景顏色和內容區域顏色一樣 也就是說background-color這個屬性將填充所有的border以內的區域 padding是有四個方向的，能夠分別描述四個方向的padding 描述padding方向的方法有兩種 1.寫小屬性 2.寫綜合屬性，用空格隔開 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*小屬性限制*/ /*padding-left: 20px;*/ /*padding-right:10px ;*/ /*padding-top: 15px;*/ /*padding-bottom: 12px;*/ /*綜合屬性，用空格隔開，順序是上右下左的順時針方向*/ /*padding: 10px 20px 30px 40px;*/ /*綜合屬性，用空格隔開，順序是上->左右->下*/ /*padding: 10px 20px 30px;*/ /*綜合屬性，用空格隔開，順序是上下->左右*/ /*padding: 10px 40px;*/ border: 5px red solid; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
31-清除某些標簽默認的padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除默認padding標簽</title> <style type="text/css"> /*使用*清除所有的默認邊距是有問題的，*的效率很低，底層是在遍歷標簽*/ /**{*/ /*padding: 0;*/ /*margin: 0;*/ /*}*/ /*最好的使用方法就是使用并集選擇器的清除默認的樣式表*/ /*百度搜索reset.css*/ /*引入reset.css文件去清除所有的默認標簽*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } </style> </head> <body> <!--ul標簽是有默認的padding的邊距的--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
32-認識border <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border認識</title> <style type="text/css"> /*如果邊框的顏色不寫，默認顏色就是黑色的*/ /*如果不寫粗細，只有solid，就默認邊框是3px，黑色*/ .box{ width: 200px; height: 200px; border: green 5px solid; /*按照三要素拆分*/ /*border-width: 5px;*/ /*border-color: yellow;*/ /*border-style: dashed;*/ /*按照方向分*/ /*border-top-width: 10px;*/ /*border-left-width: 20px;*/ /*border-right-width: 30px;*/ /*border-left-style: dashed;*/ } </style> </head> <body> <!--border就是邊框--> <!--邊框有3個要素--> <!--1.粗細--> <!--2.線型樣式--> <!--3.顏色--> <div class="box"> </div> </body> </html>
33-使用border制作三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style type="text/css"> .box{ width: 0; height: 0; border-top: 20px solid red ; border-left: 20px solid??transparent; border-right: 20px solid??transparent; } </style> </head> <body> <div class="box"> </div> </body> </html>
34-簡單認識一下margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border:1px solid red; background-color: green; margin: 20px; } </style> </head> <body> <!--margin指的是距離，外邊距--> <div class="box"> </div> </body> </html>
35-標準文檔流的介紹 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標準文檔流</title> </head> <body> <!--宏觀上：web頁面和PS設計軟件是有本質的區別的--> <!--web頁面的制作是個"流"的概念，從上往下制作--> <!--設計軟件就是隨意變更地方--> </body> </html>
36-標準文檔流下的微觀現象 <!--標準文檔流下的微觀現象--> <!--1.空白折疊現象--> <!--所有的換行只有一個空格顯示，如果想要加多余的空格的情況需要加特殊符號--> <!--<div>--> <!--文字 文字--> <!--</div>--> <!--2.高矮不齊，底邊對齊--> <!--<div>--> <!--文字文字文字文字<span>123</span>文字文字文字文字文字文字--> <!--</div>--> <!--3.一行鋪不滿，換行鋪-->
37-行內元素和塊級元素轉換 HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。 常用的塊狀元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行內元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行內塊狀元素： <img> <input> 塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。獨占一行 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置 我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為后面頁面布局做好了準備。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊級元素和行內元素</title> <style type="text/css"> /*display:inline 就是塊級元素轉換為行內元素*/ /*display:block 就是行內元素轉換為塊級元素*/ /*display:inline-block:就是將塊級元素轉換為行內塊元素*/ /*display:none 隱藏當前的標簽，不再占頁面空間*/ /*visibility: hidden 隱藏當前的標簽，仍然占頁面空間*/ .box1{ display: inline; width: 200px; height: 50px; border: 1px red solid; } .box2{ margin-top: 20px; width: 200px; height: 50px; border: 1px green solid; } </style> </head> <body> <div class="box1">div標簽1</div> <div class="box2">div標簽2</div> </body> </html>
38-布局屬性-浮動介紹 如果想制作網頁就是要通過浮動實現并排的標簽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: #666666; float: left; } .box2{ width: 400px; height: 400px; background-color: #123456; } </style> </head> <body> <!--浮動是CSS里布局最多的屬性--> <!--浮動顯示讓兩個元素并排顯示，并且兩個元素都能設置寬度和高度--> <!--浮動的四個特性--> <!--1.浮動的元素脫標--> <!--2.浮動的元素互相貼靠--> <!--3.浮動的元素"字圍"效果--> <!--4.緊湊的效果--> <div class="box1"></div> <div class="box2"></div> </body> </html>
39-浮動元素脫標 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 200px; height: 200px; background-color: #666666; float: left; } .box2{ width: 400px; height: 400px; background-color: #123456; } span{ background-color: forestgreen; float: left; width: 200px; height: 100px; } </style> </head> <body> <!--脫標：脫離了標準文檔流--> <!--浮動的盒子就是脫離了標準文檔流 不浮動的盒子就會渲染到原來不設置浮動盒子的位置 --> <div class="box1">小紅</div> <div class="box2">小黃</div> <!--設置浮動以后，span不需要轉換為塊級元素也可以設置寬高，--> <!--所有的標簽，一旦設置了浮動，都不區分行內元素和塊狀元素--> <span>span標簽</span> <span>span標簽</span> </body> </html>
40-浮動元素互相貼靠 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素互相貼靠</title> <style type="text/css"> /*span{*/ /*background-color: red;*/ /*float: left;*/ /*}*/ .box1{ width: 150px; height: 400px; background-color: red; float: left; } .box2{ width: 100px; height: 200px; background-color: green; float: left; } .box3{ width: 300px; height: 300px; background-color: yellow; } </style> </head> <body> <!--<span>文字</span>--> <!--<span>文字</span>--> <!--如果父元素有足夠的空間，那么元素之間是互相貼靠的， 如果父元素沒有足夠的空間，就會一直貼著最靠近的邊去變化--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
41-浮動元素字圍效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字圍效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } </style> </head> <body> <div> <img src="bd_logo1.png"> </div> <!--所謂字圍效果，當div浮動的時候，p不浮動，div擋住了p，說明div的層級比p的層級高，p中的文字不會被遮蓋--> <!--浮動的時候，永遠不是一個盒子在單獨浮動，要浮動就要一起浮動--> <p> 123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字 </p> </body> </html>
42-浮動元素緊湊效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素緊湊效果</title> <style type="text/css"> .box{ float: left; background-color: yellow; } </style> </head> <body> <!--所謂收縮，就是一個浮動元素沒有設置寬度，就自動以文字的寬度緊湊收縮，和行內元素一致--> <div class="box"> panda </div> </body> </html>
17-高級選擇器
| 名稱 | 說明 |
| 并集選擇器 | 多個選擇器通過逗號連接而成，同時聲明多個風格相同樣式 |
| 交集選擇器 | 由兩個選擇器連接而成，選中二者范圍的交集，兩個選擇器之間不能有空格，第一個必須是標簽選擇器，第二個必須是類先擇期或者ID選擇器 |
| 后代選擇器 | 外層的選擇器寫在前面，內層的選擇器寫在后面，之間空格分隔標簽嵌套時，內層的標簽稱為外層標簽的后代 |
| 子元素選擇器 | 通過>連接在一起而構成，僅作用于子元素 |
| 屬性選擇器 | 選取帶有指定屬性的元素，或選取帶有指定屬性和值的元素 |
18-屬性選擇器 屬性選擇器是CSS3中的新的選擇器，之前的選擇器都是CSS2中的 屬性選擇器通常使用在表單控件中比較頻繁 找到所有title屬性等于hello的元素： [title="hello"] { color: red; } 找到所有title屬性以hello開頭的元素： [title^="hello"] { color: red; } 找到所有title屬性以hello結尾的元素： [title$="hello"] { color: red; } 找到所有title屬性中包含（字符串包含）hello的元素： [title*="hello"] { color: red; } 找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素： [title~="hello"] { color: red; }
19-偽類選擇器(a標簽的愛恨原則) 偽類選擇器就是CSS3中的選擇器，一般是用在a標簽上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style> /*沒有被訪問的a標簽的樣式*/ /*div ul li[class='item1'] a:link{*/ /*color: green;*/ /*}*/ /*訪問過后的鏈接樣式*/ /*div ul li[class='item2'] a:visited{*/ /*color: green;*/ /*}*/ /*鼠標懸浮的時候改變*/ /*div ul li[class='item3'] a:hover{*/ /*color: green;*/ /*}*/ /*鼠標選中后的樣式*/ /*div ul li[class='item4'] a:active{*/ /*color: green;*/ /*}*/ </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="https://www.baidu.com">百度</a> </li> <li class="item2"> <a href="https://www.processon.com">processon</a> </li> <li class="item3"> <a href="https://www.luffycity.com">路飛學城</a> </li> <li class="item4"> <a href="#">路飛學城2</a> </li> </ul> </div> </body> </html>
20-偽類選擇器(nth-child用法) 沒有訪問的超鏈接a標簽樣式： a:link { color: blue; } 訪問過的超鏈接a標簽樣式： a:visited { color: gray; } 鼠標懸浮在元素上應用樣式： a:hover { background-color: #eee; } 鼠標點擊瞬間的樣式： a:active { color: green; } input輸入框獲取焦點時樣式： input:focus { outline: none; background-color: #eee; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style> /*沒有被訪問的a標簽的樣式*/ /*div ul li[class='item1'] a:link{*/ /*color: green;*/ /*}*/ /*訪問過后的鏈接樣式*/ /*div ul li[class='item2'] a:visited{*/ /*color: green;*/ /*}*/ /*鼠標懸浮的時候改變*/ /*div ul li[class='item3'] a:hover{*/ /*color: green;*/ /*}*/ /*鼠標選中后的樣式*/ /*div ul li[class='item4'] a:active{*/ /*color: green;*/ /*}*/ /*選擇標簽內的子類*/ /*div ul li:nth-child(1){*/ /*color: green;*/ /*}*/ div ul li:nth-child(2n-1){ color: green; font-size: 30px; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> 1 <a href="https://www.baidu.com">百度</a> </li> <li class="item2"> 2 <a href="https://www.processon.com">processon</a> </li> <li class="item3"> 3 <a href="https://www.luffycity.com">路飛學城</a> </li> <li class="item4"> 4 <a href="#">路飛學城2</a> </li> </ul> </div> </body> </html>
21-偽元素選擇器 偽元素選擇器中的before和after是經常用到的選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素選擇器</title> <style type="text/css"> /*選中當前的第一個首字母,設置樣式*/ /*p:first-letter{*/ /*color: red;*/ /*}*/ /*通常和content聯合使用，使用不是很頻繁*/ /*p:before{*/ /*content: 'panda';*/ /*color: red;*/ /*}*/ /*和content聯合使用，使用很頻繁*/ /*p:after{*/ /*content: '偽類選擇器，在標簽后加內容'和布局有很大關聯（清除浮動）;*/ /*font-size: 28px;*/ /*}*/ </style> </head> <body> <p> 這是一個段落 </p> </body> </html>
22-css的繼承性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS繼承性</title> <style type="text/css"> /*繼承的屬性有一些是可以繼承的*/ div[class='father']{ color: red; background-color: green; } </style> </head> <body> <!--繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這是CSS中的繼承 有一些屬性可以繼承下來 color font text line 文本的元素 像一些盒子元素，定位的元素(浮動，絕對定位，固定定位)不能繼承--> <div class="father" id="egon"> <p>alex</p> </div> </body> </html>
23-css的層疊性 層疊性：權重大的標簽覆蓋權重小的標簽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS層疊性</title> <style type="text/css"> #box{ color: green; } .container{ color: red; } p{ color: yellow; } </style> </head> <body> <!--CSS是具有權重性的，誰的權重大就選擇誰 如何判斷誰的權重大？ id的數量，class的數量，標簽的數量 --> <p id="box" class="container">顏色的顯示(層疊性)</p> </body> </html>
24-css權重比較
25-層疊性權重相同處理和繼承的權重為0 總結：先看有沒有被選中，如果選中了，就數數(id,class,標簽數量)誰的權重大，就顯示誰的屬性 如果沒有被選中，繼承的屬性權重為0 如果屬性都是繼承下來的，權重都是0，以就近原則，描述距離標簽近的就顯示，就近原則一樣時選擇權重 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>層疊性權重處理</title> <style type="text/css"> /*權重111*/ #box1 .wrap2 p{ color: red; } /*權重111*/ #box2 .wrap3 p{ color: yellow; } </style> </head> <body> <!--權重相同的時候，以后來者居上為主--> <!--繼承來的屬性權重為0--> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>顏色展示層疊性</p> </div> </div> </div> </body> </html>
26-!important屬性介紹 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>權重深入</title> <style type="text/css"> p{ color: red; font-size: 30px; } .spe1{ color: yellow!important; font-size: 40px; } .spe2{ color: green; font-size: 50px; } </style> </head> <body> <!--!important表示的是最高的權限，強制執行，但是不能影響繼承的權重的，只能影響選中的元素--> <div> <p class="spe1 spe2">1.多個類的選擇順序</p> <p class="spe2 spe1">2.多個類的選擇順序</p> </div> </body> </html>
27-盒模型介紹 瀏覽器里顯示的所有的標簽都被看做是一個盒子 Margin(外邊距)?- 清除邊框外的區域，外邊距是透明的。 Border(邊框)?- 圍繞在內邊距和內容外的邊框。 Padding(內邊距)?- 清除內容周圍的區域，內邊距是透明的。 Content(內容)?- 盒子的內容，顯示文本和圖像。
28-盒模型五個屬性介紹 在網頁中都是用方框實現的 width：內容的寬度，而不是整個盒的寬度 height：內容的高度，而不是整個盒的高度 Margin(外邊距)?- 清除邊框外的區域，外邊距是透明的。 Border(邊框)?- 圍繞在內邊距和內容外的邊框。 Padding(內邊距)?- 清除內容周圍的區域，內邊距是透明的。 Content(內容)?- 盒子的內容，顯示文本和圖像。
29-盒模型的計算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> #space{ width: 200px; height: 200px; padding: 20px; margin: 1px; border: 5px solid red; } #box{ width: 400px; height: 400px; padding: 0; border: 1px solid red; } </style> </head> <body> <div id="space"> </div> <div id="box"> </div> </body> </html>
30-認識padding padding就是內邊距，padding的區域是有背景顏色的，并且背景顏色和內容區域顏色一樣 也就是說background-color這個屬性將填充所有的border以內的區域 padding是有四個方向的，能夠分別描述四個方向的padding 描述padding方向的方法有兩種 1.寫小屬性 2.寫綜合屬性，用空格隔開 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>padding</title> <style type="text/css"> .box{ width: 300px; height: 300px; /*小屬性限制*/ /*padding-left: 20px;*/ /*padding-right:10px ;*/ /*padding-top: 15px;*/ /*padding-bottom: 12px;*/ /*綜合屬性，用空格隔開，順序是上右下左的順時針方向*/ /*padding: 10px 20px 30px 40px;*/ /*綜合屬性，用空格隔開，順序是上->左右->下*/ /*padding: 10px 20px 30px;*/ /*綜合屬性，用空格隔開，順序是上下->左右*/ /*padding: 10px 40px;*/ border: 5px red solid; } </style> </head> <body> <div class="box"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </body> </html>
31-清除某些標簽默認的padding <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除默認padding標簽</title> <style type="text/css"> /*使用*清除所有的默認邊距是有問題的，*的效率很低，底層是在遍歷標簽*/ /**{*/ /*padding: 0;*/ /*margin: 0;*/ /*}*/ /*最好的使用方法就是使用并集選擇器的清除默認的樣式表*/ /*百度搜索reset.css*/ /*引入reset.css文件去清除所有的默認標簽*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } </style> </head> <body> <!--ul標簽是有默認的padding的邊距的--> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
32-認識border <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border認識</title> <style type="text/css"> /*如果邊框的顏色不寫，默認顏色就是黑色的*/ /*如果不寫粗細，只有solid，就默認邊框是3px，黑色*/ .box{ width: 200px; height: 200px; border: green 5px solid; /*按照三要素拆分*/ /*border-width: 5px;*/ /*border-color: yellow;*/ /*border-style: dashed;*/ /*按照方向分*/ /*border-top-width: 10px;*/ /*border-left-width: 20px;*/ /*border-right-width: 30px;*/ /*border-left-style: dashed;*/ } </style> </head> <body> <!--border就是邊框--> <!--邊框有3個要素--> <!--1.粗細--> <!--2.線型樣式--> <!--3.顏色--> <div class="box"> </div> </body> </html>
33-使用border制作三角形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style type="text/css"> .box{ width: 0; height: 0; border-top: 20px solid red ; border-left: 20px solid??transparent; border-right: 20px solid??transparent; } </style> </head> <body> <div class="box"> </div> </body> </html>
34-簡單認識一下margin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; border:1px solid red; background-color: green; margin: 20px; } </style> </head> <body> <!--margin指的是距離，外邊距--> <div class="box"> </div> </body> </html>
35-標準文檔流的介紹 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標準文檔流</title> </head> <body> <!--宏觀上：web頁面和PS設計軟件是有本質的區別的--> <!--web頁面的制作是個"流"的概念，從上往下制作--> <!--設計軟件就是隨意變更地方--> </body> </html>
36-標準文檔流下的微觀現象 <!--標準文檔流下的微觀現象--> <!--1.空白折疊現象--> <!--所有的換行只有一個空格顯示，如果想要加多余的空格的情況需要加特殊符號--> <!--<div>--> <!--文字 文字--> <!--</div>--> <!--2.高矮不齊，底邊對齊--> <!--<div>--> <!--文字文字文字文字<span>123</span>文字文字文字文字文字文字--> <!--</div>--> <!--3.一行鋪不滿，換行鋪-->
37-行內元素和塊級元素轉換 HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。 常用的塊狀元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行內元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行內塊狀元素： <img> <input> 塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。獨占一行 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置 我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為后面頁面布局做好了準備。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊級元素和行內元素</title> <style type="text/css"> /*display:inline 就是塊級元素轉換為行內元素*/ /*display:block 就是行內元素轉換為塊級元素*/ /*display:inline-block:就是將塊級元素轉換為行內塊元素*/ /*display:none 隱藏當前的標簽，不再占頁面空間*/ /*visibility: hidden 隱藏當前的標簽，仍然占頁面空間*/ .box1{ display: inline; width: 200px; height: 50px; border: 1px red solid; } .box2{ margin-top: 20px; width: 200px; height: 50px; border: 1px green solid; } </style> </head> <body> <div class="box1">div標簽1</div> <div class="box2">div標簽2</div> </body> </html>
38-布局屬性-浮動介紹 如果想制作網頁就是要通過浮動實現并排的標簽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 300px; height: 300px; background-color: #666666; float: left; } .box2{ width: 400px; height: 400px; background-color: #123456; } </style> </head> <body> <!--浮動是CSS里布局最多的屬性--> <!--浮動顯示讓兩個元素并排顯示，并且兩個元素都能設置寬度和高度--> <!--浮動的四個特性--> <!--1.浮動的元素脫標--> <!--2.浮動的元素互相貼靠--> <!--3.浮動的元素"字圍"效果--> <!--4.緊湊的效果--> <div class="box1"></div> <div class="box2"></div> </body> </html>
39-浮動元素脫標 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 200px; height: 200px; background-color: #666666; float: left; } .box2{ width: 400px; height: 400px; background-color: #123456; } span{ background-color: forestgreen; float: left; width: 200px; height: 100px; } </style> </head> <body> <!--脫標：脫離了標準文檔流--> <!--浮動的盒子就是脫離了標準文檔流 不浮動的盒子就會渲染到原來不設置浮動盒子的位置 --> <div class="box1">小紅</div> <div class="box2">小黃</div> <!--設置浮動以后，span不需要轉換為塊級元素也可以設置寬高，--> <!--所有的標簽，一旦設置了浮動，都不區分行內元素和塊狀元素--> <span>span標簽</span> <span>span標簽</span> </body> </html>
40-浮動元素互相貼靠 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素互相貼靠</title> <style type="text/css"> /*span{*/ /*background-color: red;*/ /*float: left;*/ /*}*/ .box1{ width: 150px; height: 400px; background-color: red; float: left; } .box2{ width: 100px; height: 200px; background-color: green; float: left; } .box3{ width: 300px; height: 300px; background-color: yellow; } </style> </head> <body> <!--<span>文字</span>--> <!--<span>文字</span>--> <!--如果父元素有足夠的空間，那么元素之間是互相貼靠的， 如果父元素沒有足夠的空間，就會一直貼著最靠近的邊去變化--> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
41-浮動元素字圍效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字圍效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } </style> </head> <body> <div> <img src="bd_logo1.png"> </div> <!--所謂字圍效果，當div浮動的時候，p不浮動，div擋住了p，說明div的層級比p的層級高，p中的文字不會被遮蓋--> <!--浮動的時候，永遠不是一個盒子在單獨浮動，要浮動就要一起浮動--> <p> 123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字 文字 </p> </body> </html>
42-浮動元素緊湊效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素緊湊效果</title> <style type="text/css"> .box{ float: left; background-color: yellow; } </style> </head> <body> <!--所謂收縮，就是一個浮動元素沒有設置寬度，就自動以文字的寬度緊湊收縮，和行內元素一致--> <div class="box"> panda </div> </body> </html>
轉載于:https://www.cnblogs.com/pandaboy1123/p/9479266.html
總結
以上是生活随笔為你收集整理的路飞学城Python-Day46的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 粘包问题,以及在python中如何调用操
- 下一篇： websocket python爬虫_p