關(guān)于css和html(二)

背景圖

在瀏覽器窗口縮小時(shí)，可以設(shè)置body，html的最小寬度

動(dòng)畫

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

animation-name  規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration  規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)鹿鳖。
animation-timing-function   規(guī)定動(dòng)畫的速度曲線。
animation-delay 規(guī)定在動(dòng)畫開始之前的延遲壮莹。
animation-iteration-count   規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)翅帜。
animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

使用簡(jiǎn)寫屬性命满，將動(dòng)畫與 div 元素綁定：
使用@keyframs和animation,綁定元素動(dòng)畫

@keyframs

.btn_wish{
    cursor: pointer;
    animation: stat .5s infinite alternate;
    -webkit-animation: stat .5s infinite alternate;
    -moz-animation: stat .5s infinite alternate;
    -ms-animation: stat .5s infinite alternate;
}

@-moz-keyframes stat{
    from{transform: scale(0.95);}
    to{transform: scale(1.0);}
}
@-webkit-keyframes stat{
    from{transform: scale(0.95);}
    to{transform: scale(1.0);}
}

設(shè)置動(dòng)畫播放次數(shù)藕甩，可以設(shè)置成無限次，讓元素一直運(yùn)動(dòng)。

css畫六邊形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper{
            width: 100px;
            margin:20px auto;
        }
        .wrapper div{
            width: 100px;
            height: 200px;
            overflow: hidden;
        }
        .box{
            transform:rotateZ(60deg);
        }
        .inner{
            transform: rotateZ(60deg);
            background: red;
            cursor: pointer;
        }
        .inner:hover{
            background: blue;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="wrapper-box">
            <div class="box">
                <div class="inner">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

offset

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

$(selector).offset()

返回第一個(gè)匹配元素的偏移坐標(biāo)狭莱。
該方法返回的對(duì)象包含兩個(gè)整型屬性：top 和 left僵娃，以像素計(jì)。此方法只對(duì)可見元素有效腋妙。
語法

復(fù)制內(nèi)容到剪貼板

引入<script src="js/clipboard.js"></script>
然后在js中寫出兼容代碼
復(fù)制兼容

   var ClipBoard = function(obj){
    this.handlerID = obj.handlerID || null;
    this.textID = obj.textID || null;
    this.type = obj.type || 'copy';
    this.isAttr = obj.isAttr || false;
    this.isPlugin = true;
    this.isActive = false;

    var ua = window.navigator.userAgent;
    var is_IE = ua.match(/(rv:|msie )\d+/i);
    var IE_Version = is_IE ? parseInt(is_IE[0].split(/:| /g)[1]) : 9;
    if(IE_Version <= 8){
        this.isPlugin = false;
    }
    var handlerObj = document.getElementById(obj.handlerID);
    if(typeof this.type === 'string'){
        handlerObj.setAttribute('data-clipboard-action',this.type)
    }else{
        throw error('type類型錯(cuò)誤默怨！');
    }
    if(!obj.isAttr && obj.textID){
        handlerObj.setAttribute('data-clipboard-target','#'+obj.textID);
    }
}
   ClipBoard.prototype.attach = function(){
    if(this.isActive){ // 對(duì)象已經(jīng)被實(shí)例化
        return;
    }
    var tip = '復(fù)制';
    if(this.type === 'cut'){
        tip = '剪切';
    }
    this.isActive = true;
    if(this.isPlugin){
        var clip = new Clipboard('#'+this.handlerID);
        clip.on('success', function(e) {
            alert(tip+'成功，可通過Ctrl+V進(jìn)行粘貼骤素！');
        });
        clip.on('error', function(e) {
            alert(e.action+'操作失敵锥谩！');
        });
    }else if(window.attachEvent){
        var self = this;
        var handlerObj = document.getElementById(this.handlerID);
        handlerObj.attachEvent('onclick',function(){
            var text = '';
            if(self.isAttr){// 復(fù)制屬性值
                text = handlerObj.getAttribute('data-clipboard-text');
            }else{
                var textObj = document.getElementById(self.textID);
                text = textObj.value || textObj.innerHTML;
            }
            window.clipboardData.setData('Text',text);
            alert(tip+'成功济竹，可通過Ctrl+V進(jìn)行粘貼痕檬！');
        });
    }else{
            alert('瀏覽器版本過低，不支持該插件送浊！')
    }
}

    var c1 = new ClipBoard({
        handlerID: 'Copy_btn1',  //點(diǎn)擊的那個(gè)按鈕
        textID: 'card_num',    //要復(fù)制的文本
        isAttr: false,
        type:'copy'
    });
    c1.attach();
    var c2 = new ClipBoard({
        handlerID: 'Copy_btn2',
        textID: 'card_pass',
        isAttr: false,
        type:'copy'
    });
    c2.attach();
    var c3 = new ClipBoard({
        handlerID: 'Copy_btn3',
        textID: 'card_num1',
        isAttr: false,
        type:'copy'
    });
    c3.attach();
    var c4 = new ClipBoard({
        handlerID: 'Copy_btn4',
        textID: 'card_pass1',
        isAttr: false,
        type:'copy'
    });
    c4.attach();

百度分享

  <script>
  window._bd_share_config={
        "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},
        "share":{"bdSize":16}
        };
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
   <script/>

  html
<div class="bdsharebuttonbox">
        <a href="#"  data-cmd="more">分享到：</a>
</div>

html的書寫梦谜，div添加類bdsharebuttonbox,給a添加data-cmd="more"，如果是鼠標(biāo)移入出現(xiàn)分享框袭景，添加class="bds_more"

如果不要a的自帶樣式唁桩，刪除link鏈接或者刪除a的用js添加的類樣式，或許重寫自動(dòng)生成的.bdshare-button-style0-16 a這個(gè)樣式比較好
刪除鏈接參考

var deleteMk="0";
        function deleteBdStyle(){
            var links=$("link");
            for(var i=0;i<links.length;i++){
                if($(links.get(i)).attr("href").indexOf("share_style0_16.css")!=(-1)){
                    $(links.get(i)).remove();
                    deleteMk="1";
                }
            }
            if(deleteMk=="0"){
                setTimeout(function(){deleteBdStyle();},100)
            }else{
                $(".nav2").show();
            }

        }
deleteBdStyle();

remove

移除所有 <p> 元素：
("button").click(function(){("p").remove();
});
親自試一試
定義和用法
remove() 方法移除被選元素耸棒，包括所有文本和子節(jié)點(diǎn)荒澡。
該方法不會(huì)把匹配的元素從 jQuery 對(duì)象中刪除，因而可以在將來再使用這些匹配的元素与殃。 返回匹配的元素单山，比如<p>This is a paragraph.</p>
但除了這個(gè)元素本身得以保留之外，remove() 不會(huì)保留元素的 jQuery 數(shù)據(jù)幅疼。其他的比如綁定的事件饥侵、附加的數(shù)據(jù)等都會(huì)被移除。這一點(diǎn)與 detach() 不同衣屏。
語法
$(selector).remove()

$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").remove());
  });
});

