html5+css3 基础
2016-03-10 16:29
417 查看
html5相关基础
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5基础</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
html5 语义标签：
header 头标签
nav 导航标签
aside 侧标签
article 文章标签
footer 页脚标签
section 章节标签
表单属性:
required:必填
placeholder：提示
autofocus:自动获取焦点
<form>
<input type="text" name="username" required placeholder="请填写..." autofocus />
<input type="submit" name="submit" value="提交">
</form>
input 标签的 type属性：
<form>
邮件:<input type="email" name="email">
日期:<input type="date" name="date">
网址:<input type="url" name="url">
手机号:<input type="number" name="number">
亮度:<input type="range" name="range" min="0" max="255">
颜色:<input type="color" name="color">
地址:
<select>
<optgroup label="北京">
<option>天河区</option>
<option>越秀区</option>
</optgroup>
<optgroup label="长沙">
<option>芙蓉区</option>
<option>天心区</option>
</optgroup>
</select>
html5 新增 datelist：
<datalist id="gift">
<option>奥迪</option>
<option>迪奥</option>
<option>奥利奥</option>
</datalist>
<input type="text" list="gift">
<input type="submit" name="submit" value="提交">
</form>
<Br><Br>
R:<input id="txtR" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
G:<input id="txtG" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
B:<input id="txtB" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
<script type="text/javascript">
$(function(){
$("input[type=range]").change(function(e){
var red=$("#txtR").val();
var green=$("#txtG").val();
var blue=$("#txtB").val();
$(this).next().html($(this).val());
$("body").css("background-color","rgb("+red+","+green+","+blue+")");
});
});
//$(document).ready(function(e){});
</script>
<br><br>
音频播放（支持.mp3,.ogg）:<br>
autoplay:自动播放<br>
controls:显示控制面板<br>
第一种:<br>
<audio src="test.mp3" autoplay="autoplay" controls="controls" >不支持该音频格式!</audio><br>
第二种:<br>
<audio autoplay="autoplay" controls>
<source src="test.mp3"></source>
<source src="test.ogg"></source>
</audio><br>
视频播放:<br>
<video autoplay="autoplay" controls="controls">
<source src="test.mp4">
<source src="test.ogg">
<source src="test.webm">
</video><br>
音乐导航:<br>
<ul id="nav">
<li class="liclick">我的主页</li>
<li>新闻头条</li>
<li>电 视 剧</li>
<li>最新电影</li>
<li>小游戏</li>
<li>小说大全</li>
<li>旅游度假</li>
<li>今日团购</li>
<li>品牌特卖</li>
</ul>
<audio src="1.mp3"></audio>
<audio src="2.mp3"></audio>
<audio src="3.mp3"></audio>
<audio src="4.mp3"></audio>
<audio src="5.mp3"></audio>
<audio src="6.mp3"></audio>
<audio src="7.mp3"></audio>
<audio src="8.mp3"></audio>
<audio src="9.mp3"></audio>
<style>
#nav{
list-style-type:none;
margin:5px auto 0px;
width:960px;
height:38px;
color:#333;
font-size:14px;
padding:0px;
overflow:hidden;
}
#nav li{
width:105px;
height:36px;
float:left;
text-align:center;
line-height:38px;
border-top:#C9CBCE solid 1px;
border-left:#C9CBCE solid 1px;
border-bottom:#C9CBCE solid 1px;
cursor:pointer;
}
#nav li:last-child{
border-right:#C9CBCE solid 1px;
}
#nav .liclick{
border-top:#45B82A solid 1px;
border-bottom:none;
}
#nav span{
width:100%;
height:38px;
position:relative;
display:block;
z-index:-1;
}
</style>
<script>
$(function(){
//导航点击效果
$("#nav li").click(function(){
$(".liclick").removeClass("liclick");
$(this).addClass("liclick");
});
//导航背景效果
$("#nav li").append("<span>");
var colors=["#B9D329","#C0EBF7","#B9D330","#69BCF3","#79d9f3","#fa5f94","#acd180","#fab4cc","#ffae5b"];
$("#nav span").each(function(i,o){
$(o).css("background-color",colors[i]);
});
//鼠标移动导航效果
$("#nav li").hover(
//鼠标悬浮触发
function(){
$(this).children("span").animate({'top':-38},200);
var index=$(this).index();
$("audio").get(index).play();
},
//鼠标移开触发
function(){
$(this).children("span").animate({'top':0},200);
}
);
});
</script>
</body>
</html>css3 相关基础
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3基础</title>
</head>
<body>
1.css3 属性选择器：<br>
<style>
input[class]{/*有class属性的*/
background-color:#cd5c5c;
}
input[class="first"]{/*class 属性是first的元素*/
background-color:#cd5c5c;
}
[class="first"]{/*class等于first的元素*/
background-color:#cd5c5c;
}
input[name^=first]{/*input 的name属性以first开头的元素*/
background-color:#cd5c5c;
}
input[name$=name]{/*input 的name属性以name结尾的元素*/
}
input[name*=str]{ /*input的name属性包含str的元素*/
}
</style>
<input type="text" name="firstname" value="tom" class="first"><br>
<input type="text" name="middelname" value="tom"><br>
<input type="text" name="lastname" value="tom"><br>
<input type="text" name="firstcity" value="beijing" class="second"><br>
<pre>
2.css3 伪类选择器：<br>
css2的伪类有-> :hover,:link,:active, :visited
css3新增伪类选择器:
E:first-child E的父元素的第一个子元素
E:first-last E的父元素的最后个子元素
:root 类似html，是文档的跟元素。
E:nth-child(index) E的父元素子元素根据索引获得
E:nth-last-child(index)E的父元素子元素根据索引获得倒数第几个
E:enabled 匹配可用的元素
E:disabled 匹配不可用的元素
E:checked 匹配选中的元素
:before
:after
内容块居中:
父元素: display:table
内容元素:display:table-cell
</pre>
3.css3 圆角效果
border-radius:20px; /*四个角的半径为20px*/
4.盒子阴影
box-shadow: 水平阴影 垂直阴影 羽化 阴影大小 颜色
</body>
</html><style type="text/css">
/*2D动画-移动*/
/*1.居中*/
.div6
{
width: 200px;
height: 200px;
text-align: center;
vertical-align: middle;
background-color: silver;
position: absolute; /*绝对定位*/
line-height: 38px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /*以自生为原点移动上下移动50%*/
}
/*2.旋转*/
.div2:hover
{
/*transform-origin:top left;*/
transform: rotate(25deg);
}
/*3.缩放*/
.div3:hover
{
/*transform:scale(0.5);*/ /*x,y轴都缩放0.5倍*/ /*transform:sacleX(0.5);*/ /*x方向缩放0.5倍*/
transform: sacle(2,3); /*x方向2倍 Y缩放3倍*/
}
/*4.斜切*/
.div4:hover
{
transform: skewX(8deg); /*x方向缩放8度*/
}
/*案例(下拉效果)*/
/*案例1开始*/
/*
.div5{
width:300px;
height:40px;
border:#5c5c5c solid 1px;
margin:100px auto;
position:relative;
}
.div5:after{
content:'';
width:12px;
height:12px;
display:block;
border-right:#000 solid 2px;
border-bottom:#000 solid 2px;
top:50%;
right:10px;
position:absolute;
transform:translateY(-50%) rotate(45deg);
}
.div5:hover{
border:solid #009 1px;
}
.div5:hover:after{
border-right:#009 solid 2px;
border-bottom:#009 solid 2px;
}*/
/*案例1结束*/
/*过度动画*/
/*1.*/
.div6
{
border-radius: 20px;
transition: width 0.5s ease 1s;
/*盒子阴影*/
/*阴影向右偏移、向下偏移、模糊半径、延展半径、颜色*/
box-shadow: 2px 2px 2px 5px black;
}
.div6:hover
{
width: 600px;
}
/*案例1,头像翻转*/
.img1
{
margin: 100px auto;
border: solid 1px green;
border-radius: 50%;
transition: all 0.5s ease 0s;
}
.img1:hover
{
transform: rotate(720deg);
}
/*案例2,鼠标经过图片放大*/
/*案例2开始*/
.img2-div
{
width: 192px;
height: 168px;
border: solid 1px green;
}
.img2
{
transition: all 1s ease 0s;
cursor: pointer;
}
.img2:hover
{
transform: sacle(1.25);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
}
/*案例2结束*/
/*3d 旋转案例*/
/*开始*/
.img3-div
{
width: 180px;
height: 168px;
border: solid 1px silver;
perspective: 400px; /*透视效果，这个属性必须给父元素添加*/
}
.img3
{
tansform-origin: bottom; /*旋转方向*/
transition: all 0.5s; /*0.5秒内执行*/
}
.img3:hover
{
transform: rotateX(60deg); /*旋转60度*/
}
/*结束*/
f227
/*打开盒子案例（X轴旋转）*/
/*开始*/
#content
{
width: 192px;
height: 168px;
position: relative;
}
#face2
{
transform-origin: bottom;
transition: all 2s ease 0s;
}
#face1, #face2
{
width: 192px;
height: 168px;
background: url(face.jpg) no-repeat;
position: absolute;
border: solid 1px green;
border-radius: 50%;
}
#content:hover #face2
{
transform: rotateX(180deg);
}
/*结束*/
/*百度钱包案例（Y轴旋转）*/
body
{
background:#FF664D;
}
/*开始*/
#content1
{
width: 300px;
height: 660px;
margin: 100px auto;
overflow:hidden;
position:relative;
}
#face3,#face4
{
width: 330px;
height: 330px;
background: url(image/face.png) no-repeat left bottom;
position:absolute;
left:0px;
top:0px;
transition:all 0.5s ease 0s;
backface-visibility:hidden;
}
#face4
{
z-indx:1;
background-position:-300px bottom;
}
#face4
{
background-position: -330px bttom; /*spirits 技术*/
transform:rotateY(-180deg);
}
#content1:hover #face3
{
transform:rotateY(-180deg);
}
#content1:hover #face4
{
transform:rotateY(0deg);
}
/*结束*/
</style>旋转菜单
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*
{
margin: 0px;
padding: 0px;
}
li
{
list-style: none;
}
body
{
background-color: #ccc;
font: 16px;
}
a
{
color: #888;
text-decoration: none;
}
nav
{
width: 80%;
height: 50px;
margin: 100px auto;
background: -webkit-linear-gradient(top,#292929,#252525); /*背景渐变*/
background: -moz-linear-gradient(top,#292929,#252525);
background: -o-linear-gradient(top,#292929,#252525);
border-top: 2px solid #222;
border-bottom: 2px solid #1b1b1b;
min-width: 500px;
}
nav > ul
{
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
}
nav > ul > li
{
box-flex: 1.0;
-webkit-box-flex: 1.0;
-moz-box-flex: 1.0;
-o-box-flex: 1.0;
text-align: center;
height: 100%;
line-height: 50px;
position:relative;
}
nav li:hover
{
background:-webkit-linear-gradient(top,#1c1c1c,#1b1b1b);
}
.subnav{
width:100%;
position:absolute;
top:50px;
left:0;
-webkit-perspective:400px;/*透视效果*/
max-height:0px;/*防止菜单外出现下拉显示*/
}
.subnav li{
background: -webkit-linear-gradient(top,#292929,#252525);
opacity:0;
transform:rotateY(90deg);
transition:opacity 0.4s,transform 0.5s;
}
.subnav li:nth-child(1){
-webkit-transition-delay:250ms;
}
.subnav li:nth-child(2){
-webkit-transition-delay:200ms;
}
.subnav li:nth-child(3){
-webkit-transition-delay:150ms;
}
.subnav li:nth-child(4){
-webkit-transition-delay:100ms;
}
.subnav li:nth-child(5){
-webkit-transition-delay:50ms;
}
.subnav li:nth-child(5){
-webkit-transition-delay:0ms;
}
nav>ul>li:hover .subnav li{
opacity:1;
transform:rotateY(0deg);
}
nav>ul>li:hover .subnav li:nth-child(1){
-webkit-transition-delay:0ms;
}
nav>ul>li:hover .subnav li:nth-child(2){
-webkit-transition-delay:50ms;
}
nav>ul>li:hover .subnav li:nth-child(3){
-webkit-transition-delay:100ms;
}
nav>ul>li:hover .subnav li:nth-child(4){
-webkit-transition-delay:150ms;
}
nav>ul>li:hover .subnav li:nth-child(5){
-webkit-transition-delay:200ms;
}
nav>ul>li:hover .subnav li:nth-child(6){
-webkit-transition-delay:250ms;
}
/*雪花效果-begin*/
.snow div{
width:8px;
height:8px;
background-color:#fff;
margin:100px;
margin-left:300px;
border-radius:50%;
transform-origin:-60px 0;/*设置div中心点，使其运行时按弧线运动*/
animation:donghua 5s linear infinite;/*css3 动画 linear:匀速，infinit:循环*/
z-index:-1;
}
@keyframes donghua{
0%{
transform:translate3d(0,0,0) rotate(0deg);
}
100%{
transform:translate3d(0,400px,0) rotate(360deg);
}
}
.snow{
position:absolute;
top:0px;
left:0px;
width:100%;
height:150px;
overflow:hidden;
}
/*雪花效果-end*/
header
{
width: 80%;
height: 300px;
display: -webkit-box;
-webkit-box-orient:vertical;/*排列方式竖排:vertical(不能给box height) 横向:horizontal */
}
section
{
-webkit-box-flex: 1;
background: pink;
}
section:first-child
{
background-color: Blue;
}
section:last-child
{
background-color: green;
}
section:nth-child(2)
{
-webkit-box-flex:2;
}
</style>
</head>
<body>
<nav>
<div class="snow">
<div></div>
</div>
<ul>
<li><a href="#">nav1</a>
<ul class="subnav">
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
</ul>
</li>
<li><a href="#">nav1</a>
<ul class="subnav">
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
</ul>
</li>
<li><a href="#">nav1</a>
<ul class="subnav">
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
</ul>
</li>
<li><a href="#">nav1</a>
<ul class="subnav">
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
<li><a href="#">nav11</a></li>
</ul>
</li>
<li><a href="#">nav1</a></li>
<li><a href="#">nav1</a></li>
<li><a href="#">nav1</a></li>
</ul>
</nav>
<!--
<header>
<section></section>
<section></section>
<section></section>
</header>
-->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 让360双核浏览器默认极速模式，避免采用IE模式无法正常访问html5网页的解决办法
- 移动H5页面，keyup事件不好使用处理解决
- H5API——Canvas
- html5拖放
- HTML5的新特性
- HTML5中没有cellspacing和cellpadding怎么办
- HTML5 1.8通用属性
- HTML5 1.7 div元素与布局
- HTML5 1.6 table布局
- HTML5初探
- Web前端学习笔记(3)-html5新增表单元素
- html5 式程序员表白
- html5 页面嵌入视频
- Web前端学习笔记(2)-html5新增的结构元素
- 【html5】Web Storage本地存储 sessionStorage/localStorage
- 读书笔记---HTML5实战 MARCO CASARIO（后六章）
- html5 canvas画进度条
- 读书笔记---HTML5实战 MARCO CASARIO（前六章）
- HTML5学习之-Canvas
- HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）