Python-HTML CSS 練習

時間 2019-11-09
標籤 python html css 練習欄目 Python 简体版
原文原文鏈接
  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     <!-- 轉移字符: &gl; &nbsp; -->
 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。