HTML+CSS复习第三天
H5新标签
新增标签必须在IE9版本进行使用 如果考虑兼容性问题，我们不能使用这些标签
H5新增的语义化标签有：
Header标签：头部标签
Footer标签：尾部标签
nav标签： 导航标签
article标签：独立内容区域标签
aside标签：侧边栏标签
veido:视频标签
audio：音频标签
等等。。。
字体图标
字体图标：我们可以使用[阿里矢量图表库](https://www.iconfont.cn/)
里面有相应的使用的介绍
新增input标签属性
"email"> ：带有邮箱的输入框
"search">：带有搜索的输入框
"tel">：带有手机号的搜索框
"number">：带有数值类型的搜索框
"time">：带有时间的input表单
"color">：带有颜色的表单，自己可以定义颜色
等等，还有很多
盒子圆角和阴影
设置圆角我们可以使用在border-radius
我们引用使用的是：box-shadow: 1px 1px 1px red(参数：第一个是x轴,第二是y轴，第三个是阴影的模糊度，第四个是颜色)
多背景
background-image:url(),url()
渐变
线性渐变:background:linear-gradient(red 0%, green 40%, blue 70%, yellow 100%);
径向渐变:background: radial-gradient(center , shape size, start-color, ..., last-color);
媒体查询
在不同的屏幕尺寸下展示不同的样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
@media all and (max-width:1920px) {
html {
font-size: 100px;
}
}
@media all and (max-width:900px) {
html {
font-size: 60px;
}
div {
display: none;
}
}
@media all and (max-width:500px) {
html {
font-size: 40px;
}
div {
display: block;
}
}
div {
font-size: 1rem;
}
style>
head>
<body>
<div>文字div>
body>
html>
弹性盒flex布局
弹性盒子是 CSS3 的一种新的布局模式。
flex布局分为容器（父盒子）和项目（子盒子）
以下是容器中的操作样式
dispaly:flex：开启flex布局
flex-direction:主轴方向 ，他的存在四个
从左往右：flex-direction:row (默认)
从右往左：flex-direction:row-reverse
从上往下：flex-direction:column
从下往上:flex-direction:column-reverse
flex-wrap:是否换行 （默认不换行）
flex-wrap:wrap
flex-wrap:nowrap
flex-wrap:wrap-reverse(换行：第一行在下方)
以下是项目的操作样式
justify-content:设置子盒子主轴方向的排列方式
justify-contnet:flex-start（居左，默认方式）
justify-content:flex-end (居右)
justify-content:center (居中)
justify-content: space-between (靠墙)
justify-content: space-around (左右间距一样平分)
justify-content: space-evenly （盒子间距一样）
align-items:设置子盒子侧轴方向的排列方式
align-items:flex-start (靠上)
align-items:flex-end (靠下)
align-items:center (居中)
align-items:stretch (自动填充高度，默认样式)
过渡
transition: all .5s linear 1s
四个参数代表的是：
第一个参数：触发对象
第二个参数是 完全执行所需要的时间
第三个参数是：运动曲线
第四个参数是： 延迟几秒执行
转换
位移：transform:translate(100px,100px) 第一个参数代表的是x轴方向 第二个参数代表的是y轴方向
旋转：transform:rotate(60deg) 里面的参数是度数
倾斜：transform:skew(15deg) 参数同上
缩放：transform:scale(2) 参数是缩放的倍数 是等比缩放
12306网站注册页案例
html
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>Documenttitle>
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<form class="form" action="">
<div class="top">
<div class="msg">
账户信息
div>
div>
<div class="content">
<ul class="list">
<li>
<div class="left">
<span>*span>
用 户 名：
div>
<div class="right">
<input type="text" placeholder="用户名设置成功后不可修改">
div>
<div class="tips">
6-30位字母、数字或“_”,字母开头
div>
li>
<li>
<div class="left">
<span>*span>
登录密码：
div>
<div class="right">
<input type="text" placeholder="6-20位字母、数字或符号">
div>
<div class="tips">
<span>span>
<span>span>
<span>span>
div>
li>
<li>
<div class="left">
<span>*span>
确认密码：
div>
<input type="text" placeholder="再次输入您的登录密码">
<div class="tips">div>
li>
<li>
<div class="left">
<span>*span>证件类型：
div>
<select name="" id="">
<option value="">中国居民身份证option>
<option value="">港澳台居民身份证option>
<option value="">港澳居民来往内地通行证option>
<option value="">台湾居民来往大陆通行证option>
<option value="">护照option>
<option value="">外国人永久居留身份证option>
select>
<div class="tips">div>
li>
<li>
<div class="left">
<span>*span>
姓名：
div>
<input type="text" placeholder="请输入姓名">
<div class="tips">
姓名填写规则 （用于身份核验，请正确填写）
div>
li>
<li>
<div class="left">
<span>*span>
证件号码：
div>
<input type="text" placeholder="请输入你的证件号码">
<div class="tips">
(用于身份核验，请正确填写)
div>
li>
<li>
<div class="left">
<span>*span>
优惠(待)类型：
div>
<select name="" id="">
<option value="">成人option>
<option value="">儿童option>
<option value="">学生option>
<option value="">残疾军人option>
select>
<div class="tips">div>
li>
<li style="width:998px; height: 1px;border-top: 1px dashed #DEDEDE;margin: 15px 0;">li>
<li>
<div class="left">
<span>*span>
邮箱：
div>
<input type="text" placeholder="请正确填写邮箱地址">
<div class="tips">div>
li>
<li>
<div class="left">
<span>*span>
手机号码：
div>
<select name="" id="phone">
<option value="">+86 中国option>
select>
<input type="text" placeholder="手机号码" class="phone">
<div class="tips">
请正确填写手机号码，稍后将向该手机号码发送短信验证码
div>
li>
<li>
<input type="checkbox" id="ck" style="margin-right:4px ;">
<label for="ck" >我已阅读并同意遵守label>
<a href="#">《中国铁路客户服务中心网站服务条款》 《隐私权政策》a>
li>
<li class="btn">
下一步
li>
ul>
div>
form>
body>
html>
css
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: Tahoma, "宋体";
}
a {
color: #07f;
text-decoration: none;
}
li {
list-style: none;
}
.form {
width: 980px;
height: 575px;
border: 1px solid #1678be;
margin: 100px auto;
box-sizing: border-box;
border-radius: 5px;
}
.form .top {
width: 100%;
height: 32px;
background-image: linear-gradient(to bottom, #87c3e7, #187abf 83%, #4badda, #66c8e8);
}
.form .top .msg {
padding-left: 20px;
line-height: 30px;
color: #e5f8ff;
font-size: 14px;
}
.form .content {
display: flex;
justify-content: center;
align-items: center;
}
.form .content .list {
padding-top: 40px;
position: relative;
}
.form .content .list li {
display: flex;
margin-bottom: 5px;
text-align: left;
justify-content: center;
align-items: center;
margin-left: -90px;
}
.form .content .list li .left {
line-height: 30px;
height: 30px;
text-align: right;
width: 200px;
padding-right: 5px;
}
.form .content .list li .left span {
color: #f00;
margin-right: 2px;
font-weight: 400;
}
.form .content .list li input {
font-size: 12px;
position: relative;
width: 201px;
height: 18px;
line-height: 18px;
padding: 5px 0 5px 5px;
border: 1px solid #cfcdc7;
outline: none;
}
.form .content .list li input:focus {
border: 1px dashed black;
}
.form .content .list li:nth-child(11) {
margin-left: 234px;
}
.form .content .list li:nth-child(11) input {
width: 13px;
height: 13px;
}
.form .content .list li .phone {
width: 86px;
}
.form .content .list li #phone {
width: 114px;
margin-right: 2px;
}
.form .content .list li select {
width: 208px;
line-height: 18px;
padding: 5px 0 5px 5px;
border: 1px solid black;
font-size: 12px;
}
.form .content .list li .tips {
margin-left: 8px;
color: #FF7F00;
height: 30px;
line-height: 30px;
width: 100px;
white-space: nowrap;
}
.form .content .list li .tips span {
display: inline-block;
width: 40px;
height: 6px;
background-color: #999;
padding: 0 3px;
}
.form .content .list li .tips span:nth-child(1) {
background: #f00;
}
.form .content .list li:nth-child(2) .tips {
width: 100px;
}
.form .content .list .btn {
position: absolute;
left: 58%;
bottom: -75px;
transform: translateX(-50%);
width: 122px;
height: 30px;
background-color: orange;
text-align: center;
line-height: 30px;
color: white;
border-radius: 3px;
}
.form .content .list .btn:hover {
cursor: pointer;
}