H5+C3

最新推荐文章于 2023-02-27 12:45:20 发布

赵剑华

最新推荐文章于 2023-02-27 12:45:20 发布

阅读量181

点赞数

本文链接：https://blog.csdn.net/zhaojianhua1997/article/details/103176114

版权

H5 常用标签：
header
nav
section
aritcle
footer
aside

video:ogg webm mp4
audio:mp3 ogg wav
属性：
width height src controls autoplay loop poster

表单
text password textarea checkbox radio file select button submit reset

H5 表单：
email,url,date,week,month,time,number,color,range,search

H5表单属性
required 必填项
autocomplete 自动记忆
plactholder 提示信息
pattern 正则表达式
autofocus 自动聚焦


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            line-height: 30px;
        }
    </style>
</head>
<body>
<form action="" method="get" id="myform"></form>
<input type="text" form="myform" name="username"/><br/>
<input type="password" form="myform"/><br/>
<input type="file" form="myform"/><br/>
<input type="email" form="myform"/><br/>
<input type="url" form="myform"/><br/>
<input type="date" form="myform"/><br/>
<!--<input type="datetime" form="myform"/><br/>-->
<input type="time" form="myform"/><br/>
<input type="month" form="myform"/><br/>
<input type="week" form="myform"/><br/>
<input type="number" form="myform"/><br/>
<input type="range" form="myform"/><br/>
<input type="search" form="myform" results="1"/><br/>
<input type="tel" form="myform"/><br/>
<input type="color" form="myform"/><br/>
<input list="cars" id="carname"/>
<datalist id="cars">
    <option value="BWM">
    <option value="BBQ">
    <option value="BT">
</datalist>
<input type="submit" form="myform"/>
</body>
</html>

在这里插入图片描述
去边距间距：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img

*{}

选择器
元素选择器

通配符
e 标签选择器
#id id选择器
.class 类选择器

关系选择器
e f 包含选择器
e>f父子选择器
e+f 相邻选择器：e元素后所有的f元素
e~f 兄弟选择器 e后面所有的兄弟元素f
伪类选择器
:link 访问前
:hover 鼠标悬停时
:active 点击激活状态
:visited 访问后
:focus 获取焦点时

UI元素状态伪类选择器
e:checked 选中状态（只针对单选按钮和复选框）
e:enabled 可编辑状态（默认状态）
e:disabled 禁用状态

属性选择器
e[attr]
e[attr=“value”]
e[attr~=“value”] 包含空格及value的e元素
e[attr|=“value”] 以value开头且有分隔符-的e元素
e[attr^=“value”] 以value开头的e
e[attr$=“value”] 以value结尾的e
有[attr*=“value”] attr中包含value的e标签


<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<style>
			p[id]{background:red}
			p[id="green"]{background:green}
			p[class~="yellow"]{background:yellow}
			p[class|="a"]{background:blue}
			
			a[href^="http://"]{color:red;text-decoration:none}
			a[href$="rar"]{color:pink;text-decoration:none;}
			a[href$="rar"]:after{content:url(images/rar.jpg)}
			
			a[href*="o"]{background:green}
		</style>
	</head>
	<body>
		<p id="abc">小红</p>
		<p id="green">小绿毛龟</p>
		<p class="fl yellow">我最喜欢黄色了</p>
		<p class="a-b">小兰兰</p>
		<hr />
		<!--E[att^="值"] 选中以指定值开头的属性的元素-->
		<a href="http://www.baidu.com">百度一下，你就知道</a><br />
		<a href="index.php">返回首页</a><br />
		<!--E[att$="值"] 选中以指定值结尾的属性的元素-->
		<a href="down.rar">点此下载高清无码的高洛峰的AVI大片的种子</a>
		<!--E[att*="值"] 选中包含指定值字符的属性的元素-->
		
	</body>
</html>

伪对象选择器
e:first-letter 第一个字符
e:first-line 第一行
e:before 前
e:after 后
e::selection 选中状态时触发的效果

结构伪类选择器
：root 根选择器
e:first-child 第一个子元素e
e:last-child 最后一个子元素e
e:only-child 唯一的一个子元素e
e:nth-child(n) 第n个子元素e n=odd even 数字公式
e:nth-last-child(n) 倒数第n个子元素e

e:first-of-type 第一个同类型元素
e:last-of-type 最后一个同类型元素
e:only-of-type 唯一同类型元素
e:nth-of-type（n）第n个同类型元素e n=odd even 数字公式
e:nth-last-of-type(n) 倒数第n个同类型元素e

e:empty 空元素

————————————————————————————
box-shadow 盒子阴影
box-shadow:水平位置垂直位置模糊距离阴影大小阴影颜色 [内置或外置]


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>box-shadow效果</title>
    <style>
        #boxshadow {
            width:500px;
            height:300px;
            position: relative;
            -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
            -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
            padding: 10px;
            background: white;
        }

        /* Make the image fit the box */
        #boxshadow img {
            width: 100%;
            height:100%;
         /*   border: 1px solid #8a4419;
            border-style: inset;*/
        }

        #boxshadow::after {
            content: '';
            position: absolute;
            z-index: -1; /* hide shadow behind image */
            -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
            width: 70%;
            left: 15%; /* one half of the remaining 30% */
            height: 100px;
            bottom: 0;
        }
    </style>
