标签的隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
/*border-style: solid;*/
/*border-width: 1px;*/
/*border-color: red;*/
border: 1px solid red;
background: url("img/001.png") no-repeat 0 0;
font: normal 30px/100px 'Arial';
color: green;
text-align: center;
}
.d1:hover ~ .d2 {
display: block;
}
.d2 {
/*不以任何方式显示，在页面中不占位，但重新显示，任然占位*/
display: none;
}
.d3 {
/*修改盒子的透明度，值为0，完全透明，但在页面中占位*/
opacity: 0.5;
}
/*显示和影藏都不占位，用来做一些标签的显示影藏切换*/
</style>
</head>
<body>
<div class="d1">1
</div>
<div class="d2">2
</div>
<div class="d3">3
</div>
<div class="d4">4
</div>
<div class="d5">5
</div>
</body>
</html>
View Code
盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
margin: 100px auto;
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 颜色*/
box-shadow: 150px 0 10px 0 red, 0 150px 10px 0 green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
View Code
固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.box {
/* 当前页面窗口的宽高(锁屏幕尺寸变化而变化)：vw vh */
height: 500vw;
background-color: red;
}
.tag {
width: 180px;
height: 300px;
background-color: orange;
/*一旦打开定位属性，left、right、top、bottom四个方位词均能参与布局*/
/*固定定位参考浏览器窗口*/
/*布局依据：固定定位的盒子四边距浏览器窗口四边的距离：eg：left - 左距左，right - 右距右*/
/*左右取左，上下去上*/
position: fixed;
left: 0;
top: calc(50% - 150px);
right: 50px;
bottom: 20px;
}
.flag {
width: 220px;
height: 330px;
background-color: pink;
position: fixed;
left: 0;
top: calc(50% - 165px);
}
.tag {
/*z-index值就是大于等于1的正整数，多个重叠图层通过z-index值决定上下图层显示先后*/
z-index: 666;
}
.flag {
z-index: 888;
}
</style>
</head>
<body>
<div class="tag"></div>
<div class="box"></div>
<div class="flag"></div>
</body>
</html>
View Code
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
margin: 100px auto 0;
}
.s {
width: 100px;
height: 100px;
font: normal 20px/100px 'Arial';
text-align: center;
}
.s1 { background-color: red }
.s2 { background-color: pink }
.s3 { background-color: green }
.s {
/*绝对定位：子标签获取不到父级标签的宽，也撑不开父级的高*/
/*子标签必须自己设置宽高，父级也必须自己设置宽高*/
position: absolute;
/*绝对定位的标签都是相对于一个参考系进行定位，直接不会相互影响*/
/*参考系：最近的定位父级*/
/*打开了四个定位方位*/
/*上距上...下距下*/
/*上下去上、左右取左*/
}
.box {
/*子级采用绝对定位，一般都是想参考父级进行定位，父级必须采用定位处理才能作为子级的参考系*/
/*父级可以选取 fixed、 absolute，但这两种定位都会影响盒模型，relative定位不会影响盒模型*/
/*父相子绝*/
position: relative;
}
.s1 {
right: 0;
left: 0;
bottom: 0;
z-index: 1;
}
.s2 {
bottom: 50px;
left: 0;
z-index: 10;
}
</style>
</head>
<body>
<div class="box">
<div class="s s1">1
</div>
<div class="s s2">2
</div>
<div class="s s3">3
</div>
</div>
</body>
</html>
View Code
相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: orange;
border: 1px solid black;
}
.box {
/*margin-left: 100px;*/
/*margin-right: 100px;*/
/*margin-top: 100px;*/
}
.box {
/*相对定位偏移的是图层*/
position: relative;
/*left: 100px;*/
/*right: 100px;*/
/*top: 100px;*/
/*bottom: 100px;*/
/*参考系：自身原有位置，且自身偏移不影响原有位置*/
}
p {
margin: 0;
border: 1px solid black;
}
</style>
<style>
.box {
margin: 10px 100px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">12345
</div>
<p>12345
</p>
</body>
</html>
View Code
定位案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, ul, a {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
</style>
</head>
<body>
<style>
.header {
width: 100vw;
height: 50px;
background-color: brown;
}
.header li {
width: 150px;
height: 50px;
background-color: orange;
float: left;
margin-right: 10px;
text-align: center;
font: normal 20px/50px 'Arial';
}
.nav {
width: 100vw;
height: 80px;
background-color: tomato;
}
.info {
width: 150px;
height: 200px;
background-color: pink;
}
.header {
position: relative;
}
.info {
position: absolute;
left: 160px;
top: 50px;
display: none;
}
.card:hover ~ .info {
display: block;
}
</style>
<ul class="header">
<li>首页
</li>
<li class="card">下载
</li>
<li>个人主页
</li>
<div class="info"></div>
</ul>
<div class="nav"></div>
</body>
</html>
View Code
定位案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: calc(200px * 5 + 40px);
margin: 0 auto;
border: 1px solid black;
}
.wrapper:after {
content: "";
display: block;
clear: both;
}
.box {
width: 200px;
height: 260px;
background-color: orange;
margin-right: 10px;
margin-bottom: 10px;
float: left;
/*要不要辅助子级，父级都可以添加一个相对定位*/
position: relative;
}
.box:nth-child(5n) {
margin-right: 0;
}
.t, .b {
height: 125px;
background-color: pink;
}
.t {
margin-bottom: 10px;
}
.b1 {
background: url("img/001.jpg") no-repeat;
background-size: 200px 260px;
}
.b2 div {
position: absolute;
width: 50px;
height: 30px;
background-color: cyan;
left: calc(50% - 25px);
/*display: none;*/
}
.b2 img {
width: 150px;
position: absolute;
left: calc(50% - 75px);
top: 50px;
}
.b2 p {
position: absolute;
background-color: brown;
bottom: 10px;
width: calc(100%);
text-align: center;
}
.b2 .f {
width: calc(100%);
background-color: #ff6700;
position: absolute;
left: 0;
bottom: 0;
/*没有高度，也会显示文本，所以文本要隐藏*/
overflow: hidden;
/*display: none;*/
height: 0;
/*谁过渡谁有transition*/
transition: 0.2s;
}
.box {
transition: 0.2s;
top: 0;
}
.b2:hover {
/*margin-top: -5px;*/
top: -5px;
box-shadow: 0 0 5px 0 black;
}
.b2:hover .f {
/*display: block;*/
height: 60px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box b1"></div>
<div class="box b2">
<div>新品
</div>
<img src="img/002.jpg">
<p>小米么么么么
</p>
<div class="f">1234567878
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">
<div class="t"></div>
<div class="b"></div>
</div>
</div>
</body>
</html>
View Code
转载于:https://www.cnblogs.com/HZLS/p/11128458.html
