语义化标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
nav, header{
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
section{
width: 500px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
视频标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
video{
width: 100%;
}
</style>
</head>
<body>
<video src="media/mi.mp4" muted="muted" controls="controls" loop="loop" poster="img/mi9.jpg"></video>
</body>
</html>
音频标签
谷歌浏览器把音频和视频自动播放给禁止了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>
input表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 我们验证的时候必须添加form表单域 -->
<form action="" method="">
<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>
</html>
表单属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input::placeholder {
color: #f00;
}
</style>
</head>
<body>
<form action="" method="">
<input type="search" name="sear" id="" required="required" placeholder="零食" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html>
属性选择器
类选择器和属性选择器 伪类选择器 权重都是10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 必须是input,但是同时具有value属性,选择这个元素 [] */
/* input[value]{
color: red;
} */
input[type="text"]{
color: red;
}
div[class^="icon"]{
color: #87CEEB;
}
section[class$="data"]{
color: green;
}
/* 类选择器和属性选择器 伪类选择器 权重都是10 */
</style>
</head>
<body>
<!-- 1.利用属性选择器可以就可以不用借助于类或id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2.属性选择器还可以选择属性=值的某些元素(重点) -->
<input type="text" value="请输入用户名">
<input type="password">
<!-- 3.属性选择器可以选择属性属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>打酱油的</div>
<!-- 4.属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">我是谁?</section>
<!-- 5.属性选择器可以选择含有属性值的某些元素 -->
</body>
</html>
结构伪类选择器-选择第n个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1.选择ul里的第一个孩子 */
ul li:first-child{
background-color: #008000;
}
/* 2.选择ul里的最后个孩子 */
ul li:last-child{
background-color: #008000;
}
/* 3.选择ul里的某个孩子 */
ul li:nth-child(3){
background-color: aqua;
}
</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>
</html>
nth-child选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 偶数 */
ul li:nth-child(2n){
background-color: #ccc;
}
/* 奇数 */
ul li:nth-child(2n+1){
background-color: gray;
}
/* 前三个 */
ol li:nth-child(-n+3){
background-color: #00FFFF;
}
/* 从第四个开始 */
ol li:nth-child(n+4){
background-color: red;
}
/* 3的倍数 */
section div:nth-child(3n){
background-color: blueviolet;
}
</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>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
<section>
<div>我是第1个孩子</div>
<div>我是第2个孩子</div>
<div>我是第3个孩子</div>
<div>我是第4个孩子</div>
<div>我是第5个孩子</div>
<div>我是第6个孩子</div>
<div>我是第7个孩子</div>
<div>我是第8个孩子</div>
</section>
</body>
</html>
nth-of-type选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li:first-of-type{
background-color: skyblue;
}
ul li:last-of-type{
background-color: skyblue;
}
ul li:nth-of-type(2n){
background-color: red;
}
/* nth-child会把所有的盒子都排列序号 */
/* 光头强1号,熊大二号,熊二三号 */
section div:nth-child(1){
background-color: green;
}
/* nth-child会把指定的盒子都排列序号 */
/* 熊大一号,熊二二号 */
section div:nth-of-type(1){
background-color: blue;
}
</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>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: #bfa;
}
/* 权重为2 */
div::before{
/* content必须写 */
content: '我';
}
div::after{
content: '迪迦奥特曼';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
伪元素选择器使用场景1：伪元素字体图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after{
position: absolute;
top: 10px;
right: 10px;
font-family: "iconfont";
content: '\e665';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
伪元素选择器-仿土豆效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tudo{
position: relative;
width: 444px;
height: 320px;
background-color: #bfa;
margin: 100px auto;
}
.tudo img{
width: 100%;
height: 100%;
}
.tudo::before{
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4) url(img/arr.png) no-repeat center;
}
.tudo:hover::before{
display: block;
}
</style>
</head>
<body>
<div>
<div class="tudo">
<img src="img/tudou.jpg" >
</div>
<div class="tudo">
<img src="img/tudou.jpg" >
</div>
<div class="tudo">
<img src="img/tudou.jpg" >
</div>
<div class="tudo">
<img src="img/tudou.jpg" >
</div>
</div>
</body>
</html>
盒子模型border-box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{
margin: 0;
padding: 0;
box-sizing: border-box;
} */
div{
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p{
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是width的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>小猪佩奇</div>
<p>小猪佩奇</p>
</body>
</html>
图片模糊处理(filter滤镜)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
/* blur是一个函数,数值越大图像越模糊 */
filter: blur(5px);
}
img:hover{
filter: blur(0);
}
</style>
</head>
<body>
<img src="img/pink.jpg" >
</body>
</html>
calc函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
width: 300px;
height: 200px;
background-color: pink;
}
.son{
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
css3过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: red;
/* transition: width 0.5s, height 0.5s; */
transition: all 0.5s;
}
div:hover{
width: 400px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
进度条练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bar{
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in{
width: 50%;
height: 100%;
background-color: red;
/* 谁做过渡给谁加 */
transition: all 0.5s;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
