有網友問道要將版面透過CSS語法將文章內容的顯示呈現出有一個捲軸效果怎麼做，所以就簡單做一個範例給大家看看效果。

我先貼結果給大家看一下↓

網址在http://blog.xuite.net/jeanson61/test1，不過因為這本日誌常拿來玩其他的功能或是幫網友測試CSS，所以有時候可能就不是至這篇文章寫得這樣，所以還是以抓圖來Show會比較好一點。

上圖有三個捲軸(用紅線框起來的)，所以版面上多了兩個捲軸，一個是日誌左欄，另外一個是中間欄的捲軸，因為將顯示區塊設定固定高度後，當內容資料超過顯示區塊的高度時，才會形成捲軸效果，所以一般狀況下，我們會去設定高度及超過高度時產生捲軸，其CSS語法是↓
/*左欄*/
#linksLeft{
        position:absolute;
        left:45px;
        width:200px;
        margin-top:0px;
margin-left:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
height:550px;
overflow-y: scroll;
}
上面紅色的兩行字就是加上去產生捲軸效果的CSS定義，這裡是只定義y軸捲軸(垂直捲軸)，當然我們也可以將寬度定義一下(要故意弄小一點)，然後增加overflow-x:scroll;這樣就有水平的捲軸。因為將版面顯示的每個區塊大小已經定義了，通常都已經很小，所以我就設計它為兩欄顯示而已，三欄(左、中、右)顯示就有點太擠啦！所以我將中間欄也設一樣的高度↓
/*中間欄*/
#mid{
position:float;
padding-left:50px;
background-color:;
height:550px;
overflow-y: scroll;
 }
這樣就完成了！這裡我有多加一個留白的部份padding-left:50px;，因為捲軸會佔一些空間！

另外補充說一下，如果覺得三個捲軸顏色都一樣，會有點搞混的話，也可以將捲軸顏色改一下！將捲軸的CSS定義語法加進/*左欄*/#linksLeft{}以及/*中間欄*/#mid{}中。↓
/*左欄*/
#linksLeft{
        position:absolute;
        left:45px;
        width:200px;
        margin-top:0px;
margin-left:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
height:550px;
overflow-y: scroll;
 scrollbar-face-color:#000000;
 scrollbar-highlight-color:#0157ac;
 scrollbar-shadow-color:#0157ac;
 scrollbar-3Dlight-color:#000000;
 scrollbar-arrow-color:#0157ac;
 scroll-track-color:#000000;
 scroll-darkshadow-color:#000000;
}
/*中間欄*/
#mid{
position:float;
padding-left:50px;
background-color:;
height:550px;
overflow-y: scroll;
 scrollbar-face-color:#000000;
 scrollbar-highlight-color:#0157ac;
 scrollbar-shadow-color:#0157ac;
 scrollbar-3Dlight-color:#000000;
 scrollbar-arrow-color:#0157ac;
 scroll-track-color:#000000;
 scroll-darkshadow-color:#000000;
}

我是將Xuite提供的樣版"冰紀事"拿來改的(因為它看起來像一本手扎，所以設成固定高度好像比較合適)，我將整個修改過後的CSS語法分享出來，有興趣可以拿來測試或是修改玩看看↓

/* CSS Document */
/*主體*/
html{
 scrollbar-face-color:#FFFFFF;
 scrollbar-highlight-color:#7C98B7;
 scrollbar-shadow-color:#7C98B7;
 scrollbar-3Dlight-color:#FFFFFF;
 scrollbar-arrow-color:#7C98B7;
 scroll-track-color:#FFFFFF;
 scroll-darkshadow-color:#FFFFFF;
}

body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-image:url(http://s.blog.xuite.net/_theme/skin/background/10041/blogBg_1.jpg);
 background-color:#CEF1CB;
 background-repeat:no-repeat;
        background-attachment : fixed ;
}

   
/*連結*/
A {
 color: #3177C7;
 text-decoration: none;
}
A:link
{ color:#3177C7;
 text-decoration:none;}

A:visited
{ color: #3177C7;
 text-decoration:none;}

A:active
{ color:#3177C7;
 text-decoration:none;}

A:hover
{ color:#F07F11;
 text-decoration:none;}

/*定位框*/
#container {
 position: relative;
text-align: left;      /*width:100%;*/      behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px 0px 0px 0xp;

 }
   
/*檔頭*/
#banner{
    margin: 0px 0px 0px 0px;
 padding: 0px;
 height:220px;
    background-image:url(http://s.blog.xuite.net/_theme/skin/background/10041/blogBg_top.gif);
background-repeat:no-repeat;
}

