July 2016 - Just Code

July 29, 2016

Chrome 开发工具 (Chrome Developer Tools)：Network Panel说明

By Gideon Google / Facebook / Amazon / Twitter / Network 0 Comments

出处：http://www.cnblogs.com/starof/p/5443445.html 官方资料：Chrome Developer Tools: Network Panel 一、chrome Developer Tools：Network Panel 从网络面板中可以获取很多有用信息，如详细的时间数据，http请求头响应头，cookies，WebSocket数据。通过分析这些数据，可以知道哪个资源加载耗时最久，谁发起的网络请求，这些对性能优化很有帮助。这些数据的获取都是通过一个api来完成的，Resource Timing API。我们不需要知道它的实现原理，只要知道它能提供什么数据即可。这些数据也可通过ch… Read More

July 29, 2016

HTML5: 全局属性

By Gideon Div / Css / XML / HTML5 / SVG 1 Comment

出处：http://www.cnblogs.com/starof/p/4593741.html 全局属性：对于任何一个标签都是可以使用的属性。一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据，可能是会写<form role=”xxx”>，但这是种非常不规范的方式。也正是因为有这种自定义属性的需求，在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性，只要加上前缀data-，通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="cont… Read More

July 29, 2016

jQuery: 合并表格中相同文本的相邻单元格

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

一、效果二、代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <table id="process" cellpadding="2" cellspacing="0" border="1"> <thead>… Read More

July 29, 2016

Bootstrap 3: 使用注意box-sizing细节及解决方法

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

一、bootstrap样式在Bootstrap v3.3.4中有下面一条重置样式： * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 将所有的元素的默认盒模型box-sizing都设置成了border-box，而现代浏览器的标准默认box model是 content-box。很多第三方其他的UI库… Read More

July 29, 2016

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。什么是BFC（Block formatting contexts） w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的… Read More

July 29, 2016

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

By Gideon Div / Css / XML / HTML5 / SVG 1 Comment

W3C规范一般来说，页面中的每一个元素都会形成一个矩形盒子，渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说，页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质，布局也就轻而易举。在 W3C 规范中定义了标准的盒模型： Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these area… Read More

July 25, 2016

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

其实方法非常简单，直接写代码： <div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="visibility: hidden;" /> </div> 同时设置图片和背景图片，同时将图片设置为不可见（不是不显示），只显示背景图片。这里用到技巧就是：display:none和visibility:hidden的区别 dispaly:none ；　CSS1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 v… Read More

July 25, 2016

PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)

By Gideon Php / Pear / Mysql / Node.js 4 Comments

PHP 5 及以上版本建议使用以下方式连接 MySQL : MySQLi extension (“i” 意为 improved) PDO (PHP Data Objects) Mysqli提供了面向对象和面向过程两种方式来与数据库交互，分别看一下这两种方式。 1. PHP 连接 MySQL 1．面向对象在面向对象的方式中，mysqli被封装成一个类，它的构造方法如下： __construct ([ string $host [, string $username [, string $passwd [, string $dbname [, int $port [, string $socket ]]]]]] ) 在上述语法中涉及到的参数说明如下。 l … Read More

July 22, 2016

域名详解

By Gideon Tools 0 Comments

域名域名就是用来唯一标示互联网上的服务器的，当我们访问一个网站时候，比如http://www.example.com/index.html，其中的com，example.com，www.example.com都是域名。域名不区分大小写，即www.example.com与WWW.EXAMPLE.COM一样。 FQDN FQDN(Fully qualified domain name)即全域名，大多数指的是一个绝对域名，这个域名指明了其在DNS树级结构中的准确位置。它也指明了其中所有域的层级，包括顶级域和根域。www.example.com.就是一个FQDN。 DNS resolver一般是按照FQDN的格式来… Read More

July 22, 2016

移动开发需要知道的像素知识『多图』

By Gideon Div / Css / XML / HTML5 / SVG 0 Comments

像素（Pixel）对于WEB开发者来说很是熟悉，在PC互联网时代没少与其打交道。进入移动互联网之后，随着移动设备屏幕的解析度越来越高，衍生了一些关于屏幕和像素的一些新概念，比如DPI，DP，PT，Retina，4K等等，本文对这些概念做一个简单的介绍。 DPI与PPI DPI（Dots Per Inch）是印刷行业中用来度量空间点密度用的，这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的原子单位不是墨汁点而是像素，所以就创造了PPI（Pixels Per Inch），这个值是屏幕每英寸的像素数量，即像素密度（Screen density）。由于各种原因… Read More

July 22, 2016

HTML5: 两个viewport的故事（第一部分）

By Gideon Div / Css / XML / HTML5 / SVG 2 Comments

英文：http://www.quirksmode.org/mobile/viewports.html 翻译：http://weizhifeng.net/viewports.html 在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。这篇文章是关于桌面浏览器的，其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动端我们将会接触到相同的概念，但是会更加复杂，所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。概念：设备像素和CSS像… Read More

July 22, 2016

HTML5: 两个viewport的故事（第二部分）

By Gideon Div / Css / XML / HTML5 / SVG 1 Comment

英文：http://www.quirksmode.org/mobile/viewports2.html 翻译：http://weizhifeng.net/viewports2.html 在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。这篇文章我们来聊聊关于移动浏览器的内容。如果你对移动开发完全是一个新手的话，我建议你先读一下第一篇关于桌面浏览器的文章，先在熟悉的环境中进行下热身。移动浏览器的问题当我们比较移动浏览器和桌面浏览器的时候，它们最显而易见的不同就是屏幕尺寸。为桌面浏览器所设计的网站在移动浏览器中显… Read More

July 22, 2016

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括苹果手表 apple watch）

By Gideon Div / Css / XML / HTML5 / SVG 2 Comments

1. Phones and Handhelds a) iPhones /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-de… Read More

July 22, 2016

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

By Gideon Div / Css / XML / HTML5 / SVG 2 Comments

翻译自stackoverflow.com，源地址：http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web 有同学需要开发web页在iphone/android手机上访问，想问max-device-width 与 max-width 有什么区别，他打算针对不同的屏幕大小加载不同的样式，就像下面这样： @media all and (max-device-width: 400px) @media all and (max-width: 400p… Read More

Month: July 2016