zoukankan      html  css  js  c++  java
  • HTML+CSS : H5+CSS3

    HTML5语义化标签:

    header nav(导航) article section(章节) aside(侧边栏) footer
    ---------------------------------------------------------------

    H5新增表单控件:

    email(自动验证email格式)

    url(自动验证url格式)

    number(只能输入数字)

    range(类似音量滑动条)

    Date pickers (date, month, week, time, datetime, datetime-local)(自带日期选择)

    search(搜索域)

    color(颜色选择)

    datalist(自动验证内容是否在可选择选项中)

    新增表单控件属性: placeholder(提示文字) autofocus(自动焦点) autocomplete(联想关键词)
    ---------------------------------------------------------------
    新增音频标签 audio(支持ogg,wav,mp3)
    属性:autoplay controls(显示) loop preload(预加载) muted(静音)

    新增视频标签 video(支持ogg,webM,mp4)
    属性:width,height,poster
    ---------------------------------------------------------------
    样式的权重:

    !important,权重10000

    内联样式,权重1000

    ID选择器,权重100

    类,伪类和属性选择器,权重10

    标签,伪元素选择器,权重1

    通用(*),子(>),相邻(+),同胞(~)选择器 权重0

    ---------------------------------------------------------------
    颜色表示:rgba:如rgba(255,255,255,255,0.5)最后一个数表示50%的透明度

    圆角:border-radius ,如画个圆 border-radius 50% 50%

    阴影 box-shadow: 水平偏移 垂直偏移 羽化度 阴影大小 颜色 inset(内阴影)

    动画 transition: 属性(如width) 过渡时间 过渡方式(ease或曲线) 延迟,....

    ---------------------------------------------------------------

    选择器:

    li:nth-child(2){
    color:green;
    }
    可以把所有li标签的第二个字体颜色变绿.

    ---------------------------------------------------------------

    li:nth-child(2n){
    color:green;
    }
    偶数行变绿

    ---------------------------------------------------------------

    li:nth-child(2n+1){
    color:green;
    }
    奇数行变绿


    ---------------------------------------------------------------
    ---------------------------------------------------------------

    li:nth-of-type(2){
    color:green;
    }
    和nth-child()的区别是:如果li:nth-child(2)找到的第二个子元素不是li标签,那么它不做任何处理,而li:nth-of-type(2)
    是找第二个li子元素,而不是找第二个子元素.

    ---------------------------------------------------------------
    ---------------------------------------------------------------

    div:empty{}:匹配一个元素类型为div的空元素

    input:disabled{} : 选择失效的表单控件

    input:enabled{} : 选择可用的表单控件

    input:checked{} : 选择选中的checkbox

    ---------------------------------------------------------------
    ---------------------------------------------------------------
    transform变换:

    translate(x,y) 位移

    scale(x,y) 缩放

    rotate(deg) 旋转

    ---------------------------------------------------------------
    ---------------------------------------------------------------
    animation动画:
    简单例子:

    div{animation: moving 0.1s 0.1s infinite alternate;}

    @keyframes moving{
    from{
    350px;
    }
    to{
    600px;
    }
    }

    大概就是这个样子..

  • 相关阅读:
    POJ1486 Sorting Slides 二分图or贪心
    POJ2060 Taxi Cab Scheme 最小路径覆盖
    POJ3083 Children of the Candy Corn 解题报告
    以前的文章
    POJ2449 Remmarguts' Date K短路经典题
    这一年的acm路
    POJ3014 Asteroids 最小点覆盖
    POJ2594 Treasure Exploration 最小路径覆盖
    POJ3009 Curling 2.0 解题报告
    POJ2226 Muddy Fields 最小点集覆盖
  • 原文地址:https://www.cnblogs.com/cccy0/p/9260982.html
Copyright © 2011-2022 走看看