Python-HTML CSS 練習
阿新 • • 發佈：2019-01-01
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html基礎複習</title> 6 </head> 7 <body> 8 <!-- 前端: 使用者可見的所有介面均是前端(PC端/移動端) --> 9 <!-- html: 頁面架構搭建 | css: 頁面佈局樣式 | js: 頁面互動渲染 --> 10 <!--編輯器: webstrom | sublime | atom | pycharm --> 11 12 <!-- 標籤: <字母開頭 + 合法字元(數字|-)> => (標籤具有作用域,有頭有尾) <abc> | <num1> | <nav-title> --> 13 <!-- 指令: <!doctype html> 註釋 --> 14 <!-- 轉移字元: ≷ --> 15 16 <!--基本標籤: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style --> 17 18 <!-- 分類: 單雙 | dispaly --> 19 <!-- inline: span | b | i | a --> 20 <!-- inline-block: img | input --> 21 <!--block: div | hn | p | ul | hr | br --> 22 </body> 23 </html> 24 25 26 <!DOCTYPE html> 27 <html> 28 <head> 29 <meta charset="UTF-8"> 30 <title>css複習</title> 31 </head> 32 <body> 33 <!-- 1.css三種引入: 行間式 | 內聯式 | 外聯式 --> 34 <!-- 選擇器 作用域 樣式塊 --> 35 36 37 <!-- 2.長度單位: px | em | rem | cm | mm | vw | vh | in --> 38 39 <!-- 3.顏色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF --> 40 41 <!-- 4.文字樣式 --> 42 <style> 43 span { 44 font: 900 normal 30px/100px '首選字型', '備用字型1', '備用字型2'; 45 text-align: center; 46 color: red; 47 text-decoration: underline; 48 letter-spacing: 3px; 49 word-spacing: 10px; 50 text-indent: 2em; 51 } 52 </style> 53 54 <!-- 5.選擇器 --> 55 <style type="text/css"> 56 /*選擇器： css連線html標籤的橋樑，建立連線後就可以控制標籤樣式*/ 57 /*標籤 類 id*/ 58 /*組合選擇器*/ 59 /*偽類選擇器*/ 60 61 /*優先順序：*/ 62 /*基礎選擇器： !important > id > 類[屬性] > 標籤 > 通配*/ 63 /*組合選擇器: 權重(同類型個數比較)*/ 64 .b > .s {} 65 .b .s {} 66 .b + .s {} 67 .b.s {} 68 .b[class] {} 69 70 #ss { font-size: 50px; } 71 span.s2 { font-size: 40px; } 72 [class] { font-size: 35px; } 73 .s1 { font-size: 30px; } 74 span { font-size: 20px!important; } 75 76 /* 標籤名 | . | # */ 77 /*後代"空格"(子代) | 兄弟"~"(相鄰) | 群組"," | 交集"緊挨著"*/ 78 /* [屬性名="屬性值"] */ 79 80 </style> 81 82 <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span> 83 84 <style type="text/css"> 85 /* 偽類選擇器 */ 86 /* :link :hover(滑鼠懸浮) :active(滑鼠點選中) :visited */ 87 /* :nth-child() 先位置後型別 :nth-of-type() 先型別後位置 */ 88 /* :not() */ 89 /* :before(盒子渲染前) :after(盒子渲染後) :focus(表單標籤獲取焦點) */ 90 p:nth-child(3) { font-size: 100px } 91 p:nth-of-type(2n) { font-size: 50px } 92 </style> 93 <div class="box"> 94 <span>span</span> 95 <p>pp1</p> 96 <p>pp2</p> 97 </div> 98 99 <!-- 6.精靈圖 --> 100 <style type="text/css"> 101 .pg { 102 width: 200px; 103 height: 200px; 104 border: 1px solid black; 105 position: absolute; 106 top: 10px; 107 left: calc(50vw - 100px); 108 } 109 .pg { 110 background: url('img/bg.png') no-repeat; 111 /*將背景圖片的具體位置移至顯示區域*/ 112 background-position: -300px -350px; 113 } 114 </style> 115 <div class="pg"></div> 116 </body> 117 </html> 118 119 120 <!DOCTYPE html> 121 <html> 122 <head> 123 <meta charset="UTF-8"> 124 <title>盒模型複習</title> 125 <style type="text/css"> 126 abc { 127 display: inline-block; 128 } 129 130 .box { 131 background: orange; 132 133 /*文字型別的樣式具有繼承關係*/ 134 font-size: 30px; 135 font-weight: 900; 136 /*inline-block不會繼承*/ 137 text-decoration: underline; 138 text-indent: 2em; 139 line-height: 60px; 140 } 141 </style> 142 </head> 143 <body> 144 <!-- 文字屬性通過擁有繼承關係: 子標籤沒有設定文字屬性時,值會從父級中獲取(父級如果沒有設定,會找到html) --> 145 146 <div class="box"> 147 <span>inline</span> 148 <div>block</div> 149 <abc>inline-block</abc> 150 </div> 151 152 <!-- 1.盒子的四個組成部分 --> 153 <!-- content | padding | border | margin --> 154 <!-- display: inline | inline-block | block --> 155 156 <!-- content: 提高給內容(文字,圖片,子標籤整個盒子)的顯示區域 --> 157 158 <!-- padding: 介於border與content之間的距離, 可以撐開border與content之間的距離, 沒有自身顏色(透出背景顏色),只有區域 --> 159 <!-- 注: padding-top可以將自身與自身第一個子級分離 --> 160 <style type="text/css"> 161 .p { 162 width: 20px; 163 height: 20px; 164 background: red; 165 } 166 .b { 167 width: 100px; 168 padding-bottom: 100px; 169 border-bottom: 1px solid black; 170 } 171 .c { 172 background: pink; 173 /*border: 1px solid black;*/ 174 border-style: solid; 175 padding-left: 32px; 176 padding-bottom: 32px; 177 margin-left: 32px; 178 /*text-indent: 2em;*/ 179 } 180 </style> 181 <div class="b"> 182 <div class="p"></div> 183 </div> 184 <div class="c">123</div> 185 186 <!-- border: 邊框, 有寬度顏色樣式, 如果給顏色設定透明也可以透出背景顏色 --> 187 188 <!-- margin: 控制盒子位置 => 盒模型佈局 --> 189 190 <!-- 2.邊界圓角 --> 191 <style type="text/css"> 192 .bj { 193 width: 100px; 194 height: 100px; 195 background: pink; 196 } 197 .bj { 198 /*border-radius: 20px;*/ 199 /*border-radius: 40%;*/ 200 /*border-radius: 10px 30px 50px;*/ 201 border-radius: 10px / 50px; 202 } 203 </style> 204 <div class="bj"></div> 205 206 <!-- 3.display --> 207 208 <!-- 4.margin佈局 --> 209 <!-- i) margin-top | margin-left 完成自身佈局, 右下兩個方向影響兄弟 --> 210 <style type="text/css"> 211 .hh { 212 width: 30px; 213 height: 30px; 214 background: black; 215 /*display: inline-block;*/ 216 float: left; 217 /*自身動,控制自身佈局*/ 218 /*margin-top: 30px;*/ 219 /*margin-left: 30px;*/ 220 221 /*右兄弟動,輔助兄弟佈局*/ 222 margin-right: 100px; 223 /*下兄弟動,輔助兄弟佈局*/ 224 /*margin-bottom: 30px;*/ 225 } 226 .xx { 227 width: 30px; 228 height: 30px; 229 background: red; 230 /*display: inline-block;*/ 231 float: left; 232 } 233 </style> 234 <div class="hh"></div> 235 <div class="xx"></div> 236 237 <!-- ii) 上下間距會重疊取大值, 左右間距會疊加 --> 238 <!-- 坑1: 父子聯動 坑2: 上兄弟下margin和下兄弟上margin重疊取大值 --> 239 <style type="text/css"> 240 .x, .z { 241 width: 50px; 242 height: 50px; 243 background: blue; 244 } 245 .x { 246 /*margin-bottom: 40px;*/ 247 } 248 .z { 249 margin-top: 10px; 250 background: yellow; 251 } 252 .y { 253 width: 10px; 254 height: 10px; 255 background: red; 256 /*margin-top: 10px;*/ 257 } 258 /*坑1解決方案*/ 259 .y { 260 /*方案1*/ 261 /*float: left; 262 margin-top: 10px;*/ 263 264 /*方案2*/ 265 /*position: relative;*/ 266 position: absolute; 267 /*top: auto;*/ 268 /*top: 20px;*/ 269 margin-top: 20px; 270 } 271 .z { 272 /*position: relative;*/ 273 } 274 </style> 275 <div class="x"></div> 276 <div class="z"> 277 <div class="y"></div> 278 </div> 279 </body> 280 </html>