HTML5 CSS3

发布于 2022-05-10  67 次阅读


html5+css3

HTML5

img

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体

新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search
标签 描述
定义页面独立的内容区域。
定义页面的侧边栏内容。
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义命令按钮,比如单选按钮、复选框或按钮
用于描述文档或文档某个部分的细节
定义对话框,比如提示框
标签包含 details 元素的标题
规定独立的流内容(图像、图表、照片、代码等等)。
定义

元素的标题
定义 section 或 document 的页脚。
定义了文档的头部区域
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释(中文注音或字符)。
定义字符(中文注音或字符)的解释或发音。
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节(section、区段)。
定义日期或时间。
规定在文本中的何处适合添加换行符。

ps 切图

cutterman 切图神器

css 精灵技术(css Sprites , css 雪碧)

为了有效的减少服务器接收和发送请求的次数 提高页面的加载速度

核心原理: 将网页中的一些小背景图像整合到一张大图中 这样服务器只需要一次请求就可以了

精灵图

index

<!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>
    <link rel="stylesheet" href="css/css3.css">
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
</body>
</html>
.box {
    background: url(../img/index.png) no-repeat;
}
#box1 {
    margin: 100px auto;
    width: 60px;
    height: 60px;
    background-position: -182px 0;
}
#box2 {
    width: 27px;
    height: 25px;
    background-position: -157px -106px;
}
#box3 {
    width: 238px;
    height: 130px;
    background-position: 0 -219px;
    cursor: pointer;
}

image-20220519153708684

字体图标

Font Awesome

<script src="https://kit.fontawesome.com/c8410a507f.js" crossorigin="anonymous"></script>

image-20220519154204464

css 实现 三角形

image-20220519163110260

#box4 {
    border-top: 100px solid pink;
    border-left: 100px solid rgb(192, 255, 245);
    border-right: 100px solid rgb(248, 54, 6);
    border-bottom: 100px solid rgb(85, 13, 252);
}

image-20220519163239353

#box5 {
    width: 0;
    height: 0;
    line-height: 0;   /* 为了兼容性 */
    font-size: 0;     /* 为了兼容性 */
    border: 50px solid transparent;
    border-bottom-color: aquamarine;
}

初始化 css

/* 把所有标签的内外边距清零*/
* {
    margin: 0;
    padding: 0
} 
/* 斜体的文字不去倾斜 */
em,
i {
    font-style: normal
}
/* 去除小圆点 */
li {
    list-style: none
}

img {
    border: 0;  /* 低版本兼容问题 */
    vertical-align: middle /* 取消图片底部有空白缝隙的问题 */
}
/* 按钮显示鼠标样式 */
button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 抗锯齿性 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}/* 把所有标签的内外边距清零*/
* {
    margin: 0;
    padding: 0
} 
/* 斜体的文字不去倾斜 */
em,
i {
    font-style: normal
}
/* 去除小圆点 */
li {
    list-style: none
}

img {
    border: 0;  /* 低版本兼容问题 */
    vertical-align: middle /* 取消图片底部有空白缝隙的问题 */
}
/* 按钮显示鼠标样式 */
button {
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 抗锯齿性 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

HTML5 + CSS3 新特性

新特性都有兼容性问题 基本 IE9+ 才支持

html5

image-20220520140135863

多媒体标签

音频

<audio src="文件地址" controls="controls"></audio>

支持 MP3 Wav ogg

视频

<video src="文件地址" controls="controls"></video>

支持 MP4 WebM ogg

MP4 支持所有浏览器

属性

image-20220520142336186

input 标签

image-20220520143945350

image-20220520145426060

<form action="">
        <ul>
            <li>邮箱:<input type="email" required placeholder="2177393158@qq.com"/></li>
            <li>网址:<input type="url" autofocus placeholder="333"/></li>
            <li>日期:<input type="date" /></li>
            <li>日期:<input type="time" /></li>
            <li>数量:<input type="number" placeholder="12"/></li>
            <li>电话:<input type="tel" placeholder="15012345678"/></li>
            <li>搜索:<input type="search" placeholder="xxx"/></li>
            <li>颜色:<input type="color" /></li>
            <li><input type="submit" value="submit" ></li>
        </ul>
    </form>

css3

css3 盒子模型

css3 中可以通过 ==box-sizing== 来指定模型 有两个值: ==context-box border-box==

context-box : 盒子大小为 : width+ padding+ border (默认)

border-box: 盒子大小为 : width

<div class="box1"></div>
<div class="box2"></div>
.box1 {
    width: 100px;
    height: 100px;
    background: rgb(190, 243, 105);
    padding: 20px;
    border: 2px solid red;
    box-sizing: content-box;
}

.box2 {
    width: 100px;
    height: 100px;
    background: rgb(190, 243, 105);
    padding: 20px;
    border: 2px solid red;
    box-sizing: border-box;   /* 盒子最终大小为 width height */
}

image-20220520152254451

图片模糊

css3 滤镜

filter 函数()

filter:blur(5px);    数值越大越模糊
img {
    filter: blur(5px);
}

calc 函数

支持 + - * \

父盒子永远比子盒子大 40px;

.box1>div {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

==css3 过渡==

transition: 要过度的属性 花费时间 运动曲线 何时开始
img {
    filter: blur(8px);
    width: 100%;
    height: 500px;
    transition: filter 1s,width 1s,height 1s;
    /* 全部属性都过渡 */
    /* transition: all 1s; */
}

img:hover {
    filter: blur(0px);
    width: 95%;
    height: 450px;
    border-radius: 10px;
}

运动曲线

image-20220520160018697

进度条

<div id="box6">
  <div id="box5"></div>
</div>
#box6 {
    border: 1px solid red;
    width: 300px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 1px;
}

#box5 {
    width: 50px;
    height: 100%;
    background: rgb(190, 243, 105);
    border-radius: 20px;
    transition: width 1s;
}

#box6:hover #box5{
    width: 100%;
}#box6 {
    margin: 30px auto; 
    border: 1px solid red;
    width: 300px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 1px;
}

#box5 {
    width: 50px;
    height: 100%;
    background: rgb(190, 243, 105);
    border-radius: 20px;
    transition: width 1s;
}

#box6:hover #box5{
    width: 100%;
}#box6 {
    margin: 30px auto; 
    border: 1px solid red;
    width: 300px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 1px;
}

#box5 {
    width: 50px;
    height: 100%;
    background: rgb(190, 243, 105);
    border-radius: 20px;
    transition: width 1s;
}

#box6:hover #box5{
    width: 100%;
}

2D 转化

==转化(transform)== 是 CSS3 中具有颠覆性的特征之一 可以实现元素的位移,旋转,缩放等效果

  • 移动: translate
  • 旋转:rotate
  • 缩放: scale

移动

可以改变元素在页面中的位置 类似 定位

3D 转换

旋转木马

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
body {
    perspective: 5000px;
}

section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 200px auto;
    transform-style: preserve-3d;
    /* 添加动画 */
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* 鼠标移入 停止动画 */
section:hover {
    animation-play-state: paused;
}

section div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/1.jpg) no-repeat;
}

section div:nth-child(1) {
    transform: rotateX(0) translateZ(300px); 
}
section div:nth-child(2) {
    /* 先旋转 在移动 */
    transform: rotateY(60deg) translateZ(300px); 
}
section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px); 
}
section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px); 
}
section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px); 
}
section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px); 
}

浏览器私有前缀

  • -moz- :firefox 私有属性
  • -ms- : ie
  • -webkit- : safari chrome
  • -o- : Opera

本当の声を響かせてよ