有看過有人的網頁設計是將版面的兩側小欄位都排在同一側,也就是大欄位+兩個小欄位的排法:,我把最近分享的版型拿來變化成這樣的排版[之前的版是],這樣比較就看得出不同!而且這樣的新版本,是否是更像紅綠燈的顏色擺放了呢!?

大的截圖如下↓

這裡面的CSS樣式主要的變動就在於將linkLeft[左欄]、mid[中間欄]、linkRight[右欄]這三個區塊的顯示位置安排,所以我就來討論一下這三個欄位的CSS樣式裡要怎麼改動他們的位置!

原本的樣式[左、中、右] 改成新樣式[中、左+右]

/*左欄*/
#linksLeft{
 float: left;
               width: 200px;
 padding-left: 1px; padding-top:180px;
/*其他簡略*/
}

/*右欄*/
#linksRight{
                 float: right;
               width: 200px;
  padding-right: 1px; padding-top:180px;
/*其他簡略*/
}
 
/*中間欄*/
#mid{
position:relative;
margin: 0px  210px  0px 210px;
padding: 180px 0px 0px 0px;
/*其他簡略*/
}

/*左欄*/
#linksLeft{
 float: right;
               width: 200px;
 padding-right: 0px; padding-top:180px;
/*其他簡略*/
}

/*右欄*/
#linksRight{
                 float: right;
               width: 200px;
  margin-right: 5px; padding-top:180px;
/*其他簡略*/
}
 
/*中間欄*/
#mid{
position:relative;
margin: 0px  410px  0px 0px;
padding: 180px 0px 0px 0px;
/*其他簡略*/
}

原本標準的三欄式,我是設定左邊欄採用浮動位置、靠左顯示[float:left; padding-left: 1px;],然後右側欄位也是採用浮動位置、靠右顯示[float:right; padding-right: 1px;],最後的中間欄就用相對位置[position:relative],直接離左右各210px的內縮[margin: 0px 210px 0px 210px;],也就是留左右各210px的空間給左右欄位的顯示空間!所以這樣的設定就都可以正常的由左到右依序顯示左、中、右三欄!

然後換成中間欄然後再接著左欄與右欄,我的做法就變成將左欄放到最最右邊!因為linkLeft在網頁的顯示語法是最先執行,所以我用float:right;採用浮動位置、靠右顯示去顯示它,然後緊接著的右側欄linkRight也是採用浮動位置、靠右顯示[float:right;]去顯示它,這樣子左右欄就緊鄰著都靠右顯示出來!因為緊鄰著會太擁擠,所以加一個margin-right: 5px;去讓右欄與左欄間有個5pixels的留白!至於中間欄則是改成保留右側有410px;[margin: 0px 410px 0px 0px;]寬的留白給左右兩欄放置到右側位置,於是這樣的新版面就變成依序由左到右顯示成中、右、左三欄!

你也想要改成特別的版型嗎!自己動手改CSS自定樣式就做得到喔!

或是你Copy我的樣式去用都可以啦!!

/*========== 詳細完整的CSS樣式語法如下  ============*/
/*主體*/
html{
 scrollbar-face-color:#E9DBCB;
 scrollbar-highlight-color:#CDB7B5;
 scrollbar-shadow-color:#CDB7B5;
 scrollbar-3Dlight-color:#E9DBCB;
 scrollbar-arrow-color:#CDB7B5;
 scroll-track-color:#E9DBCB;
 scroll-darkshadow-color:#E9DBCB;
}

body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-color: #FFFFFF;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #b5b2b5;
    font-size: 14px;
   line-height:150%;
    word-wrap: break-word;
}

/*連結*/
A {
                color: #757c8e;
 text-decoration: none;
}
A:link {
                color: #ad5529;
 text-decoration:none;
}
A:visited {
 color: #828282;
 text-decoration:none;
}
A:active {
 color: #102039;
 text-decoration:underline;
}
A:hover {
 color: #102039;
 text-decoration:underline;
}

