小提示
- $('ele').eq()index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
居中
position：absolute;
left:50%;
top"50%;
margin-left:宽度的一半
margin-top:高度的一半
可以兼容ie7，
但是以下不兼容
position：absolute;
left:0;
top:0;
right:0;
buttom：0；
margin:auto;
ie7透明度
在ie7中透明度的问题，如果子元素有定位，而父元素没有，则没有效果，要给父元素加定位
opacity: 0.5;
filter:alpha(opacity=50);
或者用jQuery设置
$(".a").animate({"opacity":"0"},1000) //渐变
$(".a").css("opacity","0.5") //普通
滚动条监听
(window).scroll()在ie7中表现不同，
window对象和doucment对象的差别
滚动条监听，侧栏导航样式变化示例
导航条的样式变化，
点击导航时，会触发滚动条监听，导致导航样式变化，可以使用flag
$(window).scroll(function(){
if(flag==0){
var des=$(window).height()-$(".top-nav").height();
$(".topContent").css("opacity",1-($(window).scrollTop()/nbTop));
if($(window).scrollTop()>des){
$(".top-nav").addClass("fixed");
$(".mainContent").children().each(function(index,item){
var top=$(".mainContent").children().eq(index).offset().top;
if($(window).scrollTop()>top-$(".top-nav").height()-50){
if($(document).scrollTop() + $(window).height() >= $(document).height()){ //判断是否到达底部
$(".top-nav li").eq(4).addClass("on").siblings().removeClass("on");
}else{
$(".top-nav li").eq(index).addClass("on").siblings().removeClass("on");
}
}
})
}else{
$(".top-nav").removeClass("fixed");
$(".top-nav li").removeClass("on");
}
}
});
注意点击时会触发滚动条监听，样式变化，造成冲突，可设置flag，
对点击事件进行设置，animate的回调函数设置flag
使用插件
使用一个插件最好去看源码的参数，可以学习
锚点的动态效果
实现一个锚点的动态效果
可以用js的动画来写
$(function(){
$('.nav2 ul li a[href^="#"]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $(this.hash).offset().top}, 600);
});
})
清除样式
可以用来设置清楚一个ul下所有li的样式
当.li.on同时出现才会有样式，
父元素hover，子元素或者相邻元素样式变化
span:hover .hoverimg{}
span:hover +.hoverimg{}
背景图片
为了背景图大小居中
background: url(../images/02.jpg) no-repeat top center;
表格边框样式
设置
border-collapse:collapse
属性设置是否将表格边框折叠为单一边框
IE低版本console对象
IE低版本没有console对象，在IE8/9中console对象存在于开发者工具中，只有打开开发者工具才能出现，IE10之后出现console对象。
对于宽高不变缩放图片
![]()
div{
width:300px;
height:300px;
overflow:hidden;
}
div img:hover{
transform:scale(1.05);
}
hover下伪类的css3效果
test
1.给外层元素相对定位
2transform :scale(0,1)参数0，宽度x为0, 而y为1保持竖直方向不变。
3一种新的显示隐藏方式
4注意元素和伪类的定位
target
target="_blank"
在IE7下margin会失效问题
1.给元素清除浮动
2.或者给父元素加overflow:hidden;zoom:100%;
css3 calc
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。
大家在实际使用时，同样需要添加浏览器的前缀
其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了
实例一
html代码
css代码
.demo{
width: 300px;
background: #ccc;
}
.box{
/*width: 90%;*//*对于不兼容calc的浏览器可以手动写*/
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width:calc(100% - (10px + 5px) * 2);
}
实例二
html代码
css代码
*{
margin:0;
padding:0;
}
.item{
height: 300px;
float: left;
/*width: calc(100%/3 - 5px);
margin-right: calc(5px*3/2);*/
width: calc((100% - 10px)/3);
margin-right: 5px;
}
.a{
background: #ccc;
}
.b{
background: pink;
}
.c{
background: blue;
margin-right: 0;
}
ie7下视频的兼容
宽高是swf的宽高
轮播图,trigger
$(".tab_all>div").mouseover(function(){
clearTimeout(slide);
$(".tab_all").find("div").removeClass("on");
$(this).addClass("on");
$(".tab_content>img").eq($(this).index()).show().siblings().hide();
index=$(this).index();
}).mouseout(function(){
slide=setTimeout(setSlide,2000)
});
var index=0;
function setSlide(){
if(index>=6){
index=0;
}
$(".tab_all").find("div").eq(index).trigger("mouseover");
slide=setTimeout(setSlide,2000);
index++;
}
$(".tab_all>div").eq(index).trigger("mouseover");
var slide=setTimeout(setSlide,2000);
点击a标签会闪现，可以javascript:;
事件委托
$(selector).on(event,childSelector,data,function)
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
$(".desc-content").on("click","a",function(e){
e.preventDefault();
console.log("Aaa");
$("html,body").stop().animate({"scrollTop":$(this.hash).offset().top},600);
})
竖排文本
CSS代码：
.verticle-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
/* IE7比较弱，需要做点额外的动作 */
.verticle-mode {
*width: 120px;
}
.verticle-mode h4,
.verticle-mode p {
*display: inline;
*writing-mode: tb-rl;
}
.verticle-mode h4 {
*float:right;
}
HTML代码：
咏柳
碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
咏柳
碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
详情http://www.zhangxinxu.com/study/201604/writing-mode-text-vertical-layout.html
伪类在ie7的使用
CSS部分
类似这样子的命名：
.example:before, .example before {}
.example:after, .example after {}
一个有冒号，一个是空格分隔。前者IE8+及其他现代浏览器；后者为IE6-7准备的。
HTML部分
如果before/after伪类元素含有content内容（不是空字符），则content内容在HTML标签上呈现（方便IE6/7下获取），例如：
CSS部分的content属性值应该如下：
.example:before, .example before { content: attr(data-content); ... }
.example:after, .example after { content: attr(data-content); ... }
JS部分
JS是为IE6/7准备的，所做的事情很简单，网元素内部插入两个元素，标签名为”before“或”after“或同时。方法代码如下：
var $beforeAfter = function(dom) {
if (document.querySelector || !dom && dom.nodeType !== 1) return;
var content = dom.getAttribute("data-content") || '';
var before = document.createElement("before")
, after = document.createElement("after");
// 内部content
before.innerHTML = content;
after.innerHTML = content;
// 前后分别插入节点
dom.insertBefore(before, dom.firstChild);
dom.appendChild(after);
};
使用 beforeAfter(ele);
(参考详情)[http://www.zhangxinxu.com/wordpress/2012/11/before-after-use-web/]
edm制作要点
1 页面宽度在600px到800px以内
2 不使用外链的css，不使用javascript
3 用table来写页面，一个tr里有多个td，要table嵌套
4 空白用td来填充
5 CSS只可使用 内联样式表
6 IE7.0默认的img不是作为block元素来显示，而是作为inline元素来显示的
7 页面所有table和img的格式都要设置，a标签也要设置，一般有border,outline,cellspacing,cellpadding属性需要设置，td和img的宽高都要设置
对于IE7的兼容，img会出现空白间距，解决方法
1.设置img display:block,不建议设置
vertical-align:middle
2 设置图片垂直对齐方式:
vertical-align:top/middle/bottom
3 设置图片浮动属性float:left
4 td和img之间不要有空格换行
5 对父元素设置
.xxx {
font-size:0;-webkit-text-size-adjust:none;
}
6 使用letter-spacing
.xxx {
letter-spacing: -3px;
}
.xxx a {
letter-spacing:0;
}
给input设置value值
//$("#a").val(a);//val()这种写法有时会失效,特别是他的父元素是dosplay:none时
$("#a").attr("value",a);//可正常赋值
sublime查找函数
atrl+r，显示本文件所有函数列表
goto symbol in project 整个项目找到函数定义处
sublimecodeintel,