CSS

最新推荐文章于 2022-02-21 13:26:36 发布
最新推荐文章于 2022-02-21 13:26:36 发布
阅读量90 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56706590/article/details/120246225
版权

七、2D变形（变换）

在这里插入图片描述

1. 旋转

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			body:hover #test{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>

2. 平移

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			body:hover #test{
				transform: translate(300px,300px);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>

3. 倾斜

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			body:hover #test{
				transform: skew(45deg,45deg);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>

4. 缩放

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			body:hover #test{
				transform: scale(.5,.5);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>

5. 基点的变换

① 基点的变换只对旋转、倾缩放有效，对平移没有作用
② 基点的位置有一下三种书写方式

  • transform-origin: 100% 100%;
  • transform-origin: 50px 50px;
  • transform-origin: left top;
    在这里插入图片描述
    示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
				transform-origin: 100% 100%; 
				 /* transform-origin: 50px 50px; */
				/* transform-origin: left top; */
			}
			
			body:hover #test{
				transform: rotate(360deg);
				/* transform: scale(2); */
				/* transform: skew(45deg); */
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>

6. 矩阵

在这里插入图片描述

（1）平移

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			body:hover #test{
				transform: matrix(1,0,0,1,300,0);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>
（2）旋转

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			#test{
				width: 200px;
				height: 200px;
				background: pink;
				text-align: center;
				font: 30px/200px "微软雅黑";
				
				/* display: block; */
				
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				
				transition: 2s;
			}
			
			/* 
				角度转弧度
					deg*PI/180
			 */
			
			body:hover #test{
				transform:matrix(0.707167811865476,0.707167811865475,-0.707167811865475,0.707167811865476,0,0);
			}
		</style>
	</head>
	<body>
		<div id="test">
			hhh
		</div>
	</body>
</html>
（3）倾斜

在这里插入图片描述

（4）缩放

在这里插入图片描述

7. 变换组合

① 变换组合时，计算方向是从右往左进行计算的
示例1：

  • 从左往右
    1 0 100 50 150
    0 1 0 50 50
    0 0 1 1 1

    .5 0 0 150 75
    0 .5 0 50 25
    0 0 1 1 1

  • 从右往左
    5 0 0 50 25
    0 .5 0 50 25
    0 0 1 1 1

    1 0 100 25 125
    0 1 0 25 25
    0 0 1 1 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
				overflow: hidden;
			}
			
			#test1{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background: pink;
				text-align: center;
				transition: 2s;
			}
			
			#test2{
				margin-top: 50px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				background: pink;
				text-align: center;
				transition: 2s;
			}
			
			/* （50，50）---->（125，25） */
			body:hover #test1{
				transform: translateX(100px) scale(.5);
			}
			body:hover #test2{
				transform: scale(.5) translateX(100px);
			}
		</style>
	</head>
	<body>
		<div id="test1">
			hhhhhh
		</div>
		<div id="test2">
			哈哈哈哈哈哈
		</div>
	</body>
</html>

示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				height: 100%;
				overflow: hidden;
			}
			body{
				width: 60%;
				height: 60%;
				border: 1px solid;
				margin: 100px auto 0;
			}
			
			#test1{
				width: 100px;
				height: 100px;
				line-height: 100px;
				background: pink;
				text-align: center;
				transition: 2s;
			}
			
			#test2{
				margin-top: 50px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				background: pink;
				text-align: center;
				transition: 2s;
			}
			
			body:hover #test1{
				transform: rotate(180deg) translateX(100px) ;
			}
			body:hover #test2{
				transform:translateX(100px) rotate(180deg);
			}
		</style>
	</head>
	<body>
		<div id="test1">
			hhhhhh
		</div>
		<div id="test2">
			哈哈哈哈哈哈
		</div>
	</body>
</html>

8. 扇形导航

