-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
金伟
authored and
金伟
committed
Nov 9, 2020
1 parent
9e8f127
commit 992eb9b
Showing
90 changed files
with
2,723 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
package api; | ||
|
||
public class WrapClass { | ||
public static void main(String[] args) { | ||
Integer i1 = new Integer("3"); | ||
Integer i2 = new Integer(3); | ||
// Integer i3 = new Integer("3a"); | ||
System.out.println(i1); | ||
System.out.println(i2); | ||
|
||
int i = i1.intValue(); | ||
System.out.println(i); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>盒模型</title> | ||
<style type="text/css"> | ||
#div1 { | ||
width: 100px; | ||
padding: 10px; | ||
border: 1px solid #ccc; | ||
margin: 10px; | ||
box-sizing: border-box; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="div1"> | ||
this is div1 | ||
</div> | ||
|
||
<script> | ||
// document.getElementById('div1').offsetWidth | ||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>margin 纵向重叠</title> | ||
<style type="text/css"> | ||
p { | ||
font-size: 16px; | ||
line-height: 1; | ||
margin-top: 10px; | ||
margin-bottom: 15px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<p>AAA</p> | ||
<p></p> | ||
<p></p> | ||
<p></p> | ||
<p>BBB</p> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>margin 负值</title> | ||
<style type="text/css"> | ||
body { | ||
margin: 20px; | ||
} | ||
|
||
.float-left { | ||
float: left; | ||
} | ||
.clearfix:after { | ||
content: ''; | ||
display: table; | ||
clear: both; | ||
} | ||
|
||
.container { | ||
border: 1px solid #ccc; | ||
padding: 10px; | ||
} | ||
.container .item { | ||
width: 100px; | ||
height: 100px; | ||
} | ||
.container .border-blue { | ||
border: 1px solid blue; | ||
} | ||
.container .border-red { | ||
border: 1px solid red; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<p>用于测试 margin top bottom 的负数情况</p> | ||
<div class="container"> | ||
<div class="item border-blue"> | ||
this is item 1 | ||
</div> | ||
<div class="item border-red"> | ||
this is item 2 | ||
</div> | ||
</div> | ||
|
||
<p>用于测试 margin left right 的负数情况</p> | ||
<div class="container clearfix"> | ||
<div class="item border-blue float-left"> | ||
this is item 3 | ||
</div> | ||
<div class="item border-red float-left"> | ||
this is item 4 | ||
</div> | ||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>Document</title> | ||
<style type="text/css"> | ||
.container { | ||
background-color: #f1f1f1; | ||
} | ||
.left { | ||
float: left; | ||
} | ||
.bfc { | ||
overflow: hidden; /* 触发元素 BFC */ | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="container bfc"> | ||
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/> | ||
<p class="bfc">某一段文字……</p> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>圣杯布局</title> | ||
<style type="text/css"> | ||
body { | ||
min-width: 550px; | ||
} | ||
#header { | ||
text-align: center; | ||
background-color: #f1f1f1; | ||
} | ||
|
||
#container { | ||
padding-left: 200px; | ||
padding-right: 150px; | ||
} | ||
#container .column { | ||
float: left; | ||
} | ||
|
||
#center { | ||
background-color: #ccc; | ||
width: 100%; | ||
} | ||
#left { | ||
position: relative; | ||
background-color: yellow; | ||
width: 200px; | ||
margin-left: -100%; | ||
right: 200px; | ||
} | ||
#right { | ||
background-color: red; | ||
width: 150px; | ||
margin-right: -150px; | ||
} | ||
|
||
#footer { | ||
text-align: center; | ||
background-color: #f1f1f1; | ||
} | ||
|
||
/* 手写 clearfix */ | ||
.clearfix:after { | ||
content: ''; | ||
display: table; | ||
clear: both; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="header">this is header</div> | ||
<div id="container" class="clearfix"> | ||
<div id="center" class="column">this is center</div> | ||
<div id="left" class="column">this is left</div> | ||
<div id="right" class="column">this is right</div> | ||
</div> | ||
<div id="footer">this is footer</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>双飞翼布局</title> | ||
<style type="text/css"> | ||
body { | ||
min-width: 550px; | ||
} | ||
.col { | ||
float: left; | ||
} | ||
|
||
#main { | ||
width: 100%; | ||
height: 200px; | ||
background-color: #ccc; | ||
} | ||
#main-wrap { | ||
margin: 0 190px 0 190px; | ||
} | ||
|
||
#left { | ||
width: 190px; | ||
height: 200px; | ||
background-color: #0000FF; | ||
margin-left: -100%; | ||
} | ||
#right { | ||
width: 190px; | ||
height: 200px; | ||
background-color: #FF0000; | ||
margin-left: -190px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="main" class="col"> | ||
<div id="main-wrap"> | ||
this is main | ||
</div> | ||
</div> | ||
<div id="left" class="col"> | ||
this is left | ||
</div> | ||
<div id="right" class="col"> | ||
this is right | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>flex 画骰子</title> | ||
<style type="text/css"> | ||
.box { | ||
width: 200px; | ||
height: 200px; | ||
border: 2px solid #ccc; | ||
border-radius: 10px; | ||
padding: 20px; | ||
|
||
display: flex; | ||
justify-content: space-between; | ||
} | ||
.item { | ||
display: block; | ||
width: 40px; | ||
height: 40px; | ||
border-radius: 50%; | ||
background-color: #666; | ||
} | ||
.item:nth-child(2) { | ||
align-self: center; | ||
} | ||
.item:nth-child(3) { | ||
align-self: flex-end; | ||
} | ||
|
||
</style> | ||
</head> | ||
<body> | ||
<div class="box"> | ||
<span class="item"></span> | ||
<span class="item"></span> | ||
<span class="item"></span> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<title>absote relative 定位问题</title> | ||
<style type="text/css"> | ||
body { | ||
margin: 20px; | ||
} | ||
.relative { | ||
position: relative; | ||
width: 400px; | ||
height: 200px; | ||
border: 1px solid #ccc; | ||
|
||
top: 20px; | ||
left: 50px; | ||
} | ||
.absolute { | ||
position: absolute; | ||
width: 200px; | ||
height: 100px; | ||
border: 1px solid blue; | ||
|
||
top: 20px; | ||
left: 50px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<p>absolute 和 relative 定位问题</p> | ||
<div class="relative"> | ||
<div class="absolute"> | ||
this is absolute | ||
</div> | ||
</div> | ||
|
||
</body> | ||
</html> |
Oops, something went wrong.