HTML5和CSS3的新特性

H5 C3新特性

1.HTML5新特性

2.CSS3新特性

1.HTML5新特性
  • 新增语义化标签

    • < header >:头部标签
    • < nav >:导航标签
    • < article >:内容标签
    • < section >:定义文档某个区域
    • < aside >:侧边栏标签
    • < footer >:尾部标签

    注意

    • ie9,需要把这些元素转换为块级元素
  • 新增多媒体标签

    • 音频:< audio >

       <audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop"
          poster="img/QQ截图20210204193046.png"></audio>
      
    • 视频:< video >

       <video src="img/section2-1.mp4" autoplay="autoplay" controls="controls" loop="loop"
          poster="img/QQ截图20210204193046.png"></video>
      

      autoplay:自动播放

      controls:显示插件

      loop:循环播放

      poster:预先加载显示

  • 新增input类型 type=" "

    • email
    • url
    • date
    • time
    • month
    • week
    • number
    • tel
    • search 搜索框
    • color
  • 新增表单属性

    • required=“required” 非空
    • placeholder=“xinyue” 提示信息
    • autofocus=“autofocus” 自动聚焦
    • autocomplete=“off” 阻止记录信息
    • multipe=“multipe” 提交多个文件
2.CSS3新特性
  • 新增选择器

    • 属性选择器 权重为10

      1. 利用属性选择器就可以不用借助于类或者id选择器

        • 语法:input[ ]

        在这里插入图片描述

          <style>
            input[value] {
              color: blue;
            }
          </style>
        </head>
        
        <body>
          <form>
            <input type="text">
            <input type="text" value="12344">
          </form>
        </body>
        
      2. 属性选择器还可以选择属性=值的某些元素

      在这里插入图片描述

       <style>
          input[type=password] {
            color: rgb(255, 0, 34);
          }
        </style>
      </head>
      
      <body>
        <form>
          <input type="text">
          <input type="password" value="12344">
        </form>
      </body>
      
      1. 属性选择器可以选择属性值开头的某些元素

      在这里插入图片描述

        <style>
          div[class^=icon] {
            color: blue;
          }
        </style>
      </head>
      
      <body>
          <div class="icon1">夏普图标</div>
          <div class="icon2">夏普图标</div>
          <div class="icon3">夏普图标</div>
          <div class="icon4">夏普图标</div>
      </body>
      
      1. 属性上选择器可以选择属性值结尾的某些元素

        在这里插入图片描述

          <style>
            div[class$=icon] {
              color: blue;
            }
          </style>
        </head>
        
        <body>
          <div class="1icon">下坡替补</div>
          <div class="2icon">下坡替补</div>
          <div class="3icon">下坡替补</div>
          <div class="4icon">下坡替补</div>
        </body>
        
      2. 属性上选择器可以选择属性值含有某些元素

      在这里插入图片描述

       <style>
          div[class*=i] {
            color: blue;
          }
        </style>
      </head>
      
      <body>
        <div class="1icon">替补</div>
        <div class="2icon">下坡替补</div>
        <div class="3icon">下坡替补</div>
        <div class="4icon">下坡替补</div>
      </body>
      
    • 结构伪类选择器 权重为10

      在这里插入图片描述

      <style>
          ul li:first-child {
            color: red;
          }
      
          ul li:nth-child(5) {/*nth-child():()里可以是关键字 公式 数字*/
            color: red;
          }
          ul li:last-child {
            color: red;
          }
        </style>
      </head>
      
      <body>
        <ul>
          <li>第1个孩子</li>
          <li>第2个孩子</li>
          <li>第3个孩子</li>
          <li>第4个孩子</li>
          <li>第5个孩子</li>
          <li>第6个孩子</li>
          <li>第7个孩子</li>
          <li>第8个孩子</li>
        </ul>
      </body>
      
      • 隔行变色(关键字)

        ul li:nth-child(even) //选中偶数

        ul li:nth-child(odd) //选中奇数

      • 公式

        ul li:nth-child(n)

        2n:偶数

        2n+1:奇数

        5n:5的倍数

        n+5:从5开始

        -n+5:前5个

      • nth-child(),first-child, last-child与nth-of-type(),nth-of-type,nth-of-type区别

        前者会把所有子元素编号

        后者会把指定元素作为子元素编号

    • 伪元素选择器

      ::before

      ::after

      在这里插入图片描述

    在这里插入图片描述

      <style>
        div {
          width: 150px;
          height: 50px;
          background-color: blue;
          text-align: center;
          color: white;
        }
    
        div::before {
          content: 'xin';
        }
    
        div::after {
          content: 'yue';
        }
      </style>
    </head>
    
    <body>
      <div></div>
    </body>
    

    在这里插入图片描述

    遮罩层

    清除浮动

    在这里插入图片描述

  • 新增盒子模型

    box-sizing:content-box 盒子所占位置大小为width+padding+border(默认的)

    box-sizing:border-box 盒子所占位置大小为width,padding和border就不会撑大盒子了

    在这里插入图片描述

      <style>
        .box {
          width: 150px;
          height: 150px;
          background-color: violet;
          border: 5px solid seagreen;
          padding: 50px;
        }
    
        .box1 {
          width: 150px;
          height: 150px;
          background-color: violet;
          border: 5px solid seagreen;
          padding: 50px;
          box-sizing: border-box;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        我是默认
      </div>
      <div class="box1">
        我是加了border-box
      </div>
    </body>
    

-新增其他特性

  • 图片模糊 滤镜 filter:blur(5px) 数值越大越模糊
  • width:calc(100% +30px)可以加减乘除
  • 2D、3D(单独写)

- CSS3过渡

transition:要过渡的属性 花费时间 运动曲线 何时开始

  1. 属性:宽高背景颜色 内外边距都可
  2. 花费时间:单位是秒
  3. 运动曲线:默认ease
  4. 何时开始:单位是秒
  <style>
    .box1 {
      width: 150px;
      height: 150px;
      background-color: violet;
      border: 5px solid seagreen;
      padding: 50px;
      box-sizing: border-box;
      transition: all 0.5s;
      /* transition: height .5s, width .5s; */
    }

    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>

<body>
  <div class="box1">
    我是加了border-box
  </div>
</body>

练习:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      position: relative;
      width: 250px;
      height: 390px;
      border: 1px solid palevioletred;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 18px;
    }

    .box img {
      width: 100%;
      height: 250px;
    }

    .box p {
      color: rgb(161, 159, 159);
      font-size: 13px;
    }

    .box .price {
      color: red;
      font-size: 20px;
    }

    .box .oldprice {
      color: rgb(161, 159, 159);
      text-decoration: line-through;
    }

    .box .jidutiao {
      font-size: 12px;
      height: 10px;
      color: rgb(161, 159, 159);
      margin-top: 10px;
      text-align: center;
      line-height: 10px;
    }

    .box .jidutiao label {
      color: rgb(146, 145, 145);
      float: left;
    }

    .box .jidutiao .right {
      float: right;
    }

    .box .jidutiao .jdt {
      width: 50%;
      height: 10px;
      border: 1px solid red;
      float: left;
      border-radius: 5px;
      margin-left: 3px;
    }

    .box .jidutiao label span {
      color: red;
    }

    .box .jidutiao .jdt .jidu {
      background-color: red;
      width: 70%;
      height: 100%;
      transition: width .7s;
    }

    .box .jidutiao .jdt .jidu:hover {
      width: 100%;
    }

    .box button {
      width: 95%;
      height: 30px;
      position: absolute;
      bottom: 0;
      left: 6px;
      border: 1px solid red;
      background-color: rgb(160, 7, 7);
      border-bottom: 0;
      color: white;
    }
  </style>
</head>

<body>
  <div class="box">
    <img src="img/1.jpg">
    <p>Apple苹果iphone 6s plus(A1699) 32G 金色 移动联通电信4G手机</p>
    <span class="price">¥6088</span>
    <span class="oldprice">¥6988</span>
    <div class="jidutiao">
      <label>已售<span>87%</span></label>
      <div class="jdt">
        <div class="jidu"></div>
      </div>
      <label class="right">剩余<span>29</span></label>
    </div>
    <button>立即抢购</button>
  </div>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      overflow: hidden;
      box-sizing: border-box;

      position: relative;
    }

    .box div {
      width: 102px;
      height: 52px;
      position: absolute;
      transform: translateX(0);
      /* 移回也需要0.4s时间过渡 */
      transition: transform 0.4s;
      color: white;
    }

    .box label {
      float: left;
      width: 50px;
      height: 50px;
      background-color: orange;
      text-align: center;
      line-height: 50px;
    }

    .box:hover div {
      transform: translateX(-50px);
      /* 0.4s完成transform移动效果*/
      transition: transform 0.4s;

    }
  </style>
</head>

<body>
  <div class="box">
    <div>
      <label></label>
      <label></label>
    </div>
  </div>
</body>

</html>
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值