h5

文章目录

github 代码链接

h5_1

1、h5兼容IE
2、表单新增type,属性,元素
3、progress、meter、video、audio
4、querySelector、dataset、classList增删改查
5、全屏、退出全屏、是否全屏、网络联接、网络断开
6、FileReader使用
7、拖拽drag
8、百度地图
9、sessionStorage、localStorage
10、应用缓存
11、简易视频播放

h5_2

1、兄弟选择器

拥有style属性的li标签
li[style] 

 拥有class属性并且值为Red的li标签
li[class=red]

拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
li[class*=red]

拥有指定的attr属性并且属性值以value开头的E标签
li[class^=blue]

拥有指定的attr属性并且属性值以value开结束的E标签
li[class$=blue]

2、兄弟选择器

添加了.first样式的标签的相邻的li元素
.first+li

添加了.first样式的元素的所有兄弟li元素
.first~li

3、伪类选择器

li的父元素中的第一个li元素
 li:first-child

E:last-child:查找E元素的父元素中最后一个指定类型的子元素
 li:last-child
 
 也是相对于父元素
 li:first-of-type
 li:last-of-type

 nth-child(从1开始的索引||关键字||表达式)
 li:nth-child(5)
 
 奇偶数
 li:nth-of-type(even)
 li:nth-of-type(odd)

n:默认取值范围为0~子元素的长度.但是当n<=0时,选取无效
li:nth-last-of-type(-n+5)
li:nth-of-type(-n+5)

4、伪类target

E:target:可以为锚点目标元素添加样式,当目标元素被触发为当前锚链接的目标时,调用此伪类样式

5、伪元素

after
before

6、其他伪元素

实现首字下沉
p::first-letter

获取第一行内容
p::first-line

 p::selection
 设置当前选中内容的样式

7、opacity、hsla、text-shadow、盒模型box-sizing:border-box、box-shadow、安卓机器人案例

h5_3

1、线性渐变

linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置...);

2、径向渐变

radial-gradient(形状 大小 坐标,颜色1,颜色2...)

3、重复渐变

 radial-gradient
 
repeating-radial-gradient
repeating-linear-gradient

4、背景图片
background-image、background-repeat、background-size、
background-attachment

 /*1.添加背景颜色*/
            /*background-color: skyblue;*/
            /*2.添加背影图片
            如果图片大于容器,那么默认就从容器左上角开始放置
            如果图片小于容器,那么图片默认会平铺*/
            /* background-image: url("../images/bg-img.jpg"); */
            background-image: url("../images/share1.png");
            /*3.设置背景平铺
            round:会将图片进行缩放之后再平铺
            space:图片不会缩放平铺,只是会在图片之间产生相同的间距值*/
            background-repeat: round;
            /*4.设置在滚动容器的背景的行为:跟随滚动/固定
            fixed:背景图片的位置固定不变
            scroll:当滚动容器的时候,背景图片也会跟随滚动*/

            /*local和scroll的区别:前提是滚动当前容器的内容
            local:背景图片会跟随内容一起滚动
            scroll:背景图片不会跟随内容一起滚动*/
            background-attachment: local;
 /*添加背景*/
            background-image: url("../images/bg-img.jpg");
            /*background-image: url("../images/share1.png");*/
            background-repeat: no-repeat;
            /*设置背景图片的大小  宽度/高度   宽度/auto(保持比例自动缩放)
            建议:在使用这个属性之前衔确定宽高比与容器的宽高比是否一致,否则会造成图片失真变形*/
            /* background-size: 300px 500px; */
            /* background-size: 300px; */
            /*设置百分比,是参照父容器可放置内容区域的百分比*/
            background-size: 50% 50%;
            /*设置contain:按比例调整图片大小,使用图片宽高自适应整个元素的背景区域,使图片全部包含在容器内
            1.图片大于容器:有可能造成容器的空白区域,将图片缩小
            2.图片小于容器:有可能造成容器的空白区域,将图片放大*/
            background-size: contain;

            /*cover:与contain刚好相反,背景图片会按比例缩放自 适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出
            1.图片大于容器:等比例缩小,会填满整个背景区域,有可能造成图片的某些区域不可见
            2.图片小于容器:等比例放大,填满整个背景区域,图片有可能造成某个方向上内容的溢出*/
            background-size: cover;

