Tayler 明星资料卡 html css 网页设计

最新推荐文章于 2024-09-06 09:38:49 发布
最新推荐文章于 2024-09-06 09:38:49 发布
阅读量240 收藏 1
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43620967/article/details/129735438
版权

图1

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

html

		<div id="box">
			<!--1-->
			<!--figure 用作文档中插图的图像-->
			<!--第一个图片-->
			<figure class="view1">
				<!--alt 如果无法显示图像，浏览器将显示替代文本-->
				<img src="1989 Polaroid/1.png" alt=""/>
				<!--<figcaption> 标签定义 figure 元素的标题。-->
				<!--"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。-->
				<figcaption>
					<h2>Billboard三首排行第一</h2>
					<p class="pp p1">Shake It Off</p>
					<p class="pp p2">Black Space</p>
					<p class="pp p3">Bad Blood</p>
				</figcaption>
			</figure>

css

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

figure{
	position: relative;
	width: 33.3%;
	height: 350px;
	float: left;
	/*显示多出的部分，隐藏掉*/
	overflow: hidden;
}

h2,div,span,p{
	transition: all 3s;
}

figure img{
	transition: all 0.3s;
	/*元素的不透明级，默认为1*/
	opacity: 1;
}

figure:hover img{
	opacity: 0.5;
}

/*第一个框格*/
.view1 img{
	transform: translateX(0);
}

.view1:hover img{
	/*X移动50px*/
	transform: translateX(50px);
}

.view1 h2{
	position: absolute;
	left: 50px;
	top: 60px;
	color: white;
	transform: translateX(0);
}

.view1:hover h2{
	transform: translateX(50px);
}

.view1 .pp{
	position: absolute;
	left: 100px;
	width: 100px;
	background: dodgerblue;
	transition: all 0.3s;
}

.view1 .p1{
	bottom: 0px;
	transform: translateY(300px);
}

.view1:hover .p1{
	transform: translateY(-200px);
}

.view1 .p2{
	top: 200px;
	transform: translateX(500px);
}

.view1:hover .p2{
	transform: translateX(0px);
}

.view1 .p3{
	top: 275px;
	transform: translateX(-500px);
}

.view1:hover .p3{
	transform: translateX(0px);
}

图2

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

html

			<!--第二张图片-->
			<figure class="view2">
				<img src="1989 Polaroid/2.png" alt="">
				<figcaption>
					<h2>Taylor Swift</h2>
					<p class="info info1">Birthday:1989.12.13</p>
					<p class="info info2">Height:180cm</p>
					<p class="info info3">Weight:56kg</p>
				</figcaption>
			</figure>

css

/*第二个框格*/
.view2:hover img{
	transform: translateX(-20px);
}

.view2 h2{
	position: absolute;
	left: 20px;
	top: 60px;
	color: white;
}

.view2 .info{
	position: absolute;
	left: 20px;
	background: white;
	width: 120px;
	transform: translateX(-300px);
}

.view2 .info1{
	top: 100px;
	transition: all 0.3s;
}

.view2:hover .info1{
	transform: translateX(0px);
	width: 160px;
}

.view2 .info2{
	top: 150px;
	transition: all 0.3s 0.1s;
}

.view2:hover .info2{
	transform: translateX(0px);
}

.view2 .info3{
	top: 200px;
	transition: all 0.3s 0.2s;
}

.view2:hover .info3{
	transform: translateX(0px);
}

图3

/*第三个框格*/
.view3 img{
	transform: translateY(0);
}

.view3:hover img{
	transform: translateY(-20px);
}

.view3 h2{
	position: absolute;
	top: 100px;
	left: 60px;
	color: white;
	transform: translateY(-200px);
}

.view3:hover h2{
	transform: translateY(0);
}

.view3 p{
	position: absolute;
	left: 80px;
	bottom: 0px;
	transform: translateY(0px);
	opacity: 0;
}

.view3:hover p{
	transform: translateY(-100px);
	opacity: 1;
}

图4

在这里插入图片描述

			<figure class="view4">
				<img src="1989 Polaroid/4.png" alt="">	
				<figcaption>
					<h2>1989</h2>
					<span class="info4">Taylor Swift</span>
					<span class="info4 info5">《1989》</span>
				</figcaption>
				<div class="box1"></div>
			</figure>

