web前端开发学习经验分享——css,js进阶篇
一,css进阶篇:
等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验,
简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信可以自己先写,写完之后在对比,以其来找寻自己的差距。结构是网站的骨架,如果写的不合理,将是bug产生的重要根源,所以学习分析大型网站的布局样式对初学者来说帮助是很大的。大多数初学者由于对技术的不自信,html结构往往写的很少,而且期望在少的结构上尽可能多的实现页面效果,这样无非加大了html结构所承载的样式属性,众多属性交织在一起就会容易产生bug。qq,sina,163三大官网撸一遍,基本是熟练了。
这里分享一个css哪些事儿的作者林小志运营的一个小站:http://www.tianyizone.com 里边有一些新的特性的演示。
二,js进阶篇:
js进阶,等妙味看的差不多,心里难免痒痒,看老师用尽可能少的代码来实现了众多以前没法实现的动态效果。然后自己想写,但不知道写啥东西,下面就这个问题做以建议,写这些东西的目的有这么几个,一个是更加巩固自己的知识,另外一个是积累面试的作品以及以后工作中的可复用的代码片段:
1. 弹出层,
参照:http://aui.github.com/artDialog/
2. 日历
参照:http://www.my97.net/dp/demo/index.htm mydate97
http://bbs.blueidea.com/thread-3043966-1-1.html 淘宝双日历
http://bbs.blueidea.com/thread-3101895-1-1.html 原生js日历
3. 图片轮换
SuperSlide2.1所有案例+TouchSlide1.0触屏滑动特效插件
http://bbs.blueidea.com/thread-3049362-1-1.html 轮换
http://bbs.blueidea.com/thread-3032305-1-1.html fgmcc经典作品
4. 模拟滚动条
参照:http://www.oschina.net/question/89964_62203
5. 模拟select,联动
参照:
http://bbs.blueidea.com/thread-3009070-1-1.html
https://github.com/yessky/selector
强大的selector
http://aui.github.io/popupjs/doc/selectbox.html
糖饼 select
https://github.com/Johnqing/selectbox
模拟下拉框
6. js分页
http://bbs.blueidea.com/thread-3105789-1-1.html
另外建议可以适当的看一些源码,看的目的无非是揭开神秘框架背后的代码实现,另外一个是开阔自己的视野,看了源码之后,不仅感叹到:原来js还可以这么玩,而且还玩的这么炫。当然有些源码并不时依目前的积累能看懂的,比如jQuery,是非常晦涩难懂,但为了方便分享,就全部罗列出来:
1. ext
http://www.cnblogs.com/mogen_yin/archive/2009/04/30/1447236.html
ext 2.2 经典50篇 -- 阅读ext源码
http://www.cnblogs.com/gotolnc/archive/2009/03/10/1408063.html
blog 资源汇总
http://yahaitt.iteye.com/blog/193271
透析Extjs的Ext.js源码(五)分析继承的实现
http://www.cnblogs.com/peter-pc/articles/1612591.html
Ext源代码阅读-001
http://linder0209.iteye.com/category/58900
源码解读系列文章(一直在看)
http://snandy.iteye.com/category/124734
snandy ext系列文件(准备要看的)
http://liust1987.iteye.com/?page=2
ext源码系列(准备要看的)
http://linder0209.iteye.com/blog/1071818
ext源码分析(准备要看的)
http://blog.sina.com.cn/s/articlelist_1975505103_2_1.html
ext源码分析( 比较零散,必看部分 )
http://extasp.net
extasp.net框架结构
http://www.iteye.com/topic/195409 1111
ext继承 iteye
http://yiminghe.iteye.com/category/64527
何玉的iteyey
http://lionheart.iteye.com/blog/232776
js 继承
http://blog.csdn.net/zhangxin09
ext高手blog
http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html
js继承
http://www.cnblogs.com/minakata/archive/2011/10/07/2199872.html
js高程继承
http://www.iteye.com/topic/1047795
ext其它扩展
http://www.iteye.com/topic/1120551?page=2
ext 2.3源码分析,bbs格式(其中有event对象的整理)
http://www.cnblogs.com/iamlilinfeng/category/385121.html
ext源码分析
http://setting.iteye.com/category/53053
ext基础教程
http://andy-ghg.iteye.com/blog/1133456
ext4的改变
http://www.cnblogs.com/fangsui/archive/2012/04/18/2455537.html
ext4开始
http://docs.sencha.com/ext-js/4-0/#!/api
ext在线api
http://www.aspxcs.net/HTML/094538320.html
ext体系结构
http://linder0209.iteye.com/blog/865331
ext文件结构
http://hi.baidu.com/study_discuss/blog/item/d3c28913f7cb64936438dbf8.html
extjs apply,applyif,override,extend 的区别
http://www.oecp.cn/hi/xuan/blog/page/2
ext源码
http://www.open-open.com/home/space.php?uid=135360&do=blog&id=11658
ext4.0基础概念与总结
2. prototype
http://blog.csdn.net/qgy18/article/details/673117
prototype源码阅读
http://www.cnblogs.com/NNUF/archive/2012/05/10/2494579.html
prototype 源码解读
http://www.cnblogs.com/cangqiong/archive/2007/12/21/1008801.html
prototype-1.4.0(转载)
3. qwarp
http://dev.qwrap.com/resource/js/_docs/_youa/#/content.htm
api
http://www.cnblogs.com/jkisjk/tag/QWrap/
4. mootools
http://www.cnblogs.com/oneroundseven/archive/2011/05/10/2041996.html
mootools 源码分析之 Core.js
http://suyang119.iteye.com/blog/1671065
Mootools源码分析
http://hmking.blog.51cto.com/3135992/675856
MooTools 1.4 源码分析 - Class 修正版
5. jquery
http://james.padolsey.com/jquery/
jquery源码查询
http://www.cnblogs.com/edison1105/archive/2012/07/31/2617518.html
这些年、我收集的JQuery代码
http://hxq0506.iteye.com/blog/1046334
jquery1.6中的.prop()和.attr()异同
http://www.cnblogs.com/zyj469470971/archive/2012/02/17/2355890.html
jquery选择器
http://www.cnblogs.com/sharpxiajun/archive/2011/09/22/2185566.html
临摹jquery
http://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html
jquery原型关系图
http://www.ihiro.org/blog/wp-content/uploads/2010/08/sizzle_flow1.jpg
jquery选择器
http://www.cnblogs.com/lovesueee/archive/2012/10/18/2729829.html
jquery 1.8.2 源码分析
http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html
jquery 1.6源码分析
http://www.cnblogs.com/justany/archive/2013/01/22/2868501.html
jquery事件分析
http://www.cnblogs.com/hxling/
jQuery工作原理解析以及源代码示例
jquery easyui 作者
http://rapheal.sinaapp.com/
jquery源码阅读
http://www.ccvita.com/121.html
http://www.blog.highub.com/decoding-jquery/
jquery源码阅读英文资料
http://www.cnblogs.com/nuysoft/
jquery源码阅读,这位作者出了一本书叫jquery技术内幕
http://item.jd.com/1080321026.html
http://adamed.iteye.com/category/207898
jq源代码阅读
http://adamed.iteye.com/
jquery源码分析
http://www.cnblogs.com/krouky/archive/2011/12/27/Krouky.html
jquery框架分析
http://www.cnblogs.com/yaozhiyi/archive/2013/01/12/2855583.html
jquery源码 元素位置
http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins
10个jquery插件,里边有个jquery滚动条写的不错。
http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385
http://www.miaov.com/2013/miaovideo/miaovideo.html
[知识点类] 妙味课堂:一起学习jQuery源码【逐行分析jQuery源码的奥秘】
http://www.cnblogs.com/aaronjs/p/3310937.html
jquery 2.0.3源码分析
http://www.cnblogs.com/aaronjs/p/3322466.html
jquery 2.0.3源码分析 分析Sizzle引擎 - 编译函数(大篇幅)
https://github.com/mythz/jquip
jquery 压缩版
http://www.cnblogs.com/aaronjs/p/3342344.html
jQuery 2.0.3 源码分析 回调对象 - Callbacks
http://bbs.miaov.com/forum.php?mod=viewthread&tid=7385
jquery源码解读-妙味
http://sunnylost.com/article/jquery.core1.html
jQuery 源码阅读
http://www.cnblogs.com/yangjunhua/
浅析jQuery基础框架
http://www.ihiro.org/sizzle-custom-selector
sizzle源码
http://www.cnblogs.com/52cik/p/jquery-source-position.html
浅谈jQuery事件源码定位
http://www.cnblogs.com/suprise/p/3622760.html
jquery 1.11源码分析
http://blog.csdn.net/baozhifei/article/details/6959392
jQuery1.0源代码分析之domManip方法(七)
http://blog.csdn.net/lihongxun945/article/category/1588879
jquery2.0.4源码分析
http://www.cnblogs.com/chyingp/category/546594.html
jQuery源码分析系列
http://www.cnblogs.com/baochuan/archive/2012/11/21/2781118.html
通过jQuery源码学习javascript(一)
http://pashanhu.github.io/show_by_tag.html?tag=jQuery
学习jQuery源码
http://www.zhihu.com/question/19671522?rf=20617754
jQuery资料知乎
http://www.cn-cuckoo.com/deconstructed/jquery.html
李松峰的解构
http://www.iteye.com/topic/786984
jquery1.43源码分析之动画部分
http://www.iteye.com/topic/783260
jquery 队列函数
http://www.cnblogs.com/guoyansi19900907/
jquery 源码分析-思思博士
6. Backbone
http://www.cnblogs.com/hao-dotnet/p/3444575.html
Backbone源码阅读手记
7. seajs
http://seajs.org/docs/
seajs
http://www.cnblogs.com/yinshen/p/3190429.html
seajs源码分析
http://www.cnblogs.com/webstone/articles/3043119.html
seajs研究一二三
http://www.heiniuhaha.com/seajs/2012/08/14/seajs-combat/
seajs实战参考 Supporting tagline
http://panxuepeng.github.io/seajslib
SeaJS 组件库
https://github.com/seajs/seajs/issues
seajs issues
学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群:328058344
转载于:https://my.oschina.net/u/3531365/blog/948354
web前端开发学习经验分享——css,js进阶篇相关推荐
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- Web前端开发学习资料分享
2019独角兽企业重金招聘Python工程师标准>>> Web前端开发教程: (1)Web开发必备手册大集合 (2)Web前端开发人员和设计师必读文章推荐(系列一~系列八) (3)[ ...
- Web前端开发(三)--css优先级进阶,文本属性,元素类型转换,display,overflow,浮动,定位
一.选择器优先级进阶 计算方式: 行间样式 1000 id 100 class 10 标签选择器 1 让每一个选择器对应的值相加,谁的值大谁的优先级就高. <!DOCTYPE html> ...
- 2018web前端学习路线,详谈web前端开发学习路线
近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...
- 送给大家一套完整的web前端开发学习路线
本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...
- ul 原点显示_web前端开发学习教程,CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连 目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
- 自学Web前端开发学习讲解 – 入门篇
很多人都对web前端感兴趣,这一期主要聊关于如何入门学习Web前端开发的过程分享,此篇适合想入门初学者,大佬就不用看了.主要内容是以本人这一路自学web前端的一些经验和建议,学习哪些知识,以及如何正确 ...
- web前端开发主要课程,CSS字体样式值,赶紧收藏!
前言 基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架再好,无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司. (本篇文章可能只是适用于刚毕业的同学或者 ...
- 【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
- web前端开发工程师之HTML+CSS初级到精通系列课程-陈璇-专题视频课程
web前端开发工程师之HTML+CSS初级到精通系列课程-438人已学习 课程介绍 本系列课程为HTML5+CSS3基础课程,从HTML结构标签.常用标签及属性.CSS语法.CSS常用 ...
最新文章
- mySQL优化 my.ini 配置说明
- 为什么Java需要lambda 表达式?
- 【数据使用】3问视觉项目中的数据整理,这点小事你是不是都掌握好了?
- ORA-01031 权限不足-过程中DBA 角色用户无法执行DDL
- Derby的jar说明
- 企业数字化转型到底是什么?带你一图看懂答案
- mac安装go语言环境
- 基于ADS54J40的JESD204B ADC 1GHz采样逻辑开发笔记
- 荔枝直播助手无法连接到服务器,荔枝FM直播助手pc客户端
- Java单例模式(饿汉式)
- 西门子plc语句表是c语言吗,分享精心整理的西门子PLC指令表
- 请在微信客户端中打开链接是什么鬼 ?
- 手机微信图片存储路径
- 公有云和私有云,你了解吗?
- 选择中医 - 养生之道
- 用python爬取微博评论对鹿晗、关晓彤微博进行情感分析
- 计算机语言学大学排名,法国语言学专业大学排名(2020年QS)_快飞留学
- java设计模式 建造模式_java设计模式(三)建造者模式
- RISC-V学习基础(五)
- 数据结构与算法基础Day1
热门文章
- Windows 11 中打印时提示打印机不兼容,都来是“+”惹的祸
- HDU 5294 Tricks Device(多校2015 最大流+最短路)
- [Place 30-58] IO placement is infeasible. Number of unplaced terminals (1) is greate
- MySQL报错java.sql.SQLException: The server time zone value ‘乱码‘ is unrecognized or represents more tha
- linux公社_如何在Linux上搭建个人流媒体服务器
- VLAN trunk实验
- 一、Python-简介
- CTF训练(密码学)——Atbash Cipher
- 在自己订阅的GOOGLE快讯中,看到自己的文章
- Ubuntu下pycharm设定任务栏图标后打开出现问号图标