目录
I. 定位
①定位组成
✿定位模式
✿边偏移
※※静态定位
※※相对定位 relative
不 脱 标 ！！！
※※绝对定位 absolute
脱 标 ！！！
※※※※子绝父相
※※※※✿由来
※※※※✿练习
题目
因为没有他的素材，所以我就自己搞了一个猫猫的hhh
我的效果→猫猫的图是在网上找的ovo图标是用ps搞的kkk！
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 650px;
height: 430px;
margin: 100px auto;
position: relative;
}
.icon {
position: absolute;
top: 1.8px;
right: -19px;
}
</style>
</head>
<body>
<div class="box">
<img src="img\猫猫.png">
<img src="img\图标.png" class="icon">
</div>
</body>
</html>※※固定定位 fixed
※※※※固定在版心右侧
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 440px;
height: 500px;
margin: 0 auto;
margin-top: 30px;
background-color: cornflowerblue;
border-radius: 20px;
}
.table {
position: fixed;
left: 50%;
top: 45%;
width: 50px;
height: 100px;
background-color: lightpink;
margin-left: 225px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="table"></div>
</body>
</html>※※粘性定位 sticky →说是了解就行
※※总结
※※叠放次序 z-index
※※拓展
※※※※绝对定位的盒子居中
垂直同理→步骤里的 left 换 top 即可
※※※※特殊特性
3.脱标的盒子不会触发外边距塌陷
※※※※绝对定位（固定定位）会完全压住盒子
II. 案例→淘宝焦点图布局制作
✿题目
✿类名
✿提示
※※左箭头（也就是小于号<）→ 用超链接标签a做，< ；
※※右箭头（也就是大于号>）→ 用超链接标签a做，> ；
※※居中写法→ 垂直 — top:50%;margin-top:- a px(a是一半盒高)
居中 — left:50%;margin-left:- a px(a是一半盒宽)
※※效果（自己改了改hhh大体思路和老师是一样的ovo~！这次的猫猫还是网图owo！！）
※※代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 767px;
height: 622px;
margin: 100px auto;
background-color: cornflowerblue;
border: 20px skyblue groove;
}
.tb-promo img {
width: 767px;
height: 622px;
}
.prev {
position: absolute;
left: 0;
top: 50%;
margin-top: -20px;
width: 40px;
height: 60px;
background: rgb(255, 127, 80, .7);
text-align: center;
text-indent: -8px;
line-height: 60px;
font-size: 35px;
font-weight: 700;
color: aliceblue;
text-decoration: none;
border-radius: 0 20px 20px 0;
}
.next {
position: absolute;
right: 0;
top: 50%;
margin-top: -20px;
width: 40px;
height: 60px;
background: rgb(255, 127, 80, .7);
text-align: center;
text-indent: 8px;
line-height: 60px;
font-size: 35px;
font-weight: 700;
color: aliceblue;
text-decoration: none;
border-radius: 20px 0 0 20px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -80px;
width: 200px;
height: 30px;
background-color: rgba(255, 255, 255, .3);
border-radius: 100px;
}
.promo-nav li {
float: left;
width: 20px;
height: 20px;
border-radius: 10px;
margin: 5px 10px 0 10px;
background-color: #fff;
}
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="猫猫.jpg">
<a href="#" class="prev"> <</a>
<a href="#" class="next"> ></a>
<ul class="promo-nav">
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>III. 网页布局总结
IV. 元素的显示和隐藏
本质：让一个元素在页面中隐藏或者显示出来
✿display显示隐藏
✿visibility显示隐藏
✿overflow 溢出显示隐藏
※※图解
※※※※visible
※※※※hidden
※※※※auto（溢出时加）
※※※※scroll（溢不溢都加）
✿总结
✿案例
※※题目
※※效果→ free和start 按钮的图片都是网上找的w！
经过前
经过后 （鼠标截图截不出来。。凑合看吧qvq ）
※※代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.tudou {
position: relative;
width: 500px;
height: 420px;
background-color: cornflowerblue;
margin: 100px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3) url("start.png") no-repeat center;
}
.tudou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="img.jpg">
</div>
</body>
</html>恭喜看到这的小伙伴，你已经完成 CSS第六天的学习了嗷~！
下面进入第七天的学习吧(★ ω ★)→
有用的话就点赞评论收藏嗷！！
