設計網頁的自適應問題_設計自適應網站頁面時應注意哪些事項

1、DIV+CSS 設計的頁面，DIV高度自適應問題，頁面大致代碼如下。

1樓的，有本事你把把他修復好。沒本事，還來這罵人。沒讓你回答怎麼著。以後別內上網路知道，你這是容在侮辱所有參與網路知道的人。
根據你的問題，很明顯是div不能自動適用高度。通俗的將，就是外層div不能包含內層的元素。
先說說為什麼會出現這個現象？
因為內層div全設置了浮動，也就是float屬性，元素一旦浮動，就不會佔用元素空間。就會出現，外層div不能包含內層元素的現象
解決方法：
方法1：
在內層元素的最後面加入一個元素，並且設置這個元素不浮動，強制使外層元素包裹內層元素如<div
style="clear:both;float:none"></div>
方法2：設置外層元素css屬性overfloat為hidden或者auto，zoom設置為1，設置zoom是為了兼容ie6
方法3：設置外層元素高度為一個固定值（不建議這么做，不過這是最完美的解決方法）
方法4：通過css的content屬性，這個有點復雜，我就不說了，反正很少人用這個
最後，在問一句，1樓的你是人嗎？
還有一條，把所有不參與浮動的外層元素，加上clear:both;，強制清除浮動

2、網頁設計中，使用自適應寬度有什麼缺點嗎

網站都是用960px，那是因為這些頁面很大可能不是設計師自己設計的，只是偷懶套用模板而已。
如果你是初學者建議先用TABLE布局，簡單明了，但缺點就是太死板，沒DIV+CSS靈活。
自適應寬度對於簡單的頁面沒什麼大問題，而且省事，但對於復雜的頁面就不行。
就拿img標簽來說吧，如果你不定義寬和高，那你圖片的大小就無法控制，圖片多大就在頁面顯示多大，如果圖片很大，那你還得用圖像製作軟體把圖片改小在放入IMG控制項，那多麻煩。如果你自定義的話<img width="500px" height="500px"/>，就會自動把你的圖片大小調整到你自定義的寬和高500*500，這樣方便多了，不過不建議你把小圖調大，這樣圖片的像素會變模糊，但大圖調小是絕對可以的。對於其它的控制項也是一個道理，我是不建議自適應寬和高，因為到時候你如果發覺布局不對了，就很麻煩，有的改了，事先自定義好，方便以後的維護同時可以有效的控制單元格的位置。
不建議在設計頁面的時候使用自適應的寬和高，這種寫法絕對是懶人的寫法，而且只適合比較簡單的頁面。

3、DIV+CSS 網頁設計自適應問題

這樣寫，我用了兩種辦法都實現了，一個是你說的，一個是我自己寫的。
別用浮動，
設置左絕對定位 0 0，寬200 比如。
然後右 margin-left:200px; 如果有間距那個就把200擴大比如205.
設置寬度100%
,然後再右邊的層里再套表格即可實現自動伸展。

代碼給你經過測試OK
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<body>
<div>
<div style=" position:absolute; left:0; top:0;width:200px; background:#009966; height:600px;"></div>
<div style=" margin-left:205px; background:#FF3366; height:600px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>

再給你一套你那樣寫法的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>

</head>

<body>
<div id="sidebar1"></div>
<div id="mainContent">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

4、自適應網頁設計和響應式網頁設計有什麼區別

通俗的說，自適應網頁設計也是響應式網頁設計，響應式網頁設計也是自適應網頁設計。但是真正的細分起來，自適應只是響應式的一個子集，指網頁中整體大圖的自適應或者banner的自適應。

響應式設計可以一個網站兼容多個不同終端

響應式網頁設計優勢：流體網格的網站適合響應式網頁設計。

1、靈活性強，可以適應不同解析度的設備

2、方便快捷的解決多設備顯示適應問題

自適應網頁設計優勢：固定斷點的網站適合自適應網頁設計。

1、實施起來代價更低，測試更容易

2、自適應布局可以讓設計更加可控，因為它只需要考慮幾種狀態就可以了

雖然響應式/自適應網頁設計會帶來兼容各種設備工作量大、代碼累贅、載入時間長的缺點，但它們能「一次設計，普遍適用」，可以根據屏幕解析度自適應以及自動縮放圖片、自動調整布局，它們不只是技術的實現，更多的是對於設計的全新思維模式。

5、網頁設計請問做網頁的時候有什麼方法讓網頁自適應，排版又不會隨著窗口大小的變動而錯亂？

自適應不能全部適應所有的瀏覽器的。所以一般使用JS先判斷是什麼瀏覽器再調用相應的CSS來完成。

6、網頁自適應跟平面設計有什麼關系

這個網頁自適應主要針對與適應不同屏幕解析度，平面設計是做與平面印刷或者現在的互聯網相關的圖形界面也慢慢的變成了平面設計中的一個分支，你要做到網頁自適應要了解什麼圖形在在什麼情況下可以一像素平鋪

7、網頁設計中，如何讓頁面自適應手機端？

一般來說，通過CSS3，可以直接對不同解析度下的樣式進行定義，比如如下的代碼。
/* PC或中大型筆記本設備 desktop */ @media all and (min-width: 1201px) { .title-desktop{ display: block !important; } .container { width: 1100px; } } /* 中小型筆記本或大平板 laptop */ @media all and (min-width: 980px) and (max-width: 1200px) { .title-laptop{ display: block !important; } .container { width: 920px; } }
但是上面的方法，可能不會兼容老版本ie。
所以也可以通過js，識別當前頁面的解析度，來給出樣式，這種比較好也比較復雜，代碼量很多但是一般沒有兼容問題。

