css音频和视频及flex布局第十次学习

最新推荐文章于 2022-04-10 21:50:00 发布

乾❈ 易直

最新推荐文章于 2022-04-10 21:50:00 发布

阅读量215

点赞数

分类专栏： css样式文章标签： css3

本文链接：https://blog.csdn.net/CSNDshengqian/article/details/111168673

版权

css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、音频

source：源
src：音频路径
controls：控制
autoplay:自动播放
loop:每当音频结束时重新开始播放。
muted:音频输出为静音。
preload auto
metadata(加载元数据)
none（不加载）:规定当网页加载时，音频是否默认被加载以及如何被加载。
src URL:规定音频文件的 URL。

代码片段：

<audio controls="controls" autoplay="autoplay loop="loop" muted="muted">
<source src="音频/Right Now.mp3" type="audio/mp3"></source>
			<source src="音频/Right Now.ogg" type="audio/ogg"></source>
			<source src="音频/Right Now.wava" type="audio/vnd.wave"></source>
</audio>

二、flex布局

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				
				width: 100%;
				height: 100vh;
				/*给父盒子加*/
				display: flex;
				/*flex-direction:改变主轴*/
				/*flex-direction:row-reverse;*/
				/*flex-start:主轴开始位置*/
				/*flex-end:主轴结束位置*/
				/*space-between：两端对齐*/
				/*space-around：分散对齐*/
				
				/*justify-content改变主轴:space-around;*/
				 /*align-items交叉轴*/
				 /*flex-start:交叉轴的开始位置*/
				 /*flex-end:交叉轴的结束位置*/
				 /*center：中间位置*/ 
				align-items: center;
				
				/*flex-wrap: wrap;超出部分换行
				 nowrap:不换行
				 wrap-reverse：反向换行
				 * */
				flex-wrap: wrap;
				
				/*align-content:flex-end;各行的对齐和主轴一样*/
				align-content:space-between;
			}
			
			div {
				width: 200px;
				height: 200px;
			}
			
			.box1 {
				background: blueviolet;
			}
			
			.box2 {
				background: darkorange;
				order: 1;
				/*给flex项目排序:
				负值:靠前;
				正值:靠后;
				0:默认*/
				flex-grow: inherit;
			}
			
			.box3 {
				background: chocolate;
			}
			.box4 {
				background: skyblue;
			}
			
			.box5 {
				background: blueviolet;
			}
			
			.box6 {
				background: darkorange;
			}
			
			.box7 {
				background: chocolate;
			}
			.box8 {
				background: skyblue;
			}
		</style>

	</head>

	<body>
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
		<div class="box4">4</div>
		<div class="box5">5</div>
		<div class="box6">6</div>
		<div class="box7">7</div>
		<div class="box8">8</div>
		
	</body>

</html>

乾❈ 易直

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css音频和视频及flex布局第十次学习

一、音频source：源src：音频路径controls：控制autoplay:自动播放loop:每当音频结束时重新开始播放。muted:音频输出为静音。preload autometadata(加载元数据)none（不加载）:规定当网页加载时，音频是否默认被加载以及如何被加载。src URL:规定音频文件的 URL。代码片段：<audio controls="controls" autoplay="autoplay loop="loop" muted="muted">
复制链接

扫一扫