相关H5的前段知识linear-gradient渐变色、letter-spacing字体间距等

最新推荐文章于 2023-03-07 09:58:30 发布

摆渡人0.0

最新推荐文章于 2023-03-07 09:58:30 发布

阅读量497

点赞数

分类专栏：云音乐开发文章标签： html5

本文链接：https://blog.csdn.net/weixin_43898618/article/details/106346654

版权

云音乐开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

设计云播放器的简单设计

index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入外部css样式文件 -->
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<!-- emmet快捷生成html结构插件 -->
		<div id="app">
			<div class="header">
				东湖学院·云音乐
			</div>
			<div class="body">
				<div class="item">
					<div class="item-name">烤面筋</div>
					<div class="item-size">5.5MB</div>
				</div>
				<div class="item">
					<div class="item-name">烤面筋</div>
					<div class="item-size">5.5MB</div>
				</div>
				<div class="item">
					<div class="item-name">烤面筋</div>
					<div class="item-size">5.5MB</div>
				</div>
				<div class="item">
					<div class="item-name">烤面筋</div>
					<div class="item-size">5.5MB</div>
				</div>
			</div>
			<div class="footer"></div>
		</div>
		
		<!-- 
			html：用于构建网页结构的标记语言（肉身）
			css：用于对网页结构进行美化的描述语言（外貌与服装）
			js：用于实现网页动态特效的程序设计语言（灵魂）
			
			html：等同于anroid布局文件
			css：等同android中的style.xml
		 -->
	</body>
</html>

index.css文件

/* id选择器 */
#app{
	/* 居中 */
	position:absolute;/* 定位 */
	left:50%;
	top:50%;
/* 	margin-top:-350px;
	margin-left:-225px; */
	margin:-350px 0 0 -225px;/* 是上面注释的简写 */
	/* 大小 */
	width:450px;
	height:700px;
	/* 颜色              渐变色        45度渐变 从    到   */
	background-color:linear-gradient(45deg,#1FD4AE,#1ECD97);
	/*         左右 上下 模糊值（值越大 越模糊） 三原色 透明度0.5*/
	box-shadow:10px 10PX 20PX rgba(0,0,0,0.5);/* 设置盒子阴影 */
}
/* 类选择器 */
/* 音乐播放器标题 */
.header{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 60px;
	background-color: rgb(19,31,44);
	color: #ccc;/* 字体颜色 */
	text-align: center;/* 文本框左右居中 */
	line-height: 60px;/* 默认文本框高是16px 因为头高60px 想要文本居中显示 最好的办法是将文本框的高改为60px即可居中 */
	font-size: 1.2em;/* 1em=16px设置字体大小 */
	letter-spacing: 5px;/* 设置字体间距 */
}
/* 底部音乐播放器 */
.footer{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background-color: rgb(19,31,44);
}
/* 音乐列表 */
.body{
	position: absolute;/* 绝对定位 */
	/* 与方向边界相距多少 */
	top: 60px;
	right: 0;
	bottom: 80px;
	left: 0;
}
/* 一首歌的显示 */
.item{
	display: flex;/* 弹性布局 可伸长缩短容器中的可用空间*/
	height: 50px;/* 弹性容器的高 */
	line-height: 50px;/* 文本框高 */
	border-bottom: 1px solid rgba(255,255,255,.5);/* 设置底边线 */
	color: rgba(0,0,0,0.5);
	cursor: pointer;/* 设置鼠标选中时指针变为手指的效果 */
	transform: all .8s;/* 所有都渐变 延时8s变化*/
}
/* 伪类选择器 */
/* 移动到item容器范围内触发 */
.item:hover{
	background-color: rgba(255,220,0,0.5);/* 背景颜色改变 */
	color: rgba(255,255,255,0.9);/* 字体颜色改变 */
}
.item-name{
	flex: 5;/* 长度比重 */
	padding: 0 10px;/* 内边距 */
}
.item-size{
	flex: 1;/* 长度比重 */
}

居中方法

方法一
position:absolute;/ 定位 /
left:50%;
top:50%;
margin-top:-350px;
margin-left:-225px;
方法二
position:absolute;/ 定位 /
left:50%;
top:50%;
margin:-350px 0 0 -225px;/ 是上面的简写 /

渐变色

linear-gradient(从哪里开始变色,颜色1,颜色2);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

设置阴影增加立体感

box-shadow: 左右长度上下长度模糊值 rgba(0 ~255,0 ~255,0 ~255,透明程度);

rgb（0，0，0）与rgba（0，0，0，透明程度）区别

多一个参数

可参考

摆渡人0.0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相关H5的前段知识linear-gradient渐变色、letter-spacing字体间距等

设计云播放器的简单设计index.html文件<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>  <link rel="stylesheet" type="text/css" href="./css/index.css"/> </head> &l
复制链接

扫一扫