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 使用时间发射器模式简化事 ...
随机推荐
- JavaScrip基础讲座 - 神奇的ProtoType
1. 什么是 prototype prototype 对于 JavaScript 的 意义重大,prototype 不仅仅是一种管理对象继承的机制,更是一种出色的设计思想 在现实生活中,我们常常说, ...
- 使用compareDocumentPosition比较两个元素在文档中的位置
PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html 使用comp ...
- CISCO 双线接入MAP配置详解
随着我国宽带技术的普及,各个公司都会有一至二条Internet接入线路,这些线路可能由电信.网通.长宽.联通等不同的IS提供,尽管他们在局端采用的技术可能有不同,但对客户而言都是同样接入方式,以太 ...
- Android（java）学习笔记79：java中InetAddress类概述和使用
要想让网络中的计算机能够互相通信,必须为每台计算机指定一个标识号,通过这个标识号来指定要接受数据的计算机和识别发送的计算机. 在TCP/IP协议中,这个标识号就是IP地址. 那么,我们如果获取和操作I ...
- ArcMap运行时出现Runtime Error错误的解决方案
运行ArcMap时弹出错误提示:“Microsoft Visual C++ Runtime Library. Runtime 1.开始->运行->regsvr32 "C:\Pro ...
- 从医生看病和快餐店点餐理解Node.js的事件驱动
第一个例子是关于医生看病. 在美国去看医生,需要填写大量表格,比如保险.个人信息之类,传统的基于线程的系统(thread-based system),接待员叫到你,你需要在前台填写完成这些表格,你站着 ...
- 转：Nginx+ffmpeg的HLS开源服务器搭建配置及开发详解
转:http://itindex.net/detail/51186-nginx-ffmpeg-hls 本文概述: 至目前为止,HLS 是移动平台上非常重要并十分流行的流媒体传输协议.做移动平台的流媒体 ...
- php 常用的好函数(持续更新)
parse_url parse_url $url = "http://www.electrictoolbox.com/php-extract-domain-from-full-url/&qu ...
- Linux 命令 - w: 显示登录的用户及其当前执行的任务
命令格式 w - [husfV] [user] 命令参数 -h 不打印头部信息 -u 当列出当前进程和 CPU 时间时忽略用户名,这主要是用于执行su命令后的情况. -s 使用简短的格式化,不打印 L ...
- javascript应用：页面解析list和map封装后的json数据
开发web项目时,经常会使用到的页面脚本语言javascript,使用它能让页面展示上的效果更多彩. 今天就来说一下,从数据库中获取到数据后在页面上的展示方式: 1.数据库取出数据放入list< ...