get()

定義和用法
get() 方法獲得由選擇器指定的 DOM 元素。
語法
$(selector).get(index)

css元素晃動(dòng)

@keyframes swing{
20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(5deg)}
80%{transform:rotate(-5deg)}
100%{transform:rotate(0deg)}
}

@-webkit-keyframes swing{
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}
}
.btn a:hover div{
      -webkit-animation: swing 1s .2s ease both;
      transform-origin: center top;
}

子元素的margin合并

給父元素加上 padding/border/overflow:hidden(IE要添加zoom:1)辩棒，

或者給父元素/子元素設(shè)置為 float/position:absolute.

(CSS2.1規(guī)定浮動(dòng)元素和絕對(duì)定位元素不參與margin折疊)狼忱。

居中

或許可以嘗試text-align:center;

移動(dòng)端全屏滑動(dòng)

用zepto.js 里的swipe事件，和輪播圖類似

setTimeout傳參問題

function translate(ele,num,end){
    ele.animate({"marginTop":"-666px"},1000,"linear",function(){
      ele.css("marginTop","0")
      if(num==0){  //停止時(shí)確定位置
        ele.animate({"marginTop":-(end*66)+"px"},(end*100),"linear");
      }else{
        num--;   //滾動(dòng)兩輪一睁，從-666px到0
        translate(ele,num,end);
      }
    });
  }
 // setTimeout( translate($(".num1"),2,1),100);傳參無效
 setTimeout(function(){translate($(".num2"),2,2);},400);

動(dòng)畫

如果是有規(guī)律的動(dòng)畫钻弄，可以是從0%到100%

