代码改变世界

随笔档案-2016年08月

旋转的正方体

2016-08-24 16:29 by 路途遥远,Go~, 322 阅读, 收藏,
摘要: <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>backface-visibility_CSS参考手册_web前端开发参考手册系列</title><meta name="author" cont 阅读全文

css 正方体

2016-08-24 16:20 by 路途遥远,Go~, 414 阅读, 收藏,
摘要: <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>transform-style_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content= 阅读全文

鼠标放上去,不同的cursor光标类型

2016-08-24 14:08 by 路途遥远,Go~, 2229 阅读, 收藏,
摘要: <!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>cursor_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘 阅读全文

发光边框

2016-08-24 10:45 by 路途遥远,Go~, 451 阅读, 收藏,
摘要: .active{ margin: 0.37rem 0;//边框粗细及颜色 border: 2px solid #00ffff;//圆角矩形 border-radius: 5px;//位置及晕染大小 box-shadow: 0 0 15px #00ffff; //兼容性 -webkit-box-sha 阅读全文

单位px 转换成 rem

2016-08-24 10:36 by 路途遥远,Go~, 3875 阅读, 收藏,
摘要: <script type="text/javascript"> var oHtml = document.documentElement; getSize(); window.onresize = function(){ getSize(); }; function getSize(){ var s 阅读全文

web app 自适应 弹性布局之rem

2016-08-23 13:48 by 路途遥远,Go~, 994 阅读, 收藏,
摘要: 关于rem,主要参考文档 1。腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 阅读全文

移动端UC /QQ 浏览器的部分私有Meta 属性

2016-08-23 10:17 by 路途遥远,Go~, 342 阅读, 收藏,
摘要: 如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下,单从这个角度看兼容工作相对于桌面的百花齐放舒服了不少。 数据就不罗列了,目前移动端国产浏览器的占有率上是UC 跟QQ 浏览器这对基佬,所以做前端肯 阅读全文

常用<meta>标签

2016-08-23 10:16 by 路途遥远,Go~, 301 阅读, 收藏,
摘要: 在iPhone的浏览器中页面将以原始大小显示,不允许缩放。 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalabl 阅读全文

移动端<head>头部 常用<meta>标签

2016-08-23 09:56 by 路途遥远,Go~, 9277 阅读, 收藏,
摘要: <!DOCTYPE html><html lang = ""><head> <title></title> <meta charset = "utf-8"> <!--width - 可视区域的宽度,值可为数字或关键词device-width --> <!--height - viewport的高度- 阅读全文

移动平台对 META 标签的定义

2016-08-22 19:22 by 路途遥远,Go~, 351 阅读, 收藏,
摘要: 下面介绍一些有关标记的例子及解释。 一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来 阅读全文

减去border边框

2016-08-18 16:40 by 路途遥远,Go~, 281 阅读, 收藏,
摘要: width: 100%; border: 1px solid transparent; box-sizing: border-box; 阅读全文

伪类共用样式缩写形式

2016-08-18 15:53 by 路途遥远,Go~, 324 阅读, 收藏,
摘要: .top::before , .top::after{ content: ""; position: absolute; width: 200%; left: 0; height: 0; border-top: 1px solid #cccccc; transform-origin: left to 阅读全文

webstrom css : 规范 快捷键

2016-08-17 10:35 by 路途遥远,Go~, 315 阅读, 收藏,
摘要: option + command + L 阅读全文

头部固定下面滑动&&获取手机屏高

2016-08-17 10:09 by 路途遥远,Go~, 575 阅读, 收藏,
摘要: height(){ //获取屏高 let phone_height = document.documentElement.clientHeight; let group = this.refs.search; //console.log(group,phone_height); //40px 是顶部 阅读全文

css 参考手册

2016-08-10 09:22 by 路途遥远,Go~, 203 阅读, 收藏,
摘要: http://www.css88.com/book/css/ 阅读全文

js 点击展开、收起

2016-08-09 17:27 by 路途遥远,Go~, 2798 阅读, 收藏,
摘要: //点击展开、收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.body.addEventListener('touchend', function(e) { var s 阅读全文

CSS 编码规范

2016-08-09 15:12 by 路途遥远,Go~, 6074 阅读, 收藏,
摘要: 转自: https://segmentfault.com/a/1190000005046830 CSS书写格式 1.格式化代码 1.1文件 [建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进 [强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 1.3空格 阅读全文

css 字体样式

2016-08-09 15:03 by 路途遥远,Go~, 3584 阅读, 收藏,
摘要: [强制] font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中。 解释: 所谓英文 Family Name,为字体文件的一个元数据,常见名称如下: 示例: [强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量 阅读全文

css 去除标签默认样式

2016-08-09 14:12 by 路途遥远,Go~, 921 阅读, 收藏,
摘要: p,ul,ol,li,dl,dt,dd { list-style-type: none; margin: 0; padding: 0;} 阅读全文

伪类写border, transform: scale3d() 及兼容性

2016-08-09 14:05 by 路途遥远,Go~, 2627 阅读, 收藏,
摘要: .top::before { content: ""; position: absolute; left: 0; width: 200%; height: 0; border-top: 1px solid #cccccc; transform-origin: left top; transform: 阅读全文

css 字数超过一行显示省略号

2016-08-09 14:02 by 路途遥远,Go~, 894 阅读, 收藏,
摘要: display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; 阅读全文

js - ajax中的get和post说明

2016-08-08 20:33 by 路途遥远,Go~, 3552 阅读, 收藏,
摘要: 转自:http://www.cnblogs.com/hateyoucode/archive/2009/12/09/1620050.html 一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送) 阅读全文

display:flex 多栏多列布局

2016-08-02 10:57 by 路途遥远,Go~, 4502 阅读, 收藏,
摘要: 转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, displa 阅读全文

css 滑动按钮样式

2016-08-02 10:48 by 路途遥远,Go~, 1012 阅读, 收藏,
摘要: <div class="pub_switch_box"> <input type="checkbox" id="pub_switch_a1" class="pub_switch" /> <label for="pub_switch_a1"></label> <input type="checkbox 阅读全文

js 多选题选项内容显示在标题下

2016-08-02 10:35 by 路途遥远,Go~, 644 阅读, 收藏,
摘要: <body><div class="page-container"> <div class="view-container"> <header class="navbar"> <div class="navbar-back" onclick="window.history.go(-1)">返回</d 阅读全文

关于伪类元素:before和:after

2016-08-02 10:16 by 路途遥远,Go~, 13582 阅读, 收藏,
摘要: 关于伪类元素:before和:after CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标悬停状态 :active:活动状态 除了它们,还有一些不被常使用的伪类,有:focus,:first-c 阅读全文