仿SCUT主页，没有精细到每一个px，目的是练习布局。
其中下拉菜单用纯CSS写的，还尝试用了Sprite图片，写起来还很生疏，需要多加练习。
代码没有优化，因为赶着复习期末考试了，就先放着吧，上demo
人在囧途
笑了一场荒诞，荒诞地笑。
三年前-那时我未满十八岁，我笑了一场荒诞。捧腹于李成功（徐铮饰演）与牛耿（王宝强饰演）一路回家的囧，我想这只不过是一出喜庆片罢了，不可能在生活上演。耿直憨厚的牛耿一只乌鸦嘴，伴随被情人逼迫回家与老婆摊牌的李成功，在回家路上上演了一场荒诞的戏。
对，2010的我认为这是荒诞的，不可能在现实上演。殊不知，我只是离现实太远。
三年后-此刻我弱冠之年，我荒诞地笑了。依旧捧腹于徐朗（徐峥饰演）与王宝（王宝强饰演）寻扎 Mr周 的泰囧之路，故事依旧荒诞离奇，我开始想，这不会仅仅是一出贺岁片了，很可能就在生活重演。一路曲折之后，徐朗回到原点。
对，2012的我认为这并不离奇，甚至在生活重现。
三年的囧途，我似乎回到了原点。
要是我能跟王宝一样有多好：去泰国看人妖，却不知道人妖原来是男的；去泰国看泰姬陵，却不知道泰姬陵在印度。可他知道，谁也不可以伤害他的家人，要给家人种上一棵健康树。
只有他，真正懂得生活，因为他不曾想太多，只是那么活。
简单地活。
不，这只是一出戏。
不，这不是一出戏。
圣诞贺卡-世界末日-冬至-想家
花了几天时间，代表文教制作了一个圣诞贺卡送个热心的外国友人，向他们展示我们文教一年的成果和对他们表示感谢。
对我而言，这算是一个“小项目”吧。
涉水前端时间不长，没什么经验，写这些代码都是摸着石头过河，一步一步调兼容做出来的。
Lucy给的需求，相当于客户甲方了。也就是说，这是在客户提供需求的情况下，我自行设计制作出来的一份网站（虽然只是简单的静态页面，不涉及后台交互）。
不清楚那些接受贺卡的人用什么浏览器，没敢多用H5的特性，并且对该死的低版本IE没有做很好的兼容，希望不会搞砸。
嗯，上demo, http://www.chinepro.org/christmas2012/
嗯，很明显，我的美感还是很欠佳，需要不断地弥补。
今天是世界末日也是冬至，给爷爷打了电话，他说家里的汤圆好吃。今晚班里组织在三个宿舍打边炉吃汤圆，我没有去。
树欲静而风不止，子欲养而亲不待。二老八十高龄，身体不好。
我只想着家。
呵呵，跑题了。
小赖的职业生涯规划书
真实姓名：XXX
昵 称：赖小赖
就读学校：SCUT
E - m a i l：545183877@qq.com
新浪微博：@赖小赖小赖
个人网站：laispace.com
引言
个人拙见：深深痛恨于形式主义，不写花俏的词汇凑字数，发自内心写此职业规划书。
第一章** **认识自我
1.**个人基本情况**
我来自广东某山区偏远农村，考上SCUT可非易事，踏入华园，深感“人才济济，我是草根”，但坚信“我不能改变世界，但能改变自己。”，从大一便开始了对自身理解的探索。
我坚持认为大学是培养学生三观的摇篮和确定职业方向的象牙塔，大学更该注重于通识教育的发展，而非沿袭应试教育的弊端，对于教导，该因材施材，此为大环境。
对我而言，我没有读研的计划，我认为我该尽早积极探索自身兴趣、主动学习完善知识体系并最终建立职业规划。以下为职业探索。
2.**职业探索**
2.1大一上：
泡馆、上网阅览书籍、资讯，得知自己不适合做科学研究，无读研计划；
2.2大一下：
发现对网络工程师感兴趣，自学网络知识，遇到瓶颈失去兴趣；
2.3大二上：
发现对Web前端有浓厚兴趣，自行摸索相关技术，激发了热情甚至是职业向往。
3.**职业定位**
十几年的教育我接受了填鸭式学习，读小学为了读初中、读初中为了上高中、读高中为了考大学，考上大学不知做什么。所以有了前文谈到“人才济济，我是草根”的心态。
直到考上大学，拥有了充裕的时间去思考自己，拥有了自由去探索各方面的兴趣，最终我初步确定了自己的人生规划，而职业规划只能算是人生规划的子集，但囿于此文重心为职业生涯规划，还是着重谈自己对职业规划的理解罢。
3.1 坚持摄影的兴趣，因为累了倦了出去走一走拍一拍感叹感叹，对于我是一种极其有效的放松方式；
3.2 坚持打网球以及长跑，功利地说“运动是为了学习”，而对我而言这是生命不可或缺，对职业发展而言，高强度的工作亟需硬朗的身体作为本钱（接下来我会谈到我所选行业的水很深）；
3.3 坚持摸索Web前端技术，在学好专业知识的前提下，提早获取该行业的资讯，根据发展趋势、工作要求来确定自己学习的方向。
也就是说，目前我的职业定位为：**Web**前端工程师。3.3中之所以说是“摸索”前端，是因为我觉得对于我这种乳臭未干的弱冠90后，深不知复杂社会与安稳校园的鸿沟，深不知在不断的尝试之后又会产生怎么的兴趣（这兴趣兴许会让自己产生新的职业定位呢？），大学毕业之前，该对自己有一份清醒的认识，但到现在为止，我还没有，所以还需要探索、尝试。
第二章** **职业生涯条件分析
1.**职业描述**
我所说的Web前端，对大多数人而言定是陌生的，因为事实上这个职业在中国兴起的时间并没有超过五年，也就是说它的发展前景不可小觑。
引用百度百科对Web前端工程师的描述：
Web[前端开发工程师](http://baike.baidu.com/view/4227693.htm)是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征···
随着Web 2.0概念的普及和W3C组织的推广，网站重构的影响力正以惊人的速度增长。XHTML+CSS布局、DHTML和Ajax像一阵旋风，铺天盖地席卷而来，包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的IT企业都对自己的网站进行了重构···
随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。
在技能方面，豆瓣工程师张克军前辈认为前端工程师该掌握的技能如图：
该图涉及计算机领域的专业词汇较多，我一言以蔽之：
Web**前端行业，所需掌握的技能非常之多且复杂。**
国内大公司感叹于招不到好的前端，也说明这个职业的人才缺口之大。
2.**职业兴趣**
除了前端行业具有很大的发展前景以外，更重要的是我在这个领域内发现了浓厚的兴趣。与其说职业定位，不如说是兴趣的挖掘。建立在兴趣基础上的职业，其乐无穷。
前端工程师可谓是设计师中的工程师，工程师中的设计师。从大公司渴求前端人才的情况来看，Web前端开发的水可谓是很深，但对我而言，我喜欢新奇更喜欢挑战。
3.**个人特质与职业价值观**
3.1**个人特质**
我性格外向、喜欢户外运动并自信沟通能力强，这正符合前端工程师前要与交互设计师沟通，后要和后台工程师沟通的要求，除前端技能外，沟通能力同样重要；
我喜爱互联网、对新技术有热情，这正符合前端工程师需要有极强的应变能力，快速学习新出现的技术，持续创新；
3.2 **职业价值观**
我谈不上职业价值观，因为我还没有真正涉足这个行业，没有参与一个产品的开发，但坚信的一点是：Web**前端需要程序员的严谨、设计师的眼光。**这成为我在学习过程中该注重培养的素养。
引用豆瓣资深前端工程师张克军前辈的描述：
web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资源。
我对这个职业价值观的理解是：掌握技术，并处在用户体验的最前沿。
4.**家庭、学校、社会、职业环境分析**
4.1**家庭环境**
父母是农民，家庭里没有从事互联网相关职业的人，仅此。
4.2 **学校环境**
根据调查，目前没有中国高校开设了前端开发相关的课程，大学生要学相关技术，纯属自行摸索自学，也就是说，若自学有道学有所成，将非常具备竞争力。
4.3 **社会环境**
社会上的IT公司对新兴技术（如HTML5/CSS3）的追捧，意味着前端工程师难求的局面
4.4 **职业环境**
如4.2所言，目前高校没有开设相关课程，相关行业内的前端工程师多为转行的技术人员，但如前文所言，前端工程师需要具备编写代码的能力同时需要一定的审美观，这是大多数转型做前端的程序员所不具备的，也正是大公司很难找到好前端的原因之一。
第三章** **职业目标的定位和分解组合
我的职业目标定位为前端工程师，但这不是一蹴而就的事情，需要不断地摸索和付出。
为了实现毕业能进理想的IT公司深造，我计划如下：
1.**大一**：购买自己的域名，上线自己的独立博客，记录前端学习的轨迹，如来思碑
（前端面试的加分项之一为被面试者拥有记录前端技术并时常维护的独立博客）；
2.**大二**：不断把握最新资讯，学习并记录一些前端练习在博客上；
3.**大三**：进一步学习并形成知识体系，找团队做完整的项目，给简历添色；
4.**大四**：做好简历，找实习进行实践，提高技能；
第四章** **具体执行计划
职业定位后执行计划的大致步骤如第三章，具体细化到每一天，无非就是利用闲暇时间多看书，多练习：
1.**看书**
2.**练习**，不断实践，在实践中加强对理论的理解，记录在 来思碑博客；
3.**借鉴**，跟进行业资讯，订阅牛人博客，在他人经验的基础上多家模仿以增加自己的经验，将好的书单好的建议收藏加以学习，记录在个人 笔记本Evernote 上
第五章** **评估调整
对于评估调整，我的做法是，我会将这篇文章发布在我的博客上，时刻鞭策自己执行计划，敦促自己不断学习。
结束语
这是职业生涯规划课上的一次作业，旨在让我们学生根据自身情况写一份规划书，我百度了一下，发现大部分规划书都写得工工整整各种排版很花俏，目录也很严肃，但最后我想，这种规划书是拿来交作业而不是拿来执行的吧？
变化不在计划中，真正需要的是不断地学习进而总结经验以知晓下一步的学习方向。视野广了，学什么都知道有哪些套路了。
拿我自己做例子，一开始写个简单的网页都要半天，但如今看了不少的博客不少的文章，知晓了前端开发这行业的发展情况，对自己有了大体的规划，就没必要浮躁了，只需要静下心来，按着笔记本里的书单，一本一本地看，看完不断练习，接着搜集各种公司关于该行业的面试题，对着面试题目不断地查缺补漏，然后，美美的写个网页版的简历，投了！
呵呵，看似简单，实则道路曲折行路难啊，我需要不断地纠正学习轨迹，不断地发奋学习才是。
Meta标签属性学习
META标签用来描述一个HTML网页文档的属性。
一般有三个属性：http-equiv,name,scheme.
1.http-equiv
1.1 content-type：字符集的设定，决定读取文件的形式和编码,用法：
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />
1.2 expires：期限，设定网页到期时间（网页到期后必须服务器重新上传），用法：
用法：＜meta http-equiv=”expires” content=”Mon, 03 Dec 2012 18:18:18 GMT”＞
1.3 refresh：定时重刷新到指定页面，用法：
＜meta http-equiv=”Refresh” content=”2”；URL=http://www.laispace.com"＞
1.4 set-cookie：网页过期，那么存盘的cookie将被删除。，用法：
＜meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Monday, 03-Jan-2012 18:18:18 GMT； path=/“＞
1.5 pragma:缓存模式，禁止浏览器使用本地缓存（无法脱机浏览），用法：
＜meta http-equiv=”Pragma” content=”no-cache”＞
1.6 window-target：显示窗口设定，用法（独立页面显示，防止别人在框架里调用自己的页面。）：
＜meta http-equiv=”Window-target” content=”_top”＞
1.7 page-enter/exit：网页进出动态效果，用法：
＜meta http-equiv=”Page-Enter” content=”revealTrans(duration=５.０, transition=２０)”＞
＜meta http-equiv=”Page-Exit” content=”revealTrans(duration=５.０, transition=２０)”＞
2.name
2.1 revisit-after：
<meta name=”revisit-after” content=”1 days” >
2.2 author：作者
2.3 description：内容描述
2.4 keywords：关键词，keywords的content用逗号隔开
2.5 robots:机器人向导，声明需要索引的页面，content值可选all,none,index,noindex,follow,nofollow。默认是all。
2.5 generator：网页采用的技术版本版本
2.6 revised：修复
2.7 others：其他，用法：
<meta NAME=”copyright” content=”Copyright 2012 -laispace.com” />
3.scheme
some_text：定义与 http-equiv 或 name 属性相关的元信息，用法：
<meta scheme=”ISBN” name=”identifier” content=”0-14-043205-1” />
head中其他元素的用法：
1.link:链接，用法：
<link href=”URL” rel=”relationship”>如<link href=”xiaolai.ico” rel=”shortcut icon”>
2.base：基链接，将网页内的相对路径改成绝对路径，用法：
<base href=”http://www.laispace.com“ target=”_blank”>
<base href=”http://www.laispace.com“ target=”_top”>
Meta的使用方法技巧（以下为摘抄转载内容）：
Meta标签是用来描述网页属性的一种语言，标准的Meta标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。要想网站做的更符合搜索引擎标准就必须了解meta标签，下面由Seoer惜缘于大家讲讲meta标签含义与使用方法：
1、META标签的keywords
写法为：<meta name=”Keywords” content=”信息参数” />
meat标签的Keywords的的信息参数，代表说明网站的关键词是什么。
2、META标签的Description
<meta name=”Description” content=”信息参数” />
meta标签的Description的信息参数，代表说明网站的主要内容，概况是什么。
3、META标签的http-equiv=Content-Type content=”text/html
http-equiv=Content-Type代表的是HTTP的头部协议，提示浏览器网页的信息，
<meta http-equiv=”Content-Type” content=”text/html; charset=信息参数” />
meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；
meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；
meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；
meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；
4、META标签的generator
<meta name=”generator” content=”信息参数” />
meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。
5、META标签的author
<meta name=”author” content=”信息参数”>
meta标签的author的信息参数，代表说明网页版权作者信息。
6、META标签的http-equiv=”Refresh”
<Meta http-equiv=”Refresh” Content=”时间; Url=网址参数”>
meta标签的Refresh代表多少时间网页自动刷新，加上Url中的网址参数就代表，多长时间自动链接其他网址。
7、META标签的HTTP-EQUIV=”Pragma” CONTENT=”no-cache”
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>代表禁止浏览器从本地计算机的缓存中访问页面内容,这样设定，访
问者将无法脱机浏览。
8、META标签的COPYRIGHT
<META NAME=”COPYRIGHT” CONTENT=”信息参数”>
meta标签的COPYRIGHT的信息参数，代表说明网站版权信息。
9、META标签的http-equiv=”imagetoolbar”
<meta http-equiv=”imagetoolbar” content=”false” />
指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
10、META标签的Content-Script-Type
<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
W3C网页规范，指明页面中脚本的类型。
11、META标签的revisit-after
<META name=”revisit-after” CONTENT=”7 days” >
revisit-after代表网站重访,7 days代表7天，依此类推。
12、META标签的Robots
<meta name=”Robots” contect=”信息参数”>
Robots代表告诉搜索引擎机器人抓取哪些页面
其中的属性说明如下：
信息参数为all：文件将被检索，且页面上的链接可以被查询；
信息参数为none：文件将不被检索，且页面上的链接不可以被查询；
信息参数为index：文件将被检索；
信息参数为follow：页面上的链接可以被查询；
信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；
信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；
2、英文前缀meta-前缀 pref.
1.表示”变化”,”变换”
2.表示”继”,”在…之后”
3.表示”超越”
4.表示”在…之间”,”介于”
例词：metaphysics
n.
1.形而上学；玄学
2.深奥莫测的推理；空谈；空头理论
来自希腊语，最初来源是作为亚里士多德所著《形而上学》一书的书名，意指“第一哲学”，也就是以“作为存在的存在（being as being）”为研究对象的形而上学，其意义为“在具体科学之后”
3.模板meta语言
模板meta语言由GDMO提出，采用类似于BNF的语法，因此与ASN.1相似，只要了解了它与ASN.1的不同之处就可以在ASN.1有关知识的基础上正确使用。因此，这里只将有关要点进行如下说明：
1.分号（；）用于终止结构和中止模板
2.空格，空行，注释和行尾只起分割符的作用。在需要标志一个元素结束，另一个元素开始时使用。
3.注释由双连字符（—）引导，在行尾或遇到另外的双连字符终止。可以出现在任何分隔区中，但不能出现在结构名或模板名所包含的空格之间。
4.方括号（[ ]）用于指出模板定义中的可选元素。
5.右圆括号中的星号（*）指出模板定义中的可选元素。
6.选择对象由竖线（|）分割。这个符号旨在支持件的定义中使用。
7.将由用户确定的字符串扩在尖括号(<>)中。
8.附件用一个引用标号，后接符号->>,后接一个由文本字符串和符号构成的语法定义组成。
9.分隔串出现在模板定义中自然语言文本或形式说明文本之中。他们由任意的字符串组成，字符串可以由以下任意一个分隔符引导和终止。分隔符是“$ % ^ & * ` ‘ ~ ? @ \”。如果分隔串由某个分隔符开始，则这个分隔串直到再次遇到相同的分隔符才结束。