沟通，是跨越
千山万水的亲切声音
无论何时何地，你都能自由享受QQ在各类
终端上带来的高清通话，与好友一起想聊多久聊多久
h5c3 day2
1、边框图片：在内容变化的容器可以使用，边框自动填充
border-image:图片资源 切割的尺寸（切割位置距离对应的边的距离），默认单位px， 不能使用小数/ 边框宽度 平铺方式;
border-image:url() 167/20px round;
border-image-source:url();
border-image-slice:167 167 167 167;
border-image-width:20px;
border-image-repeat:round; //round环绕 strength拉伸 repeat 平铺
2、语化标签
html5shiv.min.js插件可以使IE9以下支持H5C3，放在页面结构前，提前解析
条件注释：放在网页任何地方，根据浏览器版本去加载内容 lt小于 gt大于 lte小于等于 gte大于等于
3、QQTIM
index.html
I'm QQ - 每一天，乐在沟通
沟通，是跨越
沟通，是随时随地
爽快收发
通过QQ，电脑和手机上的文件都能收发自如，
更有手机在线查阅，轻松你的工作和生活。
沟通，是志同道合
的他们的放肆青春
即使世界很大，你也不会孤单，在兴趣部落
有和你一样的人，期待着和你一起发现精彩。
index.js
$(function(){
/1、引入
/2、结构 背景加data-stellar-background-ratio="0.3" 样式bg需要加background-attachment:fixed;
/3、初始化结构
$.stellar({
horizontalScrolling:false,
responsive:true
});
});
index.css
/*=====reset css=====*/
*{
margin:0;
padding:0;
}
body(
font-size:14px;
font-family:"Microsoft YaHei",sans-serif; //浏览器默认字体
ul{
list-style:none;
}
a{
color:#333;
text-decoration:none;
}
/*=====model css=====*/
.qq_nav{
height:150px;
background:url("../images/nav_bg.png") repeat-x;
position:absolute;
top:0;
left:0;
width:100%;
}
.qq_nav .wrapper{
width:1080px;
height:75px;
margin:0 auto;
}
.qq_nav .wrapper .logo{
width:100px;
height:75px;
background:url("../images/nav_brand.png") no-repeat center;
float:left:
}
.qq_nav .wrapper .nav{
float:left;
}
.qq_nav .wrapper .nav li{
float:left;
font-size:18px;
line-height:75px;
margin-left:20px;
}
.qq_nav .wrapper .nav li a{
display:block;
padding:0 20px;
}
.qq_nav .wrapper .nav li a.hover
.qq_nav .wrapper .nav li a:hover{
background:#12b7f5;
}
.qq_nav .wrapper .register{
float:right;
width:96px;
height:36px;
text-align:center;
line-height:36px;
font-size:16px;
background:#12b7f5;
color:#fff;
border-radius:18px;
margin-top:18px;
}
.qq_nav .wrapper .other{
float:right;
width:250px;
height:75px;
}
.qq_nav .wrapper .other ul{
width:250px;
}
.qq_nav .wrapper .other ul li{
float:right;
margin-left:40px;
}
.qq_nav .wrapper .other ul li a{
font-size:14px;
text-shadow:0 0 2px #333;
height:50px;
line-height:50px;
}
.qq_nav .wrapper .other span{
float:right;
}
.qq_banner{
height:880px;
background:url("../images/banner_bg.png") no-repeat center top;
padding-top:150px;
}
.qq_banner img{
display:block;
margin:20px auto 0;
}
.qq_banner img:last-child{
width:100%; /自适应等比例缩放 图片有这个特殊效果/
}
.qq_sound{}
.qq_sound .h1{
height:300px;
background:url("../images/sound_text.png") no-repeat center /cover;
font-size:0;
}
.qq_sound .bg{
height:500px;
background:url("../images/sound_bg.jpg") no-repeat center /cover;
}
.qq_sound .content{
height:500px;
width:980px;
margin:0 auto;
position:relative;
}
.qq_sound .content .iphone{
position:absolute;
left:0;
top:-200px;
width:700px;
height:700px;
background:url("../images/sound_phone.jpg") no-repeat center top/cover;
}
.qq_sound .content h2{
float:right;
padding-top:100px;
width:500px;
text-align:right;
font-size:40px;
}
.qq_sound .content p{
padding-top:50px;
float:right;
width:500px;
text-align:right;
font-size:18px;
text-shadow: 0 0 2px #333;
}
.qq_file{}
.qq_file .bg{
width:500px;
background:url("../images/file_bg.jpg") no-repeat center top/cover;
}
.qq_file .content{
height:500px;
width:980px;
margin:0 auto;
position:relative;
}
.qq_file .content .mac{
width:600px;
height:340px;
background:url("../images/file_mac.png") no-repeat center top/cover;
position:absolute;
right:-60px;
top:100px;
}
.qq_file .content h2{
float:left;
padding-top:100px;
width:500px;
text-align:left;
font-size:40px;
}
.qq_file .content p{
padding-top:50px;
float:left;
width:500px;
text-align:left;
font-size:18px;
text-shadow: 0 0 2px #333;
}
.qq_interest{}
.qq_interest .bg{
height:500px;
background:url("../images/interest_bg.jpg") no-repeat center /cover;
}
.qq_interest .content{
height:500px;
width:980px;
margin:0 auto;
position:relative;
}
.qq_interest .content .phone{
position:absolute;
left:0;
top:0;
width:350px;
height:500px;
background:url("../images/interest_phone.png") no-repeat center top/cover;
}
.qq_interest .content h2{
float:right;
padding-top:100px;
width:500px;
text-align:right;
font-size:40px;
}
.qq_interest .content p{
padding-top:50px;
float:right;
width:500px;
text-align:right;
font-size:18px;
text-shadow: 0 0 2px #333;
}
.qq_footer{}
.qq_sound .bg,.qq_file .bg,.qq_interest .bg{
background-attachment:fixed;
}
4、3d切割轮播图
//轴的正方向，translate rotate 3d转换属性
//rotateX rotateY rotateZ旋转方向 顺着轴的正方向看 顺时针旋转负角度 逆时针正角度
index.js
5、dom扩展
（1）类操作
var dom=document.querySelector('标签');
jquery：addClass()添加 removeClass()移除 toggleClass()切换 hasClass()判断是否选中
h5：add()添加 remove()移除 toggle()切换 contains()判断是否选中
获取类：dom.classList
操作类：dom.classList.add();
（2）自定义属性
jquery获取方式：获取所有 $('标签').data();
获取单个自定义属性 $('标签'').data('自定义属性')
设置单个属性$('标签').data('自定义属性','自定义属性名称');
h5：var set=div.dataset;
var user=set.自定义属性 获取
set.自定义属性=['自定义属性名称']; 设置
（3）jquery：data()操作内存 h5：dataset()操作数据