查漏补缺
2018-04-11 本文已影响0人
Monee121
- 如果想让HTML5标签兼容低版本浏览器的话，可以使用 html5shiv js来实现。
注意：一定要把它引入到前面。
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<!--[if IE 6]>
条件注释语句：可以一直到IE 9
<![endif]-->
<!--[if gt IE 6]>
大于IE6 （不含6）
<![endif]-->
2
<details open>
<summary>和details配合使用的 - 标题</summary>
爱上对方爱上对方爱的色放爱上对方爱上对方爱上对方爱上对方爱的色放
</details>
3.audio
<!--<audio src="tq.mp3" controls autoplay muted loop preload></audio>-->
<audio controls autoplay muted loop preload>
<source src="tq.ogg" type="audio/ogg">
<source src="tq.mp3" type="audio/mpeg">
<source src="tq.wav" type="audio/wav">
</audio>
<!--
controls 显示浏览器自带的控制条 （每个浏览器都不一样）
autoplay 自动播放
muted 静音
loop 循环
preload 预加载
当 元素身上出现了 autoplay 默认就是预加载的
href 和 src区别
href 引入资源 可以并行加载 link . href
src 替代资源 当该文件没有加载完成的时候，不会进行后面的操作。
音频转换 工具：
格式工厂
-->
4.video
<input type="button" value="播放"><br>
<video poster="i.jpg" width="600" height="400" controls id="video">
<source src="v/mov_bbb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="v/mov_bbb.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="v/mov_bbb.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
<script>
var oBtn = document.getElementsByTagName('input')[0];
var oVideo = document.getElementById('video');
oBtn.onclick = function(){
oVideo.play();
}
</script>
<!--
controls 显示浏览器自带的控制条 （每个浏览器都不一样）
autoplay 自动播放
muted 静音
loop 循环
preload 预加载
当 元素身上出现了 autoplay 默认就是预加载的
poster="i.jpg" 封面（用在未播放之前的图片）
视频转换 工具：
webm 狸窝
ogv ogv转换工具
-->
隔行变色
6
image.png
7
image.png
8
image.png
9.
image.png
10
image.png
11
image.png
12
image.png
13
image.png
14
image.png
15
image.png
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>零玖玖教育 - ljj.cn </title>
<meta name="author" content="零玖玖教育 - ljj.cn">
<meta name="copyright" content="零玖玖教育 - ljj.cn">
<meta name="description" content="零玖玖教育，是一家专注的前端开发培训的公司，是目前培训行业中最具口碑的机构。我们向学员提供了JavaScript、nodeJs、AngularJS、jQuery、HTML+CSS、HTML5+CSS3，移动端等课程。">
<style>
*{
margin:0;
padding: 0;
list-style: none;
}
.list{
height: 400px;
border: solid 1px red;
display: flex;
/*
为复杂布局而生
-webkit-flex-shrink
缩小比例
此时剩余空间是不足时都将等比例缩小
0 表示不参加收缩比例
若没写该属性，则为1
-webkit-flex-grow
扩展比率
剩余空间是正值的时，伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例
若没写该属性，则为0
0代表不参与扩展
*/
}
.list li{
height: 40px;
color: #FFF;
}
.list li:nth-child(1){
background-color: #E3B456;
width: 800px;
flex-shrink: 2;
}
.list li:nth-child(2){
background-color: #D94C3D;
width: 300px;
}
.list li:nth-child(3){
background-color: #C9EBFA;
flex: 1;
white-space: nowrap;
}
.list li:nth-child(4){
background-color: #BA5F56;
flex: 1;
white-space: nowrap;
}
.list li:nth-child(5){
background-color: #F1A20A;
width: 267px;
flex-shrink: 0;
}
</style>
</head>
<body>
<ul class="list">
<li>800 - 779</li>
<li>300 - 292</li>
<li>为为为为为为为为</li><!--64-->
<li>为为为为</li><!--64-->
<li>267 - 260</li>
</ul>
现在总体 剩余的 1238 （总宽度 - 自适应两个元素的宽度的和）
（每个元素的实际宽度 / 总宽度） * 剩余的宽度
1 800
2 300
3
4
5 267
</body>
</html>
image.png
image.png
<style>
*{
margin:0;
padding: 0;
list-style: none;
}
.list{
height: 400px;
border: solid 1px red;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
/*
justify-content（水平对齐方式）
flex-start | flex-end | center | space-between | space-around;
左对齐 | 右对齐 | 居中对齐 | 两端对齐(之间的间隔相等) | 每个项目两侧的间隔相等
align-items（垂直对齐方式）
flex-start | flex-end | center | baseline | stretch
起点对齐 | 终点对齐 | 中点对齐 | 基线对齐 | 默认值(未设置高度或设为auto，将占满整个容器的高度)
align-content （多行对齐方式）
注：需要多行才行
多根轴线的对齐方式
flex-start | flex-end | center | space-between | space-around | stretch
左对齐 | 右对齐 | 居中对齐 | 两端对齐(之间的间隔相等) | 每个项目两侧的间隔相等 | 轴线占满整个交叉轴
align-self
允许单个项目有与其他项目不一样的对齐方式
auto | flex-start | flex-end | center | baseline | stretch
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
可覆盖align-items属性
默认值auto，表示继承父级元素的align-items，如果没有父级，则则等同于stretch
当这两个属性遇到了
flex-direction: column / column-reverse 整个顺序就都变了。
*/
}
.list li{
height: 40px;
color: #FFF;
}
.list li:nth-child(1){
background-color: #E3B456;
align-self: flex-end;
}
.list li:nth-child(2){
background-color: #D94C3D;
width: 300px;
}
.list li:nth-child(3){
background-color: #C9EBFA;
}
.list li:nth-child(4){
background-color: #BA5F56;
}
.list li:nth-child(5){
background-color: #F1A20A;
}
</style>
</head>
<body>
<ul class="list">
<li>800 - 779</li>
<li>300 - 292</li>
<li>为为为为为为为为</li><!--64-->
<li>为为为为</li><!--64-->
<li>267 - 260</li>
</ul>
image.png
image.png