/*定位框*/
#container {
 position:relative;
 text-align: left;
 width:1000px;
 margin:0px auto;
 align:center;
 padding: 0px 5px 0px 5px;
}
   
/*檔頭*/
#banner{
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 align:center;
 width:1000px;
 height: 160px;    
}

/*左欄*/
#linksLeft{
 float: right;
               width: 200px;
 padding-right: 0px; padding-top:180px;
background:#ffb2bd url(//c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23794876/8.jpg) no-repeat top center;
border-bottom: 6px solid #ad2031;
color: #ad2031;
}

/*右欄*/
#linksRight{
                 float: right;
               width: 200px;
  margin-right: 5px; padding-top:180px;
background:#e7d7bd url(//c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23794876/9.jpg) no-repeat top center;
border-bottom: 6px solid #d6ae42;
color: #C99F1A;
}
 
/*中間欄*/
#mid{
position:relative;
margin: 0px  410px  0px 0px;
padding: 180px 0px 0px 0px;
background:#eff7ef url(//c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23794876/11.jpg) no-repeat top center;
border-bottom: 6px solid #6bba6b;
}

/*檔尾*/
#footer{
 clear: both;
 text-align:center;
 font-size: 12px;
 padding:10px 0px 0px 0px;
 color:#635034;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 line-height: 16px;
height:79px; width:1000px;
}

/*欄位名稱*/
.sidetitle, .personaltitle {
margin: 20px 0px 0px 0px;
 padding-top: 10px;
 border-bottom:1px solid #84756b;
  text-align:center;
 font-family:Comic Sans MS,arial,helvetica,sans-serif;
 font-weight:bold; font-size:17px;
 letter-spacing:0.1em;
 height: 32px;
 list-style:none;
}
*html .sidetitle, .personaltitle { height: 41px;}
*+html .sidetitle, .personaltitle { height: 41px;}
/*欄位內容*/
.side{
 font-size:14px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:5px 5px 5px 5px;
 border: #CCCCCC 1px solid;
color: #757c8e;
}
.side li{
 text-indent: -3ex;
 margin-left: 3ex;
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.side A, .side A:link {
color: #757c8e;
}
.side A:visited {
color: #828282;
}
.side A:active, .side A:hover {
color: #102039; text-decoration:underline;
}

/*空白*/
.spacer{
 clear:both;
}
/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
 width:990px;
 font-size: 22px;
 font-weight: bold;
 valign:bottom;
 color:#ffd19d;
 padding-left:45px;
 padding-top:10px;
 float:left;
 text-align:left;
}
.blogname a:link {
 color: #102039;
}
.blogname a:visited {
 color: #102039;
}
.blogname a:hover {
 color: #102039;
}
.blogname a:active {
 color: #102039;
}

/*今日心情*/
.blogemotion{
 
}
/*日誌描述*/
.description{
 font-size: 15px;
 color: #102039;
 valign:bottom;
 padding-left:45px;
 float: left;
 width: 990px;
 text-align:left;
}
/*選單列*/
.menulist{
 padding-top:15px;
 width:100%;
}
/*選單*/
.menu{
 padding-top:0px;
 float:right;
 padding-right:40px;
 color: #828282;
}
.menu a:link {
 color: #000000;
}
.menu a:visited {
 color: #CCCCCC;
}
.menu a:hover {
 color: #000000;
}
.menu a:active {
 color: #000000;
}

span.xuiteLink a:link, span.xuiteLink a:visited {
color: #000000;
}
span.xuiteLink a:hover, span.xuiteLink a:active {
color: #000000;
}

/*Logo*/
.logo{
 visibility:visible;
padding: 5px 0px 0px 5px;
}

 

/******************************************/
/*中間欄位class*/

/*文章外框*/
#content{
width : 100%;
    margin: 0px 0px 0px 0px;
}
/*單文章外框*/
.singleArticle{
width : 100%;
    margin: 0px 0px 0px 0px;
}
/*文章標題列*/
.title{
 width:100%;
 height:30px;
 padding-top:10px;
 border-bottom: 3px solid #52a652;
}
 *html .title{
 height: 40px;
}
*+html .title{
 height: 40px;
}