5、精灵图片
background-position、background-origin、background-clip

a{
            width: 50px;
            height: 50px;
            display: block;
            background-color: #ddd;
            margin:100px auto;
            box-sizing: border-box;
            
            background-image: url("../images/sprites.png");
            /*设置背景偏移,参照background-origin原点,这个原点默认在容器的左上角*/
            background-position: -20px 0;

            /*添加padding*/
            padding:14px;
            /*设置背景坐标的原点
            border-box:从border的位置开始填充背景,会与border重叠
            padding-box:从padding的位置开始填充背景,会与padding重叠
            content-box:从内容的位置开始填充背景*/
            background-origin: content-box;
            /*设置内容的裁切:设置的是裁切,控制的是显示
            border-box:其实是显示border及以内的内容
            padding-box:其实是显示padding及以内的内容
            content-box:其实是显示content及以内的内容*/
            background-clip: content-box;
        }

6、边框图片
border-image-source、 border-image-slice、 border-image-width

  div{
            width: 200px;
            height: 200px;
            margin:100px auto;
            box-sizing: border-box;
            border: 27px solid red;
            /*padding: 27px;*/
            /*添加边框图片*/
            /*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
            border-image-source: url("../images/border1.png");
            /*让它成为九宫格:border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充  
            问题:如果分别设置1,2,3,4个值代表什么意思*/
            border-image-slice: 27 ;
            /* border-image-slice: 27 fill; */
            /*border-image-width:边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
            细节:1.边框图片的本质是背景,并不会影响元素内容的放置  2.内容只会被容器的border和padding影响
            建议:一般将值设置为原始的边框的宽度*/
            border-image-width: 27px;
            /*border-image-outset:扩展边框*/
            /*border-image-outset: 0px;*/
            /*border-image-repeat:
            repeat:直接重复平铺
            round:将内容缩放进行完整的重复平铺*/
            border-image-repeat: round;

            /*缩写:*/
            /*border-image: source slice / width/outset repeat;*/
            /* border-image: url("../images/border1.png") 27 / 27px /0px round; */
        }

7、9patch图片

 div{
            width: 500px;
            height: auto;
            border: 10px solid red;
            margin:100px auto;
            /*添加边框图片*/
            border-image-source: url("../images/btn_bg.png");
            /*设置受保护的区域大小*/
            border-image-slice: 10 fill;
            /*设置边框图片的宽度
            1.明确圆角的大小
            2.明确受保护的区域的大小*/
            border-image-width: 10px;
            /*设置背景平铺效果  默认是stretch:拉伸*/
            border-image-repeat: stretch;
        }
    </style>
</head>
<body>
<div>边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置边框图片的本质是背景,并不会影响元素内容的放置</div>
</body>

8、过渡

    /*添加过渡效果:过渡效果执行完毕之后,默认会还原到原始状态*/
            /*1.transition-property:添加过渡效果的样式属性名称*/
            /* transition-property: left;
            /*2.transition-duration:过渡效果的耗时 以秒做为单位*/
            /* transition-duration: 2s; */
            /*3.transition-timing-function:设置时间函数--控制运动的速度*/
            /* transition-timing-function: linear; */
            /*4.transition-delay:过渡效果的延迟*/
            /* transition-delay: 2s; */ 

            /*简写:transition:属性名称 过渡时间  时间函数  延迟*/
            /*transition: left 2s linear 0s;*/

            /*为多个样式同时添加过渡效果*/
            /*transition: left 2s linear 0s,background-color 5s linear 0s;*/

            /*为所有样式添加过渡效果 all:所有样式
            1.所有样式的过渡效果一样
            2.效率低下,它会去查询所有添加的样式
            3.建议:以后不要这么写
            4.steps(4):可以让过渡效果分为指定的几次来完成*/
            /* transition:all 2s steps(4);
            -moz-transition: all 2s steps(4);
            -webkit-transition: all 2s steps(4);
            -o-transition: all 2s steps(4); */

