PHP求職寶典系列——PHP Web 編程篇，求職寶典web

　　3.CSS樣式常用屬性：

　　4.如何解決以下代碼在 IE6 下的雙倍邊距問題？

<style type="text/css">
body {margin:0;}
div  {float:left;　　margin-left:10px;    width:200px;    height:200px;　　border:1px;    solid red;}
</style>

　　這是 IE6 下的常見 Bug，雖然定義的外邊距為10px，但是 IE 卻解析為20px。

　　解決方案：添加屬性 display:inline

　　5.如何解決超鏈接被點擊後 hover 樣式不出現的問題？

　　對超鏈接樣式屬性進行正確的排序即可。

　　a:link{color:red;text-docoration:none}

　　a:visited{color:blue;text-decoration:none}

　　a:hover{color:black;text-decoration:overline}

　　a:action{color:black;text-decoration:overline}

　　6.如何解決火狐浏覽器下文本無法撐開容器的高度問題？

　　添加兩個CSS屬性，min-width 和 min-height ，也可以加入一個清除對齊方式的類 clear:both 屬性的 div 來自動計算火狐浏覽器的高度。

　　7.怎樣定義1px 左右高度的容器？

　　在網頁布局的過程中，導航欄和內容欄之間往往需要一個隔斷，一般情況下設置 1 個像素的高度為最佳。

 　　DIV 標簽

　　1.標簽<span>和<div>的區別：

　　<div>和<span>標記同樣作用於網頁布局中，它們的不同之處在於：

• span標記是屬於內聯的，一般用於小模塊的樣式內聯到HTML文檔中
• div 元素本身就是塊級元素，多用於組合大塊的代碼

　　2.如何使一個DIV層居中定位？

　　position:absolute;

　　top:50%;

　　left:50%;

　　margin:-100px 0 0 -100px;

　　3.怎樣解決 filefox 浏覽器中嵌套 div 標簽 text-align 屬性失效的問題?

1 <style>
2 .one {border:1px solid blue;width:300px;height:200px;text-align:center }
3 .two {border:1 px solid blue;width:200px;height:100px;margin:0px auto }
4 </style>
5 <div class="one">
6 <div class="two"></div>
7 </div>

　　JavaScript 腳本

　　1.彈出對話框的函數和獲得輸入焦點函數：

　　彈出對話框使用 alert()函數

　　獲取輸入焦點使用 focus()函數

　　 2. JavaScript 的轉向函數是什麼？怎麼引入一個外部JavaScript文件？

　　轉向函數： window.location.href="文件名稱";

　　引入外部 JavaScript 文件：<script type="text/javascript src='文件路徑及名稱'"></script>

　　3.當鼠標劃過文本框，自動選中文本框中的內容：

　　<input id="txt" type="text" value="baidu" onmouseover="this.select()"/>

　　4

　　<input id="txt" type="text" value="baidu" onclick="this.value=' '"/>

　　5.設置主頁的 JavaScript 代碼：

　　<a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomepage ('url');">設為首頁</a>

　　Ajax 應用

　　1.利用 jQuery中的Ajax判斷用戶名是否被占用：