/*第四个框格*/
.view4 h2{
	position: absolute;
	left: 20px;
	top: 60px;
	color: white;
	transform: translateY(50px);
	opacity: 0;
}

.view4:hover h2{
	transform: translateY(0px);
	opacity: 1;
}

.view4 div{
	position: absolute;
	left: 0px;
	bottom: -300px;
	width: 140%;
	height: 300px;
	background: white;
}

.view4:hover div{
	/*设置旋转元素的基点位置*/
	transform-origin: 0% 0%;
	transform: rotate(-20deg);
	background: cornflowerblue;
}

.view4 .info4{
	position: absolute;
	right: 90px;
	bottom: 80px;
	/*显示在最上面 第99页*/
	z-index: 99;
	transform: translateY(100px);
}

.view4 .info5{
	right: 20px;
}

.view4:hover .info4{
	transform: translateY(0px);
}

图5

在这里插入图片描述

			<figure class="view5">
				<img src="1989 Polaroid/5.png" />
				<figcaption>
					<h2>Taylor Swift-《22》</h2>
					<p style="color: black;">
						I don't know about you, but I’m feeling 22,
						Everything will be alright if you keep me next to you,
						You don't know about me, but I bet you want to,
						Everything will be alright if we just keep dancing like we're... 22  22
					</p>
				</figcaption>
				<div class="box2"></div>
			</figure>

/*第5个框格*/
.view5 h2{
	position: absolute;
	left: 15%;
	top: 15%;
	color: white;
	transform: translateX(-50px);
}

.view5:hover h2{
	transform: translateX(0px);
}

.view5 p{
	position: absolute;
	left: 15%;
	top: 25%;
	color: white;
	transform: translateY(100px);
	opacity: 0;
	width: 70%;
}

.view5:hover p{
	transform: translateY(0px);
	opacity: 1;
}

.view5 div{
	position: absolute;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	border: 3px solid black;
	transform: rotate(0deg) translateY(-400px);
	transform-origin: 0% 0%;
}

.view5:hover div{
	transform: rotate(360deg) translateY(0px);
}

图6

.view6:hover img{
	transform: scale(1.5);
}

.view6 h2{
	position: absolute;
	top: 50%;
	left: 45%;
	/*font 定义字体的粗细
	 normal 正常 等同400
	 bold 粗体 等同700
	 100|200|300|~900 字体粗细的绝对值*/
	font: 900;
	transform: rotate(0deg);
}

.view6:hover h2{
	transform: rotate(315deg);
	transition: all 3s; 
}

图7

/*第7个框格*/

.view7 img{
	transform: scale(1);
	transition: all 1s;
}

.view7:hover img{
	transform: scale(0.8);
}

图8

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

			<figure class="view8">
				<img src="1989 Polaroid/8.png" />
				<figcaption>
					<h2></h2>
					<p>Taylor Swift</p>
					<div class="top"></div>
					<div class="left"></div>
				</figcaption>
			</figure>

/*第8个框格*/
.view8{
	position: relative;
}

