常用css

最新推荐文章于 2024-09-11 21:44:44 发布
最新推荐文章于 2024-09-11 21:44:44 发布
阅读量206 收藏
点赞数
分类专栏： css汇总 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44636778/article/details/106722778
版权

1、例如像淘宝商品列表，商品有多行，想单独设置最后一行的item的margin-bottom:
.goodItem是item的class名

/* 列表的最后一行margin-bottom设置为0 */
.goodItem:nth-child(3n+1):nth-last-child(-n+3),
.goodItem:nth-child(3n+1):nth-last-child(-n+3)~.goodItem{
    margin-bottom: 0;
}

2、多行文本的容器，想最后一行超出部分省略号显示：

<div class="contain">
	这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本这是多行文本
</div>

<style>
	.contain{
		width: 298px;//设置宽度
		display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;//代表第几行进行超出部分省略的操作
    	overflow: hidden;
	}
</style>

3、滚动条：
html:

<div class="scroll-container"></div>

css:

.scroll-container {
        height: 250px;
        border: 1px solid #ddd;
        padding: 15px;
        overflow: auto;
        .row {
            margin: 0;
            line-height: 1.5;
        }

        &::-webkit-scrollbar {
            width: 8px;
            background: white;
        }
        &::-webkit-scrollbar-corner, /* 滚动条角落 */
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }
        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            /* 滚动条轨道 */
            background-color: rgba(180, 160, 120, 0.1);
            box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
        }
        &::-webkit-scrollbar-thumb {
            /* 滚动条手柄 */
            background-color: #00adb5;
        }
    }

4、tips（css实现，摆脱对插件的依赖）

//html部分：
<div class="bruce flex-ct-y">
	<a class="tips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
	<a class="tips" href="https://www.baidu.com"></a>
</div>
//css部分：
.bruce{
	display: grid;
	place-items: center;
}
.tips {
	position: relative;
	margin-top: 10px;
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: #66f;
	line-height: 40px;
	color: #fff;
}
.tips::after {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, .5);
	opacity: 0;
	text-align: center;
	font-size: 12px;
	content: attr(data-msg);
	transition: all 300ms;
}
.tips:first-child {
	margin-top: 0;
}
.tips:hover::after {
	left: calc(100% + 20px);
	opacity: 1;
}
.tips[href]:empty::before {
	content: attr(href);
}
.tips[href]:empty:hover::after {
	display: none;
}

5、阻止点击事件的触发

//html部分：
<div class="bruce flex-ct-x">
	<a class="disabled-trigger" href="https://www.baidu.com">点我</a>
</div>
//js部分：
<script>
document.getElementsByClassName("disabled-trigger")[0].addEventListener("click", () => alert("Hello World"));
</script>

//css部分：
.disabled-trigger {
	padding: 0 20px;
	border-radius: 10px;
	height: 40px;
	background-color: #66f;
	pointer-events: none;
	line-height: 40px;
	color: #fff;
}

6、美化后的单选按钮样式：

//html部分：
<div class="bruce flex-ct-x">
	<ul class="beauty-selection">
		<li>
			<input type="radio" name="radioName" id="fed-engineer" hidden>
			<label for="fed-engineer"></label>
			<span>前端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="bed-engineer" hidden>
			<label for="bed-engineer"></label>
			<span>后端工程师</span>
		</li>
		<li>
			<input type="radio" name="radioName" id="fsd-engineer" hidden>
			<label for="fsd-engineer"></label>
			<span>全栈工程师</span>
		</li>
	</ul>
</div>
//css部分：
.beauty-selection {
	display: flex;
	li {
		display: flex;
		align-items: center;
		margin-left: 20px;
		&:first-child {
			margin-left: 0;
		}
	}
	input:checked + label {
		background-color: #f90;
	}
	label {
		margin-right: 5px;
		padding: 2px;
		border: 1px solid #f90;
		border-radius: 100%;
		width: 18px;
		height: 18px;
		background-clip: content-box;
		cursor: pointer;
		transition: all 300ms;
		&:hover {
			border-color: #09f;
			background-color: #09f;
			box-shadow: 0 0 7px #09f;
		}
	}
	span {
		font-size: 16px;
	}
}

