做项目的思路
- 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";
}
网友评论