亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

WEB2.0標準教程:第九天 第一個CSS布局實例

系統 2081 0
接下來開始要真正設計布局了。和傳統的方法一樣,你首先要在腦海里有大致的輪廓構想,然后用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素,因為web標準更關注結構和內容,實際上它與網頁的美觀沒有根本沖突,你想怎么設計就怎么設計,用傳統表格方法實現的布局,用DIV也可以實現。技術有一個成熟的過程,把DIV看成和TABLE一樣的工具,如何運用就看你的想象力了。
注:在實際應用過程中,DIV在有些地方的確不如表格方便,比如背景色的定義。但任何事情都有得有失,取舍在于你的價值判斷。好,不羅嗦了,我們開始:

1.確定布局
w3cn的最初設計草圖如下:



用表格的設計方法的話,一般都是上中下三行布局。



用DIV的話,我考慮使用三列來布局,成為這樣



2.定義body樣式
先定義整個頁面的body的樣式,代碼如下:

程序代碼
body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}



以上代碼的作用在上一天的教程有詳細說明,大家應該一看就明白。定義了邊框邊距為0;背景顏色為#FEFEFE,背景圖片為bg_logo.gif,圖片位于頁面右下角,不重復;定義了字體尺寸為12px;字體顏色為#666;行高150%。

3.定義主要的div
初次使用CSS布局,我決定采用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho,別說我偷懶,先實現簡單的,增加點信心嘛!)。分別定義左中右的寬度為200:300:280,在CSS中如下定義:

程序代碼
/*定義頁面左列樣式*/
#left{WIDTH:200px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#CDCDCD;
}
/*定義頁面中列樣式*/
#middle{POSITION:absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#DADADA;
}
/*定義頁面右列樣式*/
#right{POSITION:absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN:0px;
PADDING:0px;
BACKGROUND:#FFF;}


注意: 定義中列和右列div我都采用了POSITION:absolute;,然后分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個布局的關鍵,我采用了層的絕對定位。定義中間列距離頁面左邊框200px,距離頂部0px;定義右列距離頁面左邊框500px,距離頂部0px;。

這時候整個頁面的代碼是:
HTML代碼


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



這時候頁面的效果僅僅可以看到三個并列的灰色矩形,和一個背景圖。但是我希望高度是滿屏的,怎么辦呢?

4.100%自適應高度?
為了保持三列有同樣的高度,我嘗試在#left、#middle和#right中設置"height:100%;",但發現完全沒有預想的自適應高度效果。經過一番嘗試后,我只好給每個div一個絕對高度:"height:1000px;",并且隨著內容的增加,需要不斷修正這個值。難道沒有辦法自適應高度了嗎?隨著小魚自己學習的深入,發現一個變通的解決辦法,實際上根本不需要設置100%,我們已經被table思維禁錮太深了,這個辦法在下一節的學習中詳細介紹。

WEB2.0標準教程:第九天 第一個CSS布局實例


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 国产a视频| 亚洲综合五月天 | 久久99九九99九九99精品 | 国产欧美日韩免费一区二区 | 国产理论视频 | 国产高清在线精品一区二区 | 国产成人a毛片在线 | 激情国产白嫩美女在线观看 | 精品免费视频 | 久久久久久久久久综合情日本 | 欧美成人免费高清网站 | 狠狠色噜噜狠狠狠狠奇米777 | 开心久久婷婷综合中文字幕 | 久草视屏| 五月婷婷视频 | 亚洲综合色婷婷在线观看 | 亚洲图片欧美 | 国产成人精品亚洲 | 天天干天天玩 | 人人做人人爽久久久精品 | 图片专区亚洲 欧美 另类 | 99久久国产综合精品成人影院 | 日日摸夜夜爽久久综合 | 免费一级黄色片 | 亚洲精品二区中文字幕 | 亚洲精品视频在线观看免费 | 色综合合久久天天给综看 | 日本一区中文字幕 | 97在线观看免费观看高清 | 亚洲欧美日韩国产精品久久 | 亚洲日本中文字幕 | 亚洲欧美在线观看一区二区 | 国内精品区一区二区三 | 亚洲精品福利在线观看 | 欧美日韩北条麻妃一区二区 | 99久久99久久久99精品齐 | 婷婷六月天激情 | 国产精品19禁在线观看2021 | 欧美精品亚洲一区二区在线播放 | 精品久久久久久中文字幕专区 | 在线观看亚洲网站 |