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

float

Browse Source
This commit is contained in:
asd
2021-01-20 11:25:18 +08:00
parent 9853dbdd91
commit b8df71627e
21 changed files with 917 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
csspress/demo/clearfloat.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 1000px;
height: 300px;
background: gold;
margin: 20px;
}
.box1 {
/* width:60px;
height: 60px; */
background: red;
/* background: rgba(255, 0, 0, 0.363); */
/* float: left; */
}
.box2 {
width: 120px;
height: 80px;
background: gray;
border: 1px solid pink;
color: white;
/* float:right */
float: left;
}
.box4 {
width: 120px;
height: 80px;
background: blue;
border: 1px solid pink;
/* clear: left;
这是哪个元素需要清除浮动哪个元素加clear
*/
}
.boxes{
overflow: auto;
/*
这是通过Overflow:auto 清除浮动
*/
}
.blank{
clear:left
}
/*
在浮动元素最后面加一个空的div 附上clear属性清除浮动
*/
/* .boxes:after {
content: '.';
height: 0;
display: block;
clear: both;
}
这是通过伪类清除浮动，必须加上content:"." 否则不起作用
*/
</style>
</head>
<body>
<div class="box">
<div class="boxes clearfix">
<div class="box1">asaaaa</div>
<div class="box2"></div>
<div class="box2">4</div>
<div class="box2 blankdiv">5</div>
<!-- <div class="box2" style="height: 180px;">6</div> -->
<div class="blank"></div>
</div>
<div class="box4"></div>
</div>
</body>
</html>

5
csspress/demo/float.html
View File

@@ -46,6 +46,11 @@
<div class="box1">asaaaa</div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<!-- <div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

1
csspress/demo/float1.html
View File

@@ -39,6 +39,7 @@
<div id="div1">
<div id="div11"></div>
<div id="div12"></div>
</div>
</body>
</html>

50
csspress/demo/float2.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: pink;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: left;
}
.hr{
width: 200px;
}
.zongjie{
font-size:18px;
font-weight: bold;
color: red;
}
.zhu{
color:black
}
</style>
</head>
<body>
<div class="box">你好</div>
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
<div class="box1">你好</div>
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
<!-- box1默认样式时，p标签的内容会出现在红色div的下方 -->
<p class="zongjie">总结：当box1加上float:left 时，如果文字的宽度不超过红色div的宽度 那么文字会在红色div的下面 如果文字宽度超过div的宽度，那么文字会环绕红色div</p>
<div class="zongjie zhu">原因：浮动的破坏性在于切断Linebox(行盒)链，致使高度塌陷，由于浮动元素仍在dom树中，实体是看得见摸得着的，所以他占据的位置还是在的</div>
<div class="zongjie zhu">解释:脱离文档流 是将元素从普通的布局排版中拿走，其他盒子定位的时候，会当做脱离文档流的元素不存在进行定位。但是，使用float 使元素脱离文档流时，其他盒子会无视这个元素，但其他盒子的文本依然会为这个元素让出位置，环绕在四周</div>
</body>
</html>

87
csspress/demo/floatbtn.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* inline-bliock方法： */
.btn1 {
display: inline-block;
background: blue;
color: white;
padding: 5px;
font-size: 12px;
text-decoration: none;
}
.btn3 {
display: block;
background: pink;
}
/* float方法： */
.btn2 {
display: inline-block;
background: red;
color: white;
padding: 5px;
font-size: 12px;
text-decoration: none;
}
.btn{
display: block;
float: left;
}
.group1{
margin-bottom: 30px;
margin-top: 20px;
}
.wenzi{
width: 400px;
}
</style>
</head>
<body>
</body>
<div class="group1">
group1:
<div class="btn1">提交</div>
<div class="btn1">提交提交提交提交提交提交提交提交</div>
<div class="btn2">编辑</div>
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
</div>
<div class="group2">
group2:
<div class="btn1">提交</div>
<div class="btn1">提交提交提交提交提交提交提交提交</div>
<div class="btn3">添加</div>
<div class="btn2">编辑</div>
<div class="btn2">编辑编辑编辑编辑编辑编辑编辑编辑编辑</div>
</div>
<div class="group1">
<div>
group3:
</div>
<div class="btn1 btn">提交</div>
<div class="btn1 btn">提交提交提交提交提交提交提交提交</div>
<div class="btn2 btn">编辑</div>
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
</div>
<div class="zongjie">
group1中 btn1，btn2定义了inlineblock 实现了div的宽度随内容自适应且多个div水平排列
display:inline-block 将元素显示为行内块状元素 设置该属性后 其他的行内块级元素会排列在同一行
使其既有block设置高度的特性 又有inline的同行特性
group2中，btn1,btn2还是同样的Inlineblock btn3是block 这时候 btn3的元素会独占一行 前后元素会换行显示
</div>
</html>

