学习和实践前端一年时间，几乎天天在工作室和一群屌丝男程序员一起学习、开发。这种潜移默化的环境下，编码提高了，节操也细碎了。 一年前，娇滴滴的还是工作室里面小师妹一枚，软软的软件工程妹子，做不到人见人爱，但在这个据说男女比例8比1的学校中，仍是比较受欢迎群体——女生中的一员。 然而， 回想过去这一年，跟一帮大老爷们坐在一起讲蛋疼的笑话； 工作室聚餐中满怀“邪”意地企图把师兄们灌 为了赶项目，可以经常和某位苦逼男一起debug到两三点，不亦乐乎； 男生唤我作欣姐，各种玩笑各种开，因为都不拿我当女生看； 天天十多小时对着电脑，很少化妆，因为卸妆好麻烦，还不如留着时间撸码； 没课的时候。蓬头垢脸，踢着拖鞋就崩工作室去了； 在工作室中睡觉，口水哗哗流，完全不理会身边有十多个男生盘算着通宵达旦撸码。 一路心酸。辛酸。我本来一好好的妹子，怎么就成了女汉子。好吧，其实我还是挺喜欢现在这种生活~~~ 发了一段牢骚，如今调回工作模式。 定期总结、回顾优劣，重新规划。 这并不是为了让人驻足围观（也就不存在什么显摆之类的目的），主要的目的至少是可以审度过去那一段时间——做过的事，看过的书、感悟，才能更好地规划日后。 ——————♦ 做过的事 ♦—————— 学过半年的前端，知道大二下学期才等来开发的机会。大二上半年有点清闲，下半年累得蛋疼。过去半年都是在项目折磨下进步地，简单回顾一下它们，我的孩子嘛，应该都有我十分之一的“韵魅”。 ### 一、项目 ◊ 伴你同行婚纱摄影网站（2014年2、3月） 单独完成前后端工作。我的长子。 这里要赞美一下我可爱又丑陋的姐夫，让我早早投入到项目开发中，唯一一个独揽前后台开发的项目。它让我尽早发现自己学习和实际开发的差距。也是因为大二寒假的努力，让我更加有底气争取更多项目开发机会。 收获 ： 1，着重用户体验 　　　  2，基于Ajax/JSON数据交互 　　  　3，独立完成java后台开发 　  　　4，MySQL ◊ BMS南海博物馆系统（2014年4、5、8月） 单独完成前端工作。第一个和工作室同学交（liu）配（he）的孩子。 和善良幽默的佳铭合作，在廖老师和他的严格要求，熬了若干夜。也是这个项目让我拉下“页面做得不好看”，“代码可读性差”的“臭名”。 收获 ：1，原生可拖拽、最大化、最小化窗口控件 　　　 2，javascript面向对象设计 ◊ 梅州地区中学校园网站及其后台管理系统（2014年4、5月） 单独完成前端工作。 收获： 1，设计与用户交互提升一个档次 　　　 2，多文件上传，上传管理 　　 　3，实现后台管理系统对前端页面的样式修改 ◊ 广东省气象局信访风险防控登记系统（2014年6、7月，至今） 合作完成前端工作。 收获： 1，javascript跨域问题的解决 　　　 2，自定义JQuery复选框插件 　　　 。。。。。。 ◊ 数字化校园管理系统（2014年7月） 合作完成前端工作。 接了某师弟的烂摊子，把整个管理系统前端页面重构了一次，然后和某同学合作重写了前后台交接部分，一个星期完成别人三个月都完成不了的。在我看来这个比较高级的项目，涉及一卡通设备管理、考勤管理、人员管理、短信管理等功能。 收获 　　我萌生自定义控件的想法： 　　例如，网格插件——调用者仅需提供表头信息，ajax加载表体内容，附带分页筛选控件。extjs　　在这方面做得比较细致方便，数据存储机制很独到。如果能够模仿这方面的类库实现自定义的网格插件，将大大减少代码的冗余量和开发工作量。 ◊ 2014年中山一院远程教育网（2014年8月，至今） 领导完成前端工作。 算是最用心做得一个项目，也是至今为止，唯一一个有小师弟协助的项目。想过踏踏实实地做，认认真真指导师弟。认真分析五十多M的资料，整理了角色与功能，画出UML，从面向对象分析，企图整理出可复用的控件，并且根据角色权限拓展控件功能。后来，计划跟不上变化。对于这个规模的项目，我的计划是三四个月，可是老师的要求却是一个月。。。页面太多了，即便整理了，少说也有五十多个页面；师弟才刚接触前端一两个月，我要完成我手上的工作，分身法术，没有多余时间指导。 收获： 1，初步接触UMl 　　　 2，补习Extjs基础，自定义若干个类。 　　 　3，奠基面向对象思想 　 　　4，接触了伟大的响应式设计Shamcey 　　　　。。。。。。 **小结：** 1，技术要更加扎实，不能再继续坑队友，尤其是暑假不少时候熬到深夜2点debug。项目越做到后面，越是要坚持下来，对技术的考验越高。 2，如果可以日后有机会，我想参与到一个比较大型项目。一个能够让我掌控的项目（客户和老师对界面要求不严格，需求宽松），能够让我更加得心应手而不是前顾后盼，更能专注于开发而不是老师的非技术要求，更有信心继续做下去。 3，注意规范和代码可读性。不仅仅为了日后的二次开发，更多的是，贯穿里外、自始至终整洁规范的代码是后期开发的动力！ 4，做得多，收获更多。一度又一度已经不想再做重重复复，修修改改的前端页面。让程序员设计是一头痛的事情。很不幸这些项目很多都是我“独揽”前端，没有UI设计者给我设计页面，没有人给你分析需求。只有一个前端，只有一个后台。从设计，到HTML、CSS、javascript，再到交互的Ajax，不累挂前端不完结。没错，做得多，收获更多！ 5，时间安排。使用的技术太狭隘、单一了。其实也局限于时间，做的项目太多，没有多与事件总结和学习新技术。其实我可以在做项目的块海绵挤出更多的时间做这些事情：在设计页面方面，我想多参考外国优秀的网站模版；在技术方面，多看牛人的博客；定时总结，从技术难点角度、从语言角度、从项目角度。不总结，学得再多，做得再多也显徒劳。 ### 二、招新 为咱们伟大的topview工作室招揽新一代贤才真是一个激动人心，让人振奋的任务。咱们打着大三大部分师兄找到BAT实习机会的名号，从海报设计到招新网站，没有一个我有参与。出了几个招新方式小想法，杜撰了几道前端招新的计时题目，问到一些小师弟小师妹口哑哑，也左右了最后招新的赛果。从浩浩荡荡的四百人马中筛选中17位学习能力强，态度性格良好的人才。 收获： 1，看到过来招新的小师弟小师妹，就想起当年自己。考核时期的最充实，也就是那段时间养成自学编程的素养。他们不懈拼搏，追赶着我们这群不愿被超越的老骨头。 2，意向要坚定。很多同学意向不坚定，左右摇摆，在若干个工作室报名考核，却不清楚自己到底想留在哪个工作室。这是个大忌，，其实我们有和别的工作室leader师兄交流，即便面试者不坦白，我们对他们的情况还是一清二楚。日后我们去公司招聘也要注意这一点。同时通过多个工作室的面试不代表你厉害，能够通过最终考核的同学才是胜利者。因为他们摇摆不定，最后从自己手上掌握多个机会，到一个机会都抓不住。 3，我需要更加耐心和细心。能够理清思路，从多个角度教会别人，一直都是我的追求。多角度分析问题，需要扎实的功底。 ——————♦ 看过的书 ♦—————— 与其说是是看过的书，不如说成是学过的事物。深谙：看过某门知识的书，不代表掌握某门知识。掌握知识的途径不仅仅是书本，还有网络和同伴交流。下面列举过去这一年来，阅读过的，值得推荐的几本书： ### 一、交互/界面 **《大巧不工》** 内容看似简单和基础，但是估计有一定开发经验的同学才能真正体会文章深刻。对初学者尤为重要，他可以让你们少走弯路。无论是web前端技术方向还是用户体验研究方向，这则本书应该是一本不错的指导书。内容都很精彩，收获匪浅，虽然出书有一定年代了，但内容不会太过时。 “可用性”的首要原则是“别让我思考”。这是我映象最深刻的一章。在她的引导下，我发表了我的第一篇博文http://www.cnblogs.com/0603ljx/p/3580191.html **《网页设计秘笈Don’t Make Me Think》** 和《大巧不工》这本书相比，它的文笔更加犀利简洁。书本精彩之处，在于作者站在使用者而不是开发者的角度，从若干生活用例出发。然而，要吃透这一类书，可能需要一个漫长而潜移默化的过程，边开发边阅读，也许会有更深刻的认识。 **《CSS3实战》** 大量实用的实例，没有网上关于css3和html5纷繁精彩，也没有提供例子源码，但是因为这两点，更加令我静下心来好好研究这门算是比较新鲜的技术。无论如何，学习都是要踏踏实实一步一步来，网上的实例多么复杂漂亮，如果不动手做，而总想着复制改，恐怕永远都达不到你想要的高度。如果想更详细地认识css3和html5，可以参考《HTML5与CSS3权威指南》 ### 二、技术 **《jQuery基础教程4》** 不要说我崇洋媚外，外国程序员出的书很多都很精彩。基础教程嘛，从一个小小例子出发、逐步加深、边讲解边拓展，这种教程模式很美妙。很欣赏作者的编程思路和独特的算法模式，表格操作跟滑移和翻转都是很实用章节。《锋利的jQuery》这本书太简单了，比较适合那些只想在前端蜻蜓点水的后端开发同学看。想认真学好jQuery这门框架，这是一本很耐看和实用的书。《jQuery网页开发实例精解》这推荐的这堆书里面，这本书的作者有点弱。里面的例子很小型，还算比较实用和经典。对于那些要马上做项目但是jQuery又没学通的同学，里面有超多例子可以直接用。 **《JavaScript权威指南(第六版)》** 前端基础工具书之一，初学者很难静下心来把书遍历一遍。对象、数组、函数、类和模块这几章据说很重要，师兄说面试必备。学了一年前端，我终究不能写出很面向对象的原生javascript可能也是因为这写基础掌握不太牢固吧。很想找个比较有时间的星期，再看一遍这几章。 **《Javascript_语言精粹》** 薄薄一本小宝典，浓缩出精华。没法泛泛而读，可以说字字珠玑，细致认真地读，收获将匪浅。同等类型的书还有基本，不过质量次之。《征服Ajax》难度位于基础教程和高级程序设计之间，有深度，但是又容易看懂，进阶的好书。《JavaScript DOM编程艺术 第2版》是一本适合初学者或者已经学但是没学精的前端设计人员看的书。《高性能JavaScript编程》是我课上偷偷看的电子版，那段事件忙着做项目确实没有太多课余时间，无法想象居然看了将近两个月。里面的内容无法一时半刻领悟，需要开发着用。 **《ExJS实战》** 《深入浅出ExtJS》这本书说得太细致，学extjs要纠结到类的属性就自个儿看api吧，要学得深入这是更好的选择。现今除了ext5，但书讲的是ext3，泛读一遍，补补基础。 **《javascript高级程序设计》** 虽说是高级教程，但知识点都是循序渐进的，条理也比较畅顺，挺能符合常人的思维习惯。讲了很多代码实现的进化过程，并且对js中很难理解的闭包，继承，原型，原型链都讲的很清楚。事件和dom部分讲到很多浏览器兼容问题，哪些函数是哪个标准的版本，哪些浏览器支持等。js如果不是使用框架，那么浏览器兼容简直就是噩梦。但具体的兼容性还没有权威的书籍进行介绍。 **《Effective JavaScript》** 还没看完，也知道现在我这种水平要看完并且看懂，需要比较长的事件。每看一章就受一次挫败，但想深入学习javascript，唯有再接再厉，继续努力。 ——————♦ 感悟 ♦—————— ### 一、机会总是留给有准备的人。 以前看过不少名人的故事，但感悟并不深刻。直到这个学期遇到一些事情才深有感悟。很多人只知道：珍惜来之不易的机会，创造更多的价值。但是在机会来临之前所能做的少之又少，甚至只是等待，机会走过了还不知不觉。 大一的时候如果没有好好学好基础课，你将错过加入学院工作室的众多机会，和接触编程厉害、逻辑思维缜密同学机会失之交臂。 大二的时候分心，不提高效率、专心于专业技术，你将因为能力不足错过参与实际项目的机会，和磨练实战失之交臂。 大三马上就有陆陆续续的实习生招聘，没有准备好，或许，等到身边同伴都有所归属的时候，你只能在一旁悄然落泪。 ### 二、坚持很重要。 定时制定计划，这个星期、这个月、这个学期，坚持下来！ 项目后期坚持下去。项目到后期要改细节太多，以前遗留下来的问题也不少，然而自己热情不再，这个时候很考验意志。 ### 三、总结也是下一次针对性地复习。 平时遇到零零碎碎的问题，平时点点滴滴的发现。总结起来，我相信日后会是个巨大的宝库 ——————♦ 规划 ♦—————— 不能计划好自己的人，只能成为别人计划中的一部分。 ### 一、学好英语。 要学会看懂外语文档，博文。要学会接触外国新技术，不能指望等人家消化完，又出书，网上博客都上百篇的时候才开始接触这些新技术。 ### 二、开发自己的类库 开发出符合自己开发习惯，方便团队日后开发的前端库。注意规范，可读性，详尽的文档需要更加扎实的基础，和独特的代码触觉。以往的开发经验才能让我更清楚哪些部件更需要封装重用 ### 三、拓宽知识面 补补java，继续进修php，继续熟悉linux系统操作等等，要做的事情太多，没有太多时间偷懒。 ### 四、写出风格 在代码风格和算法效率方面仍需下下苦工。这个一个漫长的循序渐进的成长过程。 用了两个半晚上，凑了一下零零碎碎的想法。写给大一升大二的小师弟小师妹，也写给我即将逝去去的青春。 青春和时光都会凋零，只有住在心里的那一朵花能够永远地灿烂下去。 计算机专业充满挑战和机会，我们需要一份坚持下去，静下心来学习。 原文地址：[http://www.cnblogs.com/0603ljx/p/3918625.html](http://www.cnblogs.com/0603ljx/p/3918625.html) 作者：floralam

