2015年12月_落花新月

原创响应式设计：固定比例（弹性盒子）

1.固定的百分比（聚划算的手机站点）2.决绝两边盒子宽度固定，中间盒子宽度随浏览器的大小而变化的问题（固比固的方法）示例代码：html>lang="en"> charset="UTF-8"> 固比固的方法 /* 清空所有的margin和padding */ *{

2015-12-30 16:27:00 7529 1

原创响应式网站设计与制作

1.手机网站：手机网站一般没有版心，因为手机的屏幕已经很小了。2.流式布局：盒子的width、padding、margin是以百分比的形式来表示的。3.如果一个盒子没有其他父盒子（直接在body里面），这个盒子如果用百分比来指定宽度，就是相对于浏览器窗口的宽度。4.如果一个盒子有父盒子，那它的宽度如果是百分比表示的话，是针对父盒子来讲的。5.如果一个盒子有用百分比表示的paddin

2015-12-29 20:38:18 751

原创 CSS3特效：案例&3D转换

1.内容缩放，边框保持不变示例代码：html>lang="en"> charset="UTF-8"> change div{ width: 320px; height: 350px; border: #bc1011 solid 3px; marg

2015-12-29 18:13:40 781

原创 CSS3特效：2D转换&小案例

一、2D转换之移动1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。2. translate(x,y) //定义2D转换3.示例：html>lang="en"> charset="UTF-8"> Special Effect div{

2015-12-28 20:30:14 2074

原创 CSS3：制作阴影

1. （图片取自W3C school）示例代码：#shad{ width: 200px; height: 200px; border: #5f5f5f solid 1px; border-radius: 10px; box-shadow:

2015-12-28 14:39:46 442

原创 CSS3：垂直居中&圆角矩形

1.如果垂直居中vertical-align:middle;不起作用的话，可以考虑让显示的内容以表格的形式显示。代码如下：#content{ width: 300px; height: 300px; border: #08050a solid 1px; margin: auto; /*居中对齐*/ display: table;} #qingwe

2015-12-28 11:55:18 2497

原创 CSS3：伪对象选择器

1. :before 在盒子内容之前添加内容 :after 在盒子内容之后添加内容注意：before 和after必须和content结合使用，即使没有内容插入也要写content=' '示例代码：#poem:before{ content: '最是那一低头的温柔，';}#poem:after{ content: '不胜凉风的娇羞。';}

2015-12-24 15:08:46 4452

原创 CSS3伪类选择器

1.以前用的伪类选择器::hover:link:active:visitedCSS3中新增的伪类选择器:1) E:first-child E:(Elements)元素2)E:last-child3)

2015-12-24 13:52:18 964 1

原创 CSS3属性选择器

1.以input标签示例CSS3样式代码：input{ background-color: #33ddff;}type="text" name="username" class="username" value="sybil">type="text" name="middle name">type="text" name="lastname" class="l

2015-12-24 12:28:04 787

原创微场景H5(物理设备和渲染像素)

1.微场景：用于微信的场景。2.微信中用的浏览器内核：QQ浏览器3.开发环境：HBuilder谷歌的模拟器可以模拟不同的终端。模拟器的物理尺寸单位：点（晶体点）渲染像素单位：px设备最大渲染像素=设备分辨率

2015-12-23 17:59:27 1034

原创 Input标签新增的属性&Range调背景色

1.HTML5中input标签新增加的属性：（不同的浏览器显示的效果会不一样）1）email2)date3)url4)color5)number6)range7)optgroup8）datalist示例代码如下：邮箱:type="email"> 日期:type="date"> 链接:type="url"> 颜色:type

2015-12-23 11:57:05 7005

原创 HTML5-音频和视频（新增）

1.流媒体的加载方式（音频）：如果HTML5不支持该格式的音频，则显示标签之间的内容-->src="music/I believe.mp3" autoplay="autoplay" controls>不支持此格式的音频第一种格式如果不支持，则执行第二种-->autoplay="autoplay" controls> src="music/Let it go.ogg">

2015-12-22 23:39:43 623

原创 HTML5新增加的标签&表单新增属性

