1.超鏈接訪問過後hover樣式就不出現的問題?
被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A
2.IE6的雙倍邊距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>
浮動後本來外邊距10px,但IE解釋爲20px,解決辦法是加上display:inline
3.爲什麼FF下文本無法撐開容器的高度?
標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉he ight設置min-height:200px; 這裏爲了照顧不認識min-height的IE6 可以這樣定義：
div { height:auto!important; height:200px; min-height:200px; }
4.爲什麼web標準中IE無法設置滾動條顏色了?
原來樣式設置：
<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
解決辦法是將body換成html
5.爲什麼無法定義1px左右高度的容器?
IE6下這個問題是因爲默認的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
6.怎麼樣才能讓層顯示在FLASH之上呢?
解決的辦法是給FLASH設置透明:
<param name="wmode" value="transparent" />
7.怎樣使一個層垂直居中於瀏覽器中?
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
這裏使用百分比絕對定位，與外補丁負值的方法，負值的大小爲其自身寬度高度除以二
8、firefox嵌套div標籤的居中問題的解決方法
假定有如下情況：
<div id="a">
<div id="b"> </div>
</div>
如果要實現b在a中居中放置，一般只需用CSS設置a的text-align屬性爲center。這樣的方法在IE裏看起來一切正常；但是在Firefox中b卻會是居左的。
解決辦法就是設置b的橫向margin爲auto。例如設置b的CSS樣式爲：margin: 0 auto;。
| 一些網頁設計師面試試題及參考答案 |
|
|
| 1. ASP.NET Web應用程序的模板有哪些?它們之間的區別是什麼?
【解答】 模板有：ASP.NET網站、ASP.NET Web服務、個人網站初學者工具包、空網站四類。 ASP.NET網站_即通常說的Web 應用程序，它包括有文件系統站點、本地IIS站點、FTP站點和遠程站點四類。通過第11章的圖11-1中的“位置”來選擇不同的站點類型。 ASP.NET Web服務_是一個服務器端提供的服務，該服務器端提供了一些方法，這些方法可以在Internet上被其他客戶在任何操作平臺上直接調用，而且不需要考慮這些方法是用哪種語言寫的。 個人網站初學者工具包_是一個已經創建好了的個人網站，其中包括主頁、摘要和相冊等。可以在此基礎上添加自己的內容或者是頁面。 空網站_創建時僅僅建立一個空白的項目，不包含任何文件或頁面。可以向其中添加所需要的各種資源文件。 2. 什麼是同步網站?上機完成例11-2，體會其含義。 【解答】 在本地網站和遠程網站間通過複製網站工具複製每一個文件的最新版本，以致兩個網站擁有所有文件的同一副本，這樣的過程就是同步網站。 3. HTML的含義是什麼?其主體部分由什麼標記構成? 【解答】 HTML即Hyper Text Markup Language超文本標記語言，是構成網頁最基本的元素。標記和之間的內容構成了HTML的主體部分，網頁中的所有內容，包括文字、圖形、鏈接以及其他頁面元素都包含在該標記符內。 4. 標記br和p有什麼區別? 【解答】 標記br和p都可以用來換行，但是二者是有區別的。<br>標記使當前行強行中斷而另起一行，但是新行與原來的行保持相同的屬性，即新行與原來的行屬於同一段落，而<p>標記在換行的時候另起了一新的段落；<br>標記無對應的結束標記</br>，而 <p>標記必須和</p>配合使用，不能省略</p>。 5. URL指的是什麼?有何作用?分爲幾種?有什麼區別?【解答】 URL是統一資源定位符，用於定位Web上的文件信息。 URL有絕對和相對之分。絕對URL就是指完整的資源地址，具體形式爲：協議名稱://計算機域名/路徑和文件名。一般情況下，在指定外部 Internet資源時應使用絕對URL。相對URL指資源相對於當前頁面的路徑。使用相對URL時，一般使用點“.”和雙點“..”表示當前目錄和上一級目錄(父目錄)。在製作網站的時候，只要站點各資源的相對位置不變，就使用相對URL。 6. 試畫出代碼如下的表格。 【解答】 網頁設計師面試試題及參考答案 src="http://images3.mx111.com/UploadPic/2007-2/200722713386951.jpg"> 第6題 得到的表格 7 說明在網頁設計中層的作用。 【解答】 層，也就是DIV標記，是一個區塊級的HTML標記，在該標記之間可以添加段落、表格、圖片等內容，使同一個DIV標記中的元素具有相同的樣式，並可在頁面顯示時同時出現、移動以及隱藏。 它的主要作用有以下兩點：(1) 將一些標記元素組織起來，應用DIV的屬性爲這些標記元素定義統一的樣式;(2) 利用其z-index屬性，實現頁面內各元素的重疊顯示效果;(3) 使頁面上顯示更多的特效功能。 8. 母版頁的作用是什麼? 【解答】 母版頁(Master Page)的擴展名爲“.master”，它相當於網頁的模板。在其他網頁中，只要引用了母版頁，母版頁的頁面就可以自動顯示出來，設計者可以修改引用的母版頁中預留的部分，其它部分保持不變，這樣就可以使多個頁面的風格保持一致，給網頁設計帶來了很大的方便。 9. CSS指的是什麼?在網頁製作中爲什麼要使用CSS技術? 【解答】 CSS(Cascading Style Sheets)也叫層疊樣式表，它是用來控制網頁中一個或多個元素的外觀。在網頁製作中，使用樣式表可以減少很多具有相同外觀元素的重複設置工作，從而給網頁的設計和維護帶來了很大的方便;具體應用是：改變樣式表中元素顯示樣式的定義，則在使用該樣式表的所有網頁中相應元素的顯示樣式都會自動發生改變。 10. 網頁製作中有哪幾種樣式設置方法?各有何特點? 【解答】 網頁製作中有：內聯式樣式設置、直接嵌入式樣式設置和外部鏈接式樣式設置三種方式。 1) 內聯式樣式設置： 設置方法：直接在要設置樣式的各標記元素中修改style屬性; 優點：直觀、方便; 缺點：不易於維護和修改; 適用於：網頁中個別需要修改的元素的樣式定義; 2) 直接嵌入式樣式設置： 設置方法：在HTML文檔的<head></head>之間添加<style></style>定義，<style></style> 部分是所有需要設置樣式的元素的屬性定義。 優點：對當前頁面內的所有元素的樣式修改、維護比較方便; 缺點：對於網站建設，要採用相同的樣式設置則比較麻煩; 適用於：單獨網頁的樣式定義; 3) 外部鏈接式樣式設置： 設置方法：把所有樣式定義放在一個獨立的文件中，凡是需要使用該文件中規定樣式的網頁，只要在其<head>與</head>之間添加一個對該樣式文件的鏈接：<link type="text/css" href="MyStyle1.css" rel="Stylesheet" />即可; 適用於：需要統一顯示樣式的網站建設。 11. 用戶自定義的類和ID在定義和使用時有什麼區別? 【解答】 定義時，類以英文形式的句點“.”爲起始標誌，ID以“#”爲起始標誌;使用時，類可以在一個頁面中被多個不同的元素引用，而ID在一個頁面中只能被引用一次。 12. 樣式定義如下，試說明顯示結果，並做相應解釋。 樣式表文件StyleExercise.css： body
{ background-color:#ccccff; } p { color:Blue; font-size:30px; } h1 { color:Yellow; font-size:medium; } p a { color :Orange; font-size:40px; } HTML文件： <head>
<title>樣式作業練習</title> <link type="text/css" rel=Stylesheet href=StyleExercise.css /> <style> h1{color:red;} .first{background-color:black;} </style> </head> <body> <h1 style="color:brown;">標題1</h1> <h1 class=first>標題2</h1> <p style="font-size:20px;">文本</p> <p>這是一個<a href="http://www.baidu.com">鏈接</a>演示。</p> <a href="http://www.baidu.com">另一個鏈接</a> </body> 1) 第一次使用的P、H1~H6標記均以紅色的“40px”大小的字體顯示; 2) 超鏈接未選中時，以藍色字體顯示;當鼠標移動到上方時，以原字體大小的1.5倍的橙色字體顯示;當超鏈接被點擊之後，以暗紅色字體顯示; 3) 所有P標記的內容都以列表的形式顯示; 4) 所插入圖片的左右兩側都允許有文字出現; 5) 使用背景圖片，並使其在整個頁面的兩個方向平鋪。 【解答】 該HTML頁面與樣式表文件建立了鏈接，顯示時以“#ccccff”色爲背景色; “標題1”：三種樣式定義方式都使用了，最終按照就近原則，以內聯式樣式定義的顏色“brown”、外部鏈接的樣式表文件定義的字體大小“medium”顯示; |
1 IE/Win的 HasLayout
2 浮動 float 的定義。float後元素的display屬性會發生改變嗎？
3 CSS 3.0、CSS2.1 中被現代瀏覽器應用了的規則有哪些？
4 父元素定義了一個初始高度，如果裏面的img 元素的高度超過了父元素的高度，如何自適應？
5 IE的3px bug 問題
6 清除浮動有幾種方法？你知道幾種說幾種？
7 CSS hack 瞭解嗎？說說。。。
8 IE 5.5及IE5的表現與IE6有什麼不同
補充：
9 用過 Opera 嗎？談談Opera 的表現。。
DIV+CSS常見錯誤彙總
內容摘要：通常爲了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因爲XHTML網站設計標準中，不再使用表格定位技術，而是採用css+div的方式實現各種定位。應用應用DIV+CSS編碼時很容易犯一些錯誤。
CSS＋DIV是網站標準（或稱“WEB標準”）中常用的術語之一，通常爲了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因爲XHTML網站設計標準中，不再使用表格定位技術，而是採用css+div的方式實現各種定位。應用應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤：
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是爲CSS減肥的工具，但也能檢查出拼寫錯誤。
3. 確定錯誤發生的位置
如果錯誤影響了整體佈局，則可以逐個刪除div塊，直到刪除某個div塊後顯示恢復正常，即可確定錯誤發生的位置。
4. 利用border屬性確定出錯元素的佈局特性
使用float屬性佈局一不小心就會出錯。這時爲元素添加border屬性確定元素邊界，錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性，周圍的float元素佈局就會混亂。這是MacIE的著名的bug，倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要爲其指定width屬性。
另外指定元素時儘量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法爲IE指定特別的值。
8. float元素的寬度之和要小於100%
如果float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。
9. 是否重設了默認的樣式?
某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置爲0、列表樣式設置爲none等。
10. 是否忘記了寫DTD?
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣，那麼可以檢查一下頁面開頭是不是忘了寫下面這行DTD：
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"〉