.title A, .title A:link {
color: #316129;
}
.title a:visited  {
color: #6bba6b;
}

/*文章標題名稱*/
span.titlename{
 padding-left: 20px;
 font-size:17px;
 color: #6bba6b;
 font-weight:bold;
}

/*文章日期*/
span.titledate{
                float :right;
 text-align:right;
                padding-right: 20px;
                padding-top: 10px;
 font-family: Georgia,"Times New Roman",Times,serif;
 font-size: 11px; font-weight:normal;  line-height:12px; color: #f1b566;
height:20px;
background: url(//c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23794876/12.jpg) no-repeat top right;

}
 *html span.titledate{
 height:30px;
}
*+html span.titledate{
 height:30px;
}

/*文章評價列*/
.blogrank{
 width: 95%;
 line-height:200%;
/*                margin-bottom: -25px;*/
 padding: 0px 20px 0px 20px;
}
*html .blogrank { width: 100%; }
*+html .blogrank { width: 100%; }
/*文章瀏覽數*/
span.counter{
 float:right;
 margin-top:15px;
 font-size: 12px;
 color: #6F4829;
/*padding-right:20px;*/
}
/*文章瀏覽數項目符號*/
span.counter li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif);
}
/*文章分類*/
span.category{
 float:right;
 margin-top:15px;
padding-right:20px;
}

/*文章分類項目符號*/
span.category li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);
}
/*標籤*/
span.rank {
padding-left:20px;
}
/*文章主體*/
.blogbody{
 width:95%;
 color: #102039;
 padding: 0px 20px 0px 20px;
 margin: 0px 0px 0px 0px;
font-size:17px;
line-height: 150%;
}
*html .blogbody { width:100%; overflow-x: auto;}
*+html .blogbody { width:100%; overflow-x: auto;}

/*繼續閱讀*/
span.fullpost {
display: block;
margin-top: -20px;
}

/*More按鈕*/
div.morebtn {
display: block;
margin-top: -25px;
}

/*作者列*/
.posted{
 width:95%;
 text-align:right;
 color:#999;
 font-family: "細明體";
 font-size: 15px;
 font-weight: normal;
                border-top: 1px dashed;
}
.posted A, .posted A:link {
color: #102039;
}
.posted A:visited {
color: #CCCCCC;
}
.posted A:active, .posted A:hover {
color: #102039; text-decoration:underline;
}

/*上下文章*/
.selectbar{
 width:100%;
 text-align:center;
}
.selectbar A, .selectbar A:link {
color: #102039;
}
.selectbar A:visited {
color: #CCCCCC;
}
.selectbar A:active, .selectbar A:hover {
color: #102039; text-decoration:underline;
}

.articleExt {
color: #ce4110;
}
/*引用列*/
.trackbacktitle{
 width:98%;
 padding: 10px 0px 5px 20px;
 font-size: 12px;
 color: #296929;
 height:41px;
 border-bottom: 3px solid #6bba6b;
}
*html .trackbacktitle {width: 100%; }
*+html .trackbacktitle { width: 100% }

/*引用列項目符號*/
.trackbacktitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon31a.gif);
}
/*引用網址*/
.trackbackurl{
 width:95%;
 padding: 20px 20px 15px 20px;
 text-indent:10px;
 color: #333;
}
*html .trackbackurl {width: 100%; }
*+html .trackbackurl { width: 100% }

/*引用日期*/
.trackbackdate{
 width:100%;
 text-align:right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #333;
}
/*引用內容*/
.trackbackcontent{
 width:100%;
 line-height:150%;
 padding: 0px 20px 0px 20px;
 color: #333;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #996600;
}
/*留言列*/
.comment{
 width: 98%;
 font-size: 12px;
 color: #296929;
 height:41px;
 padding-top: 10px;
                padding-left: 20px;
 border-bottom: 3px solid #6bba6b;
}
*html .comment { width: 100%; }
*+html .comment { width: 100% }