.view8 .top{
	position: absolute;
	left: 125px;
	top: 70px;
	width: 0;
	height: 200px;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

.view8:hover .top{
	width: 240px;
}

.view8 .left{
	position: absolute;
	left: 140px;
	top: 55px;
	width: 200px;
	height: 0px;
	 border-left: 2px solid #ccc;
	 border-right: 2px solid #ccc;
}

.view8:hover .left{
	height: 240px;
}

.view8 p{
	color: black;
	font-weight: 900;
	position: absolute;
	top: 30%;
	left: 55%;
	font-size: 14px;
	opacity: 0;
	transform: rotate(0deg) translateY(500px) scale(1);
	transition: all 3s; 
}

.view8:hover p{
	opacity: 1;
	transform: rotate(360deg) translateY(0px) scale(2);
}

图9

/*第9个框格*/
.view9 img{
	position: absolute;
	transition: all 3s;
	transform: rotate(0deg) scale(1);
}

.view9:hover img{
	transform: rotate(10deg) scale(1.1);
}

音乐按钮

		<!--添加音乐图标-->
		<img src="1989 Polaroid/musicBtn.png" class="musicbtn" onClick="playPause(this)"/>
		<audio src="mp3/Taylor Swift - We Are Never Ever Getting Back Together.mp3" autoplay="autoplay" id="musicPlayer"></audio>
	</body>

/*音乐按钮设置CSS*/
.musicbtn{
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
	height:40px;
	animation:xuanzhuan 2s infinite;
}

@keyframes xuanzhuan{
	from{}
	to{transform:rotate(360deg);
	 -webkit-transform:rotate(360deg);}
}

总

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>明星资料卡</title>
		
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/main.js" ></script>
	</head>
	<body>
		<div id="box">
			<!--1-->
			<!--figure 用作文档中插图的图像-->
			<!--第一个图片-->
			<figure class="view1">
				<!--alt 如果无法显示图像，浏览器将显示替代文本-->
				<img src="1989 Polaroid/1.png" alt=""/>
				<!--<figcaption> 标签定义 figure 元素的标题。-->
				<!--"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。-->
				<figcaption>
					<h2>Billboard三首排行第一</h2>
					<p class="pp p1">Shake It Off</p>
					<p class="pp p2">Black Space</p>
					<p class="pp p3">Bad Blood</p>
				</figcaption>
			</figure>
			
			<!--第二张图片-->
			<figure class="view2">
				<img src="1989 Polaroid/2.png" alt="">
				<figcaption>
					<h2>Taylor Swift</h2>
					<p class="info info1">Birthday:1989.12.13</p>
					<p class="info info2">Height:180cm</p>
					<p class="info info3">Weight:56kg</p>
				</figcaption>
			</figure>
			
			<figure class="view3">
				<img src="1989 Polaroid/3.png" alt="">	
				<figcaption>
					<h2>Back To December</h2>
					<p>
						I'm so glad you made time to see me.
						How's life, tell me how's your family?
						I haven't seen them in a while.
						You've been good, busier then ever.
						We small talk, work and the weather
						Your guard is up and I know why...
					</p>
				</figcaption>
			</figure>
			
			<figure class="view4">
				<img src="1989 Polaroid/4.png" alt="">	
				<figcaption>
					<h2>1989</h2>
					<span class="info4">Taylor Swift</span>
					<span class="info4 info5">《1989》</span>
				</figcaption>
				<div class="box1"></div>
			</figure>
			
			<figure class="view5">
				<img src="1989 Polaroid/5.png" />
				<figcaption>
					<h2>Taylor Swift-《22》</h2>
					<p style="color: black;">
						I don't know about you, but I’m feeling 22,
						Everything will be alright if you keep me next to you,
						You don't know about me, but I bet you want to,
						Everything will be alright if we just keep dancing like we're... 22  22
					</p>
				</figcaption>
				<div class="box2"></div>
			</figure>
			
			<figure class="view6">
				<img src="1989 Polaroid/6.png" />
				<figcaption>
					<h2>Out of the Woods</h2>
				</figcaption>
			</figure>
			
			<figure class="view7">
				<img src="1989 Polaroid/7.png" />
			</figure>
			
			<figure class="view8">
				<img src="1989 Polaroid/8.png" />
				<figcaption>
					<h2></h2>
					<p>Taylor Swift</p>
					<div class="top"></div>
					<div class="left"></div>
				</figcaption>
			</figure>
			
			<figure class="view9">
				<img src="1989 Polaroid/9.png" />
			</figure>
		</div>
		<!--添加音乐图标-->
		<img src="1989 Polaroid/musicBtn.png" class="musicbtn" onClick="playPause(this)"/>
		<audio src="mp3/Taylor Swift - We Are Never Ever Getting Back Together.mp3" autoplay="autoplay" id="musicPlayer"></audio>
	</body>
</html>


@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}

figure{
	position: relative;
	width: 33.3%;
	height: 350px;
	float: left;
	/*显示多出的部分，隐藏掉*/
	overflow: hidden;
}

h2,div,span,p{
	transition: all 3s;
}

figure img{
	transition: all 0.3s;
	/*元素的不透明级，默认为1*/
	opacity: 1;
}

figure:hover img{
	opacity: 0.5;
}

/*第一个框格*/
.view1 img{
	transform: translateX(0);
}

.view1:hover img{
	/*X移动50px*/
	transform: translateX(50px);
}

.view1 h2{
	position: absolute;
	left: 50px;
	top: 60px;
	color: white;
	transform: translateX(0);
}

.view1:hover h2{
	transform: translateX(50px);
}

.view1 .pp{
	position: absolute;
	left: 100px;
	width: 100px;
	background: dodgerblue;
	transition: all 0.3s;
}

.view1 .p1{
	bottom: 0px;
	transform: translateY(300px);
}