前面几篇博文都在讲导航菜单和二级下拉式菜单，其实有很多方法都可以实现的，具体的情况还要视情况而定。 在后面学习到jQuery框架之后，会有更丰富的动画效果，由于在学习Ajax和jQuery的初步阶段，对于很多的复杂的导航菜单和二级下拉式菜单没法做，但是学习了CSS和JS还是能实现一些简单的变换的。这篇博文就来说说用CSS实现导航菜单结合二级下拉式菜单的两个简单变换吧。 首先还是在前面博文的基础上加以实现，其实只用HTML和CSS还是可以做出不错的效果，但是相较于JS和jQuery来说就有很大的差距了。这些问题在学习完JS和jQuery之后你就会深有感触。 ### 一.中英文切换导航菜单 制作原理：在二级下拉式菜单的基础上加以变换就可以实现，在鼠标悬浮在相应的菜单上，二级菜单出现在导航菜单的下面，我们可以把英文的菜单当做是二级菜单，在显示的时候将其反向向上移动到导航菜单上，让多出的部分隐藏即可实现。 浏览器的兼容性问题：我测试的浏览器是火狐，谷歌，2345浏览器，以及IE7和8。 代码： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> .nav{ padding-left:40px; font-size:20px; font-family:"微软雅黑"; list-style:none; font-weight:bold; overflow:hidden;/*此处的作用可以清除浮动*/ border-bottom:10px solid #FF6600; } .nav li{ float:left; margin-right:1px; } .nav li a{ text-decoration:none; line-height:40px; background-color:#EEEEEE; color:#000000; display:block; width:100px; text-align:center; } /*默认状态下不显示*/ .nav li a span{ display:none; } /*鼠标移到相应元素显示英文*/ .nav li a:hover span{ display:block; background-color:#FF6600; color:#FFFFFF; } /*反向使用上外边距，使其原来的中文隐藏*/ .nav li a:hover{ margin-top:-40px; } </style> </head> <body> <ul class="nav"> <li><a href="#">首页<span>Home</span></a></li> <li><a href="#">课程大厅<span>Course</span></a></li> <li><a href="#">学习中心<span>Learn</span></a></li> <li><a href="#">经典案例<span>Case</span></a></li> <li><a href="#">关于我们<span>About</span></a></li> </ul> </body> </html> ~~~ 初始化效果：  鼠标悬浮效果：   ### 二.多级菜单 前面有三篇博文讲到了二级下拉式菜单分别用CSS，JS和JQuery实现，做法有很多，这次主要是还是用CSS实现。相关的博文请参考：[Web前端开发实战1：二级下拉式菜单之CSS实现](http://blog.csdn.net/erlian1992/article/details/50437179)，[Web前端开发实战2：二级下拉式菜单之](http://blog.csdn.net/erlian1992/article/details/50441191)[JS实现](http://blog.csdn.net/erlian1992/article/details/50441191)和[Web前端开发实战3：二级下拉式菜单之jQuery实现](http://blog.csdn.net/erlian1992/article/details/50443474)。 制作原理同二级下拉式菜单一样。浏览器测试为：IE7,8，谷歌，火狐，2345浏览器。 代码： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> *{ margin:0; padding:0; } ul{ list-style:none; } .nav{ font-size:16px; font-family:"微软雅黑"; font-weight:bold; margin:20px 50px; } .nav li{ float:left; margin-right:1px; } .nav li a{ text-decoration:none; line-height:30px; background-color:#EEEEEE; color:#000000; display:block; width:120px; text-align:center; } .nav li a:hover{ background-color:#FF6600; color:#FFFFFF; } .nav li ul{ display:none; } .nav li ul li{ margin-top:1px; position:relative; } /*鼠标移到相应元素上显示二级菜单*/ .nav li:hover ul{ display:block; width:120px; } .nav li:hover ul li ul{ display:none; } .nav li:hover ul li ul li{ margin-left:1px; } /*鼠标移到相应二级菜单元素上显示三级菜单*/ .nav li ul li:hover ul{ display:block; position:absolute; top:0px; left:120px; } </style> </head> <body> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">课程大厅+</a> <ul> <li><a href="#">视频课程+</a> <ul> <li><a href="#">Java</a> <li><a href="#">PHP</a> <li><a href="#">C语言</a> </ul> </li> <li><a href="#">案例学习+</a> <ul> <li><a href="#">编程练习</a> <li><a href="#">实例操作</a> <li><a href="#">答案解析</a> </ul> </li> <li><a href="#">交流学习</a></li> </ul> </li> <li><a href="#">学习中心+</a> <ul> <li><a href="#">前端课程+</a> <ul> <li><a href="#">HTML/CSS</a> <li><a href="#">JavaScript</a> <li><a href="#">jQuery</a> </ul> </li> <li><a href="#">手机开发+</a> <ul> <li><a href="#">IOS开发</a> <li><a href="#">WP开发</a> <li><a href="#">安卓开发</a> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </body> </html> ~~~ 初始化效果：           二级下拉菜单效果：           三级菜单效果：   这些其实都是最基础的东西，每种方法都有其自己的方式和特点以及浏览器兼容性问题。可能也会因个人的方 式实现会有不同的代码，但是学会了制作的原理，就会很容易实现。CSS实现导航菜单简单变换，我会在以后的博文 中使用JS和jQuery实现，同时也要比较几种方法的代码简练程度和实现效果的方式更有浏览器的兼容性问题。从最基 础Web实战开始，一步一步去实现复杂的网站架构和网站布局和网站效果展示。

