常用的CSS

已于 2023-07-07 16:59:25 修改
阅读量430 收藏 6
点赞数 1
分类专栏： CSS 文章标签： css 前端 css3
于 2022-06-23 16:47:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_x_m/article/details/120011637
版权

文章目录

1-1:弹性布局 --横向居中

display:block; 允许设定宽高,添加换行符
display:inline-block:允许设定宽高,且不添加换行符，因此该元素可以位于其他元素旁边
display:inline:设定宽高无效,且不添加换行符，因此该元素可以位于其他元素旁边

讲display:flex的好文

使文字等比例放大缩小全局设定:font-size:25px;有文字的元素中设定font-size:0.25rem
注:10px=1em

块级标签弹性布局: 父元素设定使子元素上下左右垂直:display: flex; justify-content: center; align-items: center;
在这里插入图片描述

1-2:文字居中

vertical-align

父元素:display: table; 子元素: display: table-cell; vertical-align: middle; text-align: center;
在这里插入图片描述

line-height

子元素设定固定高度:height: 100px;text-align: center; line-height: 100px;
在这里插入图片描述

1-3 文字超出父级标签

文字一行-超出为省略号

text-overflow: ellipsis;overflow: hidden; white-space:nowrap
在这里插入图片描述

文字多行-超出为省略号

overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
在这里插入图片描述

1-4 图片随div的大小变化,自动填充并居中显示

在这里插入图片描述

1-5 普通流布局

去除默认间隙:父元素: font-size:0; letter-spacing: -4px;
子元素: display: inline-block
在这里插入图片描述

1-6 清除浮动

为什么清除浮动
1.当父元素不设定高度时,高度由子元素的内容决定.但子元素为浮动时,父元素的高度为0
2.为了避免产生浮动，父组件的背景或边框不能正确显示，这个时候我们就需要clear:both清除浮动

不清除浮动
在这里插入图片描述
清除浮动
可使用overflow:hidden或者clear:both

overflow:hidden-----------在父组件中用
clear:both-----------创建同级子组件,样式中增加
在这里插入图片描述

在这里插入图片描述

1-7 :after :before 的使用

功能:before,after 在元素内容前后加入指定内容

利用after 画小三角形

  .flex_container:after{
    content: '';
    display: inline-block;   /*使设定的宽高有效*/        
    width: 0;
    height: 0;
    border: 16px solid transparent; /*transparent:透明*/
    border-left: 16px solid #b31d1d;
    /* border-top: 16px solid #54b31d;
    border-right: 16px solid #b7ca0d;
    border-bottom: 16px solid #1815b8; */
    position: relative;
    top: 2px;
    left: 10px;
}

在这里插入图片描述

如果设定全部的border
在这里插入图片描述

1-8 块级元素上下左右居中

宽高已知

width: 100px;height:100px;position:absolute; left:0;right:0; top:0;bottom:0;margin:auto;
在这里插入图片描述

宽高未知

width:20%; height: 20%; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); background-color: orange;
在这里插入图片描述

1-9 动画

div波纹

在这里插入图片描述
在这里插入图片描述

