关于css和html(二)

作者: 风间澈618 | 来源:发表于2017-09-05 17:50 被阅读0次

背景图

在浏览器窗口缩小时，可以设置body，html的最小宽度

动画

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

animation-name  规定需要绑定到选择器的 keyframe 名称。。
animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

使用简写属性，将动画与 div 元素绑定：
使用@keyframs和animation,绑定元素动画

@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);}
}

设置动画播放次数，可以设置成无限次，让元素一直运动。

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()

返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
语法

复制内容到剪贴板

引入<script src="js/clipboard.js"></script>
然后在js中写出兼容代码
复制兼容

   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类型错误！');
    }
    if(!obj.isAttr && obj.textID){
        handlerObj.setAttribute('data-clipboard-target','#'+obj.textID);
    }
}
   ClipBoard.prototype.attach = function(){
    if(this.isActive){ // 对象已经被实例化
        return;
    }
    var tip = '复制';
    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进行粘贴！');
        });
        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){// 复制属性值
                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进行粘贴！');
        });
    }else{
            alert('浏览器版本过低，不支持该插件！')
    }
}

    var c1 = new ClipBoard({
        handlerID: 'Copy_btn1',  //点击的那个按钮
        textID: 'card_num',    //要复制的文本
        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"，如果是鼠标移入出现分享框，添加class="bds_more"

如果不要a的自带样式，删除link链接或者删除a的用js添加的类样式，或许重写自动生成的.bdshare-button-style0-16 a这个样式比较好
删除链接参考

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() 方法移除被选元素，包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。返回匹配的元素，比如<p>This is a paragraph.</p>
但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
语法
$(selector).remove()

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

get()

定义和用法
get() 方法获得由选择器指定的 DOM 元素。
语法
$(selector).get(index)

css元素晃动

@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)，

或者给父元素/子元素设置为 float/position:absolute.

(CSS2.1规定浮动元素和绝对定位元素不参与margin折叠)。

居中

或许可以尝试text-align:center;

移动端全屏滑动

用zepto.js 里的swipe事件，和轮播图类似

setTimeout传参问题

function translate(ele,num,end){
    ele.animate({"marginTop":"-666px"},1000,"linear",function(){
      ele.css("marginTop","0")
      if(num==0){  //停止时确定位置
        ele.animate({"marginTop":-(end*66)+"px"},(end*100),"linear");
      }else{
        num--;   //滚动两轮，从-666px到0
        translate(ele,num,end);
      }
    });
  }
 // setTimeout( translate($(".num1"),2,1),100);传参无效
 setTimeout(function(){translate($(".num2"),2,2);},400);

动画

如果是有规律的动画，可以是从0%到100%

ie7 overflow-hidden

css兼容ie7：

做页面的时候用负边距居中的时候在IE7下面，父节点中的overflow:hiden失效的问题，查阅了一些资料，总结一下解决方法。

问题原因：

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。

解决方法：

我们在IE7内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。

解决这个bug很简单，在父元素中使用position:relative;即可解决该bug，就是用到overflow的父节点中增加相对定位即可。

图片放大镜效果

改变弹窗的img路径，还原图片大小

移入移出

mouseleave和mouseout区别
mouseenter和mouseover区别

提示

[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">
您使用的浏览器版本过低，可能会影响到您浏览本网页，建议您升级您的浏览器。
</div>
<![endif]
再给这段加个注释符号

设置网页在线人工客服

有时候可能会出现这些问题

QQ图片20180411151331.png

QQ图片20180411151339.png
访问 http://shang.qq.com/v3/widget.html
在顶部导航那里点击【推广工具】
设置之后会出现如下图，有时候代码里没有加入qq号，可能要自己加入

2018-04-11_151510.png
核心代码
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号 &site=qq&menu=yes"></a>

css3实现效果

边框外发光效果

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

第一个参数，水平位移，第二个参数，垂直位移，第三个参数，模糊范围，第四个参数，阴影范围
加层级是为了能让元素不被周围元素覆盖阴影

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

阴影滑动覆盖元素效果

.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);
}

有一种从左到右的滑动效果，这里利用伪类实现，初始宽度为0。如果初始宽度不为0 ，利用transform:translateX()这种属性则会影响旁边的元素，,

2018-03-27_155415.png

多行文本溢出

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

设置高度和overflow:hidden是为了兼容

calc

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

checkbox的美化样式

实现思路，真实的input不可见，利用伪类来模拟复选框，before模拟边框，after模拟√，实现效果如图

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;
}
//真实的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;
}
//选中时的边框和背景
.checkbox input[type='checkbox']:checked+label:before{
    background: #396af3;
    border-color: #396af3;
}
//选中时的√
.checkbox input[type='checkbox']:checked+label:after{
    background: #396af3;
}

多个背景图

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;