Python學習-day14-前臺總結 HTML和CSS總結
如下博客爲轉載css
http://www.cnblogs.com/evilliu/p/5760232.htmlhtml
HTML和CSS總結ide
一：針對上節做業：佈局
1：post
實現：url
code：spa
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a{ 8 border: 0; 9 border-left: solid red 1px; 10 border-right: solid red 1px; 11 height: 16px; 12 float: left; 13 margin-bottom: 0; 14 width: 40px; 15 text-align: center; 16 } 17 .b{ 18 width: 85px; 19 height: 19px; 20 border: solid red 1px; 21 } 22 a{ 23 text-align: center; 24 display: inline-block; 25 width: 20px; 26 line-height: 20px; 27 margin: 0; 28 float: left; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="b"> 34 <a>+</a> 35 <input class="a" type="text" value="1"/> 36 <a>-</a> 37 </div> 38 </body> 39 </html>
效果：插件
須要注意:設計
讓標籤周圍外距爲0：margin:0 auto;調試
讓標籤內的文本水平居中：text-align: center；
讓標籤垂直居中：line-height: 20px;
在display: inline-block;中默認有3px的邊距。解決方法float。
2：改造標籤;咱們經過改造標籤的屬性來改造標籤的樣式。
3：<img>標籤默認帶有邊框。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <a href="http://www.jd.com"> 9 <img src="15.jpg"> 10 </a> 11 </body> 12 </html>
如上代碼在低版本的IE 會出現邊框。須要加入以下樣式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 img{ 8 border: 0;/*須要加入該樣式才能夠*/ 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.jd.com"> 14 <img src="15.jpg"> 15 </a> 16 </body> 17 </html>
二:html標籤的補充
<img>標籤的補充。
1）當圖片不顯示的時候，每每會出現顯示一些波浪號等其餘的符號。這時候用alt屬性，當圖片不顯示的時候，會顯示alt的內容。
code：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <img src="1.jpg" alt="圖片缺失"> 9 </body> 10 </html>
效果：
各個標籤的默認值補充：
1）<input> text類型標籤的默認值:
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span> 9 <input type="text" value="1" /> 10 </span> 11 </body> 12 </html>
效果：
2）<input> radio類型的默認值：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span> 9 男：<input type="radio" name="a" checked="checked" /> 10 女：<input type="radio" name="a" /> 11 </span> 12 </body> 13 </html>
效果：
3）<input>標籤checkbox類型的默認值。
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span> 9 basketball：<input type="checkbox" name="fav" checked="checked" /> 10 football：<input type="checkbox" name="fav" /> 11 swimming：<input type="checkbox" name="fav" checked="checked"/> 12 pingbang：<input type="checkbox" name="fav" /> 13 </span> 14 </body> 15 </html>
效果：
4）select標籤的默認值。
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span> 9 <select> 10 <option >北京</option> 11 <option>大連</option> 12 <option selected="selected">瀋陽</option> 13 </select> 14 </span> 15 </body> 16 </html>
默認狀況顯示的是第一個標籤。
添加默認值。修改顯示。
5）<textarea>默認值：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span> 9 <textarea> 10 123 11 </textarea> 12 </span> 13 </body> 14 </html>
效果：
總結：
1：<input>標籤的默認值，經過設置value(text)。或者經過checked=checked(radio checkbox)
2：<select>標籤的默認值，經過selected=selected來設置。
3：<textarea>經過在標籤之間設置值來設置默認值。
三：Css補充：
1：當咱們的需求一個樣式要全局生效而不是被其餘一樣的樣式覆蓋掉，須要使用!important.
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a{ 8 color: red; 9 } 10 .b{ 11 color:black; 12 } 13 </style> 14 </head> 15 <body> 16 <span class="a b">just test</span> 17 </body> 18 </html>
效果：
這種優先級下面的優先級高於上面的優先級。
用!important來增長 class="a"的優先級。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a{ 8 color: red !important; 9 } 10 .b{ 11 color:black; 12 } 13 </style> 14 </head> 15 <body> 16 <span class="a b">just test</span> 17 </body> 18 </html>
效果：
應用場景：當咱們要求隱藏標籤的時候，使用display:none的時候，咱們但願在使用這個樣式的時候，就是隱藏標籤。而不是被display:block等覆蓋，可使用display:none !important;來解決這個問題。
2）屬性選擇器：咱們自定義屬性選擇器，來查找對應的標籤。經過[]形式查找。
code：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a[cc=evil]{ 8 color:firebrick; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="a" cc="tom">just test</div> 14 <div class="a" cc="evil">just test</div> 15 <div class="a" cc="jack">just test</div> 16 <div class="a" cc="evil">just test</div> 17 </body> 18 </html
效果：
3)在使用width百分比的時候，須要注意一個問題：在定義百分比的時候，須要在外層定義這個標籤的寬度。纔可使用百分比。
問題：
內容溢出.當窗口變小的時候。
採用外部標籤訂義寬度來解決。
底端出現左右拉取的橫條。
代碼：
1 <div class="a" style="width: 1200px "> 2 <div class="a" style="width: 20%;">> </div> 3 <div class="v" style="width: 80%;">>dadadadaddadadadad 4 dadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 5 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad 6 daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 7 </div>
注意：在使用寬度的百分比的時候須要在外部標籤訂義標籤的長度。
4）對於在滑動網頁的時候，標題欄一直在頭部的網頁實現方法：
利用postion的fixed 以及top:0 left:0 right:0
經過top:0,left:0,right:0來拉取寬度，而不是經過咱們定義寬度。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a{ 8 /*width: 2200px; 注意不須要定義寬度*/ 9 position: fixed; 10 top: 0; 11 margin: 0 auto; 12 left: 0; 13 right: 0; 14 height: 50px; 15 background-color: red; 16 color:black; 17 line-height: 50px; 18 padding-left: 5px; 19 } 20 .c{ 21 float: left; 22 height: 3500px; 23 margin-top: 50px; 24 color: black; 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="a"> 31 標題一 標題二 標題三 32 </div> 33 <div class="c"> 34 熱點 35 </div> 36 37 </body> 38 </html>
5）實現輸入框左邊或者右邊有圖片。以下效果：
code：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .a{ 8 width: 200px; 9 position: relative; 10 height: 37px; 11 } 12 .b{ 13 width: 150px; 14 /*border: 0;*/ 15 height: 35px; 16 line-height: 37px; 17 padding-right: 50px; 18 } 19 .c{ 20 position: absolute; 21 right: 0; 22 top:0; 23 height: 37px; 24 25 } 26 </style> 27 </head> 28 <body> 29 <div class="a"> 30 <input class="b" type="text" /> 31 <img class="c" src="2.png"> 32 </div> 33 </body> 34 </html>
效果：
實現核心思想：經過postion：relative absolute 實現一個標籤相對另外一個標籤的位置。位置經過 top:0 、left:0、right:0等其中2個屬性肯定位置。正方形或者長方形肯定其中2個邊位置那形狀也肯定了。！！！！
6）對於寫html網頁的時候。建議以下分如下目錄：
1 目錄介紹 2 ├── App 3 │ ├── *.html#存放html文件 4 │ 5 │ 6 ├── css 7 │ ├── *.css#存放css文件。 8 │ 9 ├── js 10 │ ├── *.js#存放js文件。 11 │ 12 ├── picture 13 │ ├── #存放圖片。
7)在使用圖標的時候，可使用插件。
Font Awesome
下載地址:http://fontawesome.io/
使用方式：解壓到css目錄中。注意css目錄下有2個文件：
其中min文件是壓縮文件，裏面的內容由一行組成。在調試過程當中不建議使用min，以方便查看樣式。在上線的時候使用min。
使用圖標：點擊官網的icons或者訪問：http://fontawesome.io/icons/
查找對應圖標。並點擊。查看樣式css代碼。好比：
點擊查看：
code：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"/><?--引用插件css文件--> 7 <style> 8 .c{ 9 color: red;/*給引用的樣式添加新的樣式*/ 10 } 11 </style> 12 </head> 13 <body> 14 <i class="fa fa-leaf c" aria-hidden="true"></i><!--注意class引用多個樣式--> 15 </body> 16 </html>
效果：
8）對於float實現子標籤飄起來：
之後再使用float的時候 ，網頁須要有以下部分。好處自動撐起背景色。由於高度的不肯定性。
1 .clearfix:after{ 2 content: '.';/*.撐起背景色*/ 3 display:block;/*默認是內聯標籤*/ 4 clear: both;/*讓子div float起來*/ 5 visibility: hidden;/*隱藏.*/ 6 height: 0;/*讓原先的.佔有高度變爲0*/ 7 8 } 9 <div class="clearfix"> 10 <div class="inner" style="float: left">OK</div> 11 <div class="inner1"style="float: left">good</div> 12 </div>
code:須要注意的是：背景色是在clearfix中定義的。不是在after中定義的。
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <style> 7 .clearfix{ 8 background-color: red; 9 } 10 .clearfix:after{ 11 content: '.';/*.撐起背景色*/ 12 display:block;/*默認是內聯標籤*/ 13 clear: both;/*讓子div float起來*/ 14 visibility: hidden;/*隱藏.*/ 15 height: 0;/*讓原先的.佔有高度變爲0*/ 16 17 } 18 .inner{ 19 float: left; 20 21 } 22 .inner1{ 23 float: left; 24 height: 50px; 25 background-color: #EEEE00; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="clearfix"> 31 <div class="inner">OK</div> 32 <div class="inner1">good</div> 33 </div> 34 </body> 35 </html>
效果：
9）尖角的圖標的造成。
code：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .a{ 8 display: inline-block; 9 border-left: solid red 15px; 10 border-right: solid gold 15px; 11 border-bottom: blue solid 15px; 12 border-top: solid black 15px; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="a"></div> 18 </body> 19 </html>
效果：
若是想取其中的一一個三角，能夠用transparent透明色。來遮蓋其餘三角。
code：
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .a{ 8 display: inline-block; 9 border-left: solid transparent 15px ; 10 border-right: solid transparent 15px; 11 border-bottom: blue transparent 15px; 12 border-top: solid black 15px; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="a"></div> 18 </body> 19 </html>
效果：
10）後臺管理頁面。利用absolute來肯定各個div的位置。
注意：給body標籤添加margin:0 auto保證主體部分沒有邊框！！！！
後臺管理的佈局：
code：利用absolute來固定位置。以及overflow 當內容溢出<div>的範圍的時候，自動給內容建立拉動的動做條。保證菜單不超出範圍。
1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pd_header{ 8 height: 45px; 9 background-color: cornflowerblue; 10 line-height: 45px; 11 padding-left: 15px; 12 } 13 body{ 14 margin: 0 auto; 15 } 16 .pd_body{ 17 width: 200px; 18 background-color: blanchedalmond; 19 position: absolute; 20 top:45px; 21 left: 0; 22 bottom: 0; 23 24 } 25 .pd_content{ 26 position: absolute; 27 top:45px; 28 left:202px; 29 bottom: 0; 30 right:0; 31 background-color: #EEEE00; 32 overflow: scroll;/*注意這個樣式，當內容溢出的時候給內容建立一個拉動的動做條保證菜單不超出*/ 33 } 34 </style> 35 </head> 36 <body> 37 <div class="pd_header">標題一</div> 38 <div class="pd_body"></div> 39 <div class="pd_content"> 40 dadadadasdad<br/> 41 dadadadasdad<br/> 42 </div> 43 </body> 44 </html>
效果：
11)模擬對話框：
首先看下對話框的結構：
解釋：
1）底層上面有按鈕，當用戶點擊添加按鈕的時候，會彈出對話框。當對話框出現的時候，底層按鈕，用戶不能夠進行點擊。因此須要遮罩層。
2）遮罩層：主要做用是當用戶點擊添加按鈕的時候，用戶的不能夠點擊添加按鈕。
設計思想：當用點擊添加按鈕，按鈕不能夠點擊，對話框彈出。當用戶不點擊按鈕的時候，遮罩層和對話框是被隱藏的（display:none）。並且要保證遮罩層要在對話框下面(z-index)以及遮罩層的透明度（opacity 0是全透明0-1之間）。讓
用戶點擊按鈕，彈出對話框的時候能夠看到添加按鈕。
code：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .fist{ 11 height: 2000px; 12 } 13 .second{ 14 position: fixed; 15 top:0; 16 left: 0; 17 right: 0; 18 bottom: 0; 19 background-color: black; 20 opacity: 0.4; 21 z-index: 11; 22 } 23 .modle{ 24 height: 200px; 25 width: 400px; 26 background-color: #eeeeee; 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 margin-left: -200px; 31 margin-top: -100px; 32 z-index: 12; 33 } 34 .text{ 35 height: 200px; 36 width: 400px; 37 padding-right: 0; 38 padding-bottom: 0; 39 opacity:1; 40 color: red; 41 42 } 43 </style> 44 </head> 45 <body> 46 <div><input type="button" value="提交"/></div> 47 <div class="fist"> </div> 48 <div class="second "></div> 49 <div class="modle "> 50 <input class="text" type="text"/> 51 </div> 52 <div class