HTML5与CSS3
html5
1)html5结构标签
<!-- 结构标签 -->
<header>头结构</header>
<nav>导航结构</nav>
<aside>侧边栏</aside>
<article>文章块</article>
<footer>底部</footer>
2)html5数据列表
<!-- 数据列表标签，相比下拉菜单可以进行删除和写入功能 -->
<!-- input中要设置list属性，里面的值要等于对应数据的datalist的id值，才能进行对应 -->
<!-- option中有两种写法，但是不可让value为空 -->
请填写座驾：<input type="text" list="zj">
<datalist id="zj">
<option>奥托</option>
<option>法拉利</option>
<option value="宝马"></option>
<option value="兰博基尼"></option>
<option value="单车"></option>
</datalist>
3)表单相关
<!-- 非空验证 -->
<!-- required属性就是来设置空判断的 -->
<form action="xx.php" method="get">
<!-- required属性就是来设置空判断的 -->
<!-- autofocus是在刷新后自动获取焦点，即能够直接选中表单 -->
<!-- autocomplete设置是on时，能够对输入过的内容进行保存，此时name中的值对应的就是保存的类似文件夹的地方 -->
<input type="text" required="required" autofocus="autofocus" autocomplete="on" name="qq"/>
<br/>
<input type="submit" value="提交" />
</form>
4)新增表单类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="xx.php" method="get">
<!-- type="email"可以实现邮箱地址的验证 -->
邮箱：<input type="email" /><br/>
<!-- type="url" 就可以验证是否是网址，网址必须包含http:// -->
网址：<input type="url" /><br/>
<!-- type="number" 此时输入框只能输入数字 -->
数字：<input type="number" /><br/>
<!-- type="search" 可以在文本框的最后位置出现X，点击后将内容清空 -->
搜索：<input type="search" /><br/>
<!-- type="datetime-local" 让用户能够直接通过文本框弹出的时间日期进行选择 -->
详细日期：<input type="datetime-local" /><br/>
<!-- type="month"显示月份 -->
月份：<input type="month" /><br/>
<!-- type="week"显示星期 -->
星期：<input type="week" /><br/>
<!-- type="time" 只显示时间 -->
时间：<input type="time" /><br/>
<!-- type="date" 只显示日期 -->
日期：<input type="date" /><br/>
<!-- type="range"显示滑块 -->
滑块：<input type="range" /><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
5)音频文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- src是音频源文件路径，加入controls才能够播放音频，autoplay实现自动播放，loop能让音频循环播放 -->
<!-- 注意，每个浏览器的兼容性不同，音频格式不同可能导致无法播放，因此需要将音频设置为不同的格式且都加载到页面中 -->
<audio src="music.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
<!-- 以下写法能够保证兼容性问题能够解决 -->
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="music.mp3"><source>
<source src="music.ogg"><source>
</audio>
</body>
</html>
6)视频文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- object语句是flash相关的，由于手机使用网页时耗电量过快，因此基本淘汰 -->
<video width="800" height="" controls="controls" loop="loop" autoplay="autoplay">
<!-- 执行循序与音频标签一直，由上至下，能识别哪个就直接播放哪个 -->
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<!-- <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object> -->
<!-- 下面的提示只有在浏览器无法识别视频时才会显示，用户可以点击对应链接下载视频，使用本地播放器来查看 -->
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
</body>
</html>
CSS3圆角属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:100px; height:50px; border: 1px solid black; margin:20px; background: orange;}
/* border-radius:x px用于设置圆角属性，其中x为圆角的弧度 */
/* 只有一个值代表四个方向都一致 */
.div1{border-radius:10px;}
/* 四个值分别代表 左上 右上 右下 左下 */
.div2{border-radius:10px 0 0 0;}
/* 两个值分别代表 左上和右下 右上和左下 */
.div3{border-radius:10px 0;}
.div4{border-radius:10px 10px 0 0;}
.div5{border-radius:0 0 10px 10px;}
.div6{border-radius:10px 20px 30px 40px;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
</html>
CSS3渐变色背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{width:500px;height:50px;border-radius:0px 0px 10px 10px;
/* background:linear-gradient(渐变方向,色值,色值,色值) 色值可以有多个*/
background:linear-gradient(to right,red,blue,yellow);
}
#div2{width:500px;height:50px;border-radius:0px 0px 10px 10px;
/* 渐变方向也可以写成具体的角度值,如:0deg 90deg 180deg 270deg */
background:linear-gradient(90deg,red,blue,yellow);
}
#div3{width:500px;height:50px;border-radius:0px 0px 10px 10px;
/* 可以在颜色值后添加百分比,从0到100设置颜色渐变区域 */
background:linear-gradient(to right,red 30%,blue 80%,yellow 100%);
}
</style>
</head>
<body>
<div id="div1"></div><br/><br/><br/>
<div id="div2"></div><br/><br/><br/>
<div id="div3"></div>
</body>
</html>
盒子阴影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:200px;height:100px;background:yellow;margin:50px;
border:1px solid black; border-radius:20px;
}
/* box-shadow:水平方向 垂直方向 阴影大小 阴影颜色 */
.div1{box-shadow:10px 10px 10px red;}
/* box-shadow加上inset实现的效果是内阴影 */
.div2{box-shadow:10px 10px 10px red inset;}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
透明盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background:url(picture.jpg)}
div{width:300px;height:300px;border-radius:10px;
box-shadow:10px 10px 10px black;
/* background:rgba(红,绿,蓝,透明度值) */
/* 前三个数为透明的色值,最后的数表示透明的效果,若不填数字则是表示透明 */
/* 红，绿，蓝可以用浏览器查看来调试想要的色值 */
/* 透明度值为0-1之间,0代表全透明,1代表不透明 */
background:rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
文字阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background:url(picture.jpg)}
/* 用法与盒子阴影相似，能够让文字在比较花的背景下能够看清楚 */
div{text-shadow:10px 10px 10px white;}
</style>
</head>
<body>
<div>
ArlickArlickArlickArlickArlickArlickArlickArlickArlick
</div>
</body>
</html>
旋转缩放位移
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{background:url()}
div{width:300px;height:100px;border-radius:10px;
border:1px solid black;background:rgba(204,65,65,0.3);
box-shadow:10px 10px 10px black;
margin:100px;
}
/* transform:rotate(角度值)即可实现旋转效果 */
/* rotateX为沿着X轴旋转,rotateY为沿着Y轴,rotate为默认沿着远点旋转 */
.div1{transform:rotate(90deg);}
/* transform:scale(缩放比例)即可实现缩放效果 */
.div2{transform:scale(0.5);}
/* transform:translate(x轴的位移,y轴的位移) */
.div3{transform:translate(0px,0px)}
</style>
</head>
<body>
<div class="div1">
Arlick
</div>
<div class="div2">
Arlick
</div>
<div class="div3">
Arlick
</div>
</body>
</html>
过渡属性
在变化时进行过渡的动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:200px;height:50px;background:rgba(255,96,96,0.3);
margin:50px;
/* 在变化时进行过渡，慢慢的进行变化 */
/* transition:all 1s; all代表所有属性只要变化都以过渡动画的形式展示,1s代表动画的执行时间 */
/* transition:all 1s 1s ease-in
all表示全部变化
第一个时间代表动画运行时间
第二个时间代表动画运行时间
ease代表运行方式，ease为默认运行 ease-in代表变加速 ease-out代表变减速 ease-in-out代表先加速变减速 */
transition:all 1s;
}
/* hover是css的伪类,在鼠标悬停时的样式 */
.div1:hover{transform:scale(1.5);background:rgba(55,196,26,0.3);}
/* hover{transform:rotate(360deg);transform:scale(1.5);}是错误写法,同一个属性名,前一个会被后一个顶替 */
.div2:hover{transform:rotate(360deg) scale(1.5);}
</style>
</head>
<body>
<div class="div1">Arlick</div>
<div class="div2">Arlick</div>
</body>
</html>
简单的自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:50px;height:50px;border:1px solid #000;border-radius:10px;
/* animation 动画名字 时间 可以调动动画 */
/* infinite 无限循环动画 alternate 逆向动画 */
animation: go 2s infinite alternate;
}
@keyframes go{
/* 开始时的状态 */
from{background:red;}
/* 结束时的状态 */
to{background:blue;}
</style>
</head>
<body>
<div>
Arlick
</div>
</body>
</html>
自定义动画练习
实现效果，图片的抖动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{width:50px;height:50px;border:1px solid #000;border-radius:10px;
/* animation 动画名字 时间 可以调动动画 */
/* infinite 无限循环动画 alternate 逆向动画 */
animation: go 2s infinite alternate;
}
@keyframes go{
/* 开始时的状态 */
from{background:red;}
/* 结束时的状态 */
to{background:blue;}
}
/* animation: 动画名称 动画时间 延迟运动时间 变速运动效果 无限循环动画 逆向动画*/
img:hover{animation: move 0.1s 1s ease infinite alternate}
/* 可以使用百分比替代默认的from和to */
@keyframes move{
0%{transform:rotate(-5deg);}
50%{transform:rotate(0deg);}
100%{transform:rotate(5deg);}
}
</style>
</head>
<body>
<div>
Arlick
</div>
<img src="picture.jpg"/>
</body>
</html>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