### 四.伸缩菜单之垂直方向 制作原理：我们还是在原来的水平导航菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。最简单的方法还是使用CSS样式的方法实现，制作菜单的方法很多，找到适合自己的即可。 代码： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> /*CSS全局设置*/ *{ margin:0; padding:0; font-size:18px; font-family:"微软雅黑"; } .nav{ height:50px; margin-top:20px; margin-left:10px; } .nav ul{ list-style:none; height:50px; border-bottom:10px solid #FF6600; padding-left:30px; } .nav li{ float:left; margin-top:10px; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-left:1px; } .nav li a:hover,.nav li a.on{ background-color:#FF6600; color:#FFFFFF; /*伸缩变换设置高度变化*/ height:60px; /*和使用负值向反方向移动*/ margin-top:-10px; line-height:60px; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a class="on" href="#">网站首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> </span> ~~~ 效果展示： 初始化状态或鼠标离开的状态：  鼠标放在相应的元素上的状态：  ### 五.伸缩菜单之水平方向(JavaScript方法) 制作原理：我们还是上述菜单的基础上加以改变CSS样式实现导航菜单的伸缩变化。由于这种伸缩变化相对麻烦我们使用JS或jQuery来实现。      代码： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> /*CSS全局设置*/ *{ margin:0; padding:0; font-size:18px; font-family:"微软雅黑"; } .nav{ height:50px; margin-top:20px; margin-left:10px; } .nav ul{ list-style:none; height:50px; border-bottom:10px solid #FF6600; padding-left:30px; } .nav li{ float:left; margin-top:10px; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-left:1px; } .nav li a:hover,.nav li a.on{ background-color:#FF6600; color:#FFFFFF; } </style> <script type="text/javascript"> window.onload=function(){ var aLists=document.getElementsByTagName("a"); //遍历每个li元素 for(var i=0;i<aLists.length;i++){ aLists[i].onmouseover=function(){ var that=this; //清除定时器 clearInterval(this.time); //设置定时器 that.time=setInterval(function(){ that.style.width=that.offsetWidth+8+"px"; if(that.offsetWidth>=120){ clearInterval(that.time); } },30) } aLists[i].onmouseout=function(){ clearInterval(this.time); var that=this; that.time=setInterval(function(){ that.style.width=that.offsetWidth-8+"px"; if(that.offsetWidth<=90){ that.offsetWidth="90px"; clearInterval(that.time); } },30) } } } </script> </head> <body> <div id="nav" class="nav"> <ul> <li><a class="on" href="#">网站首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> </span> ~~~ 效果展示： 初始化状态或鼠标离开的状态：  鼠标放在相应的元素上的状态：  ### 六.伸缩菜单之水平方向(jQuery方法) 和上面使用JavaScript方法实现的区别是： ~~~ <span style="font-size:18px;"><!--引用百度服务器的jQuery库--> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function(){ //使用jQuery库中的hover()方法实现鼠标放上去和离开时触发事件 $("a").hover( function(){ //使用jQuery库中的animate()方法实现菜单伸缩动画变换 $(this).stop().animate({"width":"120px"},200); }, function(){ //使用jQuery库中的animate()方法实现菜单伸缩动画变换 $(this).stop().animate({"width":"90px"},200); } ) }) </script></span> ~~~ 效果还是和上面的一模一样的。

