Skip to content

Commit 7196f05

Browse files
DataEraserCDataEraserC
committed
add ms.html
1 parent a5d52fa commit 7196f05

File tree

4 files changed

+207
-0
lines changed

4 files changed

+207
-0
lines changed

‎html/8.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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<!-- <div>div1</div>
13+
<div>div2</div><br>
14+
<span>span1</span>
15+
<span>span2</span> -->
16+
<div style="width: 500px;">
17+
<div style="background-color: #ffa500;">网页标题</div>
18+
<div style="background-color: #FFD700;height: 200px;width: 100px;float: left;"><b>菜单</b><br>
19+
HTML<br>
20+
CSS<br>
21+
JavaScript</div>
22+
<div style="width: 400px;background-color:aqua;height:200px;float:left">内容</div>
23+
<div style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div>
24+
</div>
25+
<audio src="TruE.flac" controls></audio>
26+
<video controls style="height: 800px;width:450px">
27+
<source src="793622889_nb3-1-64.flv" type="music/flv">
28+
</source>
29+
</video>
30+
<video src="793622889_nb3-1-64.flv" controls></video>
31+
<iframe src="https://bing.com" style="width:500px;height: 300px;"></iframe>
32+
</body>
33+
34+
</html>

‎html/flexbox/flexbox.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* .box {
2+
border: 5px solid green;
3+
padding: 10px;
4+
}
5+
6+
.item {
7+
border: 2px solid red;
8+
border-style: solid;
9+
border-width: 20px ;
10+
margin: 20px 40px 60px 80px;
11+
padding: 20px;
12+
} */
13+
14+
body {
15+
background-color: royalblue;
16+
}
17+
.container {
18+
background-color: yellow;
19+
border: 2px solid green;
20+
height: 500px;
21+
/* width: 50%; */
22+
max-width: 1000px;
23+
margin: 150px auto;
24+
padding: 10px;
25+
display: flex;
26+
/* flex-direction: row;
27+
flex-wrap: wrap-reverse; */
28+
/* flex-flow: row-reverse warp; */
29+
justify-content: space-around;
30+
align-items: flex-end;
31+
}
32+
33+
.item {
34+
height: 100px;
35+
width: 100px;
36+
background-color: brown;
37+
margin: 20px;
38+
}

‎html/flexbox/flexbox.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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>flexbox</title>
9+
<link rel="stylesheet" href="flexbox.css">
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="item">1</div>
15+
<div class="item">2</div>
16+
<div class="item">3</div>
17+
<!-- <div class="item">4</div>
18+
<div class="item">5</div>
19+
<div class="item">6</div>
20+
<div class="item">7</div>
21+
<div class="item">8</div>
22+
<div class="item">9</div>
23+
<div class="item">10</div>
24+
<div class="item">11</div> -->
25+
</div>
26+
27+
28+
29+
30+
<!-- <div class="box">
31+
<div class="item">content</div>
32+
</div> -->
33+
34+
35+
36+
37+
38+
39+
40+
<!--div 独占一行 有宽高 高度默认时，会被内部元素撑开-->
41+
<!-- <div>这是一个div
42+
<div>div中的div</div>
43+
</div>
44+
<div>这是另一个div</div> -->
45+
</body>
46+
47+
</html>

‎html/ms/ms.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
</head>
10+
11+
<body>
12+
<style>
13+
/* body{
14+
padding: 0;
15+
margin: 0;
16+
} */
17+
18+
.parts {
19+
margin-top: 10px;
20+
width: 18%;
21+
height: 120px;
22+
background-color: blue;
23+
}
24+
25+
.top {
26+
width: 20%;
27+
height: 100px;
28+
padding: 0 20%;
29+
display: flex;
30+
background-color: yellow;
31+
justify-content: space-evenly;
32+
}
33+
.middle{
34+
height: 360px;
35+
width: 100%;
36+
background-color: aqua;
37+
padding: 0 5%;
38+
display: flex;
39+
justify-content: space-evenly;
40+
}
41+
.box{
42+
margin: 30px 0;
43+
background-color: white;
44+
height: 360px;
45+
width: 20%;
46+
display: flex;
47+
flex-direction: column;
48+
}
49+
</style>
50+
<div class="top">
51+
<div class="parts">
52+
</div>
53+
<div class="parts"></div>
54+
<div class="parts"></div>
55+
<div class="parts"></div>
56+
<div class="parts"></div>
57+
</div>
58+
59+
<div class="middle">
60+
<div class="box">
61+
<div class="content"></div>
62+
<div class="content"></div>
63+
<div class="content"></div>
64+
<div class="content"></div>
65+
</div>
66+
<div class="box">
67+
<div class="content"></div>
68+
<div class="content"></div>
69+
<div class="content"></div>
70+
<div class="content"></div>
71+
</div>
72+
<div class="box">
73+
<div class="content"></div>
74+
<div class="content"></div>
75+
<div class="content"></div>
76+
<div class="content"></div>
77+
</div>
78+
<div class="box">
79+
<div class="content"></div>
80+
<div class="content"></div>
81+
<div class="content"></div>
82+
<div class="content"></div>
83+
</div>
84+
</div>
85+
<div></div>
86+
</body>
87+
88+
</html>

0 commit comments

Comments
 (0)