HTML5+CSS3

索引

　　　　　　　　1.CSS权重

　　　　　　　　2.CSS3新增选择器

　　　　　　　　3.CSS3圆角、rgba

　　　　　　　　4.CSS3 transition动画

　　　　　　　　5.CSS3 transform变换

　　　　　　　　6.CSS3 animation动画

　　　　　　　　7.CSS3 浏览器前缀

　　　　　　　　8.HTML5新增标签

　　　　　　　　9.HTML5 新增表单控件

　　　　　　　　10.适配布局类型

　　　　　　　　11.常用css列表

　　　　　　　　

上去

2.CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">            
    .list div:nth-child(2){
        background-color:red;
    }
style>
......
<div class="list">
    <h2>1h2>
    <div>2div>
    <div>3div>
    <div>4div>
    <div>5div>
div>

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

属性选择器：
1、E[attr] 含有attr属性的元素

<style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
style>
......
<div data-attr="ok">这是一个div元素div>

2、E[attr='ok'] 含有attr属性的元素且它的值为“ok”
3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

上去

3.CSS3圆角、rgba

CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

rgba（新的颜色值表示法）

1、盒子透明度表示法：

    .box
    {
        opacity:0.1;
        /* 兼容IE */
        filter:alpha(opacity=10); 
    }

2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

上去

4.CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

例子：

制作鼠标移入图片时，图片说明滑入的效果

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">
        .pic_con{
            width:200px;
            height:300px;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }
        .pic_info{
            position:absolute;
            left:0;
            top:300px;
            width:180px;
            height:100px;
            background-color:rgba(0,0,0,0.3);
            color:#fff;
            padding:10px;
            transition:all 500ms ease;
        }

        .pic_con:hover .pic_info{
            top:180px;
        }

    style>
head>
<body>
    <div class="pic_con">
        <img src="images/banner01.jpg" alt="banner">
        <div class="pic_info">
            <h3>文字说明标题h3>
            <p>文字说明文字说明文字说明文字说明p>
        div>
    div>
body>
html>

上去

5.CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例：（翻面效果）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;
            position:relative;            
        }
        .box .pic{
            width:300px;
            height:272px;
            position:absolute;
            background-color:cyan;
            left:0;
            top:0;
            transform:perspective(800px) rotateY(0deg);
            backface-visibility:hidden;
            transition:all 500ms ease;
        }
        .box .back_info{
            width:300px;
            height:272px;
            text-align:center;
            line-height:272px;
            background-color:gold;
            position:absolute;
            left:0;
            top:0;
            transform:rotateY(180deg);
            backface-visibility:hidden;
            transition:all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);
        }
    style>
head>
<body>
    <div class="box">        
        <div class="pic"><img src="images/location_bg.jpg">div>
        <div class="back_info">背面文字说明div>
    div>
body>
html>

上去

6.CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

例子：
1、风车动画

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风车旋转title>
    <style type="text/css">
        
        @keyframes rotating{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(360deg);
            }
        }

        .zhuan{
            display:block;
            width:400px;
            height:400px;
            margin:50px auto 0;
            animation:rotating 2s linear infinite;
        }
        
    style>
head>
<body>
    <img src="images/fengche.png" alt="风车图片" class="zhuan">
body>
html>

2、loading动画

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style type="text/css">

        @keyframes loading{            
            from{
                transform:scale(1,1);
            }
            to{
                transform:scale(1,0.5);
            }
        }
        .con{
            width:300px;
            height:158px;
            border:1px solid #000;
            margin:150px auto 0;
        }
        .con div{
            width:30px;
            height:100px;
            float:left;
            background-color:gold;
            margin:15px;
            border-radius:15px;
            animation:loading 500ms ease infinite alternate;
        }
        .con div:nth-child(1){
            background-color:red;
        }
        .con div:nth-child(2){
            background-color:green;
            animation-delay:100ms;
        }
        .con div:nth-child(3){
            background-color:pink;
            animation-delay:200ms;
        }

        .con div:nth-child(4){
            background-color:lightgreen;
            animation-delay:300ms;
        }

        .con div:nth-child(5){
            background-color:lightblue;
            animation-delay:400ms;
        }

        .con p{
            text-align:center;
        }





    style>
head>
<body>
    <div class="con">
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <div>div>
        <p>loading...p>
    div>
body>
html>

3、人物走路动画

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路动画title>
    <style type="text/css">        
        .box{
            width:120px;
            height:180px;
            border:1px solid #ccc;            
            margin:50px auto 0;
            position:relative;
            overflow:hidden;            
        }

        .box img{
            display:block;
            width:960px;
            height:182px;
            position: absolute;
            left:0;
            top:0;
            animation:walking 1.0s steps(8) infinite;            
        }
        @keyframes walking{
            from{
                left:0px;
            }

            to{
                left:-960px;
            }
        }
    style>
head>
<body>
    <div class="box"><img src="images/walking.png">div>
body>
html>

上去

7.CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如：

div
{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置：

1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

上去

8.HTML5新增标签

新增语义标签

1、

页面头部、页眉
2、
前端

相关

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

web前端面试题

箭头流程图--前端实现

GMTC 2019-前端夜话《聊聊前端工程师的成长和发展》会后简要总结

第十一章 前端基础

前端性能优化

前端开发框架Vue之findIndex() 的使用

标签

一品网 冀ICP备14022925号-6