8、如何進行自適應網頁設計

做網站讓頁面自適應大小方法代碼如下：

一、電腦站設置網站自適應方法

全屏寬度主要在於CSS代碼中，將width為100%，而不是一個固定的像素值，代碼如下。

手機網設置網自適應方法：

在網頁頭部加上這樣一條meta標簽：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

解釋：

9、如何設計網頁寬度自適應屏幕，圖片也自適應大小，但不能超出它的原始大小。

這位網友你好，想要網頁寬度自適應，你需要把網頁元素寬度設置為百分比，還要在網頁頭部加上代碼：

圖片自適應，且不超過原始大小，需要設置最大寬度，代碼如下：

img{
width:100%;
max-width:100%;
}

10、設計自適應網站頁面時應注意哪些事項

1、頁面內容要新穎

網頁內容的選擇要不落俗套，要重點突出一個「新」字，這個原則要求我們在設計網站內容時不能照抄別人的內容，要結合自身的實際情況創作出一個獨一無二的網站。放眼望去，網上的許多個人主頁簡直就是"雜貨店"，內容包羅萬象,題材千篇一律，人人都是"軟體下載",個個都有"網路導航"，從頭到尾找不出一絲「鮮」意。所以，我們在設計網頁時，要把功夫下在選材上。選材要盡量做到「少」而「精」,又必須突出「新」，如能堅持天天更新的話,我相信這樣的網頁一定會受到大家的歡迎。

2、網頁命名要簡潔

由於一個網站不可能就是由一個網頁組成，它有許多子頁面，為了能使這些頁面有效地被連接起來，用戶最後能給這些頁面起一些有代表性的而且簡潔易記的網頁名稱。這樣既會有助於你以後方便管理網頁，在向搜索引擎提交你的網頁時更容易被別人索引到。在給網頁命名時，最好使用自己常用的或符合頁面內容的小寫英文字母，這直接關繫到頁面上的連接。

3、要及時更新網頁

網頁製作好後，不能說萬事大吉了，其實事後的工作量更大。因為網頁製作是一時的，而維護更新的工作是每天都要做的。要及時把網頁上已經作廢的連接應該立即刪除掉，比如用戶無意中點擊了頁面中的一個連接，在苦苦的等待之後，換來的是無法訪問的結果，那麼他們會對你的網頁大失所望，可能以後再也不會光顧你的網頁了。若不能及時更新，也最好在主頁上發布信息，告訴前來訪問的朋友，因有特殊情況需要離開一段時間，未能及時更新主頁，希望各位見諒，這樣就能給人一種對別人負責的感覺，同時能得到網友的信任。

4、注意視覺效果

設計Web頁面時，一定要用640×480和800×600的解析度來分別觀察。許多瀏覽器使用640×480的解析度，盡管在800×600高解析度下一些Web頁面看上去很具吸引力，但在640×480的模式下可能會黯然失色。作一點小小的努力，設計一個在不同解析度下都能正常顯示的網頁

5、隨時注意網站升級

時刻注意網站的運行狀況。性能很好的主機隨著訪問人數的增加，可能會運行緩慢。但是，如果你不想失去訪問者的話，一定要仔細計劃好你的升級計劃。

6、網頁內容要易讀

網站設計最重要的訣竅，恐怕就是你的網頁要易讀。這就意味著,你必須花點心思來規劃文字與背景顏色的搭配方案。注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網頁來很費勁。一般來說，淺色背景下的深色文字為佳。這個要點要求你最好別把文字的規格設得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當代中文的閱讀習慣，文本大都居左的。當然，標題一般應該居中，因為這符合讀者的閱讀習慣。

7、善用表格來布局

不要把一個網站的內容象作報告似的一二三四地羅列出來，要注意多用表格把網站內容的層次性和空間性突出顯示出來，使人一眼就能看出你的網站重點突出，結構分明。

8、少用特殊字體

雖然你可以在你的HTML中使用特殊的字體，但是，你不可能預測你的訪問者在他們的計算機上將看到什麼。在你的計算機里看起來相當好的頁面，在另一個不同的平台上看起來可能非常糟糕。一些網站設計員喜歡使用來定義特性，這雖然允許你使用特殊的字體，但是仍需要一些變通的方法，以免你所選擇的字體在訪問者的計算機上不能顯示。級聯風格表CSS有助於解決這些問題，但是只有最新版的瀏覽器才支持CSS。

9、多學習和使用HTML

為了成功地設計網站，你必須理解HTML是如何工作的。大多數的網站設計者建議網路新手應從有關HTML的書中去尋找答案，用Notepad製作網頁。因為用HTML設計網站，可以控制設計的整個過程。但是，如果你僅僅是網站設計的新手，你應該尋找一個允許修改HTML的軟體包。HomeSite4是一個很好的Web設計工具。在設計過程中，HomeSite4能幫助你學習HTML。它還允許你切換到所見即所得的模式，以便你在把網站發送到Web之前，預覽你的網站。

10、盡量少用Java程序不要使用大幅面的Java程序,能夠用javascript替代效果的則盡量不要使用java.因為目前來講java的運行速度實在慢的讓人無法忍受，往往使瀏覽者沒有耐心等頁面全部顯示出來，這樣你的精心設計便毫無效果啦。

導航:首頁 > 萬維百科 > 設計網頁的自適應問題

設計網頁的自適應問題

與設計網頁的自適應問題相關的知識