ie7 overflow-hidden

css兼容ie7：

做頁面的時(shí)候用負(fù)邊距居中的時(shí)候在IE7下面，父節(jié)點(diǎn)中的overflow:hiden失效的問題者吁，查閱了一些資料窘俺，總結(jié)一下解決方法。

問題原因：

當(dāng)父元素的直接子元素或者下級(jí)子元素的樣式擁有position:relative屬性時(shí)复凳，父元素的overflow:hidden屬性就會(huì)失效瘤泪。

解決方法：

我們?cè)贗E7內(nèi)發(fā)現(xiàn)子元素會(huì)超出父元素設(shè)定的高度灶泵，即使父元素設(shè)置了overflow:hidden。

解決這個(gè)bug很簡(jiǎn)單对途，在父元素中使用position:relative;即可解決該bug赦邻，就是用到overflow的父節(jié)點(diǎn)中增加相對(duì)定位即可。

圖片放大鏡效果

改變彈窗的img路徑惶洲，還原圖片大小

移入移出

mouseleave和mouseout區(qū)別
mouseenter和mouseover區(qū)別

提示

[if lt IE 7]>
<div style="position:fixed;left:0;top:0;width:100%;height:50px;background:red;color:#fff;border-bottom:1px
solid #fff;text-align:center;line-height:50px;font-size:16px;z-index: 999999">
您使用的瀏覽器版本過低恬吕，可能會(huì)影響到您瀏覽本網(wǎng)頁铐料，建議您升級(jí)您的瀏覽器余赢。
</div>
<![endif]
再給這段加個(gè)注釋符號(hào)

設(shè)置網(wǎng)頁在線人工客服

有時(shí)候可能會(huì)出現(xiàn)這些問題


QQ圖片20180411151331.png

QQ圖片20180411151339.png

訪問 http://shang.qq.com/v3/widget.html
在頂部導(dǎo)航那里點(diǎn)擊【推廣工具】
設(shè)置之后會(huì)出現(xiàn)如下圖耘分，有時(shí)候代碼里沒有加入qq號(hào)求泰，可能要自己加入
2018-04-11_151510.png

核心代碼
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ號(hào) &site=qq&menu=yes"></a>

css3實(shí)現(xiàn)效果

邊框外發(fā)光效果

{ -webkit-box-shadow: 0px 10px 20px 1px #b9b4b4;
   box-shadow: 0px 10px 20px 1px #b9b4b4;
   z-index: 1;
   position: relative;
}

第一個(gè)參數(shù)芽丹，水平位移卜朗，第二個(gè)參數(shù)，垂直位移蚊俺，第三個(gè)參數(shù)泳猬，模糊范圍，第四個(gè)參數(shù)埋心，陰影范圍
加層級(jí)是為了能讓元素不被周圍元素覆蓋陰影

border的虛線

width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
比原來的間距寬一些


虛線效果.png

陰影滑動(dòng)覆蓋元素效果

.country a:before{
   content:'';
    position: absolute;
    width: 0px;
    height: 100%;
    left: 0px;
    display: block;
    transition:all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -webkit-transition: all .6s ease;
}
.country a:hover:before{
  content:'';
   background: #000;
   opacity: 0.45;
   width: 232px;
   filter: alpha(opacity=40);
}

有一種從左到右的滑動(dòng)效果，這里利用偽類實(shí)現(xiàn)洋腮，初始寬度為0。如果初始寬度不為0 伙狐，利用transform:translateX()這種屬性則會(huì)影響旁邊的元素贷屎，,
2018-03-27_155415.png

多行文本溢出

-webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 2.8rem;
    display: -webkit-box;

設(shè)置高度和overflow:hidden是為了兼容

calc

需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格属划，例如：width: calc(100% - 10px)候生；
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算同眯；
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算唯鸭；
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則；

checkbox的美化樣式

實(shí)現(xiàn)思路目溉，真實(shí)的input不可見明肮，利用偽類來模擬復(fù)選框停做，before模擬邊框，after模擬√大莫，實(shí)現(xiàn)效果如圖


2018-06-19_154909.png
html
<div class="checkbox">
   <input type="checkbox" id="checkbox"> 
   <label for="checkbox"><span>Remember the password</span></label>
