大家提交上来的代码我已经大致看了一遍，整体来说写的非常棒，无论是从整体效果、代码可读性以及操作难度上看都有非常大的提升。以下列出了一些可以改进的地方，这次提出的主要是一些常见的规范化操作。
    1、在页面底部引入javascript文件

    1.     要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。如果你的JS文件只是要实现某些功能，比如点击按钮事件，那就放心的在body底部引入它，这绝对是最佳的方法。（无论是直接写入还是js文件导入）举例：<br /><html><br /><body><br /><p>And now you know my favorite kinds of corn. </p> <br /><script type="text/javascript" src="path/to/file.js"></script> <br /><script><br />*******<br /></script><br /></body> <br /></html>

    2、不要使用嵌入式JavaScript

    1.     许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册或者轮播图的引用中非常常见。本质上讲，一个“onclick”事件是附加在标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，或如第一点一样在页面底部使用JS代码代码。

    3、使用UL列表布局导航菜单

    1.     通常网站都会有导航菜单，你可以用这样的方式定义：<br /><div id="nav"><br /><a href="#">Home</a><br /><a href="#">About</a><br /><a href="#">Contact</a><br /></div><br />        如果你想书写优美的代码，那最好不要用这种方式，因为UL生来就是为定义列表准备的。最好这样定义：<br /><ul id="nav"><br /><li><a href="#">Home</a></li><br /><li><a href="#">About</a></li><br /><li><a href="#">Contact</a></li><br /></ul>

    4、响应式的写法
    响应式css主要使用@media标签

    如@media all and (min-width: 980px) and (max-width: 1200px){}所达到的效果就是当屏幕大小为980px至1200px之间时将会采用中的css代码

    下面展示了一个简单的响应式所需要的代码
    <!DOCTYPE html>











    PC或中大型笔记本


    中小型笔记本或大平板


    中型平板或小型笔记本


    手机或小平板



    body{
    padding: 0;
    margin: 0;
    }
    .title{
    display: none;
    }
    .container{
    background-color: #E9E9EC;
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    }
    / PC或中大型笔记本设备 desktop /
    @media all and (min-width: 1201px) {
    .title-desktop{
    display: block !important;
    }
    .container {
    width: 1100px;
    }
    }
    / 中小型笔记本或大平板 laptop /
    @media all and (min-width: 980px) and (max-width: 1200px) {
    .title-laptop{
    display: block !important;
    }
    .container {
    width: 920px;
    }
    }
    / 中型平板或小型笔记本 tablet /
    @media all and (min-width: 768px) and (max-width: 979px) {
    .title-tablet{
    display: block !important;
    }
    .container {
    width: 720px;
    }
    }
    / 手机或小平板 phone /
    @media all and (max-width: 767px) {
    .title-phone{
    display: block !important;
    }
    .container {
    width: 90%;
    }
    }