11 2017 档案

阻止事件冒泡
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件模型</title> <style> #outer{margin: 100px 0 0 100px; width: 200px;height: 200px; b 阅读全文
posted @ 2017-11-30 17:58 金牛座的女孩 阅读(138) 评论(0) 推荐(0)
四分之一圆border-radius的用法
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>四分之一圆</title> <style> /*画四分之一圆*/ .yuan1{ width:200px; height:200px; border-radius: 阅读全文
posted @ 2017-11-28 16:08 金牛座的女孩 阅读(914) 评论(0) 推荐(0)
高斯模糊css
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高斯模糊</title> <style> .blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz- 阅读全文
posted @ 2017-11-28 15:44 金牛座的女孩 阅读(127) 评论(0) 推荐(0)
css绘制三角形
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css绘制三角形</title> <style> .triangle-up { width:0; height:0; border-left:30px solid 阅读全文
posted @ 2017-11-21 17:49 金牛座的女孩 阅读(146) 评论(0) 推荐(0)
禁止缩放的一行代码
摘要：<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"> 阅读全文
posted @ 2017-11-20 16:09 金牛座的女孩 阅读(154) 评论(0) 推荐(0)
自适应的Javascript代码resize.js
摘要：(function (doc, win) { var docEl = doc.documentElement, // orientationchange 当设备的方向变化（设备横向持或纵向）此事件被触发 //判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回re 阅读全文
posted @ 2017-11-20 16:08 金牛座的女孩 阅读(2495) 评论(0) 推荐(0)
判断是pc端还是手机端js
摘要：if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { $('#banner').attr('src','image/banner1.jpg') } else { $('#banner').attr('src', 阅读全文
posted @ 2017-11-15 15:31 金牛座的女孩 阅读(163) 评论(0) 推荐(0)
倒计时
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时</title></head><body> <span id="y"></span> 小时：<span id="h"></span> 分钟：<span id= 阅读全文
posted @ 2017-11-10 14:08 金牛座的女孩 阅读(137) 评论(0) 推荐(0)
锚点
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点</title> <style> *{padding:0;margin:0;} div { height: 800px; width: 400px; borde 阅读全文
posted @ 2017-11-09 17:51 金牛座的女孩 阅读(129) 评论(0) 推荐(0)
让某数字按相应的位数显示,不够位数在数字前加0
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>让某数字按相应的位数显示,不够位数在数字前加0</title></head><body> <script> // 如果是个位数在数字前加0 function get 阅读全文
posted @ 2017-11-08 13:24 金牛座的女孩 阅读(327) 评论(0) 推荐(0)
点击添加或减少数量，总价随之改变（keyup的用法）
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击添加或减少数量，总价随之改变（keyup的用法）</title> <link rel="stylesheet" href="style.css"> <meta 阅读全文
posted @ 2017-11-07 15:14 金牛座的女孩 阅读(351) 评论(0) 推荐(0)
常用的style.css
摘要：*{ -webkit-box-sizing:border-box; /* 设置盒模型为内减模式 */ -moz-box-sizing:border-box; box-sizing:border-box;}html{ font-family:"microsoft yahei",Helvetica,Ar 阅读全文
posted @ 2017-11-07 11:45 金牛座的女孩 阅读(435) 评论(0) 推荐(0)
点击显示弹框
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹框</title> <link rel="stylesheet" href="style.css"> <style> html{font-size:100px;} 阅读全文
posted @ 2017-11-07 11:45 金牛座的女孩 阅读(152) 评论(0) 推荐(0)
JavaScript点击切换
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript点击切换</title> <style> #title h3{width:200px;height:60px;line-height:60px; 阅读全文
posted @ 2017-11-07 11:12 金牛座的女孩 阅读(610) 评论(0) 推荐(0)