File tree Expand file tree Collapse file tree 2 files changed +106
-1
lines changed
Expand file tree Collapse file tree 2 files changed +106
-1
lines changed Original file line number Diff line number Diff line change @@ -245,10 +245,31 @@ HTML **超文本标记语言**
245245 #### 拖拽元素
246246
247247 页面设置了` draggable = 'true' ` 属性元素
248-
248+
249+ + ` ondragstart ` 拖拽开始时调用
250+ + ` ondragleave ` ** 鼠标离开拖拽元素时** 调用
251+ + ` ondragend ` 拖拽结束时
252+ + ` ondrag ` 整个拖拽过程都会调用
253+
249254
250255 ``` html
251256 <div class =" box" draggable =" true" ></div >
252257 ```
258+
259+ CSS
260+
261+ #### background的常见背景属性
262+
263+ + `background-color:#ff99ff`,设置元素的背景色
264+ + `background-image:url(http://github.com/images/2.gif)`,图像设置成背景
265+ + `background-repeat:no-repeat`,是否平铺
266+ - `no-repeat` 不要平铺
267+ - `repeat-x` 横向平铺
268+ - `repeat-y` 纵向平铺
269+ + `background-position`,背景定位
270+ ....
271+
272+ #### ID选择器:规定用`#`来定义
273+
253274
254275
Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html >
3+ < head lang ="en ">
4+ < meta charset ="UTF-8 ">
5+ < title > </ title >
6+ < style >
7+ div {
8+ width : 500px ;
9+ height : 100px ;
10+ margin : 10px auto;
11+ border : 1px solid # 000 ;
12+ }
13+
14+ /* 语法:
15+ linear-gradient(方向,起始颜色,终止颜色);
16+ 方向:to left to right to top to bottom 角度 30deg
17+ 起始颜色
18+ 终止颜色
19+ */
20+ div : nth-child (1 ) {
21+ background-image : linear-gradient (to right, yellow, green);
22+ }
23+
24+ /* 不写方向,表示默认的方向是:从上往下 */
25+ div : nth-child (2 ) {
26+ background-image : linear-gradient (yellow, green);
27+ }
28+
29+ /* 方向可以指定角度 */
30+ div : nth-child (3 ) {
31+ width : 100px ;
32+ height : 100px ;
33+ background-image : linear-gradient (135deg , yellow, green);
34+ }
35+
36+ /* 0%的位置开始出现黄色,40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度,100%的位置开始出现蓝色 */
37+ div : nth-child (4 ) {
38+ background-image : linear-gradient (to right,
39+ yellow 0% ,
40+ red 40% ,
41+ green 70% ,
42+ blue 100% );
43+
44+ }
45+
46+ /* 颜色之间,出现突变 */
47+ div : nth-child (5 ) {
48+ background-image : linear-gradient (45deg ,
49+ yellow 0% ,
50+ yellow 25% ,
51+ blue 25% ,
52+ blue 50% ,
53+ red 50% ,
54+ red 75% ,
55+ green 75% ,
56+ green 100%
57+ );
58+ }
59+
60+ div : nth-child (6 ) {
61+ background-image : linear-gradient (to right,
62+ # 000 0% ,
63+ # 000 25% ,
64+ # fff 25% ,
65+ # fff 50% ,
66+ # 000 50% ,
67+ # 000 75% ,
68+ # fff 75% ,
69+ # fff 100%
70+ );
71+
72+ }
73+
74+ </ style >
75+ </ head >
76+ < body >
77+ < div > </ div >
78+ < div > </ div >
79+ < div > </ div >
80+ < div > </ div >
81+ < div > </ div >
82+ < div > </ div >
83+ </ body >
84+ </ html >
You can’t perform that action at this time.
0 commit comments