：target选择器、三角形绘制、手风琴制作

来源：互联网发布：adhoc算法编辑：程序博客网时间：2024/06/05 19:17

一. :target选择器

:target 选择器可用于选取当前活动的目标元素。

:target跟id和window.hash息息相关，window.hash通过a标签的href属性设置，即#号后面的内容如<a href="#one"></a>再给一个标签设置一个id名，并且名字要和window.hash一致。

用法：

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:target{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<a href="#hash">box</a> /*a标签自带点击动作*/
<p id="hash"></p>
<a href="#hello">box</a>
<p id="hello"></p>
</body>
</html>

二. 绘制三角形

淘宝、京东和易迅的三种绘制三角形的方法

1.淘宝绘制三角形的方法

一个正方形是由四个三角形组成的，所以首先可以先绘制出一个正方形

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid gold;
border-bottom: 50px solid skyblue;
border-left: 50px solid orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

然后在正方形里面只截取一个三角形，可以把其余三个三角形的颜色设置为透明（transparent），留下需要的那个

在div样式里面增加一行代码：border-color: red transparent transparent transparent;

2.京东绘制三角形方法

利用特殊符号通过定位来截取

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 50px;
height: 50px;
position: relative;
overflow: hidden;
}
.sanjiao{
font-size: 50px;
position: absolute;
top: -34px;
left: 8px;
}
</style>
</head>
<body>
<div class="box">
<p class="sanjiao">◇</p> /*◇特殊符号菱形*/
</div>
</body>
</html>

3.易迅绘制三角形的方法

通过两个三角形的定位实现，和淘宝的做法雷同

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 100px;
height: 100px;
transform :rotateZ(270deg); /*将三角形旋转到想到的角度*/
}
.one{
width: 0;
height: 0;
border: 50px solid transparent; /*设置正方形里面的四个三角形的颜色都为透明*/
border-top-color: #fff; /*单独设置想要保留的那个三角形的颜色*/
position: relative;
z-index: 99 /*设置层级，优先显示*/
}
.two{
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: gold;
position: absolute;
top: 10px;
left: 0px;
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>

三.手风琴的制作（纯CSS实现）

1.通过目标选择器 :target 制作

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直手风琴</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 0 auto;
}
.menu h2{
margin-top: 30px;
}
.menu h2 a{
text-decoration: none;
display: inline-block; /*转换为行内块级标签*/
width: 100%;
height: 40px;
background: #ccc;
border-radius: 10px; /*设置圆角*/
line-height: 40px;
padding-left: 10px;
box-sizing: border-box; /*固定死盒子的宽高或亲自计算*/
position: relative; /*父级标签设置相对定位*/
}
.menu h2 a:after{ /*利用伪类选择器，制作三角形*/
content: "";
display: block;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #fff;
position: absolute;
top: 15px;
right: 10px;
}
.menu h2 a:hover{ /*鼠标移上去变色*/
color: #fff;
background: blue;
}
.menu p{
font-size: 14px;
height: 0;
overflow: hidden; /* 默认情况下设置 p 标签隐藏*/
transition: all 0.5s linear;
}
.menu:target p{
height: 100px; /*鼠标单击时显示P标签的高度*/
overflow: auto; /*当内容超出设定的高度时自动显示滚动条*/
transition: all 0.5s linear; /*设置显示的过渡时间*/
margin: 20px 0;
}
.menu:target a{
background: blue;
color: #fff;
}
.menu:target a:after{
transform: rotate(270deg); /*点击时三角形旋转*/
}
</style>
</head>
<body>
<div class="box">
<div class="menu" id="Brand">
<h2><a href="#Brand">Brand</a></h2> 
<p>
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.
</p>
</div>
<div class="menu" id="Two">
<h2><a href="#Two">Two</a></h2> 
<p>
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.
</p>
</div>
<div class="menu" id="Three">
<h2><a href="#Three">Three</a></h2> 
<p>
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.
</p>
</div>
</div>
</body>
</html>

0 0

：target选择器 、三角形绘制、手风琴制作

：target选择器、三角形绘制、手风琴制作