.main{
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color:  darkturquoise;    
    padding: 10px;
    border-radius:40%;
    animation: wave 5s linear infinite;
}
@keyframes wave{
    100%{
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

1-10 border属性

原图:
在这里插入图片描述

border-image/borderdemo样列
round border-image: url('./image/border.png') 30 30 round;在这里插入图片描述
stretch border-image: url('./image/border.png') 30 30 stretch;$12
double border: 12px double #b1a4a4;$12
groove border: 4px groove #5a9fe9;在这里插入图片描述
ridge border: 4px ridge #5a9fe9;在这里插入图片描述
inset border: 4px inset #5a9fe9;在这里插入图片描述
outset border: 4px outset #5a9fe9;在这里插入图片描述
inherit#inheritPartent{border:1px dotted #5a9fe9; } #inheritChildren{ border:inherit }在这里插入图片描述

1-11 渐变色

background-image:linear-gradient(45deg,red,yellow)

1-12 横向书签

在这里插入图片描述

.tag-horizontal {
    position: absolute;
    background-color: #f2f5fa;
    padding: 0 1.4rem;
    margin-top: 0.3rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 1.8rem;
    min-width: 5rem;
    text-align: center;
    line-height: 1.8rem;
    left: -1.5px;
    &::after {
	    content: "";
	    position: absolute;
	    left: 100%;
	    top: 0;
	    border-color: #f2f5fa transparent #f2f5fa #f2f5fa;
	    border-width: 0.9rem 0.9rem 0.9rem 0;
	    border-style: solid;
	}
}

1-13 圆点(1-12图片的圆点)

.tag-horizontal::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.45rem;
    width: 0.7rem;
    height: 0.7rem;
    background-color: var(--bgColor);
    border-radius: 50%;
    -webkit-box-shadow: inset 2px 0 2px #3e6d81;
    box-shadow: inset 2px 0 2px #3e6d81;
}

1-14 毛玻璃

backdrop-filter: blur(24px); background: hsla(0, 0%, 100%, 0.7);

  • hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
  • backdrop-filter:透过该层的底部元素模糊化
    在这里插入图片描述
  • 完整代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>毛玻璃</title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html,
		body {
			height: 100%;
			background: #f4f4f4;
		}
		.box {
			height: 100%;
			background: url('../img/bg.png') 100% 100% no-repeat;
			background-position: center center;
		}
		.glass {
			width: 50%;
			height: 50%;
			margin: 0 auto;
			backdrop-filter: blur(24px);
			background: hsla(0, 0%, 100%, 0.7);
			box-shadow: 0 10px 28px rgb(25 78 183 / 6%);
			padding: 32px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	</style>
	<body>
		<div class="box">
			<div class="glass"></div>
		</div>
	</body>
</html>

1-15 模糊遮罩

在这里插入图片描述

backdrop-filter:saturate(150%) contrast(50%) blur(8px);
-webkit-backdrop-filter:saturate(150%) contrast(50%) blur(8px);
background-color:rgba(0,0,0,.3);
  • 防止透过遮罩层内容过暗，配合了saturate(150%)使用，意为使…饱和，类似ps饱和度效果，<100%变暗，>100%变亮

1-16 图片放大

在这里插入图片描述

//父盒子
overflow: hidden;
// 图片
transition: 1s;
// 图片悬浮
transform: scale(2);

	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html,
		body {
			height: 100%;
		}
		.box {
			width: 200px;
			height: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			border: 5px solid orange;
			overflow: hidden;
		}
		img {
			width: 200px;
			height: 200px;
			background: url("../img/bg.png") no-repeat;
			background-position: center center;
			transition: 1s;
			background-size: cover;
		}
		img:hover {
			transform: scale(2);
		}
	</style>
	<body>
		<div class="box">
			<img url="../img/bg.png" />
		</div>
	</body>
</html>

1-17 全屏图片

body {
	margin: 0;
	background: #e8e8e8 url("../img/bg.png") center bottom;
	/* 设置背景图片会不会随着屏幕滚动 */
	background-attachment: fixed;
	/* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 */
	background-size: cover;
	/* 去掉好像也没什么 */
	display: flex;
	/* 设置height:100vh，能够保证元素无论是否有没有内容，高度都等于屏幕高度。 */
	min-height: 100vh;
	flex-direction: column;
}

1-18 按钮悬浮特效

在这里插入图片描述
html:

<div class="primary-btn">
	<a href="#" class="price-btn"> <span>Try it's Free</span> </a>
</div>

.primary-btn {
	width: 300px;
	height: 200px;
	margin: 0 auto;
	margin-top: 25%;
}
.price-btn {
	color: #ffffff;
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 15px 50px;
	border-radius: 50px;
	text-align: center;
	text-transform: capitalize;
	background: #ef9334;
	display: block;
}
.price-btn span {
	color: #ffffff;
	position: relative;
	z-index: 2;
}
.price-btn:hover {
	color: #ffffff;
}

.price-btn:hover::before {
	animation: criss-cross-left 0.8s both;
	animation-direction: alternate;
}
.price-btn:hover::after {
	animation: criss-cross-right 0.8s both;
	animation-direction: alternate;
}
.price-btn::before,
.price-btn::after {
	position: absolute;
	top: 50%;
	content: "";
	width: 20px;
	height: 20px;
	background-color: #7215fa;
	border-radius: 50%;
	color: #ffffff;
}
.price-btn::before {
	left: -20px;
	transform: translate(-50%, -50%);
}
.price-btn::after {
	right: -20px;
	transform: translate(50%, -50%);
}
@keyframes criss-cross-left {
	0% {
		left: -20px;
	}
	50% {
		left: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		left: 50%;
		width: 375px;
		height: 375px;
	}
}

@keyframes criss-cross-right {
	0% {
		right: -20px;
	}
	50% {
		right: 50%;
		width: 20px;
		height: 20px;
	}
	100% {
		right: 50%;
		width: 375px;
		height: 375px;
	}
}

1-19 动画

在这里插入图片描述
html:

<div class="feature-image-area shake-y">
	<img class="feature-img" src="../img/bg.png" />
	<img class="feature-img_1 pulse" src="../img/bg.png" />
	<div class="feature-shape left-right-rotate"></div>
</div>

css:

.feature-image-area {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	margin-top: 25%;
	position: relative;
}
.feature-img {
	width: 500px;
	height: 500px;
	outline: 2px solid rgb(102, 54, 173);
	outline-offset: 10px;
	border-radius: 10px;
	position: relative;
	z-index: 2;
}
.feature-img_1 {
	width: 250px;
	height: 250px;
	position: absolute;
	border-radius: 10px;
	bottom: -20%;
	left: -20%;
	z-index: 22;
}
/* 半圆 */
.feature-shape {
	position: absolute;
	bottom: -44%;
	width: 230px;
	height: 260px;
	margin: 20px;
	clip-path: circle(45% at 50% 1%);
	background: #7215fa;
	right: -29%;
}
.shake-y {
	animation: shakeY 5s ease-in-out infinite;
}
@keyframes shakeY {
	0% {
		transform: translateY(10px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(10px);
	}
}
.pulse {
	animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
	from {
		transform: scale3d(1, 1, 1);
	}
	50% {
		transform: scale3d(1.05, 1.05, 1.05);
	}
	to {
		transform: scale3d(1, 1, 1);
	}
}

.left-right-rotate {
	animation: rotated-style3 2s infinite alternate;
}
@keyframes rotated-style3 {
	0% {
		transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
	}
}

1-20 卡片悬浮动画

在这里插入图片描述
可以如此布局：
在这里插入图片描述

<div class="card"></div>

.card {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	margin-top: 25%;
	background-color: #fff;
	box-shadow: 0 10px 25px rgb(0 0 0 / 3%);
	padding: 40px 0;
	border-radius: 20px;
	position: relative;
	border: 1px solid #ef9334;
	transition: 0.4s;
	-webkit-transition: 0.4s;
}
.card:before {
	position: absolute;
	background: #fff;
	z-index: 2;
	transition: 0.6s;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	content: "";
	height: 100%;
	left: -20px;
	top: -20px;
	width: 100%;
}
.card:hover {
	box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
}
.card:hover::before {
	width: 0px;
	height: 0;
}

1-21 图标悬浮动画

在这里插入图片描述
在这里插入图片描述
代码：关键代码：

transition: 0.6s;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;

.card:hover img {
	transform: scale(-1) rotate(180deg);
}

具体代码

.card {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: orange;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
	line-height: 120px;
}
img {
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 3;
	transition: 0.6s;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
}
.card:hover img {
	transform: scale(-1) rotate(180deg);
}
</style>
<body>
<div class="card">
	<img src="../img/bg.png" />
</div>
</body>

1-22 图片悬浮动画

此为动画效果
在这里插入图片描述
代码：关键代码：

animation: vgJgjBFw 1s steps(30) forwards;

@keyframes vgJgjBFw {
	0% {
		background-position: 0 0;
	}
	to {
		background-position: 0 100%;
	}
}

具体代码：

.box {
	width: 106px;
	height: 103px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
}
.img {
	width: 100%;
	height: 100%;
	background: url(../img/icon04_977c284_977c284.png) no-repeat;
}
.box:hover .img {
	animation: vgJgjBFw 1s steps(30) forwards;
}
@keyframes vgJgjBFw {
	0% {
		background-position: 0 0;
	}
	to {
		background-position: 0 100%;
	}
}
<body>
	<div class="box">
		<div class="img"></div>
	</div>
</body>

此图为原图：
在这里插入图片描述

<div class="card">
	<img src="../img/bg.png" />
</div>

.card {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: orange;
	margin: 0 auto;
	vertical-align: middle;
	text-align: center;
	line-height: 120px;
}
img {
	width: 40px;
	height: 40px;
	position: relative;
	z-index: 3;
	transition: 0.6s;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
}
.card:hover img {
	transform: scale(-1) rotate(180deg);
}

1-23 div 两侧圆形内部凹陷

在这里插入图片描述

  • html
<div class='btn'></div>
  • css
.btn {
	width: 200px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	background: #fff;
	color: #fff;
	position: relative;
	border-radius:10px;
	border:1px solid #f66;

}
.btn:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 20px;
	background: #fff;
	top: 13px;
	right: -1px;
	border-radius: 10px 0 0 10px;
	border:1px solid #f66;
	border-right:none;
}
.btn:before {
	 position: absolute;
	 content: '';
	 width: 10px;
	 height: 20px;
	 background: #fff;
	 top: 13px;
	 left: -1px;
	border-radius: 0 10px 10px 0 ;
	border:1px solid #f66;
	border-left:none;
}

code

1-6

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>清除浮动</title>   
    <style>     
    *{
        margin:0;
        padding:0;
    }  
     .flex_container{
        border:1px solid #0aabb1;
    }
        .clear{
            clear: both;
        }
        .flex_item-left{
            width:10rem;
            height: 10rem;
            border:1px solid #0aabb1;
            float: left;
            
        }
        .flex_item-right{
            width:10rem;
            height: 10rem;
            border:1px solid #0aabb1;
            float: right;
            
        }
     </style>
</head>
<body>
    <div class="flex_container">
        <div class="flex_item-left"></div>
        <div class="flex_item-right"></div>
        <div class="clear"></div>
    </div>     
</body>
</html>

1-5

<style>  
   html,body{
       margin:0;
       padding:0;
       height:100%; 
   }
   .flex_container {
       width: 50%;
       height: 50%;
       background-color: #bff7d4;
       margin: 0 auto;
       margin-top: 15%;
       /*去除普通流布局子元素之间的div间隙*/
       font-size:0;
       letter-spacing: -4px;
    }
    .flex_item{
        width: 15%;
        height: 50%;
        background-color: palevioletred;  
        margin: 0 auto; 
        /* 普通流布局 */
        display: inline-block; /*子元素在一样*/
    } 
   
</style>
<div class="flex_container">
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
     <div class="flex_item"></div>
</div>

1-4

<style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
        margin-top:10%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
     }
     .flex_item{
         width: 20%;
         height: 50%;
         background-color: palevioletred;  
         margin: 0 auto; 
         margin-right: 1%;  
         text-align: center;
         position: relative;
         background-image: url('./油彩.jpeg'); /*图片背景颜色 ---当图片想要填充到一个div中时*/
         background-position: 50% 50%; /*图片居中*/
         background-size: 90% 90%; /* 图片大小*/
         background-repeat: no-repeat;/*图片只有一张,不重复*/
     }
 </style>
 <div class="flex_container">
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
      <div class="flex_item"></div>
 </div>

1-3-2

<style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
     }
     .flex_item{
         width: 50%;
         height: 40px;
         background-color: palevioletred;  
         margin: 0 auto; 
         /* 文字多行-超出显示为省略号 */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /*表示显示的行数,溢出加省略号*/
        -webkit-box-orient: vertical;/*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
     }
    
 </style>
 <div class="flex_container">
      <div class="flex_item">文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中</div>
 </div>

1-3-1

<style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
     }
     .flex_item{
         width: 50%;
         height: 100px;
         background-color: palevioletred;  
         margin: 0 auto;      
         /* 文字一行-超出显示为省略号 */
         text-overflow: ellipsis;
         overflow: hidden;
         white-space:nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止  */
     }
    
 </style>

 <div class="flex_container">
      <div class="flex_item">文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中文字居中</div>
 </div>

