首先，要想實現頁面主要內容居中有兩種方案，利用margin和絕對定位。我習慣第一種方案，所以飛快地寫了乙個，效果如下：
html**如下：
css:
.header-bg為了看得清楚給主要內容加了個邊框。.header
#h-menubar
接下來就是github圖示了。要想把一張顯示在乙個div的右下方大概有：1.把作為該div的background-image；2.由於是行內元素，可以利用text-align；3.將的display設成block，並利用絕對定位或浮動。
html：
css：
.header-bg a接著我試著縮小瀏覽器視窗，結果如下：
因為我中間div背景是透明的，貓並沒有消失，那設定下div的背景呢？
額，要求是達到了，可是這樣不好看啊。於是我想給貓設定乙個左margin，但是它對右浮動和絕對定位是無效的。所以我決定用方案2使貓位於header右下角，並且利用絕對定位使主要內容居中。最終效果如下：
鏈結的左margin為主內容寬度980px+貓寬度30px，這樣當瀏覽器縮小到貓的左邊界觸碰到主內容的右邊界時，貓會從右邊開始消失。
左側寬度固定，右側寬度自適應
實現左側寬度固定，右側寬度自適應的布局有很多，這裡介紹幾種方式 方式一 左側盒子寬度設定為100畫素，並且設定為左浮動，右側的盒子不設定寬度，只是設定個margin left值就可以了，如下 左側右側 但是以上辦法，如果設定為右側，固定左側自適應的布局是不可以的，如果想實現這樣的布局可以設定把兩個盒...
實現側欄固定寬度，內容欄寬度自適應
常用側欄固定寬度，內容欄的寬度自適應，在不同的解析度下實現寬度自適應。下面是我根據工作實踐總結的一些實現方法的demo。方法一 固定寬度區浮動 float，自適應區寬度自適應設定 margin html結構 class content class slider href 導航1a li href 導...
table頭部 尾部固定 中間內容定高自適應滾動
table頭部 尾部固定 中間內容定高自適應滾動 很多時候，需要使用到 做資料分析，不管是前端展現，還是後台管理系統節點展現 工作過程中遇到了，作為乙個小筆記，備忘！如下圖所示 的頭部，和尾部是固定不動的，中間內容隨著內容的增多，而出現滾動條。序號姓名 性別年齡1張三 男18序號姓名 性別年1齡 如...