【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换

最新推荐文章于 2022-11-10 20:30:00 发布
最新推荐文章于 2022-11-10 20:30:00 发布
阅读量568 收藏 3
点赞数 1
分类专栏： 前端 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Satan_Devil/article/details/106507652
版权

文章目录

HTML5 第一天

一、什么是 HTML5

  1. HTML5 的概念与定义

    • 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
    • 两个概念：
      • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
      • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

  2. HTML5 拓展了哪些内容

    • 语义化标签
    • 本地存储
    • 兼容特性
    • 2D、3D
    • 动画、过渡
    • CSS3 特性
    • 性能与集成

  3. HTML5 的现状

    绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

    总的来说：HTML5 已经是大势所趋

二、HTML5 新增标签

  1. 什么是语义化

  2. 新增了那些语义化标签

    • header — 头部标签
    • nav — 导航标签
    • article — 内容标签
    • section — 块级标签
    • aside — 侧边栏标签
    • footer — 尾部标签

  3. 使用语义化标签的注意

    • 语义化标签主要针对搜索引擎
    • 新标签可以使用一次或者多次
    • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
    • 语义化标签，在移动端支持比较友好，
    • 另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header,
        nav,
        section {
            display: block;
            height: 120px;
            background-color: pink;
            margin: 10px;
        }
    </style>

</head>

<body>
    <header> header</header>
    <header> header</header>
    <nav> nav </nav>
    <section></section>
</body>

</html>
三、多媒体音频标签

  1. 多媒体标签有两个，分别是

    • 音频 – audio
    • 视频 – video

  2. audio 标签说明

    • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
    • 但是：播放格式是有限的

  3. audio 支持的音频格式

    • audio 目前支持三种格式

  4. audio 的参数

5、audio 代码演示

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>
四、多媒体视频标签

  1. video 视频标签

    • 目前支持三种格式

  2. 语法格式

    <video src="./media/video.mp4" controls="controls"></video>

  3. video 参数

  4. video 代码演示

    <body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

  5. 多媒体标签总结

    • 音频标签与视频标签使用基本一致
    • 多媒体标签在不同浏览器下情况不同，存在兼容性问题
    • 谷歌浏览器把音频和视频标签的自动播放都禁止了
    • 谷歌浏览器中视频添加 muted 标签可以自己播放
    • 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
五、新增 input 标签

<body>
    <form action="">
        <ul>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li>日期: <input type="date" /></li>
            <li>日期: <input type="time" /></li>
            <li>数量: <input type="number" /></li>
            <li>手机号码: <input type="tel" /></li>
            <li>搜索: <input type="search" /></li>
            <li>颜色: <input type="color" /></li>

            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>
</body>
六、新增表单属性

<body>
    <form action="">
        用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上传头像: <input type="file" name="" id="" multiple="multiple">
    </form>
</body>
七、CSS3 属性选择器(上)

  1. 什么是 CSS3

    • 在 CSS2 的基础上拓展、新增的样式

  2. CSS3 发展现状

    • 移动端支持优于 PC 端
    • CSS3 目前还草案，在不断改进中
    • CSS3 相对 H5，应用非常广泛

  3. 属性选择器列表

  4. 属性选择器代码演示

    button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}
八、CSS3 属性选择器(下)

  1. 代码演示

    input[type=search] {
  color: skyblue;
}

span[class^=black] {
  color: lightgreen;
}

span[class$=black] {
  color: lightsalmon;
}