在前面的博文中我们提到横向一级菜单，这里我们来看看导航菜单。导航菜单种类很多，但是制作原理都是大同小异的，这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单： 垂直导航菜单：  水平导航菜单：  ### 一.垂直菜单制作原理： (1)用无序列表构建菜单； (2)< a >标签的设置：ul a{display:block;}。定义的关键是将< a >标签设置为块元素。 代码： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> /*CSS全局设置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微软雅黑"; } .nav{ height:200px; width:90px; margin-top:50px; margin-left:10px; } .nav ul{ list-style:none; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; /*设置的关键*/ display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-bottom:1px; } .nav li a:hover{ background-color:#FF6600; color:#FFFFFF; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> ~~~ 效果展示： 初始化状态或鼠标离开的状态：  鼠标放上去的状态：  ### 二.水平菜单 制作原理：在垂直菜单的基础上，将li元素进行左浮动设置。由于li元素浮动脱离原来的文档流会失去宽和高，因此一定要在a元素上使用display:block属性将其变为块级元素，然后进行宽和高的设置。 只改变CSS样式代码： ~~~ /*CSS全局设置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微软雅黑"; } .nav{ height:40px; margin-top:50px; margin-left:10px; } .nav ul{ list-style:none; } /*设置的关键*/ .nav li{ float:left; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-right:1px; } .nav li a:hover{ background-color:#FF6600; color:#FFFFFF; } ~~~ 效果展示：  ### 三.圆角菜单 制作原理：在水平菜单的基础上我们进行CSS圆角属性的设置，但是IE6,7,8浏览器并不支持这个属性，制作一定 要考虑浏览器的兼容性，在这里我们使用圆角属性。解决不兼容的方法就是我们可以裁剪圆角背景图作为每个li元素的背景即可。 完整的代码： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航菜单</title> <style type="text/css"> /*CSS全局设置*/ *{ margin:0; padding:0; font-size:16px; font-family:"微软雅黑"; } .nav{ height:50px; margin-top:20px; margin-left:10px; } .nav ul{ list-style:none; height:50px; border-bottom:10px solid #FF6600; padding-left:30px; } .nav li{ float:left; margin-top:10px; } .nav li a{ background-color:#EEEEEE; text-decoration:none; color:#000000; display:block; width:90px; height:40px; line-height:40px; text-align:center; margin-left:1px; /*设置圆角属性,IE6,7,8不支持*/ border-top-left-radius:15px; border-top-right-radius:15px; } .nav li a:hover,.nav li a.on{ background-color:#FF6600; color:#FFFFFF; } </style> </head> <body> <div id="nav" class="nav"> <ul> <li><a class="on" href="#">网站首页</a></li> <li><a href="#">课程大厅</a></li> <li><a href="#">学习中心</a></li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> ~~~ 效果展示： 初始化状态或鼠标离开的状态：  鼠标移上去的状态： 

大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有：        1)使用$(function(){...})获取到想要作用的HTML元素。        2)通过使用children()方法寻找子元素。        3)通过使用show()方法来显示HTML元素。        4)通过使用hide()方法来隐藏HTML元素。        5)jQuery库引用方法: 第一种方法：将jQuery库下载到电脑上，然后引用，我下载的是jquery-1.7.1.min.js这个版本。 例如：<script type="text/javascript"src="jquery/jquery-1.7.1.min.js"></script> 第二种方法：直接引用在线服务器上的jQuery库文件，比如谷歌服务器jQuery库，百度服务器jQuery库等。 例如：引用百度服务器上的jQuery库文件 <script type="text/javascript"src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 接下来看看制作的流程： 1调用jQuery库：编写代码，引用jquery库。由于谷歌已退出大陆，建议使用百度服务器的jQuery库。 注意: 百度服务器的jQuery库地址:http://libs.baidu.com/jquery/1.9.0/jquery.js 2 编写显示子菜单函数，使用$,并通过class名获取一级菜单li，过children()找到li的孩子元素ul，使用show()方法,显示二级菜单。 3编写隐藏子菜单函数，使用$,并通过class名获取一级菜单li，过children()找到li的孩子元素ul，使用hide()方法, 隐藏二级菜单。 4做浏览器兼容性测试，至少五个浏览器。IE7,8,9，火狐，谷歌，2345浏览器等。 最后我们来看看代码的情况，和前面的区别不大： HTML代码： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <link rel="stylesheet" type="text/css" href="style.css" /> <!--引用百度服务器的jQuery库--> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li class="navmenu"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li class="navmenu"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> ~~~ CSS样式表外部style.css文件代码： ~~~ /*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; } a{ text-decoration:none; color:#000000; display:block; width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul{ display:none; } /*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } ~~~ JS脚本外部script,js文件代码： ~~~ $(function(){ $(".navmenu").mouseover(function(){ $(this).children("ul").show(); }) $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); }) }) ~~~ 我们来看看效果： 1.初始化状态或鼠标离开显示为横向一级菜单：  2.鼠标滑过有二级下拉菜单的元素时显示下拉菜单：  3.显示的下拉菜单中的链接样式： 

