8.17前端(4)
阿新 • • 發佈：2018-08-17
同時 返回按鈕 塌陷 設置 play solid bsp epp max-width
渡劫 ing 七夕掛針!渡劫!
2018-8-17 16:32:15
先把刻上筆記帖上
day49 1. 內容回顧 1. 昨日內容 1. form表單(一般method="post") 1. input系列 type 1. text 2. password 3. radio 4. checkbox 5. date(datetime) 6. submit 7. button 8. reset 9. hidden 10. file (enctype="multipart/form-data") 2. select 1. select>option(分組的下拉框 select>optgroup>option) 3. textarea 2. form表單提交 三要素: 1. input\select\textarea 要有一個name屬性 2. 提交按鈕必須要是 type="submit" 3. form不是from;獲取用戶輸入的標簽都要放到form標簽裏面(僅限於form提交數據) 3. CSS選擇器 1. 基本選擇器 1. 標簽選擇器 2. ID選擇器 3. 類選擇器(class="c1 c2 ...") 2. 通用選擇器(*) 3. 組合選擇器 1. 後代選擇器(空格) 2. 兒子選擇器(>) 3. 毗鄰選擇器(div+p) 4. 弟弟選擇器(~) 4. 屬性選擇器 1. [s9] 2. [s9="hao"] 3. 其他不常用的(有印象即可) 5. 分組和嵌套 1. 分組(用逗號分隔的多個選擇器條件) 2. 嵌套(選擇器都可以組合起來使用) 6. 選擇器的優先級 1. 越靠近標簽的優先級越高(就近原則) 2. 權重的計算 1. 內聯樣式1000 2. ID選擇器100 3. 類選擇器10 4. 元素選擇器1 div#d1(101)/div.c1(11)/div .c1 2. 之前內容復習 1. Python語法基礎 2. 數據類型和內置方法 3. 函數 1. 參數 2. 裝飾器 3. 叠代器和生成器 4. 匿名函數 5. 遞歸 6. 內置函數 7. 三元運算和列表推導式 4. 文件操作 5. 面向對象(CRM項目會有大量的應用) 6. 常用的模塊和包 7. 網絡編程和並發編程(優先級低) 8. 數據庫(建庫\建表\基本查詢\) 建立自己的自信 2. CSS選擇器補充 http://www.cnblogs.com/liwenzhou/p/7999532.html 3. CSS屬性 1. 文字屬性 1. font-family 2. font-size 3. font-weight 4. color 1. rgb(255, 255, 255) 2. #f00 3. red 4. rgba() 2. 文本屬性 1. text-align 2. text-decoration 3. 背景屬性 1. background-color 2. background-image 4. 邊框屬性 1. border 2. border-radius --> 變圓 5. display屬性 1. inline 2. block 3. inline-block 4. none (隱藏) 6. CSS盒子模型(從外到內) 1. margin: 邊框之外的距離(多用來調整 標簽和標簽之間的距離) 2. border邊框 3. padding:內容區和邊框之間的距離(內填充/內邊距) 4. condent: 內容 7. 浮動: div配合float 來做 頁面的布局 任何元素浮動之後都會變成塊元素 float: 1. left 2. right 3. none 8. 清除浮動(清除的是浮動帶來的負面效果-->父標簽塌陷(撐不起來)) 1. clear 1. left 2. right 3. both 最常和偽元素結合起來應用: .clearfix:after { content: ""; display: block; clear: both } 9. 定位: 1. static --> 默認的 2. relative --> 相對定位(相對於原來的位置來說) 3. absolute --> 絕對定位(相對於最近的一個被定位過的祖宗標簽) (完全脫離文檔流) 4. fixed --> 固定在某個位置(返回頂部按鈕) left right top bottom 10. z-index (明天講) 4. 頁面練習 博客頁面 1. 先排HTML文檔結構,同時定義好類名(類名最好有意義) 2. 從左往後,從上到下依次寫樣式
博客示例
作圖網站
<!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>定位</title> <style type="text/css"> *{ margin: 0; padding: 0; } .c1, .c2, .c3 , .c4{ height: 100px; width: 200px; } .c1{ background-color: red; } .c2{ background-color: green; } .c3{ background-color: blue; } .c4{ background-color: deeppink; position: absolute; top: 150px; left: 400px; } /*右下角固定的返回按鈕*/ .fixed-back{ position: fixed; right: 20px; bottom: 20px; background-color: grey; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c3"></div> <div class=".fixed-back">返回頂部</div> </body> </html>
浮動 float
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>頁面布局實例</title> <style> *{ margin: 0; padding: 0; } .c1{ height: 1000px; width: 20%; background-color: red; /*向左浮動*/ float: left; } .c2{ height: 1000px; width: 80%; background-color: green; float: left; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
清除浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style> #d1{ border: 1px solid black; } /*浮動的div可以跑出去*/ .c1, .c2{ float:left; height: 100px; } /* 清除浮動標簽,把偽類左邊不能有浮動,所以只能在浮動標簽下面占空, 父類也就有了像素*/ # d1:after{ content: "11"; display: block; clear: left; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> </div> </body> </html>
overflow 浮動溢出
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>overflow實例</title> <style type="text/css"> .c1 { width:120px; height:120px; border:1px solid black; overflow: hidden; } /*<!-- 設置一個圓形的頭像 -->*/ /*當內容超過父標簽時候隱藏*/ .header-img{ width:120px; height:120px; border:1px solid red; border-radius: 100% overflow:hidden; } .img { max-width: 100% } </style> </head> <body> <div classs="c1"> 海燕壓 海燕壓 海燕壓 海燕壓 海燕壓 海燕壓 海燕壓 </div> <div class="header-img"> <img src=""> </div> </body> </html>
8.17前端(4)