動態
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的引入:
1、頁面引入
樣式描述存在於頁面檔案中。樣式僅在該頁面有效。 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...