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.jQ ...
- Node.js: 深入浅出Nodejs读书笔记
今天终于把朴灵老师写的<深入浅出Node.js>给学习 完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内 ...
- Node.js入门经典 读书笔记(3)
本章中我们将讲述Node.js的作用 1.设计Node.js的目的 Node.js是构建在Chrome的JavaScript运行时之上的一个平台,用于简单构建快速的.可扩展的网络应用程序.Node.j ...
- HTML5/Node.js/JS 经验谈 (会员专属)【讲师辅导】-曾亮-专题视频课程
HTML5/Node.js/JS 经验谈 (会员专属)[讲师辅导]-5481人已学习 课程介绍 QQ 1405491181 链接 http://edu.csdn.net/lecture ...
- TWaver HTML5 + Node.js + express + socket.io + redis(六)
接上一篇TWaver HTML5 + Node.js + express + socket.io + redis(五), 这一篇将讲解如何用模版生成html页面, 如何验证用户登录, 您将了解到: 1 ...
- TWaver HTML5 + Node.js + express + socket.io + redis(五)
接上一回TWaver HTML5 + Node.js + express + socket.io + redis(四), 这一篇您将了解到 1. 如何保存更改后的拓扑数据 (包括新增的, 修改的, 删 ...
- sql经典实例_读书笔记 前三章
sql经典实例_读书笔记 温故SQL以及数据库相关知识 1.检索记录 select * from emp //检索所有列 where dep = 10 //选择出指定行 or comm is not ...
- node.js中公培训笔记大全(讲的一般,小白基础入门)
day01 本阶段的授课内容为 ES6 2天-3天 NodeJS 2天-3天 express 2天-3天 webpack 1天 MySQL数据库 2天 实战项目 2天 今天的授课内容为 1.ES5-严 ...
- JavaScript教程9 - Node.js
Node.js 安装Node.js https://nodejs.org/ npm npm其实是Node.js的包管理工具(package manager). 命令行模式 执行node hello.j ...
最新文章
- 干货|神经网络及理解反向传播
- Android教程之实现动作感应技术
- 【NLP】情感分析:BERT vs Catboost
- 平面点集的最小包围圆 hdu 3932
- macbook所有型号大全_苹果笔记本型号大全
- 离线计算中的幂等和DataWorks中的相关事项
- sap netweaver 7.02_sap顾问工作内容,岗位职责
- weblogic详解
- 用户空间缺页异常pte_handle_fault()分析--(下)--写时复制
- 51单片机开发入门(1)-单片机简介
- mysql里一个中文多少个字节_mysql里中文占多少个字节?
- solidworks重建模型好慢_解决SolidWorks拉伸模型提示“重建模型错误”的方法
- Hive中运行任务报错:Error during job, obtaining debugging information...
- 计算机超级皇冠关键词是什么,搜狗推广服务
- Android 性能优化 (一)APK高效瘦身
- 线性代数之向量、矩阵、行列式、列向量的计算
- Java高频面试题(2022) - Java、Mysql、JUC、JVM、SSM
- 数学速算法_小学数学速算法,掌握了至少提高20分!
- 机器人测钢卷直径_激光传感器的使用方法汇总
- vs2010 opencv 视频抓图
热门文章
- centos 解除链接_KeyShot 9.2 新功能介绍!(附下载链接)
- Linux工具篇 | Ubuntu安装Python包管理工具pip3
- 第十二届蓝桥杯(2021年)模拟赛 Python组(第一期) 题目+个人解答
- 【2013Esri中国用户大会】GeoEvent打造实时GIS应用
- 祖传Python代码
- 【推荐】VEX FUNCTIONS
- CNN、Capsule详解
- 哈利波特检索c++实现
- 阿里云服务器开放某个端口
- 如何设置静态路由器计算机网络,路由器如何设置静态ip(固定ip)地址上网?