可擴展性的頁面布局：左右結構，左中右結構

XBaron 發布于2019-08-28 17:51 / 3156人閱讀

摘要：左右結構，左邊右邊寬度固定左右結構，左邊固定，右邊左中右結構，左邊固定，右邊固定，中間這里是左邊這里是中間這里是右邊

左右結構，左邊100%；右邊寬度固定

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

左右結構，左邊固定，右邊100%

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar{float:left; width:200px; margin-top:10px; height:200px;    background:#AAA;}
#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}
#main{height:200px; margin-left:210px; background:#999;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html

左中右結構，左邊固定，右邊固定，中間100%;

css

#header{height:80px; background:#CCC;}
#center{overflow:hidden; zoom:1;}
#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}
#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}
#main {margin-left:438px; background:#999; height:200px;}
#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}
#footer{height:50px; margin-top:10px; background:#CCC;}

html




    這里是左邊
    
        這里是中間
    
    這里是右邊

云服務器 GPU云服務器左中右 html表格左中右 html多頁面結構 html5頁面結構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110829.html

CSS基礎篇--頁面實現兩列布局，一列固定寬度，一列寬度自適應方法

摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。博客園的很多主題也是這樣設計的，我的博客園博客也是右側固定寬度，左側自適應屏幕的布局方式。與配合使用首先我們調整一下結構自適應區固定寬度區代碼這樣實現，的實際寬度就是屏幕寬度。我在前面有一篇文章《CSS基礎篇--可擴展性的頁面布局》中介紹了如下三種布局方式：1.左右結構，左邊100%；右邊寬度固定2.左右結構，左邊固定，右邊100%...

RichardXG 2019-08-28 17:51 評論0 收藏0
CSS基礎篇--可擴展性的頁面布局

摘要：左右結構，左邊右邊寬度固定代碼代碼左右結構，左邊固定，右邊代碼代碼左中右結構，左邊固定，右邊固定，中間代碼代碼這里是左邊這里是中間這里是右邊 1.左右結構，左邊100%；右邊寬度固定 showImg(http://segmentfault.com/img/bVbSYw); css代碼： #header{height:80px; background:#CCC;} #center{ov...

CarlBenjamin 2019-08-28 17:51 評論0 收藏0
布局總結-水平居中布局的實現

摘要：布局一左右布局實現左右布局居中布局的幾個實現方案標簽結構很簡單，就是一個父元素里面套了一個子元素想要實現左右布局，只需要把設置成向左浮動，右邊向右浮動或者把和設置成二居中布局結構居中布局的幾個實現方案標簽結構很簡單，就是一個父元素 CSS布局一、左右布局 1、float實現左右布局 ...

MadPecker 2019-08-01 17:42 評論0 收藏0
布局總結-水平居中布局的實現

摘要：布局一左右布局實現左右布局居中布局的幾個實現方案標簽結構很簡單，就是一個父元素里面套了一個子元素想要實現左右布局，只需要把設置成向左浮動，右邊向右浮動或者把和設置成二居中布局結構居中布局的幾個實現方案標簽結構很簡單，就是一個父元素 CSS布局一、左右布局 1、float實現左右布局 ...

starsfun 2019-08-30 15:53 評論0 收藏0
三欄布局的n種實現

摘要：本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。每一種布局都會有個，個人依然認為文章里帖代碼并沒有來的直接。其中討論了這么多種種布局，有以下理由是每種布局也都有他的毛病，沒有十全十美的，每種布局也都有人在用。本文主要討論左右邊欄固定寬度，中間欄填滿其余空間的布局。至于其他類型，基本上也就是半斤和八兩。每一種布局都會有個Demo，個人依然認為文章里帖代碼并沒有Demo來的直接。...

aisuhua 2019-08-29 10:54 評論0 收藏0