span[class*=black] {
  color: lightseagreen;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 属性选择器使用方法 */
        /* 选择的是：  既是button 又有 disabled 这个属性的元素 */
        /* 属性选择器的权重是 10 */
        /* 1.直接写属性 */
        
        button[disabled] {
            cursor: default;
        }
        
        button {
            cursor: pointer;
        }
        /* 2. 属性等于值 */
        
        input[type="search"] {
            color: pink;
        }
        /* 3. 以某个值开头的 属性值 */
        
        div[class^="icon"] {
            color: red;
        }
        /* 4. 以某个值结尾的 */
        
        div[class$="icon"] {
            color: green;
        }
        /* 5. 可以在任意位置的 */
        
        div[class*="icon"] {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- disabled 是禁用我们的按钮 -->
    <button>按钮</button>
    <button>按钮</button>
    <button disabled="disabled">按钮</button>
    <button disabled="disabled">按钮</button>

    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

</html>
九、结构伪类选择器

  1. 属性列表

  2. 代码演示

    ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}
十、nth-child 参数详解

  1. nth-child 详解

    • 注意：本质上就是选中第几个子元素

    • n 可以是数字、关键字、公式

    • n 如果是数字，就是选中第几个

    • 常见的关键字有 even 偶数、odd 奇数

    • 常见的公式如下(如果 n 是公式，则从 0 开始计算)

    • 但是第 0 个元素或者超出了元素的个数会被忽略

  2. 代码演示

    <style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>
十一、nth-child 和 nt-of-type 的区别

  1. 代码演示

    <style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

  2. 区别

    • nth-child 选择父元素里面的第几个子元素，不管是第几个类型
    • nt-of-type 选择指定类型的元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* div :nth-child(1) {
            background-color: pink;
        }
        
        div :nth-child(2) {
            background-color: purple;
        } */
        /* div span:nth-child(1) {  这个选不到
            background-color: pink;
        } */
        
        div span:nth-child(2) {
            background-color: pink;
        }
        /* 总结： :nth-child(n)  选择 父元素里面的 第 n个孩子， 它不管里面的孩子是否同一种类型 */
        /* of-type 选择指定类型的元素 */
        
        div span:first-of-type {
            background-color: purple;
        }
        
        div span:last-of-type {
            background-color: skyblue;
        }
        
        div span:nth-of-type(2) {
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>我是一个屁</p>
        <span>我是span</span>
        <span>我是span</span>
        <span>我是span</span>
    </div>
    <!-- ul 里面我们只允许放li  所以 nth-child 和 nth-of-type 就一样了 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>
十二、伪元素选择器

  1. 伪类选择器

  2. 伪类选择器注意事项

    • before 和 after 必须有 content 属性
    • before 在内容前面，after 在内容后面
    • before 和 after 创建的是一个元素，但是属于行内元素
    • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
    • 伪元素和标签选择器一样，权重为 1

  3. 代码演示

    <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>
十三、伪元素的案例

  1. 添加字体图标

    p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?cv013x');
    src: url('fonts/icomoon.eot?cv013x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?cv013x') format('truetype'), url('fonts/icomoon.woff?cv013x') format('woff'), url('fonts/icomoon.svg?cv013x#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

span {
    font-family: 'icomoon';
    position: absolute;
    top: 10px;
    right: 10px;
}

div,
p {
    position: relative;
    width: 249px;
    height: 35px;
    border: 1px solid red;
}
/* p::after {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'icomoon';
} */

p::after {
    content: '\ea50';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'icomoon';
}
十四、2D 转换之 translate

  1. 2D 转换

    • 2D 转换是改变标签在二维平面上的位置和形状

    • 移动： translate

    • 旋转： rotate

    • 缩放： scale

  2. translate 语法

    • x 就是 x 轴上水平移动
    • y 就是 y 轴上水平移动
    transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

  3. 重点知识点

    • 2D 的移动主要是指 水平、垂直方向上的移动
    • translate 最大的优点就是不影响其他元素的位置
    • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
    • 行内标签没有效果

  4. 代码演示

div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移动 100px */
  /* transform: translate(100px, 100px); */

  /* 水平移动 100px */
  /* transform: translate(100px, 0) */

  /* 垂直移动 100px */
  /* transform: translate(0, 100px) */

  /* 水平移动 100px */
  /* transform: translateX(100px); */

  /* 垂直移动 100px */
  transform: translateY(100px)
}

/* 移动盒子的位置： 定位   盒子的外边距  2d转换移动 */

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
    /* transform: translate(x, y); */
    /* transform: translate(100px, 100px); */
    /* 1. 我们如果只移动x坐标 */
    /* transform: translate(100px, 0); */
    /* transform: translateX(100px); */
    /* 2. 我们如果只移动y坐标 */
    /* transform: translate(0, 100px); */
    /* transform: translateY(100px); */
}

div:first-child {
    transform: translate(30px, 30px);
}

div:last-child {
    background-color: purple;
}
十五、让一个盒子水平垂直居中
  • 看代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. 我们tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
            /* transform: translateX(50%); */
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }
        
        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>
