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

简介:

技术非常多。样例非常多。仅仅好慢慢学,慢慢实践!。如今学的这本书是【JavaScript实战----JavaScriptjQueryHTML5Node.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





本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5154070.html,如需转载请自行联系原作者
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
66 1
|
20天前
|
JavaScript
jQuery实现的卡片式翻转时钟HTML源码
jQuery实现的卡片式翻转时钟HTML源码
17 0
jQuery实现的卡片式翻转时钟HTML源码
|
29天前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
44 11
|
2月前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
71 9
|
2月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
98 2
|
3月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
70 3
|
3月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
55 4
|
3月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
86 0
html5+three.js公路开车小游戏源码
|
3月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
58 1