Skip to content

Commit cdf52a4

Browse files
laihuaminlaihuamin
committed
update
1 parent b32e6af commit cdf52a4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

113 files changed

+4308
-0
lines changed

‎.idea/JS原生.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml

Lines changed: 696 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/black.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body{
2+
background: #ccc;
3+
}
4+
.nav{
5+
background: black;
6+
}

‎css/common.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*{ margin: 0;
2+
padding: 0;
3+
}
4+
ul,li{
5+
list-style: none;
6+
cursor: pointer;
7+
}
8+
a{
9+
text-decoration: none;
10+
}
11+
a:link,a:visited{text-decoration:none;}
12+
a:hover{text-decoration: underline;}

‎css/green.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body{
2+
background: #A3C5A8;
3+
}
4+
.nav{
5+
background: green;
6+
}

‎css/index.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
.g-wrap{
3+
width: 360px;
4+
height: auto;
5+
margin: 10px auto;
6+
border: 10px solid #eeeeee;
7+
padding: 5px;
8+
}
9+
.g-wrap .g-title{
10+
font-size: 16px;
11+
font-weight: 700;
12+
text-align: center;
13+
background-color: #99cc00;
14+
color: white;
15+
margin: 5px;
16+
}
17+
.g-content .m-nav>li{
18+
margin: 5px;
19+
}
20+
.m-nav .nav-title{
21+
font-size: 14px;
22+
font-weight: 500;
23+
color: white;
24+
background-color: #99cc00;
25+
padding-left: 10px;
26+
}
27+
.m-nav .u-nav>li{
28+
background-color: #77ccff;
29+
margin: 2px 0;
30+
font-size: 14px;
31+
padding-left: 10px;
32+
}
33+
.m-nav .u-nav>li>a{
34+
color: white;
35+
}

‎css/red.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body{
2+
background: #fdd;
3+
}
4+
.nav{
5+
background: red;
6+
}

‎css/reset.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
3+
* http://cssreset.com
4+
*/
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video, input {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font-weight: normal;
23+
vertical-align: baseline;
24+
}
25+
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, menu, nav, section {
29+
display: block;
30+
}
31+
32+
body {
33+
line-height: 1;
34+
}
35+
36+
blockquote, q {
37+
quotes: none;
38+
}
39+
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: none;
43+
}
44+
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}
49+
50+
/* custom */
51+
a {
52+
color: #7e8c8d;
53+
text-decoration: none;
54+
-webkit-backface-visibility: hidden;
55+
}
56+
57+
li {
58+
list-style: none;
59+
}
60+
61+
::-webkit-scrollbar {
62+
width: 5px;
63+
height: 5px;
64+
}
65+
66+
::-webkit-scrollbar-track-piece {
67+
background-color: rgba(0, 0, 0, 0.2);
68+
-webkit-border-radius: 6px;
69+
}
70+
71+
::-webkit-scrollbar-thumb:vertical {
72+
height: 5px;
73+
background-color: rgba(125, 125, 125, 0.7);
74+
-webkit-border-radius: 6px;
75+
}
76+
77+
::-webkit-scrollbar-thumb:horizontal {
78+
width: 5px;
79+
background-color: rgba(125, 125, 125, 0.7);
80+
-webkit-border-radius: 6px;
81+
}
82+
83+
html, body {
84+
width: 100%;
85+
}
86+
87+
body {
88+
-webkit-text-size-adjust: none;
89+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
90+
}

‎html/firstFive.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>鼠标移入/移出改变样式</title>
6+
<style>
7+
.block{
8+
width: 200px;
9+
height: 200px;
10+
background: black;
11+
padding: 10px;
12+
color: white;
13+
border: 10px solid black;
14+
margin: 0 auto;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<div class="block">鼠标移入改变样式，鼠标移出恢复</div>
20+
<script>
21+
window.onload = function () {
22+
var blocks = document.getElementsByClassName("block");
23+
blocks[0].onmouseover = function () {
24+
this.style.background = "white";
25+
this.style.borderColor = "red";
26+
this.style.color = "red";
27+
};
28+
blocks[0].onmouseout = function () {
29+
this.style = "";
30+
}
31+
}
32+
</script>
33+
</body>
34+
</html>

‎html/firstFour.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>用循环将三个Div变成红色</title>
6+
<link rel="stylesheet" href="../css/common.css">
7+
<style>
8+
.wrap{
9+
width: 500px;
10+
margin: 0 auto;
11+
text-align: center;
12+
}
13+
.div-group{
14+
margin-top: 20px;
15+
display: flex;
16+
width: 100%;
17+
justify-content: space-between;
18+
}
19+
.block{
20+
flex-basis: 150px;
21+
height: 150px;
22+
background: black;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<div class="wrap">
28+
<button>点击将DIV变成红色</button>
29+
<div class="div-group">
30+
<div class="block"></div>
31+
<div class="block"></div>
32+
<div class="block"></div>
33+
</div>
34+
</div>
35+
<script>
36+
window.onload = function () {
37+
var divs = document.getElementsByClassName("block");
38+
var btn = document.getElementsByTagName("button");
39+
btn[0].onclick = function () {
40+
for (var i = 0; i < divs.length; i++){
41+
divs[i].style.background = "red";
42+
}
43+
}
44+
}
45+
</script>
46+
</body>
47+
</html>

‎html/firstOne.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>控制DIV属性</title>
6+
<style type="text/css" rel="stylesheet">
7+
.button-group{
8+
width: 500px;
9+
margin: 0 auto;
10+
text-align: center;
11+
}
12+
.button-group button{
13+
cursor: pointer;
14+
}
15+
.content{
16+
width: 100px;
17+
height: 100px;
18+
background-color: black;
19+
margin: 10px auto;
20+
}
21+
</style>
22+
<link rel="stylesheet" href="../css/common.css">
23+
</head>
24+
<body>
25+
<div class="button-group">
26+
<button class="btn">变宽</button>
27+
<button class="btn">变高</button>
28+
<button class="btn">变色</button>
29+
<button class="btn">隐藏</button>
30+
<button class="btn">重置</button>
31+
<div id="content" class="content"></div>
32+
<script type="text/javascript">
33+
function changeAttr(elem, attr, sty) {
34+
elem.style[attr] = sty;
35+
}
36+
window.onload = function () {
37+
var content = document.getElementById('content');
38+
var btns = document.getElementsByClassName("btn");
39+
var styles = ["200px", "200px", "red", "none", "block"];
40+
var attrs = ["width", "height", "background", "display", "display"];
41+
// function changeDisplay(attr, dpy) {
42+
// }
43+
for( var i = 0; i < btns.length; i++){
44+
btns[i].index = i;
45+
btns[i].onclick = function () {
46+
this.index === btns.length - 1 && (content.style.cssText = "");
47+
changeAttr(content, attrs[this.index], styles[this.index]);
48+
}
49+
}
50+
}
51+
52+
// function changeHeight() {
53+
// content.className
54+
// }
55+
// function changeColor() {
56+
//
57+
// }
58+
// function hide() {
59+
//
60+
// }
61+
// function reset() {
62+
//
63+
// }
64+
</script>
65+
</div>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)