十六、2D 转换 rotate

  1. rotate 旋转

    • 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

  2. rotate 语法

    /* 单位是：deg */
transform: rotate(度数)

  3. 重点知识点

    • rotate 里面跟度数，单位是 deg
    • 角度为正时，顺时针，角度为负时，逆时针
    • 默认旋转的中心点是元素的中心点

  4. 代码演示

    img:hover {
  transform: rotate(360deg)
}
每日作业 - H5C3第1天

​ 作业说明：

  1. 作业题分为两大部分：基础案例和扩展案例。基础案例为涵盖今日所学知识点的案例，所有学员必须全部完成，不能当日完成的利用自习课时间继续完成。扩展案例为在今日所学知识点的基础上，进行扩展训练，学有余力的同学可以尝试完成，不做强制要求。

  2. 每个作业题包含训练描述、训练提示、操作步骤三项。

    • 训练描述可理解为作业题干，有清晰的要求描述。如果读完训练描述即知道如何操作，后面两项忽略。
    • 训练提示提供实现思路。如果读完训练描述，不能完成操作，继续查看训练提示。
    • 操作步骤提供具体详细的实现步骤和代码。如果读完训练提示仍然不会，继续查看操作步骤。
基础案例
01-《美的》导航搜索
训练描述

原版的《美的》官网，搜索栏鼠标经过后出现搜索框，失去焦点还原，并且是以过渡的方式

训练提示
  1. 搭建以项目为主的几个文件
  2. 书写导航栏页面布局
    • logo原图比较大，需要设置父盒子宽度和自身的100%
    • 设置导航项
    • 右侧基本都是精灵图，所以不需要使用字体图标，注意间距的调整
  3. 将搜索框设置成初始位置，然后当鼠标经过的时候，设置宽度和透明度变化
操作步骤

  1. 创建index文件，新建css文件夹，创建base.css文件并初始化基本代码，新建images文件夹

  2. 创建index.css保存至css文件夹，首页html文件引入css样式

  3. 编写结构代码

    • 创建版心盒子，左左右模块，分别代表logo，导航项，右侧信息

      <header>
	<div class="logo"></div>
	<div class="topnav">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">商家入驻</a></li>
			<li><a href="#">企业采购</a></li>
			<li><a href="#">全屋家电套购</a></li>
			<li><a href="#">会员福利社</a></li>
			<li><a href="#">美的分期</a></li>
		</ul>
	</div>
	<div class="right-info">
		<ul>
			<li class="searchbox">
				<input type="text" placeholder="美的热水器">
				<i class="icon-meidi search"></i>
			</li>
			<li class="mobilebox">
				<i class="icon-meidi mobile"></i>
			</li>
			<li class="carbox">
				<i class="icon-meidi car"></i>
			</li>
			<li class="loginbox">
				<i class="icon-meidi login"></i>
				<span>登录</span>
			</li>
		</ul>
	</div>
</header>

    • 排版logo和导航项的内容

      body {
	height: 2000px;
  	/*这句话可以不要，没有什么太大的帮助*/
}

header {
	min-width: 1200px;
	height: 44px;
	background-color: #0092d8;
}

header .logo {
	float: left;
    width: 120px;
    height: 44px;
    background-image: url(../images/index_service_sprite@2x.png);
    background-repeat: no-repeat;
    background-size: 200px 80px;
    background-position: -80px 0;
}

header .topnav {
	float: left;
	height: 44px;
}

header .topnav li {
	float: left;
}

header .topnav li a {
	display: block;
	height: 44px;
	line-height: 44px;
	color: #a3c3e6;
	font-size: 12px;
	padding: 0 30px;
}

header .topnav li a:hover {
	color: #fff;
}

    • 下载相关的图片，排版右侧信息内容

      .right-info {
	float: right;
}

.right-info li {
	float: left;
	height: 44px;
	position: relative;
}

