JavaScript、jQuery、HTML5、Node.js实例大全
来源:互联网 发布:ie11启用javascript 编辑:程序博客网 时间:2024/06/08 08:15
3.2 照片加载与定位
根据功能设计,可以先写好 HTML 结构基础,再配好 CSS 做出大致效果,最后用 JavaScript加上各种动作。首先请看 HTML 代码结构。
3.2.1 HTML 代码
CSS代码保存到 eg3.css 文件中,JavaScript代码保存到 eg3.js 文件中,这样让 HTML代码更加 干净。详见【范例 3-1】。
【范例 3-1 照片展示的 HTML 代码】
<!DOCTYPE html>
<html>
<head> <title>照片展示</title> <link rel="stylesheet" href="eg3.css" type="text/css" />
</head>
<body> <div id="bigPhoto"><img id="bigPhotoSrc" src="photo01.jpg" width="620" height="450" border="0" alt=""></div><div id="smallPhotos"> <span id="prve"></span> <ul id="smallPhotosList"> </ul> <span id="next"></span></div><script src="eg3.js"></script>
</body>
</html>
对比前面章节的范例看上去更加简洁了对吧!重构的目的就是在于这样的效果,这可以说是开 发人员的用户体验。
3.2.2 CSS 代码
直接预览【范例 3-1】时肯定是乱七八糟的,在 eg3.css 中写好布局和定位的代码之后效果就大 不一样了,见图 3-2,CSS 代码见【范例 3-2】。
【范例 3-2 照片展示的 CSS 代码】
1. ul,li{
2. list-style: none;
3. }
4. #smallPhotos{width:620px; margin: 10px 0;}
5. #smallPhotosList{ margin: 0 auto; width:580px; float:left;padding: 0;}
6. #smallPhotosList li{
7. float:left; /*左浮动*/
8. margin-left: 10px; /*左外边距 10 像素*/
9. _margin-left:8px; /*这是专门正对 IE6 间隙太大而设置的*/10. }
11. #smallPhotosList img{
12. border:2px solid #000;
13. cursor:pointer; /*鼠标样式*/
14. }
15. #prve{
16. background: url(icon_prve.jpg);
17. height: 40px;
18. width:20px;
19. display: inline-block; /*让 span 标签变成块级元素*/
20. float: left;
21. cursor:pointer;
22. }
23. #next{
24. background: url(icon_next.jpg);
25. height:40px;
26. width:20px;
27. display: inline-block;
28. float: right;
29. cursor:pointer;30. }
这些 CSS 再加上后面【范例 3-3】的 JavaScript 代码,效果就大不一样了,请看图 3-2 的加载CSS 前后对比。
图 3-2 加载 CSS 代码前后
在【范例 3-2】中有一个称呼是 CSS hack,这个针对不同的浏览器写不同的 CSS code 的过程, 就叫 CSS hack。CSS hack 的存在是不同的浏览器,比如 IE 6、IE 7 等,对 CSS 的解析认识不一样, 会导致页面效果不同,得不到我们所需要的页面效果。 这个时候需要针对不同的浏览器去写不同的 CSS code,让它能够同时兼容不同的浏览器。
CSS Hack 大致有 3 种表现形式,CSS 类内部 Hack、选择器 Hack 以及 HTML 头部引用(if
IE)Hack,CSS Hack 主要针对 IE 浏览器,有一个比较全的 CSS Hack 表,请见图 3-3,转载暂时省略!
- JavaScript、jQuery、HTML5、Node.js实例大全
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
- javascript与jquery与node.js
- JS、JQuery、CSS+DIV实例大全
- node.js 实例DoraCMS
- node.js简单实例
- JavaScript与Node.js
- jQuery+html5+js轮播图
- 面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(3天)
- Node.js 连接 Mysql实例
- Node.js入门实例程序
- 问题unsupported major.minor version 52.0的记录
- iOS
- 前端JavaScript面试技巧
- 如何预测诺氟沙星NMR谱?
- 用户 'JWSDXSXX\Administrator' 登录失败。 原因: 无法打开明确指定的数据库。 [客户端: <local machine>]
- JavaScript、jQuery、HTML5、Node.js实例大全
- 使用反射机制修改JVM的DNS缓存
- Oracle客户端和服务端的区别
- 5_Junit日志环境搭建
- 关于商业和创业的一点点思考
- mysql中大于等于某个年月,小于等于当前年月之间的所有年月的语句如何写呢
- R语言网页爬虫
- SQL:将多条记录的不同数据放入同一格中
- MySQL权限管理