上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的，我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。 那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单隐藏。 4)添加鼠标事件：给有二级菜单的一级菜单添加鼠标事件,并调用showsub()/hidesub()函数，实现鼠标经过一级菜单，二级菜单显示和隐藏。 5)做浏览器兼容性检测，至少五个浏览器。IE7,8,9，火狐，谷歌，2345浏览器等。 HTML代码： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <!--引入的外部CSS样式文件--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--引入的外部JS脚本文件--> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html> </span> ~~~ 外部CSS样式表style.css文件代码： ~~~ <span style="font-size:18px;">/*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; } a{ text-decoration:none; color:#000000; display:block; width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul{ display:none; } /*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } </span> ~~~ 外部JS脚本script.js文件代码： ~~~ <span style="font-size:18px;">function showsub(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="block"; } function hidesub(li){ var submenu=li.getElementsByTagName("ul")[0]; submenu.style.display="none"; }</span> ~~~ 效果展示： 1.初始化状态或鼠标离开显示为横向一级菜单：  2.鼠标滑过有二级下拉菜单的元素时显示下拉菜单：  3.显示的下拉菜单中的链接样式： 

二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？ 学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程 还是一样的，今天开始做一些简单的二级下拉式菜单。 横向一级菜单我们见到的很多，如下图所示是：  二级下拉菜单图：  二级下拉菜单是在横向一级菜单的基础上添加下拉效果实现的，制作思路： 第一步：静态网页的制作 标签< ul >< li >...</ li ></ ul >项目列表 标签< a >链接 float浮动 display:block属性 postion属性规定元素的定位 第二步：动态特效的实现 下拉菜单的显示与隐藏 今天我们使用CSS样式表实现，那么制作流程是： 1.一级菜单设置：设置CSS样式,使一级菜单横向显示,位于一行中。 2.二级菜单设置：给”课程大厅”菜单,添加二级菜单(JavScript/JQuery/Ajax三项)，并带链接；同时给“学习中心”菜单，添加二级菜单(视频学习/案例学习/交流平台三项)，也带链接。 3.隐藏二级菜单： 设置CSS样式,让二级菜单隐藏。 4.显示二级菜单：设置CSS样式,让二级菜单显示。 5.浏览器兼容性问题解决以及代码优化，至少测试五个浏览器。我测试的是IE7,8,9，2345浏览器，谷歌浏览器以及火狐浏览器。 HTML代码部分： ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li><a href="#">学习中心</a> <ul> <li><a href="#">视频学习</a></li> <li><a href="#">案例学习</a></li> <li><a href="#">交流平台</a></li> </ul> </li> <li><a href="#">经典案例</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </body> </html></span> ~~~ CSS样式表style.css文件代码： ~~~ /*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#EEEEEE; height:40px; width:450px; margin:0 auto; } /*横向一级菜单样式设置*/ ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; position:relative; } a{ text-decoration:none; color:#000000; display:block;/*将a行内元素转变成块级元素*/ width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } /*二级下拉菜单样式设置*/ ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul{ position:absolute; top:40px; left:0px; display:none;/*默认状态下或鼠标离开时隐藏*/ width:90px; } /*为了兼容IE7写的CSS样式，但是必须写在a:hover前面*/ ul li ul li a:link,ul li ul li a:visited{ background-color:#EEEEEE; } ul li ul li a:hover{ background-color:#009933; } /*鼠标滑过一级菜单的元素时显示下拉菜单*/ ul li:hover ul{ display:block; } ~~~ 来看一下效果： 1.初始化状态或鼠标离开显示为横向一级菜单：  2.鼠标滑过有二级下拉菜单的元素时显示下拉菜单：  3.显示的下拉菜单中的链接样式： 

### 一.代码优化概述 关于代码优化的知识是纯理论的知识，学习的很枯燥。在学到CSS时，不免遇到CSS+div进行代码优化的知识，因此在网上看了一些关于这方面的知识，简单的整合一下，梳理自己所了解的代码优化问题。所谓代码优化是指对程序代码进行等价（指不改变程序的运行结果）变换。程序代码可以是中间代码，也可以是目标代码。等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同。优化的含义是最终生成的目标代码短（运行时间更短、占用空间更小），时空效率优化。原则上，优化可以在编译的各个阶段进行，但最主要的一类是对中间代码进行优化，这类优化不依赖于具体的计算机。简单地说，就是在不改变程序运行效果的前提下，对被编译的程序进行等价变换，使之能生成更加高效的目标代码。 ### 二.那么对于我们学习Web前端开发的网页制作来说有哪些要求呢？ (1)尽量采用div+css布局您的页面，div+css布局的好处是让搜索引擎爬虫能够更顺利的、更快的、更友好的爬完您的页面；div+css布局还可以大量缩减网页大小，提高浏览的速度，使得代码更简洁、流畅、更容易放置更多内容。 (2)尽量缩减您的页面大小，因为搜索引擎爬虫每次爬行您的站点时，存储数据的容量有限，一般建议100KB以下，越小越好，但不能小于5KB。网页大小减少还有一个好处，能够促使您的站点形成巨大的内部链接网。 (3)尽量少用无用的图片和flash。内容索引所派出的搜索引擎爬虫，不认识图片，只能根据图片“ALT,TITLE”等属性的内容判断图片的内容。对于flash搜索引擎爬虫更是视而不见。 (4)尽量满足w3c标准，网页代码的编写满足W3C标准，能够提升网站和搜索引擎的友好度，因为搜索引擎收录标准，排名算法，都是在W3C标准的基础上开发的。 (5)尽量更深层次套用标签h1、h2、h3、h4、h5…..，让搜索引擎能够分辨清晰网页那一块很重要，那一块次之。 (6)尽量少用JS，JS代码全部用外部调用文件封装。搜索引擎不喜欢JS，影响网站的友好度指数。 (7)尽量不使用表格布局，因为搜索引擎对表格布局嵌套3层以内的内容懒的去抓取。搜索引擎爬虫有时候也是比较懒的，望各位一定要保持代码和内容在3层以内。 (8)尽量不让CSS分散在HTML标记里，尽量封装到外部调用文件。如果CSS出现在HTML标记里，搜索引擎爬虫就要分散注意力去关注这些对优化没有任何意义的东西，所以建议封装到专用CSS文件中。 (9)清理垃圾代码，要把代码编辑环境下敲击键盘上的空格键所产生的符号；把一些默认属性代码，不会影响显示的代码；注释语句如果对代码可读性没有太大影响，清理这些垃圾代码，会减少不少的空间。 一个网页是由多种语言组成的，最基础的是HTML，CSS和JS。那么代码优化对于这些的要求又是什么？ ### 三.html优化 html代码是最为基础的网站制作语言，对于网站优化来说，html代码也有一定的影响，是特别需要注意的优化细节之一。 (1)title标签 title标签就是网页的标题，是一个对于网站优化有很大影响的html标签，每个页面都必须有且内容不同！基本格式为<title>网页标题</title>。 (2)META元素  meta元素在浏览器界面是无法看到的html标签，对于优化有影响的主要有两个，一个是关键字（keywords）、一个是描述（description）。其实，这两个标签随着seoer的胡乱使用，对于网站优化已经没有多少用处了，你完全可以不用设定，但我们还是习惯性的设置一下较为妥当。关键字，设定与本页内容相关的主关键词一到三个，之间用英文状态下的逗号分割。需要注意的是，不要再滥用关键字，除了给搜索引擎不好的印象外别无他用。描述还是很有用的一个东东了，虽然对于网站的优化排名么有多大的影响，但会作为搜索引擎展示网站索引的一个依据，可以把你的主关键字链接起来组合成一段通顺的话，一般60到80字即可。格式为: 　　<meta name="keywords"content=""> 　　<meta name="description"content=""> (3)h标签 h标签在html代码中是“标题”的意思，就如一篇文章，标题是文章最为重要的一个对象，也是搜索引擎在排名时重点考虑的一个对象。html中的h标签一共有六个，分别是h1/h2/h3/h4/h5/h6，分别代表不同的级别，我们称之为一级标题、二级标题……当然，一级标题具备更多的权重。需要注意的是h标签是块级元素，默认是粗体显示，独占一行，前后会有空行。当然，你可以利用css来改变这些效果。 关于h标签的使用，需要根据实际情况来使用，不可任意滥用。如一篇文章，不可能出现多个一级标题，所以h1，在同一个页面中只能出现一次，而h2等则可以出现多次，根据你需要表现的内容的重要程度，分别使用不同的h标签即可。特别注意，h标签中最好出现关键字！还有就是，随其自然，万不可刻意地用h标签来处理某些关键字！ 基本格式为：<h1>这里是标题文字</h1> (4)加强和强调 strong被认为是“加强”，em被认为是“强调”，也就是这两个标签是有特殊含义的，这对于网站优化至关重要。多数时候，我们在优化网站时会对关键字进行突出，这时使用strong或em就比使用B或者I好很多，特别谨记！ (5)alt和title alt是图像中的注释，title是图像或链接的标题，这两者对于优化，尤其是图像的优化至关重要，但也不要滥用！ 一般在插入图像时，我们在alt中设置图像的描述内容，其中可以包含关键字但不要故意堆砌，title则当作图像标题来处理。特别需要注意的是，这些内容是不可以重复的！也就是说，当你的页面中有多张图像，你不能每张图像的描述和标题都设置成一样的，这样很容易被搜索引擎惩罚！ <img src="test.jpg"alt="一个美女站在黄昏的街头默默等待爱人的回归，眼神中充满了忧伤"title="静待">除此之外，title属性在a标签中也有所使用，只是有些泛滥了，视觉效果也不好，影响用户体验，所以笔者并不推荐，除非你的a标签中的内容是一张图片。 <a href="product.html"title="产品展示">产品展示</a> (6)缩写abbr(目前我没有遇到过) 这个标签是自定义的一种缩写方式，可以利用它合理的添加一些关键字，同样不要滥用。如下所示： 公司的产品涉及<abbr title="以石材为原料的雕刻作品">石雕</abbr>、<abbr title="以铜料为胚，运用雕刻、铸塑等手法制作的一种造型艺术">铜雕</abbr>、<abbr title="附属在某一平面上的雕刻艺术">浮雕</abbr>、镂雕等各种雕刻形式。 (7)canonical标签 Canonical(权威链接标记)是09年，Google，Yahoo及Microsoft三大搜索引擎联合推出了一个旨在减少重复内容的一个建议，并不是命令，也就是说这个标签搜索引擎可能不遵守。国内最大的中文搜索引擎百度也已经支持 Canonical标签。 部分搜索引擎引入了Link的一个新属性Canonical。A页面声明B为权威链接，B声明C为权威网页，则搜索引擎会认为C是A和B共同的首选权威版本。此时Canonical标签起到了301重定向的作用。只能作用于同一个域名所在的网址，不能作用于不同域名上的重复内容。也就是说如果文章被其它网站抄袭，也不会因为这个标签而给你的原文章带来权重。如果是跨站，可以使用301重定向。该链接标签可用于定义相对地址，也可用于定义绝对地址。但为了保险起见，建议使用绝对地址。 使用方法：为网页指定权威链接（authoritative|canonical URL），以解决副本内容（duplicate content）问题。 使用样式：<link rel=”canonical” href=”网页权威链接”/> ### 四.CSS优化 于网站排名优化来说，css的几乎没有任何影响，但往大的方向如网站优化来说，样式表css的优化就至关重要了，其主要作用即是提高网页的响应速度。 (1)外链css css的使用有多种方式，一是嵌入式，即在html标签中直接定义样式表，如下所示:<p style="font-family:arial;font-size:16px;font-weight:bold;">Outside now its raining,and tears are falling from my yes…</p> 还有一种是直接定义在页面头部的如下：<styletype="text/css">p{ background:#f1f1f1;color:#333;line-height:20px;} </style>这两种方式都是把css写在当前html中，这样会造成hml文档变大，降低网页的响应速度，所以我们需要外链css，将所有与本页面相关的样式写入到该样式表中：<link href="style/common.css"rel="stylesheet"type="text/css"/> (2)精简css 对于这一点需要一定的css能力才可以做到了。所谓精简，指的是用尽可能少的样式代码实现整个网页的样式效果，需要充分利用css的继承和综合使用，举一个简单的例子来说明。如页面中的链接，全部不需要下划线、大部分为12像素，但链接的颜色并不相同，个别的字体效果也不相同，我们就可以这样来写： a{ text-decoration:none; font-size:12px;}/*定义通用a样式*/ 　　     a.a_red{ color:#e00;} 　　     a.a_blue{ color:#009;} 　　     a.a_menu{color:#fff;font-size:14px;font-weight:bold;}/*针对特殊a标签只指定特殊样式*/ 因为css的继承作用，a_red和a_blue都具备没有下划线、12像素这一样式，而a_menu同样具备没有下划线，但因指定了大小，就不再继承12像素的指定而使用14像素。 (3)整合css 一般情况下，前端制作人员喜欢把通用样式写成一个文件，把专用样式写成另一个文件以便各个页面调用。如笔者，就喜欢把页面通用样式（包括通用的布局样式、文字样式等）写在common.css中，而把专用的写在另一个样式表中。如首页，我们就需要调用common.css和index.css两个样式表文件。这样做，对于前端来说是正确的。但对于优化，却不太好。多一个文件调用就需要多一次请求，当然也会多耗费一点时间。所以，在网站制作完成后，我们需要把页面的所有样式合并大一起以提高网页的响应速度！但需注意，合并css不利于网站后期整改，权衡利弊各取所需吧，具体是否合并还需根据你的实际情况而定。 (4)压缩css 压缩css其实很简单，就是去掉多余的空格和换行。实现起来也非常的简单，网上有很多工具，请自行搜索“css压缩”即可找到很多在线压缩工具。同上面一点，压缩后的css不便于后期整改，需要自己权衡取舍。 ### 五.JavaScript优化编辑 javascript代码对于网站排名优化同样没有多大影响，但从网站优化的角度来看却是至关重要的一步优化操作，优良的javascript代码可以大幅度提升网页的响应速度！ (1)外链js代码 js代码跟css的使用差不多，都有三种方式： 内部定义：<A onclick="if(confirm('确认？'){...}else{...})"href="#">confirm</A> 头部插入：<script>...</script> 外链调用：<SCRIPT language=javascript type=text/javascript src="jquery-1.7.2.min.js"></SCRIPT> (2)精简js代码 这一点需要更为专业的js技术才能做到，尽可能根据需要实现的效果编写js，而不用从网上找一段代码直接拿来用，网上的代码很多功能很全，从而质量很大，而其中的很多功能对于我们要实现的效果是没有任何用处的，所以广拓企业网站建议你针对需要实现的效果定制js以便得到更为精简的代码，从而提高网页的响应速度。 (3)压缩js代码 对于这点，网上也有很多的工具，请百度查询“js压缩工具”即可。 (4)置底js代码 一般情况下，我们都是把js放到head之间的，这种方式在页面加载时即会加载，当然也就导致响应速度的降低，百度站长平台建议把js放到页面最底部，也就是</html>之外。等html加载完毕之后才加载js代码，当然，有部分特殊功能的js代码是没有办法放到页面底部的，具体请根据实际情况操作。 补充说明：针对js图像特效等，可能会影响网站关键字排名的！有的特效图像的路径、说明等都是写入到js中的，这种特效尽量不要使用。 上面说到了三种技术对网页优化起到的作用，我们都知道CSS+div是一个重要的优化过程。我们要着重说一下CSS+DIV的优化问题。 ### 六.DIV+CSS优化 对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。 (1)精简代码，降低重构难度。 网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。 (2)网页访问速度 使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从而提升了网站的用户体验度。 (3)SEO优化 采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。 (4)浏览器兼容性 DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及到一些方法和技巧，可以针对具体问题在网站查找解决办法。 (5)CSS+DIV网页布局的时候常犯的小错误 1.检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 2.检查CSS是否书写正确 检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 3.用删除法确定错误发生的位置 如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4.利用border属性确定出错元素的布局特性 使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5.float元素的父元素不能指定clear属性 MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6.float元素务必指定width属性 很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 另外指定元素时尽量使用em而不是px做单位。 7.float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 8.float元素的宽度之和要小于100% 如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 9.是否重设了默认的样式? 某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。 10.是否忘记了写DTD? 如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。最后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。

转载自[生活没有if-else的博客](http://blog.csdn.net/chentravelling)：[http://blog.csdn.net/chentravelling/article/details/43090085](http://blog.csdn.net/chentravelling/article/details/43090085) ### 一、JavaScript注释： 1.单行注释： 符号：// ~~~ //document.write("hello world");  该句话就会被注释而不会被执行。 ~~~ 2.多行注释： 符号：/*...*/ ~~~ /* document.write("hello world<br>");     document.write("hello world<br>");  */   //该两句就不会被执行   ~~~ ### 二、HTML注释： 符号：< !--.......--> 1.在HMTL语句中注释： ~~~ <!--  document.write("hello world"); --> //该句就不会被执行   ~~~ 2.在JS语句中使用：【需要在<script>与</script>之间使用】 ~~~ <script language = "javascript" type = "text/javascript">           <!--          document.write("hello world,this is my first js webpage - 1<br>");          -->       </script>//不支持JavaScript的浏览器则会不会执行document.write("hello world,this is my first js webpage - 1<br>");而在支持JavaScript的浏览器还是会执行该句。   ~~~ 例子：【可以直接复制粘贴，运行，查看结果】 ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <span style="white-space:pre"> </span><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The Web Development </title> <span style="white-space:pre"> </span> <!----------------------<span style="color:#ff0000;">插入js代码，必须放在<script>与</script>标签之间</span>----------------------> <script language = "javascript" type = "text/javascript"> <!-- document.write("hello world,this is my first js webpage - 1<br>"); --> </script> <!----------------------------------------------------------------------------------------> <span style="white-space:pre"> </span></head> <span style="white-space:pre"> </span><body> <span style="white-space:pre"> </span></body> </html> ~~~ 分析： 第6行和第12行代码属于HTML代码，使用<!--...-->标签注释的句子将不会被执行； 第8行和第10行属于js代码【位于<script>与</script>之间】，此时不支持JavaScript的浏览器则会不会执行第9句，而在支持JavaScript的浏览器还是会执行第9句。 使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。 web前端开发系列笔记：http://blog.csdn.net/chentravelling/article/category/2857107

### 一.动态网页概述 动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是htm、html、shtml、xml等静态网页的常见形式，而是以·aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”。 ### 二.动态网页简介 所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了，除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。 值得强调的是，不要将动态网页和页面内容是否有动感混为一谈。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的动态效果没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，只要是采用了动态网站技术生成的网页都可以称为动态网页。 总之，动态网页是基本的html语法规范与Java、VB、VC等高级程序设计语言、数据库编程等多种技术的融合，以期实现对网站内容和风格的高效、动态和交互式的管理。因此，从这个意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。 从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。 ### 三.动态网页的特征 (1)动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量； (2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等； (3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页； (4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索之中不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。 ### 四.动态网页设计新技术 1.PHP 即HypertextPreprocessor，它是当今Internet上最为火热的脚本语言，其语法借鉴了C、Java、PERL等语言，但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。它与HTML语言具有非常好的兼容性，使用者可以直接在脚本代码中加入HTML标签，或者在HTML标签中加入脚本代码从而更好地实现页面控制。PHP提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。 2.ASP 即Active ServerPages，它是微软开发的一种类似超文本标识语言(HTML)、脚本(Script)与CGI(公用网关接口)的结合体，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序。ASP的程序编制比HTML更方便且更有灵活性。它是在Web服务器端运行，运行后再将运行结果以HTML格式传送至客户端的浏览器。因此ASP与一般的脚本语言相比，要安全得多。 ASP的最大好处是可以包含HTML标签，也可以直接存取数据库及使用无限扩充的ActiveX控件，因此在程序编制上要比HTML方便而且更富有灵活性。通过使用ASP的组件和对象技术，用户可以直接使用ActiveX控件，调用对象方法和属性，以简单的方式实现强大的交互功能。但ASP技术也非完美无缺，由于它基本上是局限于微软的操作系统平台之上，主要工作环境是微软的IIS应用程序结构，又因ActiveX对象具有平台特性，所以ASP技术不能很容易地实现在跨平台Web服务器上工作。 3.JSP 即Java ServerPages，它是由SunMicrosystem公司于1999年6月推出的新技术，是基于JavaServlet以及整个Java体系的Web开发技术。JSP和ASP在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至 ASP一般只应用于WindowsNT/2000平台，而JSP则可以在85%以上的服务器上运行，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理，所以被许多人认为是未来最有发展前途的动态网站技术。 4.asp.net 是建立在公共语言运行库上的编程框架，可用于在服务器上生成功能强大的 Web应用程序。aspx是微软的在服务器端运行的动态网页文件，通过IIS解析执行后可以得到动态页面，是微软推出的一种新的网络编程方法，而不是asp的简单升级，因为它的编程方法和asp有很大的不同，他是在服务器端靠服务器编译执行的程序代码，ASP使用脚本语言，每次请求的时候，服务器调用脚本解析引擎来解析执行其中的程序代码，而asp.net 则可以使用多种语言编写，而且是全编译执行的，比ASP快，而且，不仅仅是快的问题，有很多优点。 ### 五.asp.net特点 与以前的 Web 开发模型相比，asp.net 提供了数个重要的优点： 1)增强的性能。asp.net 是在服务器上运行的编译好的公共语言运行库代码。与被解释的前辈不同，asp.net 可利用早期绑定、实时编译、本机优化和盒外缓存服务。这相当于在编写代码行之前便显著提高了性能。 2)世界级的工具支持。asp.net框架补充了VisualStudio集成开发环境中的大量工具箱和设计器。WYSIWYG编辑、拖放服务器控件和自动部署只是这个强大的工具所提供功能中的少数几种。 3)威力和灵活性。由于asp.net基于公共语言运行库，因此Web应用程序开发人员可以利用整个平台的威力和灵活性。.NET框架类库、消息处理和数据访问解决方案都可从Web无缝访问。asp.net也与语言无关，所以可以选择最适合应用程序的语言，或跨多种语言分割应用程序。另外，公共语言运行库的交互性保证在迁移到asp.net时保留基于COM的开发中的现有投资。 ### 六.动态网页缺点 1.首先动态网页在访问速度上不占优势动态网页首先获得用户的指令，然后网页拿着指令到数据库中找和指令相对应的数据，然后传递给服务器，通过服务器的编译把动态页面编译成标准的HTML代码，传递给用户浏览器，这样用户就看到了网页。问题出来了，每次访问网页都要经过这么一个过程，这一过程至少需要几秒钟的时间，访问的人数一多，页面的加载速度就会变慢，对服务器来说也是一种负担；从用户角度来说，网页加载的慢，迟迟没有反应，下次谁还会来访问你的网站。而静态网页就简单了，静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。由此可见，动态网页在访问速度上并不占优势。 2.在搜索引擎收录方面并不占优势 上面从服务器和用户体验的角度说了一下，下面再从搜索引擎收录角度说一下，动态网页是在用户输入指令后才形成的页面，并不存在这个页面，而搜索引擎只会抓取现成的，并不会自己输入，因此网站在搜索引擎收录方面并不占优势。搜索引擎还是喜欢静态页面。不过搜索引擎在不断完善发展。到目前为止，绝大多数的搜索引擎都已支持动态页面的抓取。

### 一.静态网页概述 在网站设计中，纯粹HTML（标准通用标记语言下的一个应用）格式的网页通常被称为“静态网页”，静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。静态网页是网站建设的基础，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。容易误解的是静态页面都是htm这类页面，实际上静态也不是完全静态，他也可以出现各种动态的效果，如GIF格式的动画、FLASH、滚动字幕等。 ### 二.静态网页介绍 静态网页有时也被称为平面页。静态网页的网址形式通常为htm（超文本标记语言）结尾 ，还有就是以超文本标记语言（.htm、.html）、.shtml、.xml（可扩展标记语言）等为后缀的。在超文本标记语言格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字幕等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。静态网页面通常是超文本标记语言文档存储为文件在文件系统里头，并且可以通过HTTP访问网 络服务器。 ### 三.静态网页的特点 1.静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“?”；（动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“？”后面的内容。） 2.网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的， 也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件； 3.静态网页的内容相对稳定，因此容易被搜索引擎检索； 4.静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难； 5.静态网页的交互性较差，在功能方面有较大的限制。 6.页面浏览速度迅速，过程无需连接数据库，开启页面速度快于动态页面。 7.减轻了服务器的负担，工作量减少，也就降低了数据库的成本。 ### 四.静态网页的优点 1.可以公开（即副本可以证明给任何人）。 2.托管没得任何特殊的要求。（不需要特殊的中间软件比如超文本预处理器、公共网关接口） 3.没得网络服务器或应用服务器，比如直接从CD-ROM（激光唱片-只读存储器）或USB闪存驱动器读取内容，可以通过网络浏览器直接访问。 4.网站更安全，HTML页面不会受Asp相关漏洞的影响；而且可以减少攻击，防SQL注入。数据库出错时，不影响网站正常访问。 ### 五.静态网页的缺点 1.任何个性化或交互都会运行在客户端之上。 2.没有自动化的工具，维护大量的静态页面文件是不现实的。 3.无法充分支持用户/客户的需求（外观选择，浏览器的支持，Cookie） ### 六.静态网页与动态网页的区别 1.网页制作使用的制作语言： 静态网页使用语言：超文本标记语言（标准通用标记语言的一个应用）动态网页使用语言：超文本标记语言+ASP或超文本标记语言+PHP或超文本标记语言+JSP或超文本标记语言+ASP.NET等。 2.程序是否在服务器端运行，是重要标志。 在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，ASP、PHP、JSP、ASP.NET、CGI等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如html页、Flash、 JavaScript、VBScript等等，它们是永远不变的。 ### 七.静态网页与动态网页的联系 1.静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。 2.静态网页是标准的HTML文件，它的文件扩展名是.htm或.html，可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等。尽管在这种网页上使用这些对象后可以使网页动感十足，但是，这种网页不包含在服务器端运行的任何脚本，网页上的每一行代码都是由网页设计人员预先编写好后，放置到Web服务器上的，在发送到客户端的浏览器上后不再发生任何变化，因此称其为静态网页。静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。 想要有更详细的静态网页了解可以在百度百科中学习：[点击打开链接](http://baike.baidu.com/link?url=fa7rkPpYr3DwF6fvyST95YKGKSE5UEED2DvA-eqBdKH4oZUyx1vrT4544DG7raIGKjQfLTb692vCAyJeoMQhua)

> 原文出处：[Web前端开发实战](http://blog.csdn.net/column/details/web-4.html) 作者：[erlian1992](http://blog.csdn.net/erlian1992) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # Web前端开发实战 > Web前端开发需要我们从最基础的实战开始，一点一滴的积累开发的思维，思路和解决问题的能力。