廣告贊助

範例  

此功能在安裝軟體或註冊帳號時常常會出現,大多應用在「服務條款」、「會員規範」、「論壇版規」等等上面。主要是可避免畫面拉得太長,可將內容塞在一個框架裡,讓使用者透過捲軸來查看內容。以下將透過範例進行說明。

 

【CSS】

.box {
  border:1px solid #cccccc;
  width:300px;
  height:100px;
  background-color:#FFFFFF;
  padding:5px;
  overflow:auto;
}

【HTML】

<div class="box">
  //內容<br><br><br><br><br><br><br><br><br><br>
</div>

※以上<br>標籤是為了讓內容超出框架範圍使捲軸出現

 

《說明》

首先建立一個區塊(div), 透過CSS調整所需的高(height)、寬(width)、文字與區塊的間距(padding),再設定框線(border)與區塊的背景色(backgound-color),接著透過overflow自動判斷區塊內容是否有超出框架,如果有將會自動顯示出捲軸。

 

 

【如果這篇文章剛好有幫助到你,希望能幫我按個讚給我個鼓勵

【這樣小小的一個動作,對我來說就是給我最大的回禮

 

  

 

文章標籤
創作者介紹

電腦資訊 線上筆記本

Randy 發表在 痞客邦 PIXNET 留言(0) 人氣()