1.以前的盒子都有标签，现在都用语义化的标签，例如：头标签导航栏标签侧栏标签文章内容标签页脚标签章节、页眉、栏目代码如下：头部导航左侧栏文章页脚添加样式：header,nav,section,footer{ width: 1300px; height: 50px; border: solid

2015-12-22 22:54:01 4401

原创 HTML5基础标签与SEO

1.Hn标签，一般一个页面里面只用一个H1标签，作为主要的信息标题，这样便于SEO。2.P标签，段落标签。3.语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。4.横线（在Webstorm中：hr+Tab）换行

2015-12-21 18:07:31 10924

原创前端开发-HTML5基础

1.DNS：domain name system(域名系统)2.

2015-12-18 19:59:37 532

原创前端开发工具-webstorm及其他工具

1.Webstorm：专业的前端IDE开发工具（默认装到C盘就好）webstorm是一个重量级的工具2.用webstorm创建项目的步骤：File——》New project——》Empty project /HTML5——》选择路径（或者用默认路径）——》右击建好的项目——》new——》HTML file (跟其他的开发软件都差不多的用法)3.其他前端开发工具：1）Sublim

2015-12-17 15:52:28 2066

原创 HTML5时代的前端&环境配置

1.传统前端与HTML5时代的前端对比：（图片来源于传智播客的教学视频）2.IDE：集成开发环境3.Web前端也远远不是从前的切个图用个jQuery上个AJAX兼容各种浏览器那么简单了。现代的Web前端，你需要用到模块化开发、多屏兼容、MVC，各种复杂的交互与优化，甚至你需要用到Node.js来协助前端的开发。（来自百度百科）4.开发系统环境设置：参考：htt

2015-12-15 17:42:27 2519

原创 HTML-双飞翼布局&Logo优化

1.双飞翼布局：其实就是在中间的main盒子里又添加了一个盒子，如：div class="Container"> div class="main"> div class="inner">div> div> div class="left">div> div class="right">div>div>这种布局方式不用给左右两边的盒子给定

2015-12-15 15:33:55 674

原创 HTML-圣杯布局

1.BFC：Block Formating Context（块级格式化上下文）它是一个独立的渲染区域BFC的作用：1）用来清除浮动的问题2）Margin合并的问题3）多栏布局2.圣杯布局和双飞翼布局实现的是同一种效果，但是实现方式有一点不同。都实现的效果是：两侧盒子的宽度始终保持不变，中间的盒子自适应（三栏式的布局）左右盒子相对定位首先写中间的main盒子，

2015-12-15 14:09:52 1338

原创第三讲：React Native & HTML5+（学习笔记1）

1.https://github.com/facebook/react-nativehttp://react-native.cn/ (React Native 中文网)2.React.js和React Native不是同一个东西3.flex box4.Native.js可以把js代码直接翻译成原生的API Cordova是包装一个API5.HBuilder里面可以创建

2015-12-15 13:14:04 974

原创第二讲：HTML5&Cordova（学习笔记）

1.HTML5编辑器SublimeAtom：网页，有点卡Visual Studio Code：只能提示比较好2.GitHub文件托管托管代码，也可以直接当网站使用。3.浏览器：谷歌Chrome4.JS是重点5.Semantic UI Angular JS Zepto JS6.Cordova (安装运行后会生成一个www的文件夹) cor

2015-12-15 11:22:47 681

原创第一讲：跨终端Web解决方案（学习笔记）

1.React Native2.移动到的应用有：WebAPP、NativeAPP、HybridAPPWebAPP：就是网站，HTML+CSS+JS，通过浏览器访问NativeAPP：用原生的语言开发，如果需要能在多个平台上运行，则需要多种语言重复开发。（比如Android上面的开发，就是用Java开发）优势：可以离线使用，调用本地API等文件缺点：开发成本太大HybridA

2015-12-11 16:35:59 2306

原创创建Node Js应用

1.Node JS应用由以下几个模块组成：引入 required 模块：我们可以使用 require 指令来载入 Node.js 模块。创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。接收请求与响应请求服务器很容易创建，客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据。

2015-12-11 14:53:44 355

原创 Node.Js简介与安装

1.Node.js的原理正是它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码。2.Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScrip

2015-12-11 14:43:27 507

原创 HTML-浮动与清除浮动

1.浮动：float：left；right；none2.浮动的模块是不占用位置的，如下：如果给上面的div1和div2加上左浮动，则div3就会上移，出现如下所示效果：为了让div1和div2占有它原来的位置，让div3显示在它们下面，则要清除浮动。关于浮动的清除有以下几种：1）clear2）添加额外的标签3）伪元素3.开发工具：WebSto

2015-12-10 16:41:50 19403

原创第三讲：创建云端的SQL数据库（学习笔记)

1.SQL DB可以实现非常自动化的管理：数据的复制、自动数据备份2.

2015-12-08 15:22:50 5883

原创第二讲：创建网站（学习笔记）

1. 4大类服务：计算（compute）、数据服务（data services）、应用服务（app services）、网络服务(network)2.在虚拟机上建立站点，可以省去“虚拟化”和“硬件”这两个步骤。云服务里面还可以省去：“虚拟化”和“硬件” 以及“操作系统”。Azure站点服务：省去“虚拟化”、硬件” 、“操作系统”和“虚拟网络”。3.

2015-12-07 17:36:43 481

原创第一讲：Azure上创建虚拟机（学习笔记）

1.Azure在全球有多个数据中心。（中国：北京、上海）2.CPN节点3.ITPAC（IT预组装组件）4.第四代云数据中心：可以快速部署5.北京、上海： T4级别数据中心（世纪互联提供支持服务）6.云计算的模型和选择：IaaS----基础结构级服务-----host(主要托管主机服务、主管运算)------虚拟机的存储PaaS--平台级服务----develop（主要

2015-12-07 15:40:53 2419

转载 Create an ASP.NET web app in Azure App Service

资料来源：https://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-get-started/OverviewThis tutorial shows how to deploy an ASP.NET web application to a web app in Azure App

2015-12-02 15:09:00 1749

转载发布网站

发布网站（发布到本地）资料来源：msdnhttps://msdn.microsoft.com/zh-cn/library/1y1404zt(v=vs.100).aspx 可以将网站发布到您可以使用 Visual Studio 支持的任何连接协议访问的任何位置。复制网站有下面几种方式可选：复制到本地计算机上的文件夹。

2015-12-02 14:45:07 517

转载如何创建和部署网站

如何创建和部署网站（转自http://www.windowsazure.cn/zh-cn/manage/services/web-sites/how-to-create-websites/）就像可以快速从库中创建 Web 应用程序并部署该应用程序一样，也可使用由 Microsoft 或其他公司提供的传统开发人员工具部署在工作站上创建的网站。目录部署选项如何：使用管理

2015-12-02 13:20:57 558

小头Sophia