/*左欄*/
#linksLeft{
        position:absolute;
        left:45px;
        width:200px;
        margin-top:0px;
margin-left:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
height:550px;
overflow-y: scroll;
 scrollbar-face-color:#000000;
 scrollbar-highlight-color:#0157ac;
 scrollbar-shadow-color:#0157ac;
 scrollbar-3Dlight-color:#000000;
 scrollbar-arrow-color:#0157ac;
 scroll-track-color:#000000;
 scroll-darkshadow-color:#000000;
}

/*右欄*/
#linksRight{
    position:absolute;
    right:45px;
    width:200px;
    margin-top:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
height:550px;
overflow-y: scroll;
}
 
/*中間欄*/
#mid{
position:float;
padding-left:50px;
background-color:;
height:550px;
overflow-y: scroll;
 scrollbar-face-color:#000000;
 scrollbar-highlight-color:#0157ac;
 scrollbar-shadow-color:#0157ac;
 scrollbar-3Dlight-color:#000000;
 scrollbar-arrow-color:#0157ac;
 scroll-track-color:#000000;
 scroll-darkshadow-color:#000000;

 }

/*檔尾*/
#footer{
    clear: both;
 text-align:center;
 font-size: 13px;
 color:#737373;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 line-height: 16px;
  
}

/*欄位名稱*/
.sidetitle{
        border: #7C98B7  1px solid;
 padding:0px;
 background-color:#E6E6E6;
 background-repeat:no-repeat;
 color:#000000;
 line-height:25px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 letter-spacing:0.1em;
 font-size:13px;
 margin-top:0px;
 margin-bottom:0px;
}
/*欄位內容*/
.side{
 border: #7C98B7  0px solid;
 background-color:#E7E3E7;
 font-size:12px;
 font-weight:normal;
 color:#314357;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:4px;
 margin-bottom:8px;
}
.side li{
 margin-left: 20px;
 list-style-position: outside;
}

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

/*日誌名稱*/
.blogname{
 font-size:22px;
 font-weight: bold;
 color:#3387C9;
    position:absolute;top:80px;left:300px;
}

/*日誌名稱超連結*/
.blogName A:link{
 color:#6E7C9F;
 text-decoration:none; }

.blogName A:visited{
 color:#6E7C9F;
 text-decoration:none; }

.blogName A:active {
 color:#6E7C9F;
 text-decoration:none; }

.blogName A:hover {
 color:#000000;
 text-decoration:none; }

/*今日心情*/
.blogemotion{
 
}

/*日誌描述*/
.description{
 font-size: 15px;
 color: #3177C7;
    position:absolute;top:110px;left:300px;
}

/*選單列*/
.menulist{
 padding-top:3px;
 width:100%;
}

/*選單*/
.menu{
 padding-top:0px;
 float:right;
 padding-right:0PX;
    position:absolute;top:130px;left:300px;
    z-index:1;
}
.menu A:link{
 color:#000000;
 text-decoration:none; }

.menu A:visited{
 color:#000000;
 text-decoration:none; }

.menu A:active {
 color:#000000;
 text-decoration:none; }

.menu A:hover {
 color:#07437B;
 text-decoration:none; }

/*Logo*/
.logo{
 visibility:visible;
 padding-top:0px;
 float:right;
 padding-right:0PX;
    position:absolute;top:40px;left:60px;
}

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

/*文章外框*/
#content{
    padding: 5px;
 margin:5px;
 background-color:;
 border: #B5DA43 0px solid;
}

/*文章標題列*/
.title{
 width:100%;
 height:25px;
    background:#7C98B7;
 padding-top:5px;
}
/*文章標題名稱*/
span.titlename{
 font-size:15px;
 color:#000000;
 padding-left:5px;
}
/*文章日期*/
span.titledate{
 float:right;
 height:25px;
 padding-right:10px;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color:#314357;
}
/*文章評價列*/
.blogrank{
 color:#314357;
 width:100%;
 line-height:200%;
 margin-top:10px;
}
/*文章瀏覽數*/
span.counter{
 float:right;
 margin-top:15px;
 font-size: 12px;
 color: #A7A7A7;
}

/*文章瀏覽數項目符號*/
span.counter li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif);
}
/*文章分類*/
span.category{
 float:right;
 margin-top:15px;
}

/*文章分類項目符號*/
span.category li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);
}
/*文章主體*/
.blogbody{
                  word-wrap: break-word;
 width:100%;
 color:#314357;
}
/*作者列*/
.posted{
 width:100%;