技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【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的更多相关文章

  1. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  2. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

  3. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

    5.2.2 让瀑布流动起来 打好基建之后,就需要写JavaScript代码.首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在 ...

  4. Node.js高级编程读书笔记Outline

    Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...

  5. node.js开发指南读书笔记（1）

    3.1 开始使用Node.js编程 3.1.1 Hello World 将以下源代码保存到helloworld.js文件中 console.log('Hello World!'); console.l ...

  6. Node.js 开发指南-读书笔记

    1. Node.js 使用了单 线程.非阻塞的事件编程模式 Node.js 最大的特点就是采用异步式 I/O 与事件驱动的架构设计.对于高并发的解决方 案,传统的架构是多线程模型,也就是为每个业务逻辑 ...

  7. Node.js高级编程读书笔记 - 4 构建Web应用程序

    Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...

  8. Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never

    Explanation 现阶段console.log(...),util.inspect(...), JSON.stringify(...)在控制台输出已经够用了[2015/07/19]. 单元测试隶 ...

  9. Node.js高级编程读书笔记 - 1 基本概念

    Outline 1 概述和安装 1.1 安装Node 1.2 Node简介 2 Node核心API基础 2.1 加载模块 2.2 应用缓冲区处理.编码和解码二进制数据 2.3 使用时间发射器模式简化事 ...

随机推荐

  1. 在VS2012下不安装VS2010编译VS2010的工程

    虽然一路追随这VISUAL SUTDIO在编程,但是断档的情况还是有的,最近一次硬盘问题使得安装了所有的VS2003-VS2012的机器硬盘挂了,无奈只能够安装了,不过觉得没啥用了,就安装一个VS20 ...

  2. EasyUI改动DateBox和DateTimeBox的默认日期格式

    近期整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是 ...

  3. Spring的DataSource配置、将Hibernate配置所有写到Spring配置

    DataSource能够集中管理数据库连接,降低维护工作量,使部署更简单: Spring的DataSource配置:(Spring数据源配置)这里使用dbcp,还有非常多其它的如c3p0,jdbc,j ...

  4. 面试题——设计一个程序：运行报错Stack Overflow Error

    所谓Stack Overflow就是栈里面放的东西太多了,溢出了. 大家知道栈里面存放的是基本数据类型还有引用类型. 下面看这个程序 class Test { public static void m ...

  5. USACO prefix TrieTree + DP

    /* ID:kevin_s1 PROG:prefix LANG:C++ */ #include <iostream> #include <cstdio> #include &l ...

  6. 通用PE u盘启动盘制作

    导读 通用pe工具箱是现在最老牌的的U盘装系统和维护电脑的专用工具之一,一键式制作.操作简单便捷,几乎100%支持所有U盘,不再为装机烦恼们,抓紧时间下载通用pe工具箱体验下吧. 准备工作 ①从通用p ...

  7. 下了个C-Free，结果点新建，出来的就是.cpp 怎么变成.c呢。。。他默认新建文件是c++的啊，

    C-Free主界面--->工具--->环境选择--->一般--->“新建文件类型”将cpp改成c即可

  8. 美H1B签证额满，硕士以上学位仍可申请

    美国公民与移民服务局6月1日宣布,2007会计年度的工作签证H1B名额已经用完,下年度的申请从明年4月1日开始.但在美国获得硕士以上学位的高学历者仍可申请. 据北美世界日报报道,美国移民律师协会对连续 ...

  9. Android进阶笔记13：RoboBinding（实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架）

    1.RoboBinding RoboBinding是一个实现了数据绑定 Presentation Model(MVVM) 模式的Android开源框架.从简单的角度看,他移除了如addXXListen ...

  10. 为MYPoint类写一个分类

    #import <Foundation/Foundation.h> //xieyi @protocol showOn @required -(void)printOn; @end // l ...