技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【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 代码】

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>照片展示</title>
  5. 	<link rel="stylesheet" href="eg3.css" type="text/css" />
  6. </head>
  7. <body>
  8. 	<div   id="bigPhoto"><img   id="bigPhotoSrc"  src="photo01.jpg"   width="620"   height="450"   border="0"
  9. alt=""></div>
  10. <div id="smallPhotos">
  11. 	<span id="prve"></span>
  12. 	<ul id="smallPhotosList">
  13. 	</ul>
  14. 	<span id="next"></span>
  15. </div>
  16. <script src="eg3.js"></script>
  17. </body>
  18. </html>

对比前面章节的范例看上去更加简洁了对吧！重构的目的就是在于这样的效果，这可以说是开 发人员的用户体验。

3.2.2 CSS 代码

直接预览【范例 3-1】时肯定是乱七八糟的，在 eg3.css 中写好布局和定位的代码之后效果就大 不一样了，见图 3-2，CSS 代码见【范例 3-2】。

【范例 3-2 照片展示的 CSS 代码】

  1. 1.	ul,li{
  2. 2.	list-style: none;
  3. 3.	}
  4. 4.	#smallPhotos{width:620px; margin: 10px 0;}
  5. 5.	#smallPhotosList{ margin: 0 auto; width:580px; float:left;padding: 0;}
  6. 6.	#smallPhotosList li{
  7. 7.	float:left;	/*左浮动*/
  8. 8.	margin-left: 10px;	/*左外边距 10 像素*/
  9. 9.	_margin-left:8px;	/*这是专门正对 IE6 间隙太大而设置的*/
  10. 10． }
  11. 11.   #smallPhotosList img{
  12. 12.	border:2px solid #000;
  13. 13.	cursor:pointer;	/*鼠标样式*/
  14. 14.   }
  15. 15.   #prve{
  16. 16.	background: url(icon_prve.jpg);
  17. 17.	height: 40px;
  18. 18.	width:20px;
  19. 19.	display: inline-block;	/*让 span 标签变成块级元素*/
  20. 20.	float: left;
  21. 21.	cursor:pointer;
  22. 22.   }
  23. 23.   #next{
  24. 24.	background: url(icon_next.jpg);
  25. 25.	height:40px;
  26. 26.	width:20px;
  27. 27.	display: inline-block;
  28. 28.	float: right;
  29. 29.	cursor:pointer;
  30. 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. 【M21】利用重载技术避免隐式类型转换

    1.考虑UPint 的加法+,UPint a, b, result; 为了使result = a+10; result= 10+a; 都能通过编译,操作符重载如下: const UPint opera ...

  2. JavaScrip基础讲座 - 神奇的ProtoType

    1. 什么是 prototype  prototype 对于 JavaScript 的 意义重大,prototype 不仅仅是一种管理对象继承的机制,更是一种出色的设计思想 在现实生活中,我们常常说, ...

  3. pjsip视频通信开发(上层应用)之拨号界面整体界面功能实现

    在前面的几章里面写了显示.键盘.拨号.删除功能,这里我将他们进行组合,形成一个拨号键盘全部功能.首先是布局 <LinearLayout xmlns:android="http://sc ...

  4. 关于java的JIT知识

    1.JIT的工作原理图  工作原理 当JIT编译启用时(默认是启用的),JVM读入.class文件解释后,将其发给JIT编译器.JIT编译器将字节码编译成本机机器代码. 通常javac将程序源码编译, ...

  5. MAC JAVA 环境变量那些事

    1,查看 JAVA 的版本号 akdeMacBook-Pro:bin AK$ java -version java version "1.6.0_65" Java(TM) SE R ...

  6. Android：TabHost实现Tab切换

    TabHost是整个Tab的容器,包含TabWidget和FrameLayout两个部分,TabWidget是每个Tab的表情,FrameLayout是Tab内容. 实现方式有两种: 1.继承TabA ...

  7. 纯C++ 连接SQL Server2005 数据库读写操作的小例子

    一个测试c++链接 sql server 数据库的例子// 数据库说明// 数据库用户为 sa , 密码为 空// 数据库为 MyDB// 表为 UserInfo// 表字段为 Name . Pass ...

  8. iOS10全新推送功能的实现

    从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...

  9. E - Trees on the level

     Trees on the level  Background Trees are fundamental in many branches of computer science. Current ...

  10. Spreadsheet Tracking

     Spreadsheet Tracking  Data in spreadsheets are stored in cells, which are organized in rows (r) and ...