靜態網頁布局
㈠ 先做了一個靜態頁面，布局兼容所有瀏覽器，將靜態頁面放入.net母版頁中，布局就全亂了。
你的母板頁里是抄否引用了CSS樣式？襲
注意一下當靜態頁面引入到母板頁中，你引用樣式的路徑應該改變。
比如main.master是母板，在根目錄，引用了CSS樣式src路徑是css/a.css;你的靜態頁是在/html/a.html，這個目錄下，一旦a.html引入到母板頁中，則樣式會亂。
最好是將內容頁的CSS引用，放到用contentplaceholder實現。
在母板頁中Head部分增加一個contentplaceholder，然後內容頁中需要引用CSS的地方全都用content指向母板頁head部分的這個contentplaceholder，和你普通用內容頁的方式一樣。
css路徑也成a.html的相對路徑。
㈡ 製作html靜態網頁如何使用div+css布局，用的dw
用百分比來設定各元素的寬度。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>無標題文檔</title>
</head>
<style>
.header{
:left;
width:100%;
height:auto;
position:relative;
background:#ccc;
}
.header.logo{
float:left;
width:100%;
height:100px;
background:#aaa;
}
.header.logoimg{
margin:20px00100px;
}
.header.menu{
float:left;
width:100%;
position:absolute;
top:100px;
left:0;
background:#bbb;
}
.header.menuul{
width:100%;
}
.header.menuulli{
float:left;
width:10%;
height:25px;
line-height:25px;
text-align:left;
list-style:none;
background:#ababab;
}
.header.menuulli.long{
width:30%;
}
</style>
<body>
<divclass="header">
<divclass="logo"><imgsrc="images/logo.jpg"width="200"height="65"/></div>
<divclass="menu">
<ul>
<liclass="long">234234</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
</ul>
</div>
</div>
</body>
</html>
㈢ 怎樣製作簡單的靜態的網頁設計
你好。首先下載Dreamweaver.exe並打開，選擇你使用的編輯語言，本案例用html
打開頁面後，選著設計窗口，如圖所示。設計窗口可以快速布局網頁，不需要自己編輯代碼。
打開你要設計的網頁的設計圖，本經驗是網路經驗首頁為例，首先我們製作頂上的搜索條，點擊插入—表格（如圖所示）。打開表格屬性編輯表格屬性。插入1行和5列，表格寬度為1130,（即為網頁的寬度），邊距，間距分別為0，此表格只是為了定位，因此不設邊框。
設置好表格後，可在表格裡面插入你的內容，首先我們插入logo,點擊插入—圖像—選擇你要插入的圖片。點確定即可完成logo插入。表格的小大高度都可根據設計圖需要調整，滑鼠移到表格邊框虛線即可拖拉調整高度或寬度。如圖所示
接下來我們來做搜索框，點擊插入—表單—插入文本域—確定。插入文本框後可點擊文本框調整文本框的屬性。根據設計圖，文本框上班還要添加內容，因此，可選擇單元格右擊選擇表格—拆分單元格，此處是需要添加一行的內容，因此拆分為兩行，如圖所示。
用同樣的辦法拆分上面的行，因為要添加10個選擇項，因此拆分為10列（右擊選中的行—拆分單元格—10列—確定）。拆分好後在小格裡面添加文字內容即可。表格大小可根據步驟四調整。
接下來我們做搜索按鈕，同樣根據設計圖要把表格拆分為兩行。點擊插入插入按鈕的圖片。
接下來給按鈕添加鏈接，本次經驗分享的是靜態網頁，因此在此先跟大家分享怎麼直接添加按鈕鏈接。同樣是點擊插入—添加超級鏈接,填寫你事先做好的頁面鏈接，或者其他網站鏈接。
剩下的內容都可根據方法步奏逐漸添加，調節細節即可完成你想要設計的網頁。如圖所示是上面步奏所做的靜態頁面，把所有做好的網頁用超級鏈接鏈接起來即可做成一個簡單的網站
另外我們還可以採用front page。也可以很容易的實現。
望點贊。
㈣ 靜態網頁div 這種布局如何實現
直接給你貼代碼吧
css樣式：
.nav{ width:1000px; margin:0 auto;}
回.logo{ float:left; line-height:50px;}
.nav ul{ float:left;}
.nav ul li{ float:left; width:100px; height:50px; line-height:50px; text-align:center;}
HTML：
<div class="nav">
<div class="logo"><img src="logo.jpg" /></div>
<ul>
<li>文字答</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
</div>
㈤ 怎麼改靜態網頁的首頁布局
修改靜態網頁布局方法：
1、要有站點（本地或者空間都可以），而且有操作許可權，
2、將首頁端文件在本地用dw軟體打開，
3、修改布局（自己喜歡的），就可以，保存文件，在站點刷新就可以了。
注意：在空間上，要先在本地修改好後，通過FTP軟體上傳，在空間網站刷新就可以。
㈥ 靜態網頁設計製作中的布局模式
一、靜態布局（Static Layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2、設計方法：
PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。
在移動端開發中採用靜態布局的兩種方式：
（1）在viewport meta標簽上設置width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）
（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。
優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。
二、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
1、布局特點：屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。
這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。
三、自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。改變屏幕解析度可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
1、布局特點：屏幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。
四、響應式布局（Responsive Layout）
隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕解析度范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式幾乎已經成為優秀頁面布局的標准。
1、布局特點：每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。
㈦ 怎麼用div+css布局靜態頁面
10分，，，，
你這是工作的呢，還是作業的呢？？
如果是工作的話，，只能說真心別干這行了，自己都把這些東西看這么便宜，，做起來還有什麼前途。。。
如果學習的過程，或者做的過程，大家討論幫忙給出解決方案。。。
直接丟張圖出來，，給我代碼。。。。
我去，，，這里什麼時候開始變成這樣了。。。
㈧ 靜態，自適應，流式，響應式四種網頁布局有什麼區別
做好的html頁面都是靜態的
你所說的靜態應該是固定值
靜態：比如谷底固定好專div的寬度和高度[偏向理解]
自適應：屬也就是按照你的瀏覽器寬度自動縮小放大
流式：也就是div自行排列 比如[div 寬是100px 那麼我瀏覽器寬是500px 我們可以排列5個div 如果瀏覽器寬是300px 那麼div就會自動排列成2行 第一行是3個div 第二行是2個div]
響應式：藉助css3中的Media Queries 響應媒體查詢這個標簽來達到判斷解析度大小來執行css中的樣式代碼[早期做響應式的話 使用js來判斷]
像這樣網站: ipbun.cn 就是響應式的
㈨ 求用表格做html靜態網頁.一定要靜態....8張..只要幾個有布局和表格做的鏈接
畢業作業....
直接無視。幫你做了 你自己做什麼呢？大哥自己做吧。如果對內容沒要求的話，30分鍾就OK了
㈩ 靜態、自適應、流式、響應式四種網頁布局有什麼區別
1、靈活性不同：
靜態布局：毫無靈活性可言，目前已逐漸被淘汰。
自適應布局：靜態布局的升級版，因其強大的靈活性，已逐漸成為高端網頁的代名詞。
流式布局：靈活性更高，可適用於其他三種網站布局。
響應式布局：自適應布局的升級版，響應式網站要普遍適應市面上各類屏幕，開發難度和工作量都是非常大的，開發價格自然比普通網站高。
2、設計方法不同：
靜態布局：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分。
自適應布局：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。
流式布局：使用百分比定義寬度，高度大都是用px來固定，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。
響應式布局：媒體查詢+流式布局。使用@media媒體查詢和網格系統配合相對布局單位進行布局，就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。
(10)靜態網頁布局擴展閱讀：
靜態、自適應、流式、響應式四種網頁布局的特點概括
1、靜態布局：即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。
2、流式布局：頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
3、自適應布局：分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4、響應式布局：分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。