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>