　　需要定義兩個頁面，index.php 頁面代碼如下:

 1 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 2 <input type="text" ><input type="button" value="校驗">
 3 <script type="text/javascript">
 4 $(function() {
 5       $("input:last".click(function() {
 6             $.get ("in.php", {
 7                     username:$("input:first").val()
 8             },function(data) {
 9                     alert (data);
 10             })'
 11        });
 12 });
 13 </script>

　　in.php 頁面代碼如下：

 1 <?php
 2 $string="明日科技"；
 3 if(isset($ GET[username])) {
 4     if(urldecode($ GET[username])==$string) {
 5             echo "用戶名被占用";
 6     }else{
 7             echo "用戶名可用";
 8     }
 9 }
10 ?>

 　2. 編寫代碼，使得在文本框中輸入一個年份，判斷其生肖，並在文本框旁邊輸出，要求寫出HTML和JavaScript代碼：

　　前台頁面設計的代碼如下：

　　後台判斷生肖的PHP腳本：

1 <?php
2 if(isset($_GET[number])){
3         $array=array("豬","鼠","牛","虎","兔","龍","蛇","馬","羊","猴","雞","狗")；
4         foreach($array as $key=>$value) {
5                 if(ceil($_GET[number]%12)==$key){
6                         echo $value;
7                  }
8         }
9 }

　　jQuery框架

　　目前比較流行的客戶端腳本語言框架jQuery,由美國人John Resig創建，是優秀的JavaScript框架，其宗旨是write less,do more.它是輕量級的js庫，兼容CSS3，兼容各種浏覽器（IE 6.0⁺）。用戶能更方便地處理HTML document、events，實現動畫效果，並且可以方便地為網站提供AJAX交互。jQuery另一個比較大的優勢是，它的文檔說明很全，而且各種應用也說的很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的HTML頁保持代碼和HTML內容的分離，也就是說，不用再在HTML裡面插入一堆js來調用命令了，只需定義id即可。

　　1.jQuery中常用選擇器：

　　基本選擇器：

　　id選擇器：只能用一次

　　class選擇器：允許重復使用

　　標簽選擇器

　　*：匹配所有元素

　　層次選擇器：

　　$("#a.b") 選取id值為a的元素裡所有class值為b的元素。

　　$("#a>.b") 選取id值為a的元素後的class值為b的子元素。

　　$("#a+.b") 選取id值為a的元素後緊挨的class值為b的元素。

　　過濾選擇器：

　　：first，選取第一個元素。

　　：odd,選取索引是奇數的元素。

　　：even,選取索引是偶數的元素。

　　：not,選取除某元素外的其他元素。

　　：eq(),按索引尋找元素。

　　：lt(),小於某索引值的元素。

　　：gt,大於某索引值的元素。

　　2.如何實現查找DOM樹中的元素？

　　var input = $("input:first");

　　3.如何在DOM樹中創建並插入元素？

1 <script type="text/javascript" src="jquery-1.4.2.js"></script>
2 <div>水果</div>
3 <script>
4 var title=$("<span>蘋果</span>");
5 $("div").append(title);//將title追加到div標簽內容的後面
6 $("div").before(title);//將title追加到div標簽之前與div標簽屬於同一層次
7 $("div").prepend(title);//將title追加到div標簽內容之前
8 $("div").after(title);//將title追加到div標簽之後與div標簽屬於同一層次
9 </script>

　　 4.如何在DOM樹中替換指定元素？

1 <script type="text/javascript" src="jquery-1.4.2.js"</script>
2 <div>水果</div>
3 <script>
4 var title=$("<span>蘋果</span>");
5 $("div").replaceWith(title);
6 </script>

　　5.將一張圖片以淡出的效果消失在頁面中：

1 <script type="text/javascript" src="jquery-1.4.2.js"></script>
2 <img src="color.jpg">
3 <script>
4 $("img".click(function(){
5     $(this).fadeOut("slow");
6 });
7 </script>

　　6.制作一個按鈕，當按鈕被單擊時以卷簾效果消失：

1 <script type="text/javascript" src="jquery-1.4.2.js"></script>
2 <input type="button" value="按鈕">3 $("input").click(d=function(){
4         $(this).slideUp("slow");
5 });
6 </script>

　　7.照片輪換效果：

 1 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 2 <style>
 3 ul{list-style:none;width:350px;height:200px;position:absolute}
 4 li{position:ansolute}
 5 </style>
 6 <div class="change">
 7 <ul>
 8 <li><img ssrc="1.jpg" width=350px height=200px></li>
 9 <li><img ssrc="2.jpg" width=350px height=200px></li>
10 <li><img ssrc="3.jpg" width=350px height=200px></li>
11 <li><img ssrc="4.jpg" width=350px height=200px></li>
12 </ul>
13 </div>
14 <script>
15 $(function(){
16     $(."change ul li:not(:first)").hide();
17     setInterval(function(){
18         if($."change ul li:last").is(":visible")){
19             $(."change ul li:first").fadeIn("slow");
20             $(."change ul li:last").hide();
21     }else{
22             $(."change ul li:visible").next().fadeIn("slow");
23     }
24   },1000);
25 });
26 </script>   

　　鑒於最近要准備各種期末考和大作業，發博時間明顯減少，勞煩多多理解啊！本篇都是利用零碎時間編輯的，現在大功告成還是挺滿足啦，若您覺得有幫助，可以隨手點個贊。