動態
web入門
css+div
傳統的網頁製作採用兩層架構，在表現層控制頁面顯示，**比較混亂而且維護性不好，現在一般都採用
div+css
架構來實現**頁面的開發，本文只是乙個簡明手冊，起到乙個拋磚引玉的作用。
一．css-----
層疊樣式表使用
css檔案可以靈活控制表現層。同乙個頁面檔案，使用不同的
css，可以具有不同的外觀效果。因此，需要修改外觀時，僅修改
css檔案，而不需要對頁面檔案做任何改動。
css檔案1
頁面檔案1
css檔案2
頁面檔案1
頁面檔案1
後台處理檔案
表現層
業務層
目標
----
設計結構化的頁面
u以往的**：
「500px" cellpadding="3" border="2" align="left">
u結構化的**
width
、border
等屬性都稱為表現層屬性。結構化的頁面，表現層屬性全部在
css中描述，不再出現在頁面檔案。
以上**的
css描述
table
注：屬性後面使用冒號（：）來設定值
二．
css基本知識
ucss的引入：
１、頁面引入
樣式描述存在於頁面檔案中。樣式僅在該頁面有效。 2
、css
檔案引入
樣式檔案單獨存在於乙個樣式檔案，通常以
.css
為字尾。樣式為全域性有效。頁面檔案需要鏈結該樣式檔案才能使用樣式描述。
通常會為乙個**建立乙個
css檔案，以統一全域性效果。對於區域性特殊之處，再通過頁面級樣式以區域性限定。
u拾取器
table
-------------------
對table
標記有效的樣式
＃mydiv
｛width:500px;border:2
｝-------------------
對標記內 id＝
「mydiv「
有效.atag
-------------------
對標記內
class=「atag」
有效input.myinput
-------------------
對標記為
input
class=「myinput「
有效#mydiv
#mysubdiv
-------------
對id=「mydiv」
的內嵌標記
id=「mysubdiv」
有效mytag
-------------
自定義拾取器
使用舉例
-------------
將該div
放置於mydiv
外，則該
div不具有樣式
「input
」class=
「myinput
」>
helloworld
三．結構化介面布局－－
div+css
u現**念：用
div實現對頁面結構的劃分，用
css控制表現。
head
left
main
foot
head
left
foot
middle
right
div
udiv是很好的布局元素，有幾個重要屬性需要了解：1、
position(absolute/relative)
定位屬性。通常用
absolute
絕對定位，然後用其
left
、top
等屬性指明其座標。但注意，是相對于父容器的座標。
#wrap
#sub
wrap
sub
無巢狀：
sub層的父容器為
body
有巢狀：
sub層的父容器為
wrap
wrap
sub
wrap
2、float
（left/right/none)
如果沒有設定該屬性，當瀏覽器變大或變小時，層的位置不變。設定該屬性後，層隨著瀏覽器變化，始終居左或居右。
但注意，設定
position:absolute
後，該屬性不起作用。3、
width
（百分比/畫素
) 注：百分比僅對拾取器為
id時有效。
用百分比表示與父容器之間的相對關係，用畫素則表示絕對寬度。4、
height
（畫素）
無法用百分比設定相對高度，只能設計絕對大小，即高度不變，這是設計時的乙個難點。網上有資料關於高度自適應問題的解決。
小技巧：使用
height:expression(screen.height）/5
，設定層的高度為顯示器的
1/5，使得層可以隨瀏覽器不同而自動變化。5、
overflow(hidden/scroll/auto)
當層內的內容超過（溢位）層的高度和寬度時，層的顯示方式。
hidden
：溢位部分不顯示
scroll
：層顯示水平、垂直滾動條
auto
：水平溢位自動顯示水平滾動條，垂直溢位自動顯示垂直滾動條。
通常用auto
。這樣可以設計時就設定層的大小，執行時，其大小都不變，層的內容溢位時通過滾動條顯示溢位部分，因此不至於影響其他頁面元素，而導致破壞頁面整體結構。
四．需要考慮的因素
客戶端瀏覽器、解析度大小是不固定的，頁面元素如何適應客戶端？
解決的方法無非就是兩個：
思路一、外層固定大小，內層(包括
div，
table
元素）相對大小。
很多**採用這一思路。最外層的
div的
width
設定成800
，並居中。使得無論是
15寸、
17寸或
19寸顯示器，頁面元素均不變化。但必然會有部分顯示區域不能使用。
思路二、所有大小均用相對大小。
最外層大小通常根據計算客戶端瀏覽器大小決定，內嵌層(包括
div，
table
元素）用相對大小。提高顯示區域的利用率。
五．結構化設計頁面
u1、設計頁面結構，考慮採用是相對還是絕對大小思路；u2
、用div
規劃整個頁面布局，有時可以用框架（
frameset
）來劃分頁面布局；u3
、用css
控制div
屬性；u
4、考慮整個**會有哪些頁面元素，並為他們設計
css，包括拾取器的選用及命名。u5
、頁面引入
css，並觀察效果並改進
css。
注意結構化：1、用
div結構化布局；
2、所有表現層屬性均在
css中定義。
CSS Div布局入門教程
在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用css div進行網頁布局設計吧。所有的設計第一步就是構思，構思好了，一...
web頁面入門
開發頁面在很多人眼裡很簡單，大部分的人都會說不就是把效果圖變成網頁嘛，需要那麼多的時間，一點技術含量都沒有。確實html頁面沒有js那麼多複雜的互動，也不需要和後台資料打交道，但並不能代表就沒有技術含量，也不是人人都能做好的。頁面結構好壞直接會影響到css 的質量，也會影響js和後台的開發，還會影響...
web開發入門
這一篇就說一下 web server和指令碼還有資料庫的關係吧 一般做web開發大家都習慣裝乙個wamp後者lamp。就是web server,php和mysql的集合。問題是 為什麼要裝乙個web server?按照原先寫c 的思維 我就有個c 的編譯器，然後就可以寫c 了啊，幹嗎還有裝乙個web...