/*留言名稱*/
span.commenttitle{
 
}

/*留言名稱項目符號*/
span.commenttitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif);
}
/*留言按鈕*/
span.commentbutton{
 float:right;
padding-right:20px;
}
/*留言作者列*/
.author{
 width:93%;
 padding: 10px 20px 10px 20px;
}
*html .author { width: 100%; }
*+html .author { width: 100%; }

/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
display: block;
width: 100%;
 float:top;
 text-align:right;
 font-family: Georgia,"Times New Roman",Times,serif;
 font-size: 11px; height:13px;
 color: #f1b566;
}
/*留言內容*/
.commenttext{
 width:  93%;
 padding: 10px 20px 10px 20px;
 color: #b5b2b5;
font-size:14px;
}
*html .commenttext { width: 100%;overflow-x: auto; }
*+html .commenttext { width: 100%;overflow-x: auto; }

/*留言編輯按鈕*/
.commentedit{
 width:93%;
 border-bottom:1px dotted #d7d7d7;
 padding: 10px 20px 10px 20px;
}
*html .commentedit { width: 100%; }
*+html .commentedit { width: 100%; }

/*留言者信箱*/
span.email{
 
}

/*留言回覆邊框*/
.reply_info{
  width: 95%;
background:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17485837/19.gif) no-repeat;
 padding:50px 5px 5px 5px;
 border:1px dotted #f1b566;
}
*html .reply_info { width: 100%; }
*+html .reply_info { width: 100%; }

/******************************************/
/*左欄class*/
/*關於我*/
.avatar{
 margin-top:0px;
 padding:5px 5px 5px 5px;
 border: #CCCCCC 1px solid;
 }
/*照片*/
.avatarPhoto{
 text-align:center;
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
 color: #333333;
}
/*關於我按鈕*/
.avatarbutton{
 
}


/*文章分類*/
.categoryTitle li{
 /*list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif);*/
}
.categorySide li{
 list-style-image:url();
 color:#CD9D76;
}
.categoryTitle{
}
.categorySide li{

}

.categorySide{
}