9、手风琴案例

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu{
            width: 200px;
            height:auto;
            margin:100px auto;
        }
        .item{
            width: 100%;
            height:auto;
        }
        .item > h3{
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color: orange;
            border-bottom: 2px solid #ccc;
            padding-left:10px;
        }
        .item > .itemBox{
            width: 100%;
            height:0px;
            overflow: hidden;
            /* display: none; */
            /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡!!!!!!!!*/
            /*1.一定要设置为哪些css样式添加过渡效果*/
            /* transition-property: display; */
            transition-property: height;
            /*2.一定要设置过渡效果的耗时*/
            transition-duration: 1s;
        }
        .item > .itemBox > ul{
            list-style: none;
            background-color: #eaffb6;
            padding:10px;
        }

        /*为item添加hover伪类*/
        .item:hover > .itemBox{
            /* display: block; */
            height: 110px;
        }
    </style>
<div class="menu">
    <div class="item">
        <h3>市内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>省内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
                <li>深圳超市肉菜档遭抢</li>
            </ul>
        </div>
    </div>

</body>

10、transform二维变换
移动、缩放、旋转、斜切

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top:10px;
            /*添加过渡效果  css样式名称 耗时*/
            transition: transform 2s;
        }
        /*移动translate*/
        div:first-of-type:active{
            /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
            1.如果只有一个参数就代表x方向
            2.如果有两个参数就代表x/y方向*/
            /* transform: translate(100px); */
            /* transform: translate(400px,500px); */
            transform: translate(0px,500px);

            /*添加水平或者垂直方向的移动*/
            transform:translateX(300px);
            /* transform:translateY(300px); */
        }
        /*缩放:scale*/
        div:nth-of-type(2):active{
            /*实现缩放  1指不缩放,>1.01放大  <0.99缩小  参照元素的几何中心
            1.如果只有一个参数,就代表x和y方向都进行相等比例的缩放
            2.如果有两个参数,就代表x/y方向*/
            /*transform: scale(2);*/
            /*transform: scale(2,1);*/
            /*缩放指定的方向 */
            /*transform:scaleX(0.5);*/
            transform:scaleY(0.5);
        }
        /*旋转:rotate*/
        div:nth-of-type(3){
            /*设置旋转轴心
            1.x y
            2.关键字:left top right bottom center*/
            background-color: purple;
            transform-origin: left top;
        }
        div:nth-of-type(3):active{
            /*transform:rotate(-90deg);
            transform: translateX(700px);*/
            /*同时添加多个transform属性值 先移动后*/
            transform: translateX(700px) rotate(-90deg);
            /*transform: rotate(-90deg) translateX(700px);*/
        }
        /*斜切:skew*/
        div:nth-of-type(4):active{
            background-color: blue;
            /*如果角度为正,则往当前轴的负方向斜切,如果角度为,则往当前轴的正方向斜切*/
            transform:skew(-30deg);
            /*transform:skew(30deg,-30deg);*/
            /*设置某个方向的斜切值*/
            transform:skewX(30deg);
            transform:skewY(30deg);
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>

11、选择扑克牌
12、360碎片整合
13、任意元素居中

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            border-radius: 200px;
            background-color: #ccc;
            margin:100px auto;
            position: relative;
        }
        .rec{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            /*定位的百分比是参照父容器的宽高*/
            left: 50%;
            top: 50%;
            /*使用transform实现元素的居中  百分比是参照元素本身的宽高*/
            transform: translate(-50%,-50%);
            /*transform: translate(-50px,-50px);*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="rec"></div>
</div>
</body>

14、三维变换

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top:10px;
            /*添加过渡*/
            transition: transform 2s;
        }
        /*添加三维移动--3D移动*/
        div:first-of-type:active{
            /*translate3d(X方向的偏移,Y方向的偏移,Z方向的偏移)*/
            /*transform: translate3d(400px,0,0);*/
            transform: translate3d(400px,400px,0);
            /* transform: translate3d(0px,0px,400px); */
        }
        /*添加三维缩放*/
        div:nth-of-type(2):active{
            /*scale3d(x方向上的缩放,y方向的缩放,z方向的缩放)
            >1.01 放大   <0.99 缩小*/
            transform:scale3d(2,0.5,10);
            /* transform:scale3d(1,1,10); */
        }
        /*添加三维旋转*/
        div:nth-of-type(3):active{
            /*rotate3d(x,y,z,angle):
            x:代表x轴方向上的一个向量值
            y:代表y轴方向上的一个向量值
            z:代表z轴方向上的一个向量值*/
            transform: rotate3d(1,1,1,330deg);
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>

h5_4

1、立方体
2、动画添加

  div{
            width: 100px;
            height: 100px;
            background-color: red;

            /*添加动画效果*/
            /*1.animation-name:指定动画名称*/
            animation-name: moveTest;
            /*2.设置动画的总耗时*/
            animation-duration: 2s;
            /*3.设置动画的播放次数,默认为1次  可以指定具体的数值,也可以指定infinite(无限次)*/
            animation-iteration-count: 1;
            /*4.设置交替动画  alternate:来回交替*/
            animation-direction: alternate;
            /*5.设置动画的延迟*/
            animation-delay: 2s;
            /*5.设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态
            forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
            backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
            both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态*/
            animation-fill-mode: both;
            /*6.动画的时间函数*/
            animation-timing-function: linear;
            /*设置动画的播放状态  paused:暂停   running:播放*/
            animation-play-state: running;
        }

        /*创建动画*/
        @keyframes moveTest {
            /*百分比是指整个动画耗时的百分比  10s*/
            /*0%{
                transform: translate(0,0);
            }*/
            /*from:0%*/
            from{
                transform: translate(0,0) rotate(45deg);
            }
            /*0~1*/
            50%{
                transform: translate(0,500px);
            }
            /*1~2*/
            /*100%{
                transform: translate(500px,600px);
            }*/
            /*to:100%*/
            to{
                transform: translate(500px,600px);
            }
        }
    </style>
</head>
<body>
<div></div>
<input type="button" value="播放" id="play">
<input type="button" value="暂停" id="pause">
<script>
    var div=document.querySelector("div");
    document.querySelector("#play").onclick=function(){
        div.style.animationPlayState="running";
    }
    document.querySelector("#pause").onclick=function(){
        div.style.animationPlayState="paused";
    }
</script>
</body>

3、无缝轮播案例
4、钟表案例
5、web字体、字体图标
6、多列布局

   .wrapper {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            /*设置多列布局*/
            /*1.设置列数*/
            column-count: 3;
            /*2.添加列间隙样式,与边框样式的添加一样*/
            column-rule: dashed 3px red;
            /*3。设置列间隙大小*/
            column-gap: 50px;
            /*4.设置列宽
            原则:取大优先
            1.如果人为设置宽度更大,则取更大的值,但是会填充整个屏幕,意味最终的宽度可能也会大于设置的宽度--填充满整个屏幕
            2.如果人为设置宽度更小,使用默认计算的宽度*/
            column-width: 200px;
        }
        h4{
            /*设置跨列显示  1  / all*/
            column-span: all;
        }

7、flex布局
display

 display: flex;

flex-start

flex-start:让子元素从父容器的起始位置开始排列
            flex-end:让子元素从父容器的结束位置开始排列
            center:让子元素从父容器的中间位置开始排列
            space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距
            space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/

flex-wrap、flex-direction-(flex-flow)

  /*flex-flow:是flex-wrap和flex-direction的综合
  
            flex-wrap:控制子元素是否换行显示,默认不换行
                nowrap:不换行--则收缩
                wrap:换行
                wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列*/
          
            /*flex-direction:设置子元素的排列方向:就是用来主轴方向,默认主轴方向是row(水平方向)
                row:水平排列方向,从左到右
                row-reverse:水平排列方向,从右到左
                column:垂直排列方向,从上到下
                column-reverse:垂直排列方向,从下到上*/
        

flex-grow

flow-grow:可以来扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值
            比例值计算 :当前空间的flex-grow/所有兄弟元素的flex-grow的和
            flex-grow的默认是0:说明子元素并不会去占据剩余的空间

flex-shrink

flex-shrink:定义收缩比例,通过设置的值来计算收缩空间
             比例值计算 :当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
            默认值为1

flex

flex是用来设置当前伸缩子项占据剩余空间的比例值

align-items

align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
            center:设置在侧轴方向上居中对齐
            flex-start:设置在侧轴方向上顶对齐
            flex:end:设置在侧轴方向上底对齐
            stretch:拉伸:让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向>> 默认值
            baseline:文本基线*/

8、伸缩菜单项目案例
9、flex网站练习

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页