css高级技巧&h5新特性&c3新特性

最新推荐文章于 2023-08-15 00:13:45 发布
最新推荐文章于 2023-08-15 00:13:45 发布
阅读量274 收藏 2
点赞数
文章标签： css css3 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58425326/article/details/131025818
版权

css高级技巧&h5新特性&c3新特性

css高级技巧

1.精灵图

为什么使用精灵图?
因为在网页中我们经常要用到大大小小的一些图像，每获取一张图像就要浏览器向服务器发送一次请求，而当我们需要的图像较多时，就会频繁的向服务器发送请求，这时候服务器的压力就会过大。而我们利用精灵图就可以有效的解决这一问题。
精灵图的核心原理：将一些小的图像都整合到一张大图上，这时候服务器就只需响应一次。
精灵图的使用：

  1. 首先我们需要去ps量出我们所需图像的大小（宽高）以及在页面上的坐标
  2. 定义一个盒子将宽高填进去
  3. 用background属性导入精灵图，再将他的坐标位置填进去，这样我们所需的图像就显示出来了
    这里需要讲一下页面中的坐标与数学中坐标的区别：
    数学中的坐标：
    在这里插入图片描述
    网页中的坐标：

在这里插入图片描述
因为我们常常导入的精灵图的左上角对应坐标原点，所以移动过后我们的坐标值一般都为负值。
下面展示一个案例:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 57px;
            /* background-color: pink; */
            margin: 100px auto;
            background: url(images/sprites.png) -182px 0;
        }

        .box2 {
            width: 29px;
            height: 27px;
            margin: 200px;
            background: url(images/sprites.png) -154px -106px;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <div class="box2">

    </div>
</body>

</html>

实现效果：
在这里插入图片描述
精灵图sprite.png：
在这里插入图片描述

2.字体图标

使用场景：主要显示用于网页中一些小的，精致的一些小图标
这时候可能有小朋友要问了，为什么不用精灵图来实现呢？
解释一下：

  • 精灵图的图片文件比较大
  • 图片的放大缩小会失真
  • 一旦制作完毕想要修改十分麻烦
    字体图标的优点：
  • 轻量级，一个字体图标要比图片小很多
  • 容易修改，字体图标的本质是文字，可以改变颜色，调整大小…
  • 几乎适用于所有浏览器
    字体图标的下载：
    在这里插入图片描述
    字体图标的引入：
  • 将从网站中下载好的font文件引入到与html文件的同一目录下
  • 将如下代码复制到style样式里面
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?atlaoq');
  src:  url('fonts/icomoon.eot?atlaoq#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?atlaoq') format('truetype'),
    url('fonts/icomoon.woff?atlaoq') format('woff'),
    url('fonts/icomoon.svg?atlaoq#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  • 打开下载的文件夹，将demo.html里面的图标放到指定位置
  • 调用样式输入font-family: ‘icomoon’;即可完成调用
    下面是一个例子：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                url('fonts/icomoon.woff?7kkyc2') format('woff'),
                url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        span {
            font-family: 'icomoon';
            font-size: 80px;
            color: pink;
        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

</html>

在这里插入图片描述
图标的追加这里就不多做解释了

３．cｓｓ三角

定义一个盒子，当我们宽高都设为0，并为每个边框设置特定颜色，会出现以下效果
在这里插入图片描述
而我们想要得到一个三角，只需要把其他三个三角设置为透明，只留一个三角即可实现

.box2 {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid pink;
        }

在这里插入图片描述

４．ｃｓｓ用户界面

４．１ｃｕｒｏｒ鼠标样式

语法：
在这里插入图片描述
预先定义好一个盒子，然后在style中修改他的样式就可以达到我们想要的效果

４．２ｔｅｘｔ表单轮廓线

之前我们写表单，当鼠标光标定在上面时，会有蓝色的轮廓线，如下：
在这里插入图片描述
当我们想要消除时，只需要在style样式里面添加如下属性
在这里插入图片描述
效果：
在这里插入图片描述

４．３防止表单域拖拽

之前我们生成一个表单域后，由于属性没修改，发现表单域竟然可以拖拽
在这里插入图片描述
这样一来对用户的交互体验不好，我们在style中做如下修改：
在这里插入图片描述
这样一来文本域就不可以随意拖拽了

５．ｖｅｒｔｉｃａｌ－ａｌｇｉｎ属性的应用

使用场景：
经常用于图片（行内或者行内块元素）与文字居中对齐，因为行内或者行内块元素默认是与文字基线对齐的
注：这种设置只针对行内或者行内块元素
语法：
在这里插入图片描述
解释一下什么是基线，中线
在这里插入图片描述

５．１元素居中对齐

对相应的元素在style中添加： vertical-align: top;就可以了

５．２解决图片底部默认空白问题

当我们往结构中插入图片时，底部默认会有个空隙（因为行内块元素默认是和文字基线对齐的）
在这里插入图片描述
解决这个问题我们有两种方法：
在这里插入图片描述
问题解决后的效果图:
在这里插入图片描述

６．溢出文字的省略号显示

有时我们不想过多的文字暴漏在网页外面，这时候我们可以给文字加省略号显示

６．１单行文本溢出省略号显示

在这里插入图片描述

６．２多行文本溢出省略号显示

在这里插入图片描述

7.常见的布局技巧

7.1margin负值的运用

多个盒子重叠线的解决:
当我们结构中有多个盒子且都设置了外边框，这时候外边框会重叠，形成1+1=2的效果
在这里插入图片描述
如果我们只想要一个边框的效果只需要添加 margin-left: -1px;（这里-1不是绝对的，因为我的外边框设置的是-1px）
在这里插入图片描述
鼠标经过某个盒子显示变化的外边框：
不想过多解释了，看代码吧

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            list-style: none;
        }

        ul li {
            /* li有定位则用z-index提高层 */
            position: relative;
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            /* 注意：这里鼠标一经过盒子就变成相对定位盖住其他盒子，所以定位不应该写在li里面 */
            /* position: relative;   */
            /* li没有定位，则鼠标经过给相对定位盖住其他盒子 */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

实现的效果图：
在这里插入图片描述
但是如果我们只在ul li:hover中加如border: 1px solid blue;，可能有的边框不会变色，达不到我们想要的效果

7.2文字围绕浮动元素显示

因为浮动本来就是制作文字环绕效果的，所以当我们给一个图片添加浮动后，对应的文字自动会右侧显示（好像添加了右浮动一样），以此达到我们想要的效果

7.3行内块元素的妙用

由于行内块元素中间默认会有缝隙，所以可以用来制作这样的效果
在这里插入图片描述

7.4css三角的强化

想要实现如下效果：
在这里插入图片描述
首先我们先要做出一个直角的三角形然后背景色调成白色，再用定位定位到￥2099.00的右边，就可以实现这个效果了
直角三角形的制作代码：
在这里插入图片描述
具体怎么实现的就不解释了，不懂的话去浏览器F12调试没有宽高正方形，就懂了。
要想实现上图的效果，首先我们得有一个大盒子div，用来装￥1650和￥5650这两个小盒子，然后我们还要在￥1650这个小盒子里添加一个<i></i>用来制作直角三角形。然后在style样式里做一系列的修改即可实现。
代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 24px;
        }

        .miaosha {
            position: relative;
            width: 90px;
            height: 100%;
            float: left;
            text-align: center;
            background-color: red;
            color: #fff;
            font-weight: 700;

        }

        .miaosha i {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .price .origin {
            padding: 8px;
            font-size: 12px;
            color: gray;
            text-decoration: line-through;

        }
    </style>
</head>

<body>
    <div class="price">
        <span class="miaosha">￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>

</html>

效果图：
在这里插入图片描述

h5新特性

1.新增的语义化标签

以前我们盒子都是用div表示，如果我们想表示一个页面的头部，也只能<div class=“header”>,但在h5我们可以用<header></header>等这样的标签来表示页面头部，导航栏，页面底部等…
在这里插入图片描述

2.多媒体标签

h5中新增了多媒体标签，这样我们就不用falsh或其他插件来导入音频了

2.1视频标签video

当前我们浏览器支持三种视频格式（mp4，webm，ogg），因为兼容性原因我们经常使用mp4，兼容性表格如下：
在这里插入图片描述
语法：
在这里插入图片描述
更具兼容性的语法：
在这里插入图片描述
为了完成更好的页面效果，视频标签还有其对应的属性：
在这里插入图片描述

2.2音频标签audio

当前<audio>有mp3，wav，ogg三种格式，由于兼容性问题，使用mp3较多，兼容性如下：
在这里插入图片描述
语法：
在这里插入图片描述
兼容性更强的写法：
在这里插入图片描述
属性基本上和视频的一致：
在这里插入图片描述
对了这里还有muted属性，这里没有添加

3.h5新增的input类型

新增的input类型，看图：
在这里插入图片描述
解释一下，这里email的文本框里面就只能输入email格式的邮箱，否则系统将会提示。url也是指定格式。date，time,month,week的显示如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
而number和tel的输入就必须是数字，其他格式无法输入。search可以输入任意。color的选择如下：在这里插入图片描述

4.h5新增的表单属性

h5中新增了一些表单属性，使我们的页面更能达到我们想要的效果：
在这里插入图片描述
这里实现的效果就不一一列举了，感兴趣的小伙伴赶紧去敲代码！

c3新特性

1.css3的现状

1.新增的c3由于兼容性问题，ie9+才支持。
2.移动端优于pc端

2.属性选择器

属性选择器用属性+[]来表示，使用他更能节省我们的代码量
在这里插入图片描述
选择符1的应用：
我们之前的做法还要给具有value的input表单添加类或者id选择器，然后再选择，但有了属性选择器这个操作会更方便
在这里插入图片描述
在这里插入图片描述
下面还有好多属性，这里不一一列举了，费劲。

3.结构伪类选择器

结构伪类选择器常用于从父类中选出子元素
在这里插入图片描述
前三个选择符的使用：
在这里插入图片描述
在这里插入图片描述
注意这里nth-child（n）中的n可以是数字，关键字和公式。

  • n是数字的话，就是对应选择第n个元素
  • 也可以是表达式，even（偶数）和odd（奇数）
  • 也可以是公式，当公式为n时（他会从0开始找，选择所有父元素拥有的子元素，不包括0），当然还有其他的公式
    在这里插入图片描述
    当父元素中的子元素标签相同时，如上图所示，后三个选择符的使用和前三个一样，但当一个父元素中包含不同的子元素标签时，差异就出来了
    nth-child的选择原理：
    会把所有的盒子都排序，执行的时候看一下要选出来的元素与表示格式一样不，一样的话就会执行下面代码，否则找不到
    nth-of-type的选择原理：
    会把被选中的盒子排序，按照顺序执行下述代码。
    这样讲可能有点抽象，看实验结果
    我们创建p,div,div三个元素，如下；
    在这里插入图片描述
    分别用，nth-child，nth-of-type演示区别
    在这里插入图片描述
    在这里插入图片描述
    用nth-child的结果：都没选中，没变色
    在这里插入图片描述
    用nth-of-type演示的效果；选中了第一个div，熊大变为red
    在这里插入图片描述

4.伪元素选择器

为什么使用伪元素选择器？
使用伪元素选择器我们能用css创建结构，而不用html创建，这样一来就简化了html结构
在这里插入图片描述
在这里插入图片描述
注意：伪元素选择器一般都有一个父元素，用来做嵌套使用，在父元素中浮动显示。
伪元素选择器的使用场景1：
下拉框的制作：
在这里插入图片描述
以前我们都是在html中嵌套特殊符号来达到这种效果，学了伪元素选择器后就可以用css来创建结构了
思路分析：
首先创建一个大盒子div，设置好属性。从icomoon中找出这个特殊符号，然后div：after中嵌套这个特殊符号（注意引入特殊符号的语句在开头要声明）。显然符号在浏览器左上角显示，这时候我们就要用到父绝子相将特殊符号的位置定到右边就可以了。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?atlaoq');
            src: url('fonts/icomoon.eot?atlaoq#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?atlaoq') format('truetype'),
                url('fonts/icomoon.woff?atlaoq') format('woff'),
                url('fonts/icomoon.svg?atlaoq#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            content: '\e903';
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

伪元素选择器的使用场景2：
土豆网案例的优化。
之前我们做过一个土豆网案例，但因为我们的遮罩层在结构中添加了mask，导致结构复杂。而我们现在学了伪元素选择器就可以很好的解决这个问题了

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tomato {
            position: relative;
            width: 448px;
            height: 320px;
            margin: 100px auto;
        }

        /* 这里图片继承大盒子的宽高，不给图片设置宽高是因为盒子参数变了他也要变比较麻烦 */
        img {
            width: 100%;
            height: 100%;
        }

        .tomato::after {
            content: '';
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /* 注：阴影效果是用背景色添加的 */
            background: url(images/arr.png) no-repeat center rgba(0, 0, 0, .3);
        }

        /* 意思是鼠标经过tomato，tomato中的mask就进行显示（注意这种写法） */
        /* 注意注意注意hover是动态伪类可以用于所有元素 ！！！*/
        .tomato:hover::after {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 大盒子：中间放图片和阴影 -->
    <div class="tomato">
        <img src="images/tudou.jpg" alt="">

    </div>
</body>

</html>

这样一来，效果还是和以前一样的
在这里插入图片描述
伪元素选择器的使用场景3：
当然，用我们的伪元素选择器还可以很好的清除浮动

5.css3的盒子模型

之前在我们给盒子添加外边框或者内边距的时候，总担心盒子会被撑大，到头来我们还要减去padding或者border。但现在我们完全不用担心了。
在这里插入图片描述

6.css3其他特性

  1. 图像模糊
    在这里插入图片描述
    注意：这里blur里面数值的单位是px
    给以下图片添加模糊效果：
    在这里插入图片描述
    代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 500px;
            height: 200px;
            filter: blur(5px);
        }

        img:hover {
            filter: blur(0px);
        }
    </style>
</head>

<body>
    <img src="images/mi9.jpg" alt="">
</body>

</html>

效果：
在这里插入图片描述

  1. calc函数的妙用
    利用calc函数进行计算，可以完成我们以前达不到的效果（如让子元素永远小于父元素30px，无论父元素怎么变）
    用法：
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .son {
            /* 注意：这里括号内两数值间一定要加空格 */
            width: calc(100% - 50px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

在这里插入图片描述
上面案例我们可以看到，无论父盒子变多宽，子盒子永远比他小30px
注：calc函数里面不仅可以用加法，还可以用-*/

7.css过渡（重点）

c3中专门提供了一个样式做画面的过度效果（从一个样式变成另外一个样式），这样我们就不需要flash动画或者其他插件的帮助了。
语法：
在这里插入图片描述
注：

  • 低版本ie9以下浏览器不支持
  • 这种过度效果经常与：hover一起搭配使用
  • 后两个属性可有可无
    记住过度口诀：谁做过度给谁添加
    利用过度制作进度条：
    首先定义一个圆边框的大盒子，然后内嵌一个小盒子添加过度属性即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 0.5px;


        }

        .bar-in {
            width: 50%;
            height: 100%;
            background-color: red;
            transition: all .7s;

        }

        .bar:hover .bar-in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar-in"></div>
    </div>
</body>

</html>

效果:
在这里插入图片描述
要想添加多个属性，只需利用逗号分隔即可

transition: width 2s, height 2s;

要想所有的属性都发生变化，使用all即可

transition: all .5s;

这些就是昨天和前天学的内容，由于种种原因，拖到今天才发出来，真的栓Q！
以后尽量把每天学习的内容都做成笔记，养成好习惯，接下来就是项目品优购了，让我感觉比这些枯燥的知识点有意思多了，冲！

码代码的小涛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5&C3---黑马pink.7z
01-06
原视频链接：https://www.bilibili.com/video/BV14J4114768。是pink老师分享的课件。有部分没有的内容我在学习的过程中补充在博客专栏中了：...还有部分内容是自己的练习。
H5C3面试题.docx
03-29
本文总结了 H5C3 面试题的知识点，涵盖了 CSS3 的新特性、边框、阴影、2D/3D 转换、过渡、动画、弹性盒子、媒体查询、响应式布局的优缺点、C3 动画的八大参数、标签语义化等方面的知识。 一、CSS3 新特性 1. 怪异...
【0基础前端】CSS-C3总结详细笔记包含代码块从入门到高阶通俗易懂
写bug的程序鱼
08-09 524
1）相对定位是依据自己本身定位的2）绝对定位是依据有定位的父级定位3）固定定位是依据body(网页)定位。
H5C3—入门第二节
最新发布
dcwal的博客
08-15 69
Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。
h5和c3的新特性
Smature的博客
01-30 301
h5和c3新特性
HTML5和css3新特性
田兴的博客
10-21 7578
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 动画、过渡 多列布局 1. 选择器 常规选择器： :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /
H5有哪些新特性?Css3有哪些新特性?
m0_57103064的博客
06-07 517
h5新特性 拖放 canvas画布 语义化标签
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
h5+CSS3总结
02-15
h5+css3总结，标签、选择器，css美化文本、图像、连接、列表
h5c3新增标签及用法
10-20
html5 css3中新增的属性事件 新增DOM选择和操作样式、 网络监听接口、全屏接口；CSS3中 transition过渡 、transform二维变换、transform3D转换、动画animation、伸缩布局等等
2021-03-12
qq_55207574的博客
03-12 103
属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。 选择符 简介 E[att] 选择器具有att属性的E元素 E[att=“val”] 选择器具有att属性值等于val的E元素 E[att^=“val”] 匹配具有att属性且值以val开头的E元素 E[att$=“val”] 匹配具有att属性且值以val结尾的E元素 E[att*=“val”] 匹配具有att属性且值中含有val的E元素 注意：类选择器、属性选择器、伪类选择器，权重为10. 结构伪类选择器
h5和c3新特性总结
qq_44718039的博客
09-27 150
h5和c3
Web前端开发笔记(6)
gentle、待人的博客
03-04 446
Web前端开发笔记(6) HTML5 和 CSS3 提高 文章目录Web前端开发笔记(6)前言基础学习路线目标：HTML5 的新特性1. HTML5 的新特性1.1 HTML5 新增的语义化标签1.2 HTML5 新增的多媒体标签1.2.1 视频``1.2.2 音频``1.2.3 多媒体标签总结1.3 HTML5 新增的 input 类型1.4 HTML5 新增的表单属性2. CSS3 的新特性2.1 CSS3 的现状2.2 属性选择器2.3 结构伪类选择器2.4 伪元素选择器（重点）2.5 CSS3
css3和h5新增特性
weixin_57166400的博客
02-11 149
背景:规定背景图片的尺寸:background-size规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）边框:border-radius: 圆角border-shadow/text-shadow: 阴影border-image: 边框图片。1. 语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article。
H5、C3的新特性有哪些？
weixin_52396988的博客
07-25 2068
H5、C3的新特性有哪些？ HTML5的新增元素： 1、canvas 画布 2、用于媒介回放的video和audio元素 3、本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除 4、语意化更好的内容元素，比如 article footer header nav section 5、位置API：Geolocation 6、表单控件，calendar date time email url search 7、新的技术：web
h5和c3新特性
haimianjun123的博客
12-09 1997
文章目录前言一、h5新特性二、css3新特性 前言 一、h5新特性 1.语义化标签：header、footer、section、nav、aside、article 2.增强型表单：input 的多个 type 3.新增表单元素：datalist、keygen、output 4.新增表单属性：placehoder、required、min 和 max 5.音频视频：audio、video 6.canvas 7.地理定位 8.拖拽 9.本地存储：localStorage - 没有时间限制的数据存储；ses
面试问题之H5C3有哪些新特性？
qq_32849999的博客
11-19 2344
H5 C3 新增 h5 1.语义化标签 header、footer、aside、section、article、nav 2.表单输入类型 email、url、number、range、Date Pickers、search、color 3.表单属性 autocomplete、placeholder、form 4.视频音频 video、audio 5.画布 canvas 6.伸缩矢量图...
node.js中fs.createWriteStream详解
热门推荐
h5css3_linhuai的博客
02-22 1万+
代码： 　　fs.createWriteStream(path,[options]); path | options | flags defaultEncoding fd mode autoClose start 返回一个新建的 WriteStream 对象（详见可写流）。 options 是一个带有以下默认值的对象或字符串： {   fl
HTML5和CSS3的新特性(浓缩好记版)
我的博客
08-22 1万+
综述：这个问题在面试的时候经常被问到，有必要做一个总结，理解的深刻充分一些 1.html5的新特性？(记住有九大模块内容) 添加了video，radio标签 添加了canvas画布和svg,渲染矢量图片 添加了一些列语义化标签header,footer,main,section,aside,nav等 input的type值新添加了很多属性（email，ur...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值