/*日曆*/
.calendarTitle li{
 list-style:none;
}
.calendarTitle{
}
.calendarSide li{

}
.calendarSide{
}
/*日曆table*/
.calMonth{
 width:95%;
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
    font-size: 12px;
 font-weight: bold;
 color: #102039;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆下個月*/
.calMonthForward{
    color: #203A14;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 12px;
}
/*日曆星期列*/
.calMonthHeader{
 color: #102039;
text-align:center;
}
/*日曆日欄*/
.calMonthDay{
    font-size: 10px;
 color: #676767;
 text-align:center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆今日日期*/
.calMonthToday{
    font-size: 11px;
    text-align:center;
}
/*日曆假日日期*/
.calholiday{
 font-size: 11px;
 color: #FF3300;
 text-align:center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
.calenderbutton{
 text-align:right;
}
/*搜尋文章*/
.searchTitle li{
 list-style:none;
}
.searchTitle{
}
.searchSide{
text-align:center;
}
.searchbutton{
 text-align:center;
 padding:2px;
}


/*我的哈拉室*/
.chatTitle li{
 list-style:none;
}
.chatTitle{
}
.chatSide{
margin-left:20px;
color:#804000;
}
/*已建立的日誌*/
.bloglistTitle li{
 list-style:none;
}
.bloglistTitle{
}
.bloglistSide li{

}

.bloglistSide{
}
/*訂閱電子報*/
.epaperTitle li{
 list-style:none;
}
.epaperTitle{
}
.epaperSide{
 text-align:center;
}
.epaperbutton{
 text-align:center;
 padding:2px;
}

/*自由欄位*/
.customTitle li{
 list-style:none;
}
.customTitle{
}
.customSide{
}
/*我的親友團位*/
.myChannelTitle li{
 list-style:none;
}
.myChannelTitle{
 list-style:none;
}
.myChannelFrame {
}
/*我的發燒文*/
.hotArticleTitle li{
 list-style:none;
}
.hotArticleTitle {
 list-style:none;
}
.hotArticleSide {
}
/*日誌使用資源*/
.resourceTitle li{
 list-style:none;
}
.resourceTitle{
}
.resourceSide{
 text-align:center;
}
/*留言塗鴉版*/
.paintTitle li{
 list-style:none;
}
.paintTitle{
}
.paintSide{
 text-align:center;
}

/******************************************/
/*右欄class*/
/*背景音樂*/
.musicTitle li{
 list-style:none;
}
.musicTitle{
}
.musicSide{
}
.musicbutton{
 text-align:left;
 padding:2px;
}


/*最新文章*/
.articleTitle li{
 list-style:none;
}
.articleTitle{
}
.articleSide li{

}
.articleSide{
}
/*最新留言*/
.messageTitle li{
 list-style:none;
}
.messageTitle{
}
.messageSide li{

}
.messageSide{
 padding:5px;
 text-indent: -3ex;
 margin-left: 3ex;
}
.date {
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #7A75B9;
}
/*參觀人次統計*/
.countTitle li{
 list-style:none;
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
 list-style:none;
}
.rssrollTitle{
}
.rssrollSide li{
}
.rssrollSide{
}
.backbtn li{
  list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif);
  }
.backbtn{
  text-align:right;
}
.morebtn li{
  list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif);
  }
.morebtn{
 text-align:right;
}
/*日誌評價*/
.rankTitle li{
 list-style:none;
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
 list-style:none;
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
 list-style:none;
}
.linkTitle{
}
.linkSide li{
}
.linkSide{
}

.footer_text {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 14px;
 color:#333;
}
.content_text {
 width: 95%;
 padding-left: 0px;
 padding-top: 10px;
}

.footer_text a:link, .footer_text a:visited, .footer_text a:active {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 14px;
 color:#333;
}
.footer_text a:hover {
    color: #fff;
 text-decoration: none;
 }

/*個人項目---- 2006-5-11 Modify*/
.personallink{
 display: block;
 width:190px;
 margin:0px 0px 0px 0px;
margin-top:-40px;
}

/*關於我*/
.plink li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}

/*加入好友*/
.pfriend li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.plink A, .plink A:link, .pfriend A, .pfriend A:link {
color: #757c8e;
font-size:14px;
}
.plink A:visited, .pfriend A:visited {
color: #828282;
font-size:14px;
}
.plink  A:active,  .pfriend A:hover {
color: #000000;
font-size:14px;
}

/*文章分類---- 2006-5-12 Modify*/
.pTitle li{
 list-style:none;
}

.pTitle{
}

/* Applied by Chyuko@Xuite.net */

/*我的影音*/

.pvlog ul{
    list-style-type:none;
    margin:0 0px;
    padding:0px 2px 0px 20px;
    word-wrap: break-word;
    display: block;
    float:left;
}

/*下方換頁-----2007-04-02*/

.page {
    font-size: 12px;
    color:  #B1987C;
    line-height: 50px;
}

.page a:link, .page a:visited, .page a:active {
    font-size: 12px;
    color:  #B1987C;
    text-decoration: none;
}
.page a:hover {
    font-size: 12px;
    color:  #B1987C;
    text-decoration: underline;
}
*html .page { padding-top:30px; }

/*我的好友*/
.friendTitle li{
    list-style:none;
}
.friendTitle{
}
.LoveFriendSide{
   text-align:center;
}
.LoveFriendSide select{
 color: #333333;
 font-size:11px;
    /* background-color:#FCE7E2; */
}

/*最愛日誌*/
.LoveBlogTitle li{
    list-style:none;
}
.LoveBlogTitle{
}
.LoveBlogSide{
   text-align:center;
}
.LoveBlogSide select{
 color: #333333;
 font-size:11px;
    /* background-color:#FCE7E2; */
}
/*好文轉寄*/
span.mail{
 float:right;
 margin-top:15px;
}
/*好文轉寄項目符號*/
span.mail li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif);
}



隨機文章

×
網友回饋 回應:7
  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。