1-2-2

<style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto; /*div 左右居中*/
     }
     .flex_item{
         width: 50%;
         height: 100px;
         background-color: palevioletred;  
         margin: 0 auto;           
         text-align: center;/*文字左右居中*/
         line-height: 100px;/*文字垂直居中*/
     }
    
 </style>
<!-- 准备好一个容器 -->
 <div class="flex_container">
      <div class="flex_item">文字居中</div>
 </div>

1-2-1

<style>  
    html,body{
        margin:0;
        padding:0;
        height:100%; 
    }
    .flex_container {
        width: 50%;
        height: 500px;
        background-color: #bff7d4;
        /* margin: 0 auto;
        line-height: 500px; */
        display: table;           
     }
     .flex_item{
         width: 50%;
         height: 50%;
         background-color: palevioletred;
         display: table-cell;
         vertical-align: middle;/*垂直居中*/
         text-align: center;/*水平居中*/

     }
   </style> 

 <div class="flex_container">
      <div class="flex_item">文字居中</div>
 </div>

1-1

<style>  
     /* 宽度高度为整个屏幕   */
    html,body{
        margin:0;
        padding:0;
        /* 宽度不用设置,默认为100% */
        height:100%; 
        font-size: 25px;
    }
    /* 使div上下左右居中 */
    .flex_container {
        width: 50%;
        height: 50%;
        background-color: #bff7d4;
        margin: 0 auto;
        margin-top: 5%;
        display: flex; /*弹性布局*/
        flex-direction:row;/*子元素横向排列*/
        justify-content: center;/*相对父元素水平居中-包括行和块级元素*/
        align-items: center; /*相对父元素垂直居中*/
       
     }
     .flex_item{
         width: 20%;
         height: 50%;
         margin-right: 2%;
         background-color: palevioletred;
         text-align: center; /* 文字居中 */
         font-size: 0.25rem;
         /*
         1.定义了项目的放大 比例，如果为0，即使有剩余空间也不会放大
         2.如果取值为负数那么和0的取值效果相同
         */
         flex-grow: 0;
         /* font-size: 0.16em; */
     }
    
 </style>