87
csspress/demo/search1.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 640px;
}
.search{
width: 576px;
height:32px;
border: 2px solid #e2231a;
}
.searchcontent{
width: 500px;
height:28px;
padding-left: 15px;
font-size: 15px;
outline: none;
border: none;
}
.searchcontent:focus{
outline: none;
}
.tuijian{
width: 586px;
/* height:200px; */
background: white;
border: 1px solid #ccc;
position: relative;
top:5px;
left: -10px;
}
.tuijianitem{
width:586px;
height: 25px;
cursor: default;
/* border: 1px solid #ccc; */
font-size: 12px;
padding-left: 15px;
box-sizing: border-box;
}
.tuijianitem:hover{
background: #ccc;
}
.btn{
width: 60px;
height: 30px;
background-color: #e2231a;
color: white;
text-align: center;
line-height: 30px;
float: right;
position: relative;
top: -35px;
left:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="search">
<input type="text" class="searchcontent">
<ul class="tuijian">
<li class="tuijianitem">中华老字号</li>
<li class="tuijianitem">营养零食</li>
<li class="tuijianitem">休闲零食</li>
<li class="tuijianitem">鲜花</li>
<li class="tuijianitem">永生花</li>
<li class="tuijianitem">鼠尾草</li>
</ul>
</div>
<div class="btn">搜索</div>
</div>
<div>会员</div>
</body>
</html>

109
csspress/demo/search2.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 654px;
margin:10px auto;
}
.left{
width: 549px;
}
.search{
width: 546px;
/* height:44px; */
border: 2px solid #4e6ef2;
border-radius: 10px 0 0 10px;
text-align: center;
}
.searchcontent{
width: 500px;
height:44px;
padding-left: 15px;
font-size: 15px;
outline: none;
border: none;
margin: 0 auto;
border-bottom: 2px solid silver;
}
.searchcontent:focus{
outline: none;
}
.tuijian{
width: 546px;
/* height:200px; */
/* border: 1px solid #ccc; */
position: relative;
top:5px;
left: -2px;
list-style:none;
text-align: left;
}
.tuijianitem{
width:586px;
height: 25px;
cursor: default;
/* border: 1px solid #ccc; */
font-size: 12px;
padding-left: 15px;
box-sizing: border-box;
}
.tuijianitem:hover{
background: #ccc;
}
.btn{
width: 108px;
height: 50px;
background-color: #4e6ef2;
color: white;
text-align: center;
line-height: 44px;
border-radius: 0 10px 10px 0;
float: right;
/* margin-top: -200px; */
position: relative;
top: -50px;
/* left:40px; */
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div class="search">
<input type="text" class="searchcontent" onfocus="shuruing()" onblur="end()">
<ul class="tuijian" style="display:none">
<li class="tuijianitem">中华老字号</li>
<li class="tuijianitem">营养零食</li>
<li class="tuijianitem">休闲零食</li>
<li class="tuijianitem">鲜花</li>
<li class="tuijianitem">永生花</li>
<li class="tuijianitem">鼠尾草</li>
</ul>
</div>
</div>
<div class="btn">搜索</div>
</div>
<script>
var menu=document.getElementsByClassName('tuijian')[0]
var btn=document.getElementsByClassName('btn')[0]
function shuruing(){
menu.style.display="block"
btn.style.top="-200px"
}
function end(){
console.log(8009)
menu.style.display="none"
btn.style.top="-50px"
}
</script>
</body>
</html>

53
csspress/demo/search3.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
}
.box1{
margin:30px;
}
.menu{
width: 300px;
list-style: none;
margin-top: 20px;
}
.tuijianitem{
cursor: pointer;
height: 30px;
}
.tuijianitem:hover{
background: #eeeeee;
}
</style>
</head>
<body>
<div class="box1">
<div class="box">
<input type="text" class="shuru" />
<span class="btn">搜索</span>
</div>
<ul class="menu">
<li class="tuijianitem">中华老字号</li>
<li class="tuijianitem">营养零食</li>
<li class="tuijianitem">休闲零食</li>
<li class="tuijianitem">鲜花</li>
<li class="tuijianitem">永生花</li>
<li class="tuijianitem">鼠尾草</li>
</ul>
</div>
</body>
</html>

92
csspress/demo/type.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
margin:20px;
cursor: default;
}
.left{
list-style: none;
float: left;
}
.item{
width: 200px;
height: 25px;
color: #666;
text-indent: 30px;
cursor: pointer;
}
.item:hover{
color: #c81623;
background: #eeeeee;
}
.right{
width: 800px;
height: 400px;
float: left;
background: gold;
}
.tag{
padding: 5px 20px;
background: black;
color: white;
}
.tags{
margin-top: 20px;
margin-left: 30px;
}
.menu{
margin-top: 30px;
}
.ads{
float: right;
margin-right: 40px;
margin-top:40px;
}
.ad{
width:60px;
height:60px;
background: black;
border: 1px solid red;
margin-bottom: 40px;
}
</style>
</head>
<body>
<div class="box">
<ul class="left">
<li class="item">dynamix</li>
<li class="item">voze</li>
<li class="item">phigros</li>
<li class="item">muse dash</li>
</ul>
<div class="right">
<div class="tags">
<span class="tag">tag1</span>
<span class="tag">tag2</span>
<span class="tag">tag3</span>
<span class="tag">tag4</span>
</div>
<ul class="left menu">
<li class="item">dynamix</li>
<li class="item">voze</li>
<li class="item">phigros</li>
<li class="item">muse dash</li>
</ul>
<div class="ads">
<div class="ad"></div>
<div class="ad"></div>
<div class="ad"></div>
</div>
</div>
</div>
</body>
</html>