首页 > 代码库 > JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

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

2024-07-29 00:25:21   221人阅读

技术很多，例子很多，只好慢慢学，慢慢实践！！现在学的这本书是【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="http://www.mamicode.com/eg3.css" type="text/css" /></head><body>	<div   id="bigPhoto"><img   id="bigPhotoSrc"  src="http://www.mamicode.com/photo01.jpg"   width="620"   height="450"   border="0" ></div><div id="smallPhotos">	<span id="prve"></span>	<ul id="smallPhotosList">	</ul>	<span id="next"></span></div><script src="http://www.mamicode.com/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


联系
我们