</head>
<body>

<div id="boxshadow">
    <img src="rock600x400.jpg" alt="Norway" width="600" height="400">
</div>

</body>
</html>

background-origin:border-box,padding-box,content-box
background-clip::border-box,padding-box,content-box

background:linear-gradient(方向，颜色，……)线性渐变
background:repeating-linear-gradient(方向，颜色……) 重复线性渐变

径向渐变
background:radial-gradient(中心坐标，形状大小，颜色……)
大小：
/closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角/
形状：
circle 或 ellipse（默认椭圆）
background:repeating-radial-gradient() 重复径向渐变
在这里插入图片描述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            /*background: linear-gradient(to top right,red,pink,yellow);*/
            background: repeating-linear-gradient(red 30%,pink 10%,yellow 40%);
        }
        .box-a{
            width:300px;
            height:300px;
            /* background:radial-gradient(60% 70%,closest-side,yellow,red,violet);*/
            background: -webkit-repeating-radial-gradient(blue,green 10%,yellow 20%,black 40%); /* Safari 5.1 - 6.0 */
            background: -o-repeating-radial-gradient(blue,green 10%,yellow 20%,black 40%); /* Opera 11.6 - 12.0 */
            background: -moz-repeating-radial-gradient(blue,green 10%,yellow 20%,black 40%); /* Firefox 3.6 - 15 */
            background: repeating-radial-gradient(blue,green 10%,yellow 20%,black 40%);
        }
        /*closest-side 最近的边
        farthest-side  最远的边
        closest-corner 最近的角
        farthest-corner 最远的角*/
    .box-b{
        width: 300px;
        height: 200px;

        background:-webkit-radial-gradient(30% 20%,circle farthest-side, red,yellow,blue);
        background:radial-gradient(30% 20%,circle farthest-side, red,yellow,blue);
    }
    </style>
</head>
<body>

    <div class="box"></div>
    <p></p>
    <div class="box-a"></div>
<div class="box-b"></div>
</body>
</html>

文本阴影效果
text-shadow:水平位置垂直位置模糊距离颜色

font-face{
font-family:name;
src:url;}

多列
column-count:分列数
column-gap:栏间距
column-rule:分隔线
弹性盒子
父元素中添加
display:flex;
display:-webkit-flex;
添加方向
祖先元素添加:direction:ltr/rtl 排列方向
父元素：flex-direction:row
row-reverse
column
column-reverse
子元素排列方式：（父元素添加）
justify-content:flex-start/
flex-end
center
space-between
space-around
子元素垂直对齐方式(父元素中添加)
align-items:flex-start顶端
flex-end 底端
center 居中
baseline 基线
stretch默认auto
子元素换行方式（父元素添加）
flex-wrap:nowarp单行（不换行，子元素会缩放）
wrap多行，自动换行
wrap-reverse换行，反转排列
initial初始化默认效果相似
inherit默认（不换行）
align-content 设置行对齐方式（添加到父元素中）
前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around
默认/顶端、底端、居中、两端、平均分布

子元素顺序（子元素添加）
order：1，值越小越靠前可以为负值
子元素对齐（子元素添加）
margin:auto;对象自动留白

子元素纵向对齐（子元素添加）
align-self:auto/flex-start/flex-end/center/baseline/stretch
有父元素按align-item值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走

按比例分配元素（子元素添加）
flex:比例值
如：
div>div*3
子元素按顺序添加flex:1 flex:3 flex:1 结果：1：3：1

Resize
resize属性指定一个元素是否是由用户调整大小的。
resize: none|both|horizontal|vertical: 无、两边、水平、垂直
outline
轮廓线
Outline-offset 轮廓线距离
媒体查询
针对不同媒体类型可以定制不同的样式规则
一种：

响应式页面
单位：
Px % em rem
Img{}
Width:100% min-width max-width
动画
移动：
Translate(水平位移，垂直位移)
translateX(水平位移)
translateY（垂直位移）
旋转
Rotate(角度deg)
缩放
Scale(n) n 大于1放大，在0－1之间缩小
倾斜
Skew(X轴倾斜，Y轴倾斜)
应用方式：
Transform:动画名称；
过渡效果：
Transition:transform 时间频率
频率：linear均速
Ease 慢开始，变快，慢结束
Ease-in 慢开始
Ease-out 慢结束
Ease-in-out 慢开始和结束
keyframe动画
定义动画
@keyframe name{
//方法1
from{}
to{}
//方法2
0%{}
50%{}
100{}
}
调用：
animation:延迟时间动画名称动画运行时间频率循环结束后反向运行
eg:
animation:2s move 3s linear infinite alternate;
Move:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background: yellowgreen;
            transition: all 1s linear;
        }
        div:hover{
            width:300px;
            background:orangered;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

ratate:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background:pink;
            transition: transform 1s linear;
        }
        div:hover{
            transform:translateX(200px) rotate(360deg) ;
            /*transform-origin: left bottom;*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

scale:


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background:pink;
            transition: transform .5s linear;
        }
        div:hover{
            transform: scale(0.5);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

translate


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            background:pink;
            transition: transform .3s linear;
        }
        div:hover{
            -webkit-transform: translateY(100px);
            -moz-transform: translateY(100px);
            -ms-transform: translateY(100px);
            -o-transform: translateY(100px);
            transform: translateY(100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>