JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【JavaScript实战----JavaScript、jQuery、HTML5、Node.js实例大全】
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
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
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2的更多相关文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在 ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- node.js开发指南读书笔记（1）
3.1 开始使用Node.js编程 3.1.1 Hello World 将以下源代码保存到helloworld.js文件中 console.log('Hello World!'); console.l ...
- Node.js 开发指南-读书笔记
1. Node.js 使用了单 线程.非阻塞的事件编程模式 Node.js 最大的特点就是采用异步式 I/O 与事件驱动的架构设计.对于高并发的解决方 案,传统的架构是多线程模型,也就是为每个业务逻辑 ...
- Node.js高级编程读书笔记 - 4 构建Web应用程序
Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...
- Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never
Explanation 现阶段console.log(...),util.inspect(...), JSON.stringify(...)在控制台输出已经够用了[2015/07/19]. 单元测试隶 ...
- Node.js高级编程读书笔记 - 1 基本概念
Outline 1 概述和安装 1.1 安装Node 1.2 Node简介 2 Node核心API基础 2.1 加载模块 2.2 应用缓冲区处理.编码和解码二进制数据 2.3 使用时间发射器模式简化事 ...
随机推荐
- 极限编程(XP)基本原则与规范
1. 坐在一起(Sitting Together) 尽可能让团队成员坐在一起,Kent Block在一次芝加哥的某个濒临困境的项目中发现,虽然这个团队都是由程序 精英组成,但是却陷入困境,后来他发现, ...
- MediaPlayer开发全解析
本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...
- 统计0到n之间1的个数
问题描写叙述 给定一个十进制整数N,求出从1到N的全部整数中出现"1"的个数. 比如:N=2时 1,2出现了1个 "1" . N=12时 1,2,3,4,5,6 ...
- mysql升级小结和mysql_upgrade的用途
http://blog.itpub.net/15480802/viewspace-1412259/ mysql升级 1 升级方式 分为In-place和out-of-place,前者直接覆盖当前版本, ...
- cocos2d-x中使用sqlite
在单机游戏中有几十个场景道具,每一个都有各自的状态(获得.未获得.获得个数)等等,如果在游戏中平凡涉及到这些道具的实时存储,那么使用文本就会稍慢.可以使用sqlite数据库来完成. 下载地址:http ...
- Android调用相册截取图片遇到的问题
1.在Android中可以使用如下的方式来调用相册,选择图片进行裁剪使用,昨天在开发的时候遇到一个问题 private void cropBigImageUri(Uri uri, int output ...
- 采用虚拟命名管道的字符设备和阻塞型I/O实现进程间的通信实现KWIC程序
采用虚拟命名管道的字符设备和阻塞型I/O实现进程间的通信实现KWIC程序专业程序代写c++程序代写
- 实现struts2框架
Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标签库以及面向对象的技术水准.最初的 ...
- 配置tomcat连接器后，启动服务报错“No Certificate file specified or invalid file format"异常
1:原来的配置是 <Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true&quo ...
- 修改Linux网卡由eth1变成eth0
正常来说,Linux在识别网卡时第一张会是eth0,第二张才是eth1.有时候我们使用虚拟机克隆技术后网卡的信息就会改变,新克隆出来的虚拟主机网卡名字可能变为eth1.无论我们怎么修改都无法改变,这就 ...