关于css和html(二)
背景图
在浏览器窗口缩小时，可以设置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> 元素：
("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);
}
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;
