美文网首页
最世界--项目总结

最世界--项目总结

作者: Victor细节 | 来源:发表于2016-12-30 13:59 被阅读0次
    做项目的思路
    • first 当拿到一个项目后,首先要思考项目有哪些难点,会产生什么样的bug,不同的网页有什么联系,需要把哪些功能单独拿出来单设一个html等等。。
    • second 考虑布局问题,采用什么样的页面结构去布置,对整个布局有一个大概的轮廓,从哪方面开始着手做才会更加简洁等。。。
    代码的规范问题

    在我做项目中,很多时候都在查找写过的代码,尤其是在写js的时候。这时候一个良好的编码习惯会给你节省很多的时间。

    • 有良好的代码注释习惯
    • 代码工整规范
    • 最好以后把可以重复调用的html单独存放在一个文件夹内
    $.load()方法的使用

    以前在写页面时,只能每个页面单独编码,使用load()方法后就方便多了,可以同时在多个页面上调用一个html页面,大大提高了编码效率,与代码质量!!!

    调用

    $.load(url,fn); //url内添加html文件

    注意事项

    当我更新了subNav.html以后,在浏览器里load方法仍旧在使用旧的subNav.html,就算我按刷新键也不管用。这里存在了一个缓存问题!!!

    **以下为我在网上找到的解决办法 **

    • 更改文件名,比如把labels.html改成lables_new.html,但是这是没有办法的办法,一般没有人这么做。

    • 在labels.html后加上特定时间,比如lables.html?20081116。在实际工作中,在我更新css/javascript文件后,我都是用这种办法来防止文件被缓存。

    • 在labels.html文件的顶部加入以下声明: <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="-1">

    • load函数不仅可以调用HTML,也可以调用script,比如labels.php,可以在php文件里使用header函数:
      复制代码代码如下:

      <?php header("Cache-Control: no-cache, must-revalidate"); ?>

    有关于轮播图方面的问题

    以前在做轮播图的时候,是没有动画效果的,只是改变了背景图片,这样就降低了用户体验。

    • 增加动画效果
    • 延长翻页时间
    • 尽量减少轮播图页数,在可控范围之内
    有关于二级菜单联动方面的问题

    二三级菜单联动是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的

    以下是我在项目中总结的问题

    • 设置鼠标移入事件时,要用mouseover事件
    • 设置鼠标移除时,要用mouseleave事件,这样就不会在移除其子元素时触发移除事件了
    • 要将联动出的下级菜单与上级是父子关系,解决了鼠标移除上级菜单进入到下级菜单也会使子菜单消失的问题

    在项目中学到的小技巧

    在文字末尾添加省略号

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    

    添加伪元素

    @font-face {
    font-family: 'zworld1';
    src: url('../font/zworld.ttf') format("truetype");
    }
    @font-face {
    font-family: 'zworld2';
    src: url('../font/iconfont.woff') format("truetype");
    }
    .herderSearch button{
    font-family: 'zworld1';
    padding: 5px 0;
    font-style: normal;
    font-size: 1.5em;
    color: silver;   
    }
    .herderSearch button::after{
     content: "\e60f";
    }

    相关文章

      网友评论

          本文标题:最世界--项目总结

          本文链接:https://www.haomeiwen.com/subject/yijmvttx.html