theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

csspress

Browse Source
This commit is contained in:
asd
2021-01-12 14:02:30 +08:00
parent f9cc8781cc
commit 9c626405fd
15 changed files with 793 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
csspress/demo/a.html
View File

@@ -9,24 +9,55 @@
margin:0;
padding: 0;
}
div{
width:60px;
height: 600px;
background:red;
.box{
width: 1000px;
height: 300px;
background: gold;
margin: 20px;
}
.box1{
background: gray;
width:60px;
height: 60px;
position: sticky;top: 10px;
background: red;
/* background: rgba(255, 0, 0, 0.363); */
float: left;
}
.box2{
background: gold;
width: 120px;
height:80px;
background: gray;
border: 1px solid pink;
/* float:right */
float: right;
}
.a{
/* width: 70px;
height: 70px;
border: 1px solid blue;
background: pink; */
clear: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div></div>
<div class="box2"></div>
<div class="box">
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2" style="height: 180px;">6</div>
<div class="a"></div>
<div>nhjksahkihfi</div>
</div>
</body>
</html>

64
csspress/demo/b.html
View File

@@ -1,36 +1,44 @@
<!DOCTYPE html>
<!-- -->
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>
盒子模型
</title>
<style>
.box{
width: 900px;
height: 600px;
background:orange;
}
.item1{
width: 40%;
height:80%;
background: paleturquoise;
float: left;
}
.item2{
width:40%;
height: 80%;
background: blue;
float: right;
}
*{
margin:0;
padding:0;
}
body{
text-align:center;
}
div{
width:200px;
height:200px;
margin:0 auto;
}
#div1{
margin-top:10px;
background:red;
}
#div11{
margin-top:20px;
width:0;
height:0;
background:yellow;
}
#div12{
margin-top:30px;
width:50px;
height:50px;
background:blue;
}
</style>
</head>
<body>
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
</div>
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
</body>
</html>