处理ul li的左边框或者右边框问题
我们经常会遇到一系列的list组合,要求加上,上下左右的分割线,但是这些分割线最后一个标签都不需要加分割线
我之前最常用的做法就是先给每个li加上下边框,然后给最后一个去掉下边框
<style>
.li{
width: 200px;
border-bottom: 1px solid #000;
}
.li:last-child{
border-bottom: none;
}
</style>
<ul>
<li class="li">list1</li>
<li class="li">list2</li>
<li class="li">list3</li>
<li class="li">list4</li>
</ul>
后来,看到别人写的代码,利用css伪类,不是最后一个
.li:not(:last-child){
width: 200px;
border-bottom: 1px solid #000;
}
一个样式直接搞定,真香
css进度条控制
这里参考了张旭鑫的博客地址
使用css变量+伪类
.bar{
height:20px;
width:300px;
background-color:#f5f5f5;
border-radius: 10px;
}
.bar::before
{
display: block;
counter-reset:progress var(--percent);//css属性,定义一个counter值,progress是自定义的名字
content:counter(progress)'%\2002';// counter(progress) 使用counter的值,‘\2002’代表空格
width:calc(1% * var(--percent));
color:#fff;
background-color:#2486ff;
text-align:right;
white-space: nowrap;
overflow: hidden;
border-radius: 10px;
}
<div class="bar" style="--percent: 60"></div>
按照传统css写法,需要两个div,一个展示下面的div,另一个控制上层的进度,现在一个css就搞定了
按钮点击有阴影框效果
博客上给出的是详细的思路还有实现方法,在这里我把它们放在了htm中,改动了一小点地方,在此记录一下怕后续会忘记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>css伪类测试</title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
/* max-width: 750px;
margin: auto; */
}
.btn {
position: absolute;
left: 30%;
bottom: -20%;
width: 40%;
text-align: center;
height: 12%;
font-size: xx-large;
}
.bar{
height:20px;
width:300px;
background-color:#f5f5f5;
border-radius: 10px;
}
.bar::before
{
display: block;
counter-reset:progress var(--percent);
content:counter(progress)'%\2002';
width:calc(1% * var(--percent));
color:#fff;
background-color:#2486ff;
text-align:right;
white-space: nowrap;
overflow: hidden;
border-radius: 10px;
}
.root{
width: 100px;
height: 50px;
position: relative;
}
.btn{
background: blue;
color: #fff;
font-size: 14px;
outline: 0;
border: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
user-select: none;
cursor: unset;
}
.btn:not([disabled]):active::after{
transform: translate(-50% ,-50%) scale(0);
opacity: .3;
transition: 0s;
}
.btn::after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
left: var(--offsetx,0);
top: var(--offsety,0);
pointer-events: none;
background-image: radial-gradient(circle, currentcolor 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: translate(-50%,-50%) scale(10);
opacity: 0;
transition: transform .3s, opacity .8s;
}
.li:not(:last-child){
width: 200px;
border-bottom: 1px solid #000;
}
</style>
<body>
<ul>
<li class="li">list1</li>
<li class="li">list2</li>
<li class="li">list3</li>
<li class="li">list4</li>
</ul>
<label> 图片1: </label>
<div class="bar" style="--percent: 60"></div>
<label> 图片2: </label>
<div class="bar" style="--percent: 40"></div>
<label> 图片3: </label>
<div class="bar" style="--percent: 20"></div>
<div class="root">
<button class="btn">删除</button>
</div>
</body>
<script>
/**
* @author zhangxinxu(.com)
* @description 点击页面任意位置,标记坐标位置
*/
document.addEventListener('mousedown',function(event) {
var target = event.target ;
var body = document.body ;
var html = document.documentElement;
// 设置自定义属性值
body.style.setProperty( '--pagex' , event.pageX +'px');
body.style.setProperty( '--pagey' , event.pageY+'px' );
html.style.setProperty( '--clientx' , event.clientX +'px');
html.style.setProperty( '--clienty' , event.clientY+'px' );
html.style.setProperty( '--scrolly' , window.pageYOffset+'px' );
target.style.setProperty( '--offsety' , event.offsetY+'px' );
target.style.setProperty( '--offsetx' , event.offsetX+'px' );
console.log(target.parentElement)
if(target.parentElement){
target.parentElement.style.setProperty( '--target-width' , target.clientWidth+'px' );
target.parentElement.style.setProperty( '--target-height' , target.clientHeight+'px' );
target.parentElement.style.setProperty( '--target-left' , target.offsetLeft+'px' );
target.parentElement.style.setProperty( '--target-top' , target.offsetTop+'px' );
}
});
</script>
</html>