前端学习参考

http://www.imooc.com/course/learn/id/33 css3

http://www.w3cplus.com

http://www.w3cfuns.com   html+css+js

https://developer.mozilla.org/en-US/

http://angularjs.cn/

http://www.cnblogs.com/PeunZhang/p/3522603.html   <移动端开发。

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

https://github.com/peunzhang/mobileTech

http://www.muhu28.com/categoryIndex/nav/43 <nodejs>

http://www.w3cfuns.com/article-1300-2.html {fontstyle 字体图标}

http://www.cnblogs.com/

https://github.com/amfe/lib-flexible   《高清显示屏》

http://www.css88.com/book/css/ (css3参考手册)

http://wiki.jikexueyuan.com/project/html5/  html教程

box-sizing:border-box;即可,为什么呢? 拿公式说话:
content-box:横向:content-width = width+padding-left+padding-right+border-left+border-right;
border-box: 横向:content-width = width-padding-left-padding-right-border-left-border-right;
纵向与横向类似,这里就不做赘述,通过公式我们就一目了然,即content-box是外扩,border-box是内缩。

flex 应用
 如果说写手机页面最常用的技术是什么,我认为是 flex,为了让内容自适应,等分,水平居中,垂直居中,我们都可以直接使用 flex 解决,事实上,它的表现跟 table 类似。
 但 flex 麻烦的一点是需要写点兼容,因为它在成长的过程中,出现了不同的规范定义,造成现在不同系统对其支持的写法不一样,故麻烦了一点,这里当成代码片段总结一下。
1. 等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
 .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
 2. 水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
 3. 垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
注1:上面 parent 代表父元素,child 代表子元素,水平垂直居中把上面的分别合并起来即可。
 注2: 在有了 flex 之后,现在很多弹窗组件的结构也在发生着变化,以前遮罩层都是与弹窗分开的,现在在移动端,完全可以直接嵌套起来,如: div.overlay>div.pop , 然后 overlay 层 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 层作水平垂直居中即可

时间: 2024-08-09 14:23:21

前端学习参考的相关文章

Mongoose学习参考文档——基础篇

Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由Schema发布生成的模型,具有抽象属性和行为的数据库操作对 Entity : 由Model创建的实体,他的操作也会影响数据库 注意: 1.本学习文档采用严格命名方式来区别不同对象,例如: var PersonSchema; //Person的文本属性 var PersonModel; //

前端学习——JQuery Ajax使用经验

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

前端学习书籍推荐

纯属转载,大致看了下,文章里推荐的书都不错,设计前端的常见内容(html.css.js.jq),当然,前端不仅仅包含这几个方面.文章如下(链接均指向豆瓣的书评): ----------------------------------- 时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.

我的前端学习历程(转)

我的前端学习历程 很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了.这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”. 下面以我自己的经历讲讲前端的学习过程. 阅读目录 Jquery基础知识准备 CSS学习与技巧 代码优化 总结 回到顶部 Jquery基础知识准备 学习前端需要掌握的基础知识有jquery,css.做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单

前端学习之路

转载自:https://github.com/qiu-deqing/FE-learning必备基础技能 前端技能汇总(https://github.com/JacksonTian/fks)这个项目详细记录 了前端工程师牵涉到的各方面知识.在具备基本技能之后可以在里面找到学习 的方向,完善技能和知识面. frontend-dev-bookmarks(https://github.com/dypsilon/frontend-dev-bookmarks)是老外总结的前端开发资源.覆盖面非常广.包括各种

前端学习资料汇总(转)

前端学习资料汇总(转) http://www.w3cfuns.com/blog-5402109-5400901.html 端工具: can i see :http://caniuse.com/  ——一个查看css及html5在各个浏览器及手机端的支持情况 前端视野:——平时可以多看看的网站了解下最新资讯前端观察站,腾讯的前端技术,挺有含金量:html5 中国:   http://www.html5cn.org/   ——有很多html及css小知识的网站,建议多浏览web前端开发   http

前端学习——使用Ajax方式POST JSON数据包

0.前言 本文解释如何使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好些,层次结构也更清晰. 为了说明问题,前端和后端较为简单,重点突出AJAX的应用. [前端]--add-post-json.html 图1 add页面 [后端]--add-post-json.php <?php // 返回JSON格式 header('Content-Type:application/jso

我的前端学习历程

很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了.这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不要给自己设定界限,只要拥有成长的力量,就能不断超越自己”. 下面以我自己的经历讲讲前端的学习过程. 阅读目录 Jquery基础知识准备 CSS学习与技巧 代码优化 总结 回到顶部 Jquery基础知识准备 学习前端需要掌握的基础知识有jquery,css.做移动端开发最好掌握CSS3,CSS3的许多新特性会让布局简单很多.Jquery

好程序员web前端学习路线大厂面试题详解

好程序员web前端学习路线大厂面试题详解,依赖注入原理 手动实现依赖注入实现方式 - var _global={ - ajax:function(){//申明服务,也可以说是内部类 - this.get=function(){ - //todo:get方式请求数据 - console.log(“get is success”); - }; - This.post=function(){ - //todo:post方式请求数据 - console.log(“post is success”); -