Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記2

JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記2

發布時間:2016-09-18   編輯:www.4271936.live
jquery中文網為您提供JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記2等資源,歡迎您收藏本站,我們將為您提供最新的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 前后對比。
JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記2
圖 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

您可能感興趣的文章:
Node.js簡介與安裝開發環境教程
Node.js模塊學習教程
node.js入門實例教程
Jquery 學習筆記(一)
Jquery實戰_讀書筆記1—選擇jQuery
基于JQuery 選擇器使用說明介紹
什么是Node.js?Node.js使用詳細介紹
HTML5 File Uploads with jQuery
jQuery HTML5 Uploader
node.js獲取本機內網與外網ip地址怎么實現?

[關閉]
微信下载APP完成任务如何赚钱 幸运28开奖结果99 湖北快三预测今天豹子 安徽体彩十一选五一定牛 重庆农场平台下载 中原福彩22选5走势图 超神pk10计划手机版ios 河北20选5app 江苏11选五前三组选图 云南11选5推荐今天的 广西快三助赢软件