7、利用filter开启悼念模式

//html部分：
<div class="bruce flex-ct-x">
	<div class="mourning-mode">
		<img src="https://yangzw.vip/static/codepen/car.jpg">
	</div>
</div>
//css部分：
html {
	filter: grayscale(100%);
}
.mourning-mode {
	img {
		width: 400px;
	}
}

8、使用box-shadow描绘单侧投影：

<div class="bruce flex-ct-x">
	<div class="aside-shadow">投影</div>
</div>
<style>
.aside-shadow {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid;
	width: 100px;
	height: 100px;
	box-shadow: -7px 0 5px -5px #f90;
	font-weight: bold;
	font-size: 30px;
	color: #f90;
}
</style>

9、气泡背景墙：

<div class="bruce">
	<ul class="bubble-bgwall">
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
		<li>Love</li>
	</ul>
</div>
<style>
.bruce {
	background-image: linear-gradient(270deg, #8146b4, #6990f6);
}
.bubble-bgwall {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	width: 1200px;
	height: 100%;
	li {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(#fff, .15);
		color: #ccc;
		animation: bubble 15s infinite;
		&:nth-child(1) {
			left: 10%;
		}
		&:nth-child(2) {
			left: 20%;
			width: 90px;
			height: 90px;
			animation-duration: 7s;
			animation-delay: 2s;
		}
		&:nth-child(3) {
			left: 25%;
			animation-delay: 4s;
		}
		&:nth-child(4) {
			left: 40%;
			width: 60px;
			height: 60px;
			background-color: rgba(#fff, .3);
			animation-duration: 8s;
		}
		&:nth-child(5) {
			left: 70%;
		}
		&:nth-child(6) {
			left: 80%;
			width: 120px;
			height: 120px;
			background-color: rgba(#fff, .2);
			animation-delay: 3s;
		}
		&:nth-child(7) {
			left: 32%;
			width: 160px;
			height: 160px;
			animation-delay: 2s;
		}
		&:nth-child(8) {
			left: 55%;
			width: 40px;
			height: 40px;
			font-size: 12px;
			animation-duration: 15s;
			animation-delay: 4s;
		}
		&:nth-child(9) {
			left: 25%;
			width: 40px;
			height: 40px;
			background-color: rgba(#fff, .3);
			font-size: 12px;
			animation-duration: 12s;
			animation-delay: 2s;
		}
		&:nth-child(10) {
			left: 85%;
			width: 160px;
			height: 160px;
			animation-delay: 5s;
		}
	}
}
@keyframes bubble {
	0% {
		opacity: .5;
		transform: translateY(0) rotate(45deg);
	}
	25% {
		opacity: .75;
		transform: translateY(-400px) rotate(90deg);
	}
	50% {
		opacity: 1;
		transform: translateY(-600px) rotate(135deg);
	}
	100% {
		opacity: 0;
		transform: translateY(-1000px) rotate(180deg);
	}
}
</style>

10、css实现折叠面板：

<div class="bruce flex-ct-x">
	<div class="accordion">
		<input type="checkbox" id="collapse1">
		<input type="checkbox" id="collapse2">
		<input type="checkbox" id="collapse3">
		<article>
			<label for="collapse1">列表1</label>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</article>
		<article>
			<label for="collapse2">列表2</label>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</article>
		<article>
			<label for="collapse3">列表3</label>
			<p>内容1<br>内容2<br>内容3<br>内容4</p>
		</article>
	</div>
</div>
<style>
.accordion {
	width: 300px;
	article {
		margin-top: 5px;
		cursor: pointer;
		&:first-child {
			margin-top: 0;
		}
	}
	input {
		display: none;
		&:nth-child(1):checked ~ article:nth-of-type(1) p,
		&:nth-child(2):checked ~ article:nth-of-type(2) p,
		&:nth-child(3):checked ~ article:nth-of-type(3) p {
			border-bottom-width: 1px;
			max-height: 600px;
		}
	}
	label {
		display: block;
		padding: 0 20px;
		height: 40px;
		background-color: #f66;
		cursor: pointer;
		line-height: 40px;
		font-size: 16px;
		color: #fff;
	}
	p {
		overflow: hidden;
		padding: 0 20px;
		border: 1px solid #f66;
		border-top: none;
		border-bottom-width: 0;
		max-height: 0;
		line-height: 30px;
		transition: all 500ms;
	}
}
</style>

11、按钮的点击动画：

<div class="bruce flex-ct-x">
	<button class="stereo-btn">iCSS</button>
</div>
<style>
.stereo-btn {
	padding: 10px 20px;
	outline: none;
	border: none;
	border-radius: 10px;
	background-image: linear-gradient(#09f, #3c9);
	box-shadow: 0 10px 0 #09f;
	cursor: pointer;
	text-shadow: 0 5px 5px #ccc;
	font-size: 50px;
	color: #fff;
	transition: all 300ms;
	&:active {
		box-shadow: 0 5px 0 #09f;
		transform: translate3d(0, 5px, 0);
	}
}
</style>

12、自动打字：

<div class="bruce flex-ct-x">
	<div class="auto-typing">Do You Want To Know More About CSS Development Skill</div>
</div>
<style>
@mixin typing($count: 0, $duration: 0, $delay: 0) {
	overflow: hidden;
	border-right: 1px solid transparent;
	width: #{$count + 1}ch;
	font-family: Consolas, Monaco, Monospace;
	white-space: nowrap;
	animation: typing #{$duration}s steps($count + 1) #{$delay}s backwards, caret 500ms steps(1) #{$delay}s $duration * 2 forwards;
}
.auto-typing {
	font-weight: bold;
	font-size: 30px;
	color: #09f;
	@include typing(52, 5);
}
@keyframes typing {
	from {
		width: 0;
	}
}
@keyframes caret {
	50% {
		border-right-color: currentColor;
	}
}
</style>

13、输入框：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
	 h4 {
        text-align: center;
      }
      section {
        display: flex;
        width: 900px;
        margin: 0 auto;
        justify-content: space-evenly;
      }
      section + section {
        margin-top: 40px;
      }
      .g {
        position: relative;
      }
      .input-g {
        border-bottom: 1px solid #d0d0d5;
      }
      .input-g::after {
        content: "";
        position: absolute;
        border-bottom: 2px solid #2486ff;
        left: 0;
        right: 0;
        bottom: -1px;
        transform: scaleX(0);
        transition: transform 0.25s;
      }
      .input-g:focus-within::after {
        transform: scaleX(1);
      }
      .control {
        margin: 0;
        line-height: 1.5;
        outline: none;
      }
      .input {
        padding: 20px 16px 6px;
        border: 1px solid transparent;
        background: #f5f5f5;
      }
      .outline,
      .textarea {
        padding: 13px 16px 13px;
        border: 1px solid #d0d0d5;
        border-radius: 4px;
        transition: border-color 0.25s;
      }
      .outline:focus,
      .textarea:focus {
        border-color: #2486ff;
      }

      .control:placeholder-shown::placeholder {
        color: transparent;
      }

      .input-label {
        position: absolute;
        font-size: 16px;
        line-height: 1.5;
        left: 16px;
        top: 14px;
        color: #a2a9b6;
        padding: 0 2px;
        transform-origin: 0 0;
        pointer-events: none;
        transition: all 0.25s;
      }

      /* 线框样式label定位 */
      .control:not(:placeholder-shown) + .input-label,
      .control:focus + .input-label {
        color: #2486ff;
        transform: scale(0.75) translate(-2px, -32px);
      }
      /* 填充样式下label定位  (样式覆盖 后来居上) */
      .input:not(:placeholder-shown) ~ .input-label,
      .input:focus ~ .input-label {
        transform: scale(0.75) translateY(-14px);
      }
      /* 线框交互下有个白色背景 */
      .outline ~ .input-label,
      .textarea ~ .input-label {
        background-color: #fff;
      }
  </style>
</head>
<body>
<h4>填充风格</h4>
    <section>
      <div class="g input-g">
        <input class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g input-g">
        <input class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g input-g">
        <input value="hello world" class="input control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>

    <h4>轮廓风格</h4>
    <section>
      <div class="g outline-g">
        <input class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g outline-g">
        <input class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g outline-g">
        <input value="hello world" class="outline control" placeholder="邮箱" />
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>

    <h4>文本的轮廓风格</h4>
    <section>
      <div class="g textarea-g">
        <textarea class="textarea control" placeholder="邮箱"></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g textarea-g">
        <textarea class="textarea control" placeholder="邮箱"></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
      <div class="g textarea-g">
        <textarea
          value="hello world"
          class="textarea control"
          placeholder="邮箱"
        ></textarea>
        <label for="" class="input-label">邮箱</label>
      </div>
    </section>
</body>
</html>

14、返回浏览器顶部：

 <input type="hidden" id="toTop"/>//输入框隐藏，且置顶
 <label for="toTop">返回至顶</label>//label置顶
❍❏❐❑❒❖❘❙❚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
皮肤美容磨皮插件.BeautyBox
03-04
[Adobe.Premiere.-After.Effects.皮肤美容磨皮插件].BeautyBox
CSS3 弹性布局display:flex详解
LJXLQXX的博客
01-11 2917
弹性盒子display:flex常用属性详解
常用CSS集合
10-31
下面是对常用CSS集合的解释： 按钮样式 在CSS中，按钮样式是通过使用选择器和声明来定义的。例如，`.ButtonCSS`选择器定义了一个按钮的基本样式，包括字体、字号、颜色、边框、背景图片等属性。这些属性可以单独地...
常用css.docx
04-18
下面是从给定的文件中总结的一些常用的CSS知识点： 1. 屏幕自适应居中：在App.vue中设置高度，然后在相应页面中设置style，可以使用以下代码实现屏幕自适应居中： ```css html, body { width: 100%; height: 100...
常用CSS工具类
08-10
标题“常用CSS工具类”和描述“快速做页面，少写重复代码，减少起类命的痛苦”都指向了这一主题。 在JavaScript开发中，尤其是在前端框架如React、Vue或Angular中，CSS工具类的使用更为常见。它们可以与组件紧密...
常用CSS跟JS效果整理
11-15
以下是对标题“常用CSS跟JS效果整理”中涉及的知识点的详细说明。 **1. 常用CSS效果** 1. **布局**：CSS提供了流式布局、网格布局（CSS Grid）、Flexbox布局等，帮助开发者创建响应式的网页结构。 2. **定位**：...
常用CSS缩写语法总结
12-11
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四...
CSS 常用元素属性
2301_79881188的博客
09-11 482
CSS 属性有很多, 可以参考文档。
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 194
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 847
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 494
水平居中的几种方法（总结）
VUE实现刻度尺进度条
最新发布
u011753609的博客
09-11 218
VUE实现刻度尺进度条
CSS中 nth-child 与 nth-of-type 的区别
qq_62512874的博客
09-11 376
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4108
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
less和css在写法上有什么区别吗？
qq_50853940的博客
09-11 234
【代码】less和css在写法上有什么区别吗？
CSS-1
Nozomi9967的博客
09-07 234
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。词列表方法为一个元素同时设置多个样式。，但只可以用类选择器的方法实现，作用：可以选中所有html元素。的（不能使用 ID 词列表）。行内样式>内部样式=外部样式。
css-loader/style-loader/less-loader/sass-loader/postcss-loader各有什么作用，一次性说明白
Wang_Si_D的博客
09-11 910
简单介绍sass-loader、less-loader、postcss-loader、css-loader、style-loader起到什么作用
CSS+div样式指南：常用CSS属性解析
"该PDF文件主要介绍了CSS+div中的一些常用CSS标签和属性，包括长度单位、元素分类、颜色与背景类的相关设置方法。" 在网页设计中，CSS（层叠样式表）是一种用于控制网页元素外观的关键技术。这篇资料详细讲解了CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值