</div>
css
.checkbox{
    position: relative;
    height: 20px;
}
//真實(shí)的input不可見
.checkbox input[type='checkbox']{
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
}
//模擬checkbox的邊框
.checkbox label:before{
    content:'';
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    border-radius: 2px;
}
//模擬√
.checkbox label:after{
    content:'';
    width: 6px;
    height: 12px;
    border: 0;
    position: absolute;
    top: 3px;
    left: 7px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
    /*transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;*/
    position: absolute;
}
.checkbox label span{
    margin-left: 25px;
}
//選中時(shí)的邊框和背景
.checkbox input[type='checkbox']:checked+label:before{
    background: #396af3;
    border-color: #396af3;
}
//選中時(shí)的√
.checkbox input[type='checkbox']:checked+label:after{
    background: #396af3;
}

多個(gè)背景圖

background:url(https://cdn.it120.cc/images/weappshop/arrow-right.png) no-repeat 705rpx center , url(https://cdn.it120.cc/images/weappshop/addr-line.png) no-repeat center bottom;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市舅巷，隨后出現(xiàn)的幾起案子河咽，更是在濱河造成了極大的恐慌飒房，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,640評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件褥芒，死亡現(xiàn)場(chǎng)離奇詭異嚼松，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)锰扶，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門献酗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人坷牛，你說我怎么就攤上這事罕偎。” “怎么了漓帅？”我有些...
    開封第一講書人閱讀 165,011評(píng)論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵锨亏，是天一觀的道長(zhǎng)。 經(jīng)常有香客問我忙干，道長(zhǎng)器予，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,755評(píng)論 1贊 294
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任捐迫，我火速辦了婚禮乾翔，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘施戴。我一直安慰自己反浓，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布赞哗。 她就那樣靜靜地躺著雷则，像睡著了一般。 火紅的嫁衣襯著肌膚如雪肪笋。 梳的紋絲不亂的頭發(fā)上月劈，一...
    開封第一講書人閱讀 51,610評(píng)論 1贊 305
  • 城市分裂傳說
    那天度迂，我揣著相機(jī)與錄音，去河邊找鬼猜揪。 笑死惭墓，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的而姐。 我是一名探鬼主播腊凶，決...
    沈念sama閱讀 40,352評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼拴念！你這毒婦竟也來了钧萍？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,257評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤丈莺，失蹤者是張志新（化名）和其女友劉穎划煮，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體缔俄，經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡弛秋，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了俐载。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蟹略。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖遏佣，靈堂內(nèi)的尸體忽然破棺而出挖炬，到底是詐尸還是另有隱情，我是刑警寧澤状婶，帶...
    沈念sama閱讀 35,735評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布意敛，位于F島的核電站，受9級(jí)特大地震影響膛虫，放射性物質(zhì)發(fā)生泄漏草姻。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一稍刀、第九天 我趴在偏房一處隱蔽的房頂上張望撩独。 院中可真熱鬧，春花似錦账月、人聲如沸综膀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評(píng)論 0贊 22
  • 一樁弒父案局齿，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽剧劝。三九已至，卻和暖如春抓歼，著一層夾襖步出監(jiān)牢的瞬間讥此，已是汗流浹背示绊。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留暂论，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3贊 371
  • 代替公主和親
    正文 我出身青樓拌禾，卻偏偏與公主長(zhǎng)得像取胎，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子湃窍，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理闻蛀，服務(wù)發(fā)現(xiàn)，斷路器您市，智...
    卡卡羅2017閱讀 134,657評(píng)論 18贊 139
  • 一觉痛、樣式篇 第1章 初識(shí)jQuery （1）環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,386評(píng)論 0贊 44
  • $(”p”).addClass(css中定義的樣式類型); 給某個(gè)元素添加樣式 $(”img”).attr({sr...
    專注寒冰三千歲閱讀 505評(píng)論 0贊 4
  • “6.7”高考第一天，毫無例外高考話題霸屏了茵休。對(duì)于一個(gè)高考過去12年的人來說薪棒，高考真的沒啥作用力了。But榕莺，因?qū)嵲?..
    王文會(huì)516閱讀 200評(píng)論 0贊 0
  • 如果有個(gè)好的記憶俐芯，工作中政策文件脫口而出，數(shù)據(jù)張口就來钉鸯，勢(shì)必能為職場(chǎng)形象加分不少吧史。仰望著最強(qiáng)大腦中的超強(qiáng)記憶達(dá)人，...
    一江天地閱讀 573評(píng)論 1贊 10