弹性布局
弹性布局也叫做伸缩布局 是c3中新增的一种布局方式 而且移动端用的多
给父元素设置弹性布局(display:flex)那么就让他的子元素应用弹性布局
如果使用了弹性布局 那么就让所有的子元素沿着主轴方向排列 默认的主轴方向是x轴
注意点 弹性布局保证的是 子元素在主轴方向永远不会超出 进行弹性布局（伸缩布局）但是副轴方向管不着
加在父元素上的属性
display：flex 设置弹性布局
justify-content 设置子元素沿着主轴方向排列
center 沿主轴方向居中显示
flex-start 沿主轴的起点开始排列 而且是沿着主轴方向的对齐的默认值
flex-end 沿着主轴终点对齐排列
space-around 元素和元素之间有间距 两边也有间距 而且 中间的间距是两边的两倍
space-between 元素和元素之间有间距 两边没有
align-content设置子元素在垂直方向排列方式。
stretch 默认值 如果副轴方向没有大小 那么就铺满副轴方向
center 位于容器中间位置
flex-start 沿副轴起点位置排布
flex-end 沿着副轴终点位置排布
space-around 元素之间有间隙 上下也有间隙
space-between 上下没有间隙 元素之间有间隙
align-items 设置副轴方向的排列方式
flex-start 沿副轴起点对齐 如果副轴方向没有给大小 那么由内容撑开
center 居中对齐
flex-end 沿副轴终点对齐
stretch 是副轴对齐方式的默认值 是沿副轴的起点对齐 如果副轴方向没给大小那么就铺满副轴方向的父元素大小
如果我们给了副轴方向的大小 那么其实 flex-start和stretch是一样的效果
align-content 一般情况下和flex-wrap配合使用
flex-direction 修改主轴方向
row 默认值 表示以x轴为主轴
row-reverse 表示以x轴为主轴 只是起点与终点对调
column 表示以y轴为主轴
column-reverse 以y轴为主轴 起点和终点对调
flex-wrap: wrap 允许子元素换行
换行后 就会根据有几行把副轴方向的大小等分成几份
在设置副轴方向的排列方式 在自己的区域内怎么显示
align-content 一般情况下和flex-wrap配合使用
加在子元素上
align-self 是直接在子元素上设置 设置其沿副轴方向的排列方式 属性值和align-items一模一样
如果有的子元素给了具体的大小 那么比例就是占用剩下的部分
手机旅游页面案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width: 900px;
height: 100%;
margin: 0 auto;
}
.head{
width: 900px;
height: 200px;
background-color: #075F60;
}
.min{
width: 900px;
height: 100%;
background-color: aliceblue;
}
ul{
width: 900px;
height: 200px;
margin: 10px auto;
background-color: white;
text-align: center;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
li{
width: 150px;
height: 180px;
background-color: yellow;
border-radius: 10px;
}
.jd,.piao,.ly{
width: 900px;
height: 100%;
line-height: 200px;
}
.jd li:nth-child(1){
width: 400px;
background-color: #FF7E43;
font-size: 45px;
color: white;
}
.jd li:nth-child(2){
flex: 4;
background-color: #FFEDE4;
font-size: 25px;
}
.jd li:nth-child(3){
flex: 4;
background-color: #FFEDE4;
font-size: 25px;
}
.jd li:nth-child(4){
flex: 4;
background-color: #FFEDE4;
font-size: 25px;
}
.piao li:nth-child(1){
width: 400px;
background-color: #3F96FE;
font-size: 45px;
color: white;
}
.piao li:nth-child(2){
flex: 4;
background-color: #E8F3FF;
font-size: 25px;
}
.piao li:nth-child(3){
flex: 4;
background-color: #E8F3FF;
font-size: 25px;
}
.piao li:nth-child(4){
flex: 4;
background-color: #E8F3FF;
font-size: 25px;
}
.ly li:nth-child(1){
width: 400px;
background-color: #20D0E6;
font-size: 45px;
color: white;
}
.ly li:nth-child(2){
flex: 4;
background-color: #DAF8FB;
font-size: 25px;
}
.ly li:nth-child(3){
flex: 4;
background-color: #DAF8FB;
font-size: 25px;
}
.ly li:nth-child(4){
flex: 4;
background-color: #DAF8FB;
font-size: 25px;
}
.log1,.log2{
width: 900px;
height: 100%;
line-height: 200px;
}
.log1 li{
flex: 5;
font-size: 20px;
background-color: azure;
}
.log2 li{
flex: 5;
font-size: 20px;
background-color: azure;
}
.footer{
width: 900px;
height: 100%;
}
.index,.tu,.xbl{
width: 900px;
height: 100%;
line-height: 50px;
}
.index li{
flex: 1;
height: 50px;
font-size: 30px;
background-color: white;
}
.tu li{
flex: 1;
height: 300px;
}
.tu li:nth-child(1){
background-color: #1364A7;
margin-right: 10px;
}
.tu li:nth-child(2){
background-color: #B4B1B4;
}
.xbl li{
flex: 1;
height: 50px;
font-size: 25px;
background-color: white;
}
.xbl li:nth-child(1){
color:#00C1E5 ;
}
</style>
</head>
<body>
<div class="father">
<div class="head"></div>
<div class="min">
<ul class="jd">
<li>酒店</li>
<li>海外·酒店</li>
<li>民宿·客栈</li>
<li>超值·爆款</li>
</ul>
<ul class="piao">
<li>机票</li>
<li>火车票</li>
<li>汽车·船票</li>
<li>专车·租车</li>
</ul>
<ul class="ly">
<li>旅游</li>
<li>景点·门票</li>
<li>攻略·游记</li>
<li>自由行</li>
</ul>
<ul class="log1">
<li>51·自驾游</li>
<li>当地参团</li>
<li>一日游</li>
<li>赚钱·信用卡</li>
<li>借钱</li>
</ul>
<ul class="log2">
<li>定制游·周边</li>
<li>51·家庭游</li>
<li>低价机票</li>
<li>理财</li>
<li>更多</li>
</ul>
</div>
<div class="footer">
<ul class="index">
<li>关注</li>
<li>收藏</li>
<li>推荐</li>
<li>武汉</li>
</ul>
<ul class="tu">
<li></li>
<li></li>
</ul>
<ul class="xbl">
<li>首页</li>
<li>订单</li>
<li>武汉</li>
<li>客服</li>
<li>我的</li>
</ul>
</div>
</div>
</body>
</html>
多媒体标签
video 专门用来播放视频的
audio 专门用来播放音频的
多媒体行内属性
src 指定对应的播放源
controls 指的是显示控件 播放 暂停 进度条
autoplay 自动播放 但是谷歌在2018年11月 考虑到用户体验 就不允许自动播放 如果一定要自动播放 那么就设置静音
muted 静音
loop循环播放
<video src="./video/Monster%20Hunter%20World%202020.05.02%20-%2011.57.39.01.mp4" controls autoplay muted loop></video>
<audio src="./video/Forwe兰斯%20-%20源氏(GenJi).mp3" controls autoplay></audio>
可以在video标签里面设置source标签 给视频播放指定多个播放源
那么播放的时候就会从第一个播放源依次往下找 尝试播放 如果不能播放 那么就继续往下找
如果可以播放 那么后面所有的播放源忽略掉(注意：这里的source不会覆盖)
对于不认识video标签的浏览器 就会按照行内元素解析 可以给提示语
<video controls>
<source src="./video/Monster%20Hunter%20World%202020.05.02%20-%2011.57.39.01.mp4">
<source src="./video/Forwe兰斯%20-%20源氏(GenJi).mp3">
您的浏览器版本过低 建议升级
</video>
自定义播放器
相关的API
视频音频元素.play()：播放
视频音频元素.pause()：暂停
视频音频元素.requestFullscreen()：全屏显示
视频音频元素.currentime：获取当前播放的时间
视频音频元素.duration：总时长
ontimeupdate 视频音频更新时间的事件
oninput 随时监控表单元素的值的变化
视频音频元素.volume：设置或者获取视频音量
滑块：input元素
默认值是最中的那个值 默认最大值是100 默认最小值是0
max 修改最大值
min 修改最小值
value 修改默认值
range滑块没有小数 只有整数
音量 只是0-1之间的小数 默认值是1
<input type="range" name="" id="range" value="" max="10" min="0" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.player{
width: 600px;
height: 400px;
border: 1px solid black;
margin: 100px auto;
/* 弹性布局 */
display: flex;
flex-direction: column;
}
video{
width: 100%;
}
.controls{
flex: 1;
width: 100%;
display: flex;
}
.controls a{
width: 50px;
background-color: #000000;
/* 设置a标签的内容居中 */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
}
.controls .fa{
font-size: 25px;
}
.progress{
flex: 1;
background-color: white;
}
.son{
width: 0%;
height: 100%;
background-color: skyblue;
}
</style>
<!--
字体图标的 font-awesome的使用
1.先下载font-awesome文件 然后把css文件和font文件夹放进项目文件夹
2.使用的时候直接加类名
-->
</head>
<body>
<div class="player">
<video src="./video/Monster%20Hunter%20World%202020.05.02%20-%2011.57.39.01.mp4"></video>
<div class="controls">
<a href="javascript:void(0)" class="fa fa-play" id="play"></a>
<div class="progress">
<div class="son"></div>
</div>
<a href="javascript:void(0)" class="fa fa-arrows-alt" id="full"></a>
</div>
</div>
</body>
<script type="text/javascript">
// 获取video元素
var video=document.querySelector("video");
// 需要给a标签注册点击事件
var play=document.querySelector("#play");
var full=document.querySelector("#full");
var son=document.querySelector(".son");
play.onclick=function(){
// 我们需要根据视频图标的样式来确定是暂停 还是播放
// 判断类名是否包含play
if(this.classList.contains("fa-play")){
video.play();
// 将图标换成暂停
this.classList.replace("fa-play","fa-pause");
}else{
video.pause();
this.classList.replace("fa-pause","fa-play");
}
}
full.onclick=function(){
// video.requestFullScreen();
video.webkitRequestFullscreen();
// video.mozRequestFullscreen();
// video.msRequestFullscreen();
//实验室中的方法
}
// currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
// duration 返回当前音频/视频的长度（以秒计）
video.ontimeupdate=function(){
son.style.width=video.currentTime/video.duration*100+"%"
}
document.querySelector(".progress").onclick=function(e){
// 获取事件触发点到元素的自身的距离 / 父盒子的总宽度
//offsetX 可以直接获取到元素自身的距离
e=e||window.event;
//直接给子元素宽度 行不通 因为宽度过来了 但是播放时间还在原地
//son.style.width=e.offsetX/this.offsetWidth*100+"%";
video.currentTime=e.offsetX/this.offsetWidth*video.duration;
}
</script>
</html>
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