.right-info li input {
	width: 100%;
	height: 100%;
	text-indent: 2rem;
	opacity: 0;
}

.icon-meidi {
	display: block;
    width: 20px;
    height: 20px;
	position: absolute;
    right: 30px;
    cursor: pointer;
    background-image: url(../images/index_sprite.png);
    background-repeat: no-repeat;
}
 
.search {
	top: 12px;
    background-position: -96px -215px;
}
 
.searchbox {
	width: 45px;
	transition: width .4s ease-in;
}
 
.searchbox:hover {
	width: 250px;
}
 
.searchbox:hover input {
	opacity: 1;
}
 
.searchbox:hover i {
	top: 12px;
    left: 10px;
    background-position: -66px -215px;
}
 
.mobilebox {
	width: 65px;
	padding-top: 11px;
	box-sizing: border-box;
}
 
.mobile {
	background-position: -120px -215px;
}
 
.carbox {
	padding: 0 20px;
	padding-top: 11px;
	box-sizing: border-box;
}
 
.car {
	position: static;
    background-position: -146px -215px;
    cursor: pointer;
}
 
.loginbox {
	width: 85px;
	padding-top: 11px;
	box-sizing: border-box;
}
 
.login {
	position: static;
	float: left;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-position: -35px -216px;
    margin-left: 20px;
}
 
.loginbox span {
	float: left;
	font-size: 12px;
	color: #fff;
}
 
.news {
    font-size: 12px;
    background: rgb(0, 59, 102);
    line-height: 16px;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 4px;
}

  4. 排版搜索栏默认的样式，设置当鼠标经过父盒子的样式

  5. 打开首页文件，观察效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<header>
		<div class="logo"></div>
		<div class="topnav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">商家入驻</a></li>
				<li><a href="#">企业采购</a></li>
				<li><a href="#">全屋家电套购</a></li>
				<li><a href="#">会员福利社</a></li>
				<li><a href="#">美的分期</a></li>
			</ul>
		</div>
		<div class="right-info">
			<ul>
				<li class="searchbox">
					<input type="text" placeholder="美的热水器">
					<i class="icon-meidi search"></i>
				</li>
				<li class="mobilebox">
					<i class="icon-meidi mobile"></i>
				</li>
				<li class="carbox">
					<i class="icon-meidi car"></i>
				</li>
				<li class="loginbox">
					<i class="icon-meidi login"></i>
					<span>登录</span>
				</li>
			</ul>
		</div>
	</header>

	<div class="news">【通知】1、美的商城为美的集团官方渠道，请勿相信任何刷单信息。2、新疆部分区域无法快递正常发货，恢复时间待定。3、 因美的会员体系改版，10月26-29日期间美的积分将处于冻结状态。届时您将无法获得和消耗积分，感谢理解！</div>
</body>
</html>



* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

input, button {
	outline: none;
	border: none;
}

a {
	text-decoration: none;
}

.clearfix::before,
.clearfix::after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: hidden;
}

.clearfix::after {
	clear: both;
}



body {
	height: 2000px;
}

header {
	min-width: 1200px;
	height: 44px;
	background-color: #0092d8;
}

header .logo {
	float: left;
    width: 120px;
    height: 44px;
    background-image: url(../images/index_service_sprite@2x.png);
    background-repeat: no-repeat;
    background-size: 200px 80px;
    background-position: -80px 0;
}

header .topnav {
	float: left;
	height: 44px;
}

header .topnav li {
	float: left;
}

header .topnav li a {
	display: block;
	height: 44px;
	line-height: 44px;
	color: #a3c3e6;
	font-size: 12px;
	padding: 0 30px;
}

header .topnav li a:hover {
	color: #fff;
}


.right-info {
	float: right;
}

.right-info li {
	float: left;
	height: 44px;
	position: relative;
}

.right-info li input {
	width: 100%;
	height: 100%;
	text-indent: 2rem;
	opacity: 0;
}


.icon-meidi {
	display: block;
    width: 20px;
    height: 20px;
	position: absolute;
    right: 30px;
    cursor: pointer;
    background-image: url(../images/index_sprite.png);
    background-repeat: no-repeat;
}