<!-- 准备好一个容器 -->
 <div class="flex_container">
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <div class="flex_item">文字居中</div>
      <span>文字居中</span>
 </div>
月下脆竹書閣
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
常用CSS集合
10-31
下面是对常用CSS集合的解释： 按钮样式 在CSS中，按钮样式是通过使用选择器和声明来定义的。例如，`.ButtonCSS`选择器定义了一个按钮的基本样式，包括字体、字号、颜色、边框、背景图片等属性。这些属性可以单独地...
常用css.docx
04-18
下面是从给定的文件中总结的一些常用的CSS知识点： 1. 屏幕自适应居中：在App.vue中设置高度，然后在相应页面中设置style，可以使用以下代码实现屏幕自适应居中： ```css html, body { width: 100%; height: 100...
常用CSS样式
qq_51593012的博客
07-19 3547
CSS(层叠样式表)在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS效率---常用CSS框架
乱世刀疤
03-07 3705
css常用框架及其排名情况，熟用一个，事半功倍。
CSS全解析：从基础到实战，掌握每一个知识点
一杯梅子酱的博客
06-27 1040
以上就是CSS的全面解析，从基础属性到实战应用，涵盖了大部分常见的场景。掌握了这些知识，你将能够更加自信地设计和优化网页样式。继续探索CSS的无限可能，让创意成为现实！关注！
CSS常用样式
weixin_53988377的博客
07-24 1万+
CSS常用属性集合
CSS常用汇总
qq_43716830的博客
05-04 2792
标签选择器 <style> /*标签选择器：写上标签名*/ p { color: red; /*将p标签内容改成红色*/ font-size: 25px; } </style> 类选择器 语法 .类名{ 属性1：属性值1； … } 一个类可以有多个类名，类名之间要用空格隔开 <head> <meta charse
常用css样式
Glacier—john的博客
07-02 2849
常用颜色变量 less 参考antd 颜色变量 https://www.npmjs.com/package/@ant-design/colors @colorBlue: #1890ff; @colorGreen: #52c41a; @colorYellow: #fadb14; @colorGold: #faad14; @colorGray: #bfbfbf; @danger: #ff4d4f; 常用样式 宽度遵循ANTD设计规范，以8的倍数增加,共预设7个等级 xs：120、sm：160、md ：20
常用css样式大全以及css属性代码大全
热门推荐
qwqc262的博客
10-09 3万+
常用css样式大全 字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体 {font-va
css常用属性
weixin_44992737的博客
06-11 3391
css属性，css字体属性，css背景属性，css表格属性，css列表属性，css文本属性，opacity属性
常用CSS缩写语法总结
bboyjoe的博客
07-11 1082
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1；property:value1 value2;
css常用标签
fanbutuan的博客
09-12 1559
css常用属性标签
常用CSS样式大全（超全面）
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
常用CSS工具类
08-10
标题“常用CSS工具类”和描述“快速做页面，少写重复代码，减少起类命的痛苦”都指向了这一主题。 在JavaScript开发中，尤其是在前端框架如React、Vue或Angular中，CSS工具类的使用更为常见。它们可以与组件紧密...
常用CSS跟JS效果整理
11-15
以下是对标题“常用CSS跟JS效果整理”中涉及的知识点的详细说明。 **1. 常用CSS效果** 1. **布局**：CSS提供了流式布局、网格布局（CSS Grid）、Flexbox布局等，帮助开发者创建响应式的网页结构。 2. **定位**：...
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1327
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS实现表格无限轮播
像鱼的博客
07-24 348
在React中，用CSS实现表格无线轮播
一文讲透如何使用CSS美化HTML界面
2301_79959126的博客
07-25 783
本文具体详细地介绍了如何使用CSS样式表语言去美化我们的HTML网页，介绍了CSS样式表语言中的基本概念，如规则集、选择器等，手把手地讲解了如何使用CSS样式表进行HTML的美化操作，并在最后进行了一个实战练习帮助巩固CSS样式表语言相关知识。
CSS+div样式指南：常用CSS属性解析
"该PDF文件主要介绍了CSS+div中的一些常用CSS标签和属性，包括长度单位、元素分类、颜色与背景类的相关设置方法。" 在网页设计中，CSS（层叠样式表）是一种用于控制网页元素外观的关键技术。这篇资料详细讲解了CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值