各位小主们，好久不见，甚是想念呀~~~小编这几日可能会比较忙，所以更新可能又不及时了，(。・＿・。)ﾉI’m sorry~不过小编保证小编一有时间定会准时来报到的！
我们先来说一说上期的小任务
下面这个是实现我们上期小任务的全部代码，代码在这里啦，但是小编还要再啰嗦一下，各位小主千万不要嫌弃小编哦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 120px;
height: 80px;
background-color: orange;
position: relative;
margin: 0 auto;
}
.content{
width: 200px;
height: 200px;
background-color: skyblue;
padding: 15px;
position: absolute;
left: 140px;
top:50px;
display: none;
}
.box:hover .content{
display: block;
}
.jiao{
width: 0;
height:0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid skyblue;
position: absolute;
left: -15px;
top:5px;
}
.one{
width: 1000px;
height: 300px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
张若昀
<div class="content">
<div class="jiao"></div>
2019年10月，主演的谍战剧《惊蛰》在湖南卫视播出 ；11月，在古装权谋剧《庆余年》中出演第一男主角范闲 ，并凭借剧中表现获得第26届上海电视节白玉兰奖最佳男主角提名 。
</div>
</div>
<div class="one"></div>
</body>
</html>我们先来说一说显示隐藏的问题，当鼠标移入时，具体的详情介绍会显示，所以我们的详情内容放在了大盒子也就是box里面；我们的详情介绍包括了文本和一个小三角图标，小编要给各位小主具体说一说三角形小图标的制作
.jiao{
width: 0;
height:0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid skyblue;
position: absolute;
left: -15px;
top:5px;
}
此三行为关键代码，其中transparent是透明，我们想要角的尖朝向哪里，就把该方位设置成相应的颜色，其他方向设置为透明属性，反之亦然。小编再给各位小主举个例子吧
我们想要实现大风车的样式，需要怎么做呢？
关键代码
border-color:按照 下 左 上 右 的顺序
第一个div是绿色，角朝左
border-color:transparent green transparent transparent
第二个div是黄色，角朝上
border-color:transparent transparent yellow transparent
另外两个类似哦，小编偷懒不说啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
margin: 30px auto;
}
.box div{
float: left;
width: 0;
height: 0;
border:100px solid red;
}
.box div:nth-child(1){
border-color: transparent green transparent transparent;
}
.box div:nth-child(2){
border-color: transparent transparent yellow transparent;
}
.box div:nth-child(3){
border-color: blue transparent transparent transparent;
}
.box div:nth-child(4){
border-color: transparent transparent transparent red;
}
.clearbox::after{
content: "";
clear: both;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>言归正传，我们来说一说定位的问题
我们把box作为相对定位，content为绝对定位，我们的角也是绝对定位，先调整content的位置，调整好之后，再调整角的定位
2.11 overflow
overflow 超出隐藏，有三个属性值，我们来分别通过例子看一下
1）overflow:hidden 超出隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/2.jpg">
</div>
</body>
</html>2）overflow:scroll 强制显示滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
overflow:scroll;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/2.jpg">
</div>
</body>
</html>3）overflow:auto 超出显示滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/2.jpg">
</div>
</body>
</html>2.12 透明度
设置透明度，小编给各位小主介绍两种方法
1）opacity设置透明度 单位是数字，0代表完全透明，1代表完全不透明
例：opacity: .5;
2）rgba设置透明度 rgba中的最后一个值就是设置透明度的值
例：background-color: rgba(0, 0, 0, 0.5);
两者之间的区别，这个很重要哦~~~
opacity设置透明度，其子元素也会受到透明度的影响
rgba设置透明度，只作用于其自身，不会影响其子元素
下面呢小编给各位小主举个小例子帮助各位小主深入理解一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/01.jpg">
</div>
</body>
</html>
如果我们采用 opacity设置透明度，在box里面设置opacity:0.5s;
此时各位小主可以看到我们给box设置透明度，box盒子里的子元素图片也会受到透明度的影响
若我们采用rgba的写法
background-color: rgba(255, 0, 0, 0.5);
此时只有box受到透明度的影响，box里面的子元素图片并没有受到影响
2.13 元素隐藏
元素隐藏有两种方法，小编给各位小主分别介绍一下
1）display:none; 隐藏元素之后不会占用空间
2）visibility: hidden; 即使元素不可见，还是会占据空间
小编在这里举个例子，我们来具体看一下两者之间的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>以后挣大钱不要忘记刘老师</p>
<div>我是下面的ppp</div>
</body>
</html>
当我们添加下面这个样式时
p{
display: none;
}
此时，p标签隐藏，不会占据空间，div会自动向上占据原本p标签的空间
而当我们选择另一个写法时
p{
visibility: hidden;
}
此时，我们的p标签的确隐藏了起来，但是还占据着p标签原有的空间
所以，我们进行元素隐藏时一般采用的是display:none
2.14 z-index
z-index 控制定位元素的堆叠顺序 单位是数字 数字越高，则越不会被覆盖
我们来举个例子看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.one{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 0;
}
.two{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div class="one "></div>
<div class="two"></div>
</body>
</html>
我们若想one不被two覆盖，就采用z-index属性
.one{
width: 300px;
height: 300px;
background-color: red;
position: absolute;
top: 0;
z-index:1;
}
此时，one全部显现出来，two被覆盖
2.15 鼠标样式
cursor:pointer;
pointer 小手 none 消失 text 文本 no-drop 禁用
说到这里，我们本期的内容就要接近尾声啦~~~小编给各位小主留一些小小的练习题，各位小主可以先尝试做一做，小编下一期再和各位小主分享哦(*^▽^*)，下一期我们进行一下css的收尾工作，进入css3倒计时啦~
练习1
练习2 鼠标移入时，字体颜色变成黑色，背景颜色变成黄色
好啦，又到了文采展示环节啦，
各位小主，请记住，你若盛开，蝴蝶自来，你若精彩，天自安排！
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