.search {
	top: 12px;
    background-position: -96px -215px;
}

.searchbox {
	width: 45px;
	transition: width .4s ease-in;
}

.searchbox:hover {
	width: 250px;
}

.searchbox:hover input {
	opacity: 1;
}

.searchbox:hover i {
	top: 12px;
    left: 10px;
    background-position: -66px -215px;
}

.mobilebox {
	width: 65px;
	padding-top: 11px;
	box-sizing: border-box;
}

.mobile {
	background-position: -120px -215px;
}

.carbox {
	padding: 0 20px;
	padding-top: 11px;
	box-sizing: border-box;
}

.car {
	position: static;
    background-position: -146px -215px;
    cursor: pointer;
}

.loginbox {
	width: 85px;
	padding-top: 11px;
	box-sizing: border-box;
}

.login {
	position: static;
	float: left;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-position: -35px -216px;
    margin-left: 20px;
}

.loginbox span {
	float: left;
	font-size: 12px;
	color: #fff;
}

.news {
    font-size: 12px;
    background: rgb(0, 59, 102);
    line-height: 16px;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 4px;
}
02-《小米》产品
训练描述

这个产品模块中，鼠标经过大盒子，底部有信息模块升上来，并且本身上移2像素，并且加上投影

训练提示

  1. 先进行基本的布局，排出来具体的大小位置

  2. 添加底部信息块，，定位在bottom底部，完成后，将高度设置为0，加上溢出隐藏属性

  3. 当鼠标经过盒子，显示盒子，并且加上阴影和位移

操作步骤

​ 1，创建index文件，新建css文件夹并创建base.css文件，初始化css样式

​ 2，新建images文件夹，在首页文件中引入样式

​ 3，创建基本的结构

	<div class="product">
		<ul>
			<li>
				<div class="pro-img">
					<a href="#">
						<img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
					</a>
				</div>
				<h3><a href="#">小米电视4A 43英寸青春版</a></h3>
				<p class="desc">全高清屏 / 人工智能语音</p>
				<p class="price">
					<span>1499</span>元
					<del>1699</del>
				</p>
				<div class="review">
					<a href="#">
						<span class="msg">一如既往的好，小米情怀</span>
						<span class="auther"> 来自于 惊喜 的评价 </span>
					</a>
				</div>
			</li>
		</ul>
	</div>

​ 4，排版基本的样式

body {
	padding: 100px;
	background-color: #f5f5f5;
}

.product li {
    float: left;
    width: 234px;
	height: 246px;
    padding: 34px 0 20px;
    z-index: 1;
    margin-left: 14px;
    margin-bottom: 14px;
    background: #fff;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
	position: relative;
}

.pro-img {
	width: 150px;
	height: 150px;
	margin: 0 auto 18px;
}

.pro-img a {
	width: 100%;
	height: 100%;
}

