8.14前端(3)
阿新 • • 發佈：2018-08-14
計算 password html chm 使用 info radius 獲取 gin
---恢復內容開始---
2018-8-14 15:25:31
偽類選擇器
2018-8-14 19:55:44 明天繼續學前端!!!啦啦啦 這星期結束前端 下星期就可以愉快進行Django啦!!!
越努力越幸運!
發現前端還是不難,就是東西太碎!!!
越努力越幸運!!
2018-8-14 19:53:17 把今天學的粘貼過來 周末復習一下!
弄到了 老男孩九期全套所有視頻!15部分,感覺好開森!!
day49 1. 內容回顧 1. 昨日內容 1. form表單(一般method="post") 1. input系列 type1. 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: 內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>偽類選擇器</title> 6 <style> 7 /*連接沒有被點擊過*/ 8 a:link { 9 color: burlywood; 10 } 11 /*連接被點擊過*/ 12 a:visited{ 13 color: green; 14 } 15 /*鼠標一上去*/ 16 a:hover{ 17 color: black; 18 } 19 div:hover{ 20 color: green; 21 } 22 23 /*input獲取光標時*/ 24 input:focus{ 25 outlion:0; 26 background-color: green; 27 } 28 /*偽元素選擇器*/ 29 .c1:before{ 30 content: ‘*‘; 31 color:red; 32 } 33 .c1:after{ 34 content: ‘[?]‘; 35 color:blue; 36 } 37 </style> 38 </head> 39 <body> 40 <a href="http://www.sougo.com">搜狗</a> 41 <input name="input"> 42 <p class="c1">啊啊啊</p> 43 <p class="c1">啊啊啊</p> 44 <p class="c1">啊啊啊</p> 45 <div id="d1">我是div</div> 46 </body> 47 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體屬性測試</title> <link rel="stylesheet" href="test.css"> </head> <body> <h1>海燕</h1> <p>在蒼茫的大海上</p> <p class="c1">在蒼茫的大海上</p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>背景不動效果實例</title>
<style type="text/css">
.d1 {
height: 500px;
background: red;
}
.d2 {
height: 500px;
background-image: url("C:\Users\Administrator\Desktop\朕的東西\隨手壁紙1.jpg");
/*把背景固定住*/
background-attachment: fixed;
}
.d3 {
height: 500px;
background: green;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">.</div>
<div class="d3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>display屬性</title>
<style type="text/css">
.c1 {
background-color: red;
display: inline;
/*display: block;*/
}
.c2{
background-color: green;
}
ul {
/*去掉小圓點*/
list-style-type:none;
}
/*橫著排列*/
li {
display: inline;
/*上下左右都是20*/
padding: 20px;
border-right: 1px solid #666;
}
li a{
border: 1px solid red;
}
/*單獨某個標簽設置*/
li.last {
border-right: none;
}
</style>
</head>
<body>
<div class="c1">div</div>
<span class="c2">span</span>
<span class="c2">span</span>
<ul>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li class="last">玉米商城</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
.c1{
height: 200px;
width: 300px;
border: 5px solid green;
margin:-top:5px;
margin-right: 1px;
/*上右下左*/
margin: 5px 10px 15px 200px;
/*塊級的居中*/
margin: 0px auto;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>背景顏色</title>
<style type="text/css">
.d1 {
background: red;
}
.d2 {
width: xx px;
height: xx px;
/*不重復*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="d1">我是div</div>
<div class="d2">我是div2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>邊框實例</title>
<style type="text/css">
div{
height: 200px;
width: 300px;
background-color: red;
/*
border-width: 10px;
border-style: solid; */
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
8.14前端(3)