① 在元素首次渲染还没有完成的情况下，是不会出发过渡的
② 在绝大部分变换样式切换时，如果变换函数的位置 个数不相同也不会触发过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: fixed;
				right: 15px;
				bottom: 15px;
				width: 50px;
				height: 50px;
			}
			#wrap > .inner > img{
				position: absolute;
				left: 0;
				top: 0;
				margin: 3.5px;
				border-radius: 50%;
			}
			#wrap > .home{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				background: url(img/home.png) no-repeat;
				border-radius: 50%;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<img src="img/close.png" >
				<img src="img/enlarge.png" >
				<img src="img/shrink.png" >
				<img src="img/back.png" >
				<img src="img/refresh.png" >
			</div>
			<div class="home">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var homeEle = document.querySelector(".home");
			var imgs = document.querySelectorAll("#wrap > .inner > img");
			var flag =true;
			var c=140;
			// 第二部分
			function fn(){
				this.style.transition="0.3s";
				this.style.transform="rotate(-720deg) scale(1)";
				this.style.opacity=1;
				
				this.removeEventListener("transitioned",fn);
			}
			for(var i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){
					this.style.transition="0.5s";
					this.style.transform="rotate(-720deg) scale(2)";
					this.style.opacity=0.1;
					
					this.addEventListener("transitionend",fn)
				}
			}
			
			
			// 第一部分
			homeEle.onclick=function(){
				if(flag){
					this.style.transform="rotate(-720deg)";
					for(var i=0;i<imgs.length;i++){
						imgs[i].style.transition="1s "+(i*0.1)+"s";
						imgs[i].style.transform="rotate(-720deg) scale(1)";
						imgs[i].style.left = -getPoint(c,90*i/(imgs.length-1)).left+"px";
						imgs[i].style.top = -getPoint(c,90*i/(imgs.length-1)).top+"px";
					}
				}else{
					this.style.transform="rotate(0deg)";
					for(var i=0;i<imgs.length;i++){
						imgs[i].style.transition="1s "+((imgs.length-1-i)*0.1)+"s";
						imgs[i].style.transform="rotate(0deg) scale(1)";
						imgs[i].style.left = 0+"px";
						imgs[i].style.top = 0+"px";
					}
				}
				flag=!flag;
			}
			
			
			
			// 已知第三边和一个角
			function getPoint(c,deg){
				var x = Math.round(c * Math.sin(deg*Math.PI/180));
				var y = Math.round(c * Math.cos(deg*Math.PI/180));
				return{left:x,top:y};
			}
		}
	</script>
</html>

9. 时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			#wrap {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
			}

			ul>li {
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background: black;
				transform-origin: center 100px;
			}

			ul>li:nth-child(5n+1) {
				height: 15px;
			}

			#wrap>.hour {
				position:  absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background: black;
				transform-origin: center bottom;
			}

			#wrap>.min {
				position:  absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: gray;
				transform-origin: center bottom;
			}

			#wrap>.sec {
				position:  absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}

			#wrap>.icon {
				position:  absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul>
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var hourNode = document.querySelector("#wrap > .hour");
			var minNode = document.querySelector("#wrap > .min");
			var secNode = document.querySelector("#wrap > .sec");
			var ulNode = document.querySelector("#wrap > ul");
			var styleNode = document.createElement("style");
			var liHtml = "";
			var cssText = "";
			for (var i = 0; i < 60; i++) {
				liHtml += "<li></li>";
				cssText += "ul >li:nth-child(" + (i + 1) + "){transform:rotate(" + (i * 6) + "deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML = cssText;
			document.head.appendChild(styleNode);
			
			move();
			setInterval(move,1000)
			function move(){
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				
				hourNode.style.transform="rotate("+(30*h)+"deg)";
				minNode.style.transform="rotate("+(6*m)+"deg)";
				secNode.style.transform="rotate("+(6*s)+"deg)";
			}
		}
	</script>
</html>

效果
在这里插入图片描述

八、3D变换

1. 3D旋转

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -200px;
				perspective: 200px;
			}
			#inner {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 50px/200px "微软雅黑";
				transition: 1s;
			}
			
			#wrap:hover #inner{
				transform: rotate3d(1,1,1,360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				啊哈哈
			</div>
		</div>
	</body>
</html>

2. 3D平移

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -200px;
				perspective: 100px;
			}
			#inner {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 50px/200px "微软雅黑";
				transition: 1s;
			}
			
			#wrap:hover #inner{
				transform: translate3d(-50%,-50%,-100px);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				啊哈哈
			</div>
		</div>
	</body>
</html>

3. 3D缩放

在这里插入图片描述
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 400px;
				border: 1px solid;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -200px;
				perspective: 300px;
			}
			#inner {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
				background: pink;
				text-align: center;
				font: 50px/200px "微软雅黑";
				transition: 5s;
			}
			
			#wrap:hover #inner{
				transform: scaleZ(2) translateZ(100px);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				啊哈哈
			</div>
		</div>
	</body>
</html>
weixin_56706590
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap.css
01-27
bootstrap的css文件
css 沙箱
_
03-05 1125
qiankun 的 css 沙箱的原理是重写 HTMLHeadElement.prototype.appendChild 事件，记录子项目运行时新增的 style/link 标签，卸载子项目时移除这些标签。 single-spa 方案中我用了换肤的思路来解决 css 污染：首先 css-scoped 解决大部分的污染，对于一些全局样式，在子项目给 body/html 加一个唯一的 id/class（正常开发部署用），然后这个全局的样式前面加上这个 id/class，而 single-spa 模式则在 mo
分享动态载入CSS的两种方法！
yihuliunian的博客
08-19 627
1.通过 文档对象创建 link节点,指定 href,然后 appendChild到页面. 这种方案大家都用过, 不过,会存在一些问题.什么问题呢?! 跨域 案例:FF下打开baidu, Firebug下运行以下代码(没有firebug,就去装一个,挺好用的) 程序代码 var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "http://.
JS设置CSS样式的几种方式
yihuliunian的博客
05-28 222
转载自品略图书馆http://www.pinlue.com/article/2020/03/1619/0510029449633.html 用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有"-"号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style["text-align"] = "100px"; element.style.height = "100...
append()、appendChild() 和 innerHTML 的区别
热门推荐
QLiuQ
04-08 4万+
概念和区别：append() 可以同时传入多个节点或字符串，没有返回值；据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/appendappendChild() 只能传一个节点，且不直接支持传字符串【需要 appendChild(docu...
使用append方法动态添加代码时css样式失效/append重复添加内容
qq_45128278的博客
04-12 2151
防止append重复添加，在append之前使用empty，但是我使用之后第二次css样式失效了，解决方法见下文： $("#contact").empty(); $("#contact").append(contactstr); 下面的内容是转载的： $("#所在标签id").append(obj); // 用append 方式添加拼接的标签 $("#所在标签id").listview(“re...
cssgrid
03-30
cssgrid
CSS钢琴
03-02
CSS钢琴
main.css:用于开发HTML5 Boilerplate CSS文件main.css的存储库
04-13
使用安装： npm install main.css并从生成的node_modules/main.css/dist文件夹中node_modules/main.css/dist所需的内容用安装： yarn add main.css并从生成的node_modules/main.css/dist文件夹中node
HTML与CSS学习总结（一）
manmanlu2006的博客
05-14 546
1、appendChild() 、cloneNode() // 动态添加布局 function add_guides() { var itm=document.getElementById("add_guide_item"); var cln=itm.cloneNode(true); document.getElementById("div_add_guide").appendChild(...
关于appendChild()方法的一个困惑
weixin_45347615的博客
07-28 579
关于appendChild()方法的一个困惑 <div class="youarepig"></div> <div class="youarepig"></div> 以上代码是html中的代码 var youarepig = document.querySelectorAll('youarepig') //获取所以类名为youarepig的标签 var div = document.createElement('div') //创建div标签
js append追加html代码标签后 css样式没生效 js同时没有生效 已解决
z1712636234的博客
10-19 4万+
html代码 添加input css代码 .box{ width: 500px; height: 300px; border-radius:8px; border:1px solid #f0f; margin-bottom: 20px; padding: 5%; } .box input{ border:0px; background: skyblu
学习笔记：DOM之appendChild
weixin_37150764的博客
10-22 351
appendChild <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css">
【CSS实例】
qll123的专栏
02-21 2561
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
js中appendChild的用法
才不是小弱鸡的博客
01-19 1万+
0X00写在最前    之前学习js时看到的appChild方法都是用于列表，也就是添加li标签之类，类似这样 今天在mdn上看到了新的用法，令人耳目一新，记录一下与大家共同分享 0x01项目地址 https://roy-tian.github.io/mdn-examples/javascript/gallery/ 0x02 appendChild方法分析 var thumbBar ...
append()方法_JavaScript DOM API中append和appendChild的三个不同点
weixin_36410141的博客
11-30 1236
append和appendChild是两个常用的方法，用于将元素添加到文档对象模型(DOM)中。它们经常可以互换使用，没有太多麻烦，但如果它们是一样的，那么为什么要出现两个API呢？……它们只是相似，但不是一样。append()此方法用于以Node对象或DOMString(基本上是文本)的形式添加元素。插入一个Node对象const parent = document.createElement(...
css
最新发布
06-02
CSS（Cascading Style Sheets）是一种用于描述网页样式和排版的语言。通过 CSS，我们可以将网页内容和样式分离开来，从而使得网页的结构和样式更加清晰易于维护。 CSS 由三个部分组成： 1. 选择器（Selector）：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值