.pro-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.product li h3 {
	margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.product li h3 a {
	color: #333;
}

.desc {
	margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #b0b0b0;
}

.price {
	font-size: 14px;
	margin: 0 10px 10px;
    text-align: center;
    color: #ff6700;
}

.price del {
	color: #b0b0b0;
}

.review {
	position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 234px;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    background: #ff6700;
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.review a {
	color: #757575;
	display: block;
    padding: 8px 30px;
    outline: 0;
}

.review a span {
	display: block;
	margin-bottom: 5px;
    color: #fff;
}

​ 5，设置鼠标经过样式

.product li:hover {
	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
  	/*这里的位移可以使用2d的转换方式*/
}

.product li:hover .review {
	opacity: 1;
	height: 76px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="product">
		<ul>
			<li>
				<div class="pro-img">
					<a href="#">
						<img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
					</a>
				</div>
				<h3><a href="#">小米电视4A 43英寸青春版</a></h3>
				<p class="desc">全高清屏 / 人工智能语音</p>
				<p class="price">
					<span>1499</span>元
					<del>1699</del>
				</p>
				<div class="review">
					<a href="#">
						<span class="msg">一如既往的好，小米情怀</span>
						<span class="auther"> 来自于 惊喜 的评价 </span>
					</a>
				</div>
			</li>
		</ul>
	</div>
</body>
</html>



* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

input, button {
	outline: none;
	border: none;
}

a {
	text-decoration: none;
}

.clearfix::before,
.clearfix::after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: hidden;
}

.clearfix::after {
	clear: both;
}



body {
	padding: 100px;
	background-color: #f5f5f5;
}

.product li {
    float: left;
    width: 234px;
	height: 246px;
    padding: 34px 0 20px;
    z-index: 1;
    margin-left: 14px;
    margin-bottom: 14px;
    background: #fff;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
	position: relative;
}

.pro-img {
	width: 150px;
	height: 150px;
	margin: 0 auto 18px;
}

.pro-img a {
	width: 100%;
	height: 100%;
}

.pro-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.product li h3 {
	margin: 0 10px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.product li h3 a {
	color: #333;
}

.desc {
	margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #b0b0b0;
}

.price {
	font-size: 14px;
	margin: 0 10px 10px;
    text-align: center;
    color: #ff6700;
}

.price del {
	color: #b0b0b0;
}

.review {
	position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 234px;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    background: #ff6700;
    opacity: 0;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.review a {
	color: #757575;
	display: block;
    padding: 8px 30px;
    outline: 0;
}

.review a span {
	display: block;
	margin-bottom: 5px;
    color: #fff;
}

.product li:hover {
	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
}

.product li:hover .review {
	opacity: 1;
	height: 76px;
}
03-《beats耳机》按钮
训练描述

当鼠标经过按钮的时候，有一个灰色的背景或者其他颜色的背景升上来

训练提示

  1. 创建index文件，新建css文件创建base.css文件，完成css初始化

  2. 在首页文件中引入文件，完成结构布局

  3. 完成样式排版，设计鼠标经过样式（预先有一个盒子在底部等待，鼠标经过就升上来）

操作步骤

  1. 创建基本结构

    	<div class="button">
		<ul>
			<li>
				<a href="#">
					<span class="button-inner">
						探索
						<span class="a11y"></span>
					</span>
					<span class="mask"></span>
				</a>
			</li>
		</ul>
	</div>

  2. 设置基本样式和鼠标经过样式

    body {
	padding: 50px;
}

.button ul li {
	float: left;
}

.button li a {
	display: inline-block;
	position: relative;
	line-height: 30px;
	text-align: center;
	color: #1e1e1e;
	/* 文字间距 */
	letter-spacing: 0.5px;
	border-radius: 50px;
	overflow: hidden;
	z-index: 1;
	cursor: pointer;
	vertical-align: middle;
	box-sizing: border-box;
}
.button-inner {
	position: relative;
	z-index: 3;
	display: block;
	border-radius: 22px;
	padding: 5px 37px 0 37px;
	margin-right: 0px;
	box-sizing: border-box;
}
.a11y {
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    display: block;
    margin: 0;
    padding: 0;
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: #d6d6d6;
	padding-top: 0px;
	line-height: 46px;
	color: #fff;
	display: block;
	transition: transform 0.2s ease-in;
	transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after, .button li a:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1.1px;
    right: 1px;
    box-shadow: inset 0px 0px 0px 2px #d3d2d2;
    border-radius: 50px;
}
.button li a:hover .mask {
	transform: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="button">
		<ul>
			<li>
				<a href="#">
					<span class="button-inner">
						探索
						<span class="a11y"></span>
					</span>
					<span class="mask"></span>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>



* {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

input, button {
	outline: none;
	border: none;
}

a {
	text-decoration: none;
}

.clearfix::before,
.clearfix::after {
	content: "";
	height: 0;
	line-height: 0;
	display: block;
	visibility: hidden;
}

.clearfix::after {
	clear: both;
}




body {
	padding: 50px;
}

.button ul li {
	float: left;
}

.button li a {
	display: inline-block;
    position: relative;
    line-height: 30px;
    text-align: center;
    color: #1e1e1e;
    /* 文字间距 */
    letter-spacing: 0.5px;
    border-radius: 50px;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.button-inner {
	position: relative;
    z-index: 3;
    display: block;
    border-radius: 22px;
    padding: 5px 37px 0 37px;
    margin-right: 0px;
    box-sizing: border-box;
}

.a11y {
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
    display: block;
    margin: 0;
    padding: 0;
}

.mask {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 2;
    background-color: #d6d6d6;
    padding-top: 0px;
    line-height: 46px;
    color: #fff;
    display: block;
    transition: transform 0.2s ease-in;
    transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}

.button li a:after, .button li a:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1.1px;
    right: 1px;
    box-shadow: inset 0px 0px 0px 2px #d3d2d2;
    border-radius: 50px;
}

.button li a:hover .mask {
	transform: none;
}
扩展案例
04- 整理icomoon图标, 阿里图标，awesome图标
训练描述

​ 1，熟练使用三个平台提供的图标字体
​ 2，熟练使用伪元素

训练提示
  1. 先下载，然后通过@font-face声明字体文件
  2. 利用单独类名的伪元素引入图标，建立基本类名设置字体名称和文字相关
  3. 给当前的元素加入基本类名，和单独的类名
操作步骤

​ 1，在平台中下载文件，得到download.zip，解压文件

​ 2，新建fonts文件夹，创建css引入字体图标，注意路径，注意路径，注意路径

@font-face {
	font-family: 'iconfont';
	src: url('../fonts/iconfont.eot'); /* IE9*/
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
	url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

​ 3，建立基本类名声明字体和样式

.myFont{
	font-family: iconfont;
  	font-size: 16px;
}

​ 3，利用单独的类名设置伪元素，加载图标的编码

.output::before{
	content: "\e640";
}
太极图案
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background-color: skyblue;
		}
		div {
			width: 200px;
			height: 400px;
			background-color: #fff;
			border-left: 200px solid #000;
			margin: 50px auto;
			border-radius: 50%;

			transition: all .6s ease-in-out;
            -webkit-transition: all .6s ease-in-out;
            -moz-transition: all .6s ease-in-out;
            -o-transition: all .6s ease-in-out;
		}
		div::before,div::after {
			content: "";
			display: block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-left: -100px;
		}
		div::before {
			background-color: #fff;
			border: 75px solid #000;
		}
		div::after {
			background-color: #000;
			border: 75px solid #fff;
		}
		div:hover {
			transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
忘尘 丶莫负
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5——HTML5多媒体标签
流楚丶格念的博客
07-15 4900
多媒体标签 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体 embed（会使用） embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。 <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIw
列表推倒式+递归 快速排序
weixin_42278305的博客
07-11 307
快速排序的思想：选取一个列表一个元素作为基准，小于列表的元素放在基准左边，大于基准的元素放在右边。 本例选择第一个元素为基准，递归终止条件为len(list)&lt;=1 import random def qsort(L): if len(L) &lt;= 1: return L return qsort([lt for lt in L[1:] if lt &...
CSS3新增选择器-伪类选择器
luxunlx123的博客
05-01 209
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav1 li:first-child {backgr...
h5+css3相关新增属性及标签
qq_41538952的博客
04-24 157
1.语义化标签 `header`---头部标签 `nav`---导航标签 `article`---内容标签 `section`---块级标签 `aside`---侧边栏标签 `footer`---尾部标签 语义化标签使用注意事项 语义化标签主要针对搜索引擎 新标签可以使用一次或者多次 在`IE9`浏览...
浅谈ProForm中的数据转化
AG.『Feng』的博客
11-10 2231
浅谈ProForm中的数据转化
HTML5+CSS3+JavaScript-登录页面
12-17
在这个“HTML5+CSS3+JavaScript-登录页面”项目中，我们将深入探讨这些技术在创建一个功能完备的登录界面中的应用。 首先，HTML5（超文本标记语言第五版）提供了更加强大的结构化元素，比如`<header>`、`<nav>`、`...
HTML5+CSS3移动商城-购物车
04-29
在这个“HTML5+CSS3移动商城-购物车”项目中，我们将探讨如何利用这两种技术来实现一个功能完备且用户体验良好的移动购物车系统。 1. **HTML5的新特性** - **离线存储**：通过`Application Cache`，可以缓存商城...
HTML5+CSS3网页设计-第三章 表单及验证.pptx
最新发布
12-21
在学习HTML5和CSS3网页设计时，理解并熟练掌握这些表单元素和验证属性至关重要，因为它们是构建交互式网页的基础。通过合理布局表单，使用语义化的标签，以及恰当的验证机制，可以创建出既美观又实用的网页表单。在...
HTML5+CSS3移动商城-会员
04-29
2. **表单控件增强**：HTML5提供了新的表单元素，如`<input type="date">`、`<input type="email">`等，这使得数据输入更规范，同时提高了移动设备上的输入体验。 3. **多媒体支持**：内建的`<video>`和`<audio>`...
html5+css3实现酷炫的form表单
11-10
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能强大且视觉效果丰富的form表单提供了无限可能。在本教程中，我们将探讨如何利用这两者的优势来设计和实现酷炫的form表单。 首先，HTML5引入了新的表单元素...
HTML5中video标签的小技巧
george
11-20 7990
1. 低版本webview中事件不触发的问题 2.隐藏视频中的controls 3.低版本webview中封面不显示的问题
CSS学习30：多媒体标签（视频&音频）
玉安_ZhangDe的博客
04-10 3352
视频标签- video 使用语法： <!-- 第一种写法 目前用的越来越多 --> <video src="./media/mi.mp4" autoplay="autoplay" muted controls width="100%" loop poster="./images/pink.jpg"></video> 注意，该标签不兼容ie9以下的浏览器 ，且在谷歌浏览器里自动播放视频，视频得默认静音(muted) 常用属性： 兼容写法 &l.
css选择器设置标签样式
热门推荐
likunkun__的博客
11-14 1万+
css选择器 在html标签上设置style可以给标签设置属性： &lt;div style="background-color: #2459a2;height: 48px;"&gt;啊啊啊&lt;/div&gt; 我们还可以通过&lt;head&gt;标签里设置选择器，这样每种样式只需要写一遍 &lt;head&gt; &lt;meta charset="UTF-8"&amp
CSS3之关系选择器、属性选择器、伪类选择器、伪元素选择器
qq_44170340的博客
07-31 1261
伪元素选择器 1、E:before / E::before(规范写法) before选择器在被选元素的“内容”前面加上内容。用来和content属性一起使用。 格式 p::before{ content:"在p标签元素的内容前加了内容";/*记住一定要加""*/ color:red; content:url("");/*可添加图片*/ } 2、E:after/E::after(规范写法) ...
html多媒体标签
dayexiaofan的博客
01-14 1550
三种多媒体标签的使用 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体embed embed可以可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径也可以是绝对路径。 因为兼容性问题，我们这里只讲解插入网络视频，下面会讲到audio和video视频多媒体。 &amp;lt;embed src=&quot;...
HTML-多媒体标签
小石头
02-19 4234
HTML-多媒体标签
前端基础HTML之多媒体标签、CSS钩子标签和字符实体
zx870121209的博客
03-22 492
多媒体标签 视频标签： <video src="video.webm" autoplay="autoplay自动播放" controls="controls控制条" poster="poster占位海报" loop="loop循环播放" preload="preload预加载" muted="muted静音" width height></video><!...
antd与antd的ProComponents不易察觉的用法
weixin_43852916的博客
06-26 3753
去掉Antd表单input的右侧查看图标（之类的） 可在当前input 内加 allowClear={false}
2020-12/14音视频写法 加伪元素
qq_44359844的博客
12-14 317
audio:源 source:控制 音频： <audio controls="controls"> 内容 </audio> 视频： <video controls="controls"> 内容 </video> poster:给视频加封面 audio：源 src:音频路径 source：控制 autoplay:auto 自动 play播放 自动播放,浏览器版本问题 有些播放不出来 loop:静音 preload: auto(自动)meta
HTML5+CSS3表单设计与验证教程：实战演练与常见元素讲解
在HTML5+CSS3网页设计的第三章中，主要探讨了表单及其验证的相关概念和技术。这一章节旨在帮助学习者理解和掌握在网页开发中创建交互式表单的基础。以下是一些关键知识点： 1. **常见的表单元素**：预习检查部分...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值