07-H5新增属性、标签和伪类
1.练习-京东定位下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="font/iconfont.css">
<style type="text/css">
/*
1 鼠标移入a之后需要给a加边框，此时加边框之后a就会变宽，导致后续元素后移。
解决方法：直接给a加入1px的透明边框。
2 a需要加相对定位，相对定位会占用标准流的位置，才能保证包裹a的div有宽度，后面的元素不会被压向前。
3 鼠标移入a之后，通过不给a设置底边框，又让a压在cityName上，来达到a没有底边框和cityName缺失左上边框的效果。
4 cityName需要和a平级，才能保证在cityName和都a使用定位后，通过设置a的z-index，使得a压在cityName上。
如果cityName属于a的子集，则由于元素决定子元素的层级，a又是先写的，所以a不能压在cityName上。
*/
* {
padding: 0;
margin: 0;
}
.clearFix:after {
content: "";
display: block;
clear: both;
}
body {
background: #e3e4e5;
}
a {
display: block;
text-decoration: none;
}
.top {
height: 31px;
background: #e3e4e5;
}
.center {
width: 1190px;
height: 30px;
line-height: 30px;
margin: 0 auto;
background: gray;
font-size: 14px;
position: relative;
}
.city {
float: left;
position: relative;
}
.city a {
color: green;
height: 29px;
line-height: 29px;
padding: 0 5px;
/* 1 通过给a提前加上1px的边框，来解决鼠标移入a之后，a显示边框时a变宽，导致后面的元素后移的问题。 */
border: 1px solid transparent;
/* 2 a需要加相对定位，相对定位会占用标准流的位置，才能保证包裹a的div有宽度，后面的元素不会被压向前。 */
position: relative;
z-index: 100;
}
.city:hover a {
color: orange;
background: white;
border-color: white;
border-bottom: none;
}
.city .cityName {
width: 320px;
height: 450px;
background: white;
position: absolute;
top: 30px;
display: none;
}
.city:hover .cityName {
display: block;
}
/* i和span浮动，使得i和span可以贴在一起。 */
.city a i {
color: red;
float: left;
margin-right: 3px;
}
.city a span {
float: left;
}
.login {
float: left;
}
.main {
width: 1190px;
height: 30px;
margin: 0 auto;
background: orange;
}
</style>
</head>
<body>
<div class="top">
<div class="center">
<div class="city">
<a href="#" class="clearFix">
<i class="iconfont icon-dingwei1"></i>
<span>北京</span>
</a>
<div class="cityName"></div>
</div>
<div class="login">
<a href="#">请登录</a>
</div>
</div>
<div class="main">
</div>
</div>
</body>
</html>
2.icon图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
/*
1 icon图标是一种图片的格式，通常用在浏览器选项卡中。
2 通过在线网站制作icon图标。
3 将icon放入项目的根路径中。
4 通过link引入icon图标。
*/
</style>
</head>
<body>
</body>
</html>
3.H5简介
- HTML5简称H5，HTML5建立在HTML4的基础上，新增了一些语义标签，标签属性。
- HTML5新增了一些API(Application Programming Interface)应用程序接口，本地存储、地理位置、绘制图形、音频和视频....
- H5新增的这些功能只能用在高级浏览器。
4.h5新增语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
header 头部标签；nav 导航标签；section 区域标签；
aside 侧边栏标签；article 文章标签；footer 底部标签；
*/
header {
width: 1200px;
height: 30px;
background: skyblue;
}
nav {
width: 1200px;
height: 50px;
background: pink;
}
section {
width: 1200px;
height: 100px;
background: yellowgreen;
}
aside {
width: 200px;
height: 100px;
background: blue;
float: left;
}
article {
width: 900px;
height: 100px;
float: right;
background: orange;
}
footer {
width: 1200px;
height: 30px;
background: gray;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航标签</nav>
<section>
<aside>侧边栏标签</aside>
<article>文章标签</article>
</section>
<footer>底部标签</footer>
</body>
</html>
5.h5新增标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 1 disabled禁用，disabled和checked一样，有三种写法。-->
<input type="text" disabled="disabled">
<input type="button" value="按钮" disabled="disabled">
<form action="https://www.baidu.com">
<!-- 2 required，非空验证。 -->
<input type="text" required="required">
<!-- 3 autofocus，自动获取焦点 -->
<input type="text" autofocus="autofocus">
<!-- 4 placeholder，提示文本。 -->
<input type="text" placeholder="提示文本">
<!-- 5 autocomplete，自动补全。off，默认值，关闭自动补全；on，开启自动补全。
autocomplete，需要配置name属性使用，根据name属性将提交的值存储到浏览器。-->
<input type="text" autocomplete="on" name="name">
<input type="submit" value="提交">
</form>
</body>
</html>
6.h5新增表单类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-h5新增表单类型</title>
</head>
<body>
<form action="http://www.baidu.com">
<!-- 1 email 邮箱类型。 -->
<input type="email">
<!-- 2 url 网址类型。 -->
<input type="url">
<!-- 3 datetime-local 本地时间类型。-->
<input type="datetime-local">
<!-- 4 month，月类型，精确到月。 -->
<input type="month">
<!-- 5 date 日类型，精确到日。 -->
<input type="date">
<!-- 6 week 周类型，精确到周。 -->
<input type="week">
<!-- 7 color 颜色 -->
<input type="color">
<!-- 8 range 滑块 -->
<input type="range">
<input type="submit" value="提交">
</form>
</body>
</html>
7.音频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!--
音频标签 audio source
音频属性 controls，控制面板，设置controls控制面板后才显示音频的播放按钮。
loop 循环播放。
autoplay 自动播放，目前IE可以使用。
-->
<!-- 单文件引入。 -->
<audio src="music/yinyue.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
<!-- 多文件引入，当浏览器不支持yinyue.ogg文件格式时，会将向下加载yinyue.mp3。 -->
<audio controls="controls" loop="loop" autoplay="autoplay">
<source src="music/yinyue.ogg">
<source src="music/yinyue.mp3">
</audio>
</body>
</html>
8.视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!--
视频标签 video
视频标签属性 controls，控制面板，设置controls控制面板后才显示视频的播放按钮。
loop 循环播放。
autoplay 自动播放，目前IE可以使用。
-->
<!-- 单文件引入。 -->
<video src="video/movie.mp4" controls="controls" loop="loop" autoplay="autoplay"></video>
<!-- 多文件引入，当浏览器不支持movie.ogg文件格式时，会将向下加载movie.mp4。 -->
<video controls="controls" loop="loop" autoplay="autoplay">
<source src="video/movie.ogg">
<source src="video/movie.mp4">
<source src="video/movie.webm">
</video>
</body>
</html>
9.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* 1 下一个紧挨着的元素选择器。 */
h5+p {
color: red;
}
/* 2 后面所有的兄弟选择器。 */
h5~span {
color: orange;
}
</style>
</head>
<body>
<h5>姓名</h5>
<p>p1</p>
<span>span1</span>
<span>span2</span>
</body>
</html>
10.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* 属性选择器。 */
/* 1 表示有属性名的选择器，[title]表示有title属性的元素。 */
div[title] {
color: red;
}
/* 2 表示div中有class属性，并且class属性的值为box3 */
div[class='box3'] {
color: orange;
}
/* 3 表示class属性的值中包含demo。 */
div[class *= 'demo'] {
color: gray;
}
/* 4 表示class属性的值以test开头。 */
div[class ^= 'test'] {
color: yellowgreen;
}
/* 5 表示class属性的值以test结尾。 */
div[class $= 'test'] {
color: pink;
}
/* 6 表示class属性的值包含单独单词 */
div[class ~= 'test101'] {
color: skyblue;
}
</style>
</head>
<body>
<div>div01</div>
<div title="box">div02</div>
<div class="box3">div03</div>
<div class="demo">div04</div>
<div class="test">div05</div>
<div class="test1">div06</div>
<div class="atest">div07</div>
<div class="test101">div08</div>
<div class="test10 b">div09</div>
</body>
</html>
11.伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* 1 first-child和last-child会受到周围元素的影响。 */
/* 2 ul的第一个子元素li。如果ul第一个元素不是li，则不会起作用。 */
ul li:first-child {
color: red;
}
/* 3 ul的最后一个子元素li。 */
ul li:last-child {
color: red;
}
/* nth-child是根据编号选择，编号可以是odd奇数、even偶数、也可以是数字1、也可以是表达式，表达式必须是n，n从0开始计数。 */
/* 4 ul的子元素li，并且li在ul的位数是奇数。 */
ul li:nth-child(odd) {}
/* 5 ul的子元素li，并且li在ul的位数是偶数。 */
ul li:nth-child(even) {}
/* 6 ul下的第一个li */
ul li:nth-child(1) {}
/* 7 ul下的所有li。 */
ul li:nth-child(n) {}
/* 8 ul下的偶数li。 */
ul li:nth-child(2n) {}
/* 9 nth-last-child是倒序的意思。如nth-last-child(1)，倒数第一个。 */
ul li:nth-last-child(odd) {}
ul li:nth-last-child(even) {}
ul li:nth-last-child(1) {}
ul li:nth-last-child(n) {}
ul li:nth-last-child(2n) {}
/* ul下只有li元素，并且只有一个li元素。 */
ul li:only-child {}
/* 10 不受周围元素影响。 */
/* 11 ul下的第一个li。 */
ul li:first-of-type {}
/* 12 ul下的全部li。 */
ul li:nth-of-type(n) {}
/* 13 ul下的最后一个li。 */
ul li:last-of-type {}
/* 14 ul下的全部li。 */
ul li:nth-last-of-type(n) {}
/* 15 ul下只有一个ul元素，此时可以有出li外的其他元素。 */
ul li:only-of-type {}
/* 16 div的内容为空，内容包含：文本、标签、空格、换行。 */
div:empty {}
</style>
</head>
<body>
<ul>
<span>span</span>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ol>
<div></div>
</body>
</html>
12.练习-携程导航移动版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-携程导航移动版</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
padding: 10px;
}
nav ul {
overflow: hidden;
}
nav ul li {
float: left;
width: 33.33%;
}
nav ul li a {
display: block;
height: 40px;
background: orange;
color: #fff;
text-align: center;
line-height: 40px;
text-decoration: none;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
/* 给a加了背景色，就需要给a加圆角。如果给ul加圆角，则a的背景色会将圆角覆盖。 */
nav ul li:first-of-type a {
height: 81px;
line-height: 81px;
border-radius: 10px 0 0 10px;
}
nav ul li:last-of-type a:first-of-type {
border-radius: 0 10px 0 0;
}
nav ul li:last-of-type a:last-of-type {
border-radius: 0 0 10px 0;
}
nav:last-of-type {
margin-top: 20px;
}
nav:last-of-type a {
background: yellowgreen;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">酒店</a>
</li>
<li>
<a href="#">酒店</a>
<a href="#">酒店</a>
</li>
<li>
<a href="#">酒店</a>
<a href="#">酒店</a>
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<a href="#">酒店</a>
</li>
<li>
<a href="#">酒店</a>
<a href="#">酒店</a>
</li>
<li>
<a href="#">酒店</a>
<a href="#">酒店</a>
</li>
</ul>
</nav>
</body>
</html>
13.focus伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
input[type='text'] {
background: red;
}
/* :focus获取焦点，获取焦点后变为橙色。 */
input[type='text']:focus {
background: orange;
}
</style>
</head>
<body>
<input type="text" value="v">
</body>
</html>
14.checked伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-checked伪类</title>
<style type="text/css">
input[type='checkbox'] {
width: 500px;
height: 500px;
background: pink;
/* 清除表单默认样式。快捷键 app tab */
/* 带前缀的属性属于测试阶段，前缀为浏览器的内核。 */
/*
每个浏览器内核对相同的属性可能会有不同的实现，
或者有的浏览器内核对一些属性就没有实现。
*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/*
浏览器 内核 前缀
chrome webkit(blink) -webkit-
safari webkit -webkit-
opear webkit -o-
firefox gecko -moz-
ie trident -ms-
*/
}
/* :checked选中伪类，当被选中时背景变为橙色。 */
input[type='checkbox']:checked {
background: orange;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
15.自定义复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
input[type='checkbox'] {
width: 22px;
height: 22px;
/* 清除表单默认样式。 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("img/icon_check.png") no-repeat 0 0;
/* 去掉复选框的外部轮廓 */
outline: none;
}
input[type='checkbox']:checked {
width: 24px;
height: 24px;
background: url("img/icon_checked.png") no-repeat 0 0;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
16.target伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/* :target，目标状态伪类，锚点连接后的目标。 */
/* 通过锚点定位到p后，p的宽度和北京色发生变化。 */
p:target {
width: 200px;
background: yellow;
}
</style>
</head>
<body>
<p id="one">111</p>
<p>111</p>
<p>111</p>
<p id="two">111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<a href="#one">去第一个目标</a>
<a href="#two">去第二个目标</a>
</body>
</html>
17.京东轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 使用li存放全部的大图，给li设置相同位置的定位（全部的li都是left:0;），
让其叠加到一起。
2 将小图放到a中，点击a后通过锚点跳转。然后通过target伪类，改变具体的li的
z-index来实现轮播的效果。
*/
* {
padding: 0;
margin: 0;
list-style: none;
}
a, img {
display: block;
}
.box {
width: 806px;
height: 592px;
background: orange;
margin: 10px auto;
position: relative;
}
.box .top {
height: 507px;
}
.box .top li {
position: absolute;
left: 0;
right: 0;
}
.box .top li:target {
z-index: 2;
}
.box .top li a img {
width: 806px;
height: 507px;
}
.box .top li:first-of-type {
z-index: 1;
}
.box .bottom li {
float: left;
margin-right: 5px;
margin-top: 5px;
}
.box .bottom li:last-of-type {
margin-right: 0;
}
.box .bottom li a img {
width: 130px;
height: 80px;
}
</style>
</head>
<body>
<div class="box">
<ul class="top">
<li id="jd001">
<a href="#">
<img src="img/jd001.jpg" alt="">
</a>
</li>
<li id="jd002">
<a href="#">
<img src="img/jd002.jpg" alt="">
</a>
</li>
<li id="jd003">
<a href="#">
<img src="img/jd003.jpg" alt="">
</a>
</li>
<li id="jd004">
<a href="#">
<img src="img/jd004.jpg" alt="">
</a>
</li>
<li id="jd005">
<a href="#">
<img src="img/jd005.jpg" alt="">
</a>
</li>
<li id="jd006">
<a href="#">
<img src="img/jd006.jpg" alt="">
</a>
</li>
</ul>
<ul class="bottom">
<li>
<a href="#jd001">
<img src="img/jd001.jpg" alt="">
</a>
</li>
<li>
<a href="#jd002">
<img src="img/jd002.jpg" alt="">
</a>
</li>
<li>
<a href="#jd003">
<img src="img/jd003.jpg" alt="">
</a>
</li>
<li>
<a href="#jd004">
<img src="img/jd004.jpg" alt="">
</a>
</li>
<li>
<a href="#jd005">
<img src="img/jd005.jpg" alt="">
</a>
</li>
<li>
<a href="#jd006">
<img src="img/jd006.jpg" alt="">
</a>
</li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号