.view1:hover .p1{
	transform: translateY(-200px);
}

.view1 .p2{
	top: 200px;
	transform: translateX(500px);
}

.view1:hover .p2{
	transform: translateX(0px);
}

.view1 .p3{
	top: 275px;
	transform: translateX(-500px);
}

.view1:hover .p3{
	transform: translateX(0px);
}

/*第二个框格*/
.view2:hover img{
	transform: translateX(-20px);
}

.view2 h2{
	position: absolute;
	left: 20px;
	top: 60px;
	color: white;
}

.view2 .info{
	position: absolute;
	left: 20px;
	background: white;
	width: 120px;
	transform: translateX(-300px);
}

.view2 .info1{
	top: 100px;
	transition: all 0.3s;
}

.view2:hover .info1{
	transform: translateX(0px);
	width: 160px;
}

.view2 .info2{
	top: 150px;
	transition: all 0.3s 0.1s;
}

.view2:hover .info2{
	transform: translateX(0px);
}

.view2 .info3{
	top: 200px;
	transition: all 0.3s 0.2s;
}

.view2:hover .info3{
	transform: translateX(0px);
}

/*第三个框格*/
.view3 img{
	transform: translateY(0);
}

.view3:hover img{
	transform: translateY(-20px);
}

.view3 h2{
	position: absolute;
	top: 100px;
	left: 60px;
	color: white;
	transform: translateY(-200px);
}

.view3:hover h2{
	transform: translateY(0);
}

.view3 p{
	position: absolute;
	left: 80px;
	bottom: 0px;
	transform: translateY(0px);
	opacity: 0;
}

.view3:hover p{
	transform: translateY(-100px);
	opacity: 1;
}

/*第四个框格*/
.view4 h2{
	position: absolute;
	left: 20px;
	top: 60px;
	color: white;
	transform: translateY(50px);
	opacity: 0;
}

.view4:hover h2{
	transform: translateY(0px);
	opacity: 1;
}

.view4 div{
	position: absolute;
	left: 0px;
	bottom: -300px;
	width: 140%;
	height: 300px;
	background: white;
}

.view4:hover div{
	/*设置旋转元素的基点位置*/
	transform-origin: 0% 0%;
	transform: rotate(-20deg);
	background: cornflowerblue;
}

.view4 .info4{
	position: absolute;
	right: 90px;
	bottom: 80px;
	/*显示在最上面 第99页*/
	z-index: 99;
	transform: translateY(100px);
}

.view4 .info5{
	right: 20px;
}

.view4:hover .info4{
	transform: translateY(0px);
}

/*第5个框格*/
.view5 h2{
	position: absolute;
	left: 15%;
	top: 15%;
	color: white;
	transform: translateX(-50px);
}

.view5:hover h2{
	transform: translateX(0px);
}

.view5 p{
	position: absolute;
	left: 15%;
	top: 25%;
	color: white;
	transform: translateY(100px);
	opacity: 0;
	width: 70%;
}

.view5:hover p{
	transform: translateY(0px);
	opacity: 1;
}

.view5 div{
	position: absolute;
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
	border: 3px solid black;
	transform: rotate(0deg) translateY(-400px);
	transform-origin: 0% 0%;
}

.view5:hover div{
	transform: rotate(360deg) translateY(0px);
}

.view6:hover img{
	transform: scale(1.5);
}

.view6 h2{
	position: absolute;
	top: 50%;
	left: 45%;
	/*font 定义字体的粗细
	 normal 正常 等同400
	 bold 粗体 等同700
	 100|200|300|~900 字体粗细的绝对值*/
	font: 900;
	transform: rotate(0deg);
}

.view6:hover h2{
	transform: rotate(315deg);
	transition: all 3s; 
}

/*第7个框格*/

.view7 img{
	transform: scale(1);
	transition: all 1s;
}

.view7:hover img{
	transform: scale(0.8);
}

/*第8个框格*/
.view8{
	position: relative;
}

.view8 .top{
	position: absolute;
	left: 125px;
	top: 70px;
	width: 0;
	height: 200px;
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
}

.view8:hover .top{
	width: 240px;
}

.view8 .left{
	position: absolute;
	left: 140px;
	top: 55px;
	width: 200px;
	height: 0px;
	 border-left: 2px solid #ccc;
	 border-right: 2px solid #ccc;
}

.view8:hover .left{
	height: 240px;
}

.view8 p{
	color: black;
	font-weight: 900;
	position: absolute;
	top: 30%;
	left: 55%;
	font-size: 14px;
	opacity: 0;
	transform: rotate(0deg) translateY(500px) scale(1);
	transition: all 3s; 
}

.view8:hover p{
	opacity: 1;
	transform: rotate(360deg) translateY(0px) scale(2);
}

/*第9个框格*/
.view9 img{
	position: absolute;
	transition: all 3s;
	transform: rotate(0deg) scale(1);
}

.view9:hover img{
	transform: rotate(10deg) scale(1.1);
}

/*音乐按钮设置CSS*/
.musicbtn{
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
	height:40px;
	animation:xuanzhuan 2s infinite;
}

@keyframes xuanzhuan{
	from{}
	to{transform:rotate(360deg);
	 -webkit-transform:rotate(360deg);}
}
ysh9888
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
明星资料卡案例（动画实现）
qq_46563235的博客
10-24 161
学习笔记来源于哔哩哔哩千锋教育前端学习视频
HTML学生个人网站作业设计 明星易烊千玺介绍(HTML+CSS) web前端开发技术 web课程设计 网页规划与设计
qq_38514094的博客
03-25 625
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
动画练习--明星资料卡.zip
04-27
网页制作 前端动画 内有各种动画效果 供各位学者参考，动画效果包括 平移 旋转 鼠标经过放大等效果
明星个人网站蔡徐坤网页设计（HTML+CSS）
qq_71817303的博客
11-22 776
综合样式的前端明星网页开发
HTMLCSS学习笔记（二十）——3D与动画
qq_45268602的博客
08-17 223
景深 近大远小： 物体距离眼睛越近，感觉到物体越大，物体距离眼睛越远，感觉到物体越小 实现景深效果的方法： 在父元素中使用：perspective:1200px; 在子元素中使用：transform:perspective(1200px) ; 属性值越小，景深效果越明显，取值范围在900-1200区间，效果不明显。 perspective-origin：观察3d元素的（位置）角度 perspective-origin：center center （中心） perspective-origin：le
HTML CSS 网页设计作业「动漫小站」
wx___BJ050106的博客
08-05 2377
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。............
用HTML+CSS做一个漂亮简单的花店网页【免费的学生网页设计成品】
html精品源码
08-09 5080
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计
qq_365392777
10-19 5015
HTML5期末大作业：明星个人主页介绍网站设计——明星薛子谦(7页)带轮播特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计源码HTML 1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？ 2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个
HTML5+CSS期末大作业：个人网站设计——明星主页介绍(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
qq___365392777的博客
10-19 2783
HTML5+CSS期末大作业：个人网站设计——明星主页介绍(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水
HTML+CSS网页设计期末课程大作——体育足球(5页面)
12-24 1848
HTML+CSS网页设计期末课程大作——体育足球(5页面) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????
css的position定位的属性
qq_43235503的博客
08-30 645
css的position定位的属性
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
Z18834071903的博客
09-03 653
vue点击导航滚动到相应位置，鼠标滚动到相应位置对应导航名称高亮
CSS解析:定位和层叠上下文
晓风残月淡的博客
08-31 2102
许多开发人员对定位的理解很粗略，如果不完全了解定位，就很容易给自己挖坑。有时候可能会把错误的元素放在其他元素前面，要解决这个问题却没有那么简单。一般的布局方法是用各种操作来控制文档流的行为。定位则不同：它将元素彻底从文档流中移走。它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。
css radius
时间不说谎
09-03 605
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
css spacing设置间距
时间不说谎
09-03 273
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
VitePress 自定义 CSS 指南
最新发布
软考鸭
09-06 363
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
css之雪碧图（精灵图）
qq_55961367的博客
09-02 672
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
修改打包后element-ui的字体文件名；JS文件名；CSS文件名
weixin_39311719的博客
09-03 423
修改这些静态文件名的原因是客户那边扫描出漏洞：字体文件名称不符合安全规则，就想办法给全部重新命名。
HTML+CSS打造个性化爵士音乐网页设计实战
本篇文章主要介绍的是一个针对学生期末考核的HTML5网页设计作业，...总结来说，这篇文章提供了学生进行期末网页设计作业的完整框架和素材，强调了网页设计的关键要素和技术应用，是提升网页制作技能的实用参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值