关于css和html（一）

小提示

  1. $('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")   //普通

滚动条监听

(docuemnt).scroll()和(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 >
    <img src="">
</div>

div{
    width:300px;
    height:300px;
    overflow:hidden;
}

div img:hover{
    transform:scale(1.05);
}

hover下伪类的css3效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .div1{
            position: relative;
            margin-top: 30px;
            margin-left: 30px;
        }
        .div1:before{
            content: "";
            position: absolute;
            top: -10px;
            right: -10px;
            bottom: -10px;
            left: -10px;
            border-top: 1px solid #d7b554;
            border-bottom: 1px solid #d7b554;
            transform: scale(0,1);
            transition: all .4s;
        }
        .div1:hover:before{
            transform: scale(1,1)
        }
    </style>
</head>
<body>
    1.给外层元素相对定位
    2transform :scale(0,1)参数0，宽度x为0, 而y为1保持竖直方向不变。
    3一种新的显示隐藏方式
    <div style="width: 315px;height: 404px;" class="div1">
        ![](images/active-1.jpg)
    </div>
         4注意元素和伪类的定位
</body>
</html>

target

target="_blank"

在IE7下margin会失效问题

1.给元素清除浮动<div class="clear"></div>
2.或者给父元素加overflow:hidden;zoom:100%;

css3 calc

calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”、“-”、“” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“”和“/”时，其前后可以没有空格，但建议留有空格。
大家在实际使用时，同样需要添加浏览器的前缀
其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了
实例一
html代码

<div class="demo">
   <div class="box"></div>
</div>

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代码

<div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>

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下视频的兼容

<object class="main_video_box" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1920" height="1000">
<param name="movie" value="images/s.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<param name="allowScriptAccess" value="always">
<embed class="main_video_box" src="images/s.swf" wmode="transparent" quality="high" allowscriptaccess="always" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1920" height="1000">
</object>

宽高是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代码：

<h4>咏柳</h4>
<p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>

<div class="verticle-mode">
    <h4>咏柳</h4>
    <p>碧玉妆成一树高，<br>万条垂下绿丝绦。<br>不知细叶谁裁出，<br>二月春风似剪刀。</p>
</div>

详情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下获取），例如：

<div class="example" data-content=""></div>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,

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,128评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,316评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,737评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,283评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,384评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,458评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,467评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,251评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,688评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,818评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,492评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2赞 352

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • 关于css和html(二)
    背景图 在浏览器窗口缩小时，可以设置body，html的最小宽度 动画 使用简写属性，将动画与 div 元素绑定：...
    风间澈618阅读 277评论 0赞 0
  • 如果，还有如果。<一>
    2015年，这一年我中考，这一年，我遇见了你。林优佳。 我记得第一次见你的时候那是一个周四的下午。天空夕...
    随随遇而安SuuuuuuuuN阅读 166评论 0赞 0
  • 利用mp4v2实现H.264裸码流实时封装
    http://blog.csdn.net/narcijie/article/details/65633320
    冬的天阅读 1,093评论 0赞 1
  • 如何衡量期权
    三个关键因素 理想情况下，如果公司上市，公司在资本市场总共能有多大的市值规模？ 您所持有的期权数量，在公司整个股权...
    西门吹牛々阅读 441评论 0赞 0