*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2017年6月12日 星期一

DIV資訊溢出框外的表現形態: overflow




DIV資訊溢出框外的表現形態:
overflow: visible | hidden | scroll | auto ;

如果一個DIV的長度和寬都被設定好了,但裡面的內容資料超出了這一個DIV長寬。
那麼,超出的部分資料,會如何呢?基本的預設值是 visible:會超出去DIV的長寬。
……
同樣的概念和技法,同樣也可以應用到表格的TD。


下面Div設置了長寬各100px; css 預設值 overflow:visible

文字超溢 圖像超溢
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15

請移到圖像 ↑
 
說明:
當DIV的長度和寬度被設定後,超出的資料會被看到(visible),這是預設值。但,請注意,對電腦而言,這DIV所佔據的版面大小,仍然只是100px x 100px。
所以,DIV下方的紅字,仍然會出現,而且壓著溢出的資料。因為預設計是下方的資料會壓著上方的資料。



 使用css功能  overflow:  hidden;

文字超溢 圖像超溢
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15





使用css功能  overflow:  scroll; 的諸效果

文字超溢  overlfow: scroll; overflow-x: hidden; 圖像超溢 overflow: scroll;
dsfkl ds fd
dslf dlsf dl fld fl dlf dslf  klds fld sfldjlf jdslf jdls jfldj sfl djf jdls fld fld fl dslf dls fld sfl dslf dflkd sf df dlk d f fdklf djfi
123 456 789 11  12 13 14 15

123 456 789 11  12 13 14 15



 再來, overflow: auto; 是指會內容的大小,而自動言調整。如果你填的內容,有超出被設定的長、寬度,那麼 scroll 就會自動啟動。


使用 overflow   來設定互動文本的範例:↙











書桌上的午餐


 思考方向:

「書桌上的午餐」是一個DIV。把它移到最上層的DIV外面;因為使用overflow: hidden; 所以會看不到。然後,利用互動,使它移回到上層DIV內,就又可以看到了。
照片的變化是利用背景圖的作用。

CSS語法:

<style>
 .overflani20170601 {
overflow: hidden;
background-image: url(https://c1.staticflickr.com/5/4274/35008151376_0c7414dce5_k.jpg);
background-repeat: no-repeat;
background-position: left -400px top -160px;
background-size: 1024px;
transition: 1s;
 }
     
 .overflani20170601:hover {
background-repeat: no-repeat;
background-position: left top;
background-size: 420px;
}

.divtran20170607 {
padding-left: 1em;
transform: translateX(240px);
transition: 2s;
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.06em;
background-color: lightgray;
}
   
 .overflani20170601:hover >div {
  transform: translateX(0px);
  }

</style>


影音教學:


2 則留言:

  1. 李老師無意間在youtube網路搜尋網頁語法教學,全部看完您的網頁視頻教學,非常感激,我是一個可退休的經營者,會flonpage已經是20年前的事,對電商網頁沒有學習管道,目前商業網頁非常好用,但不是都適合我。
    互動式的圖檔是主要學習課程,如游標點圖會連結到某網頁,或連結到youtube影片。
    李老師youtube影片"把youtubeu影片嵌入網頁",今天在kompozer操作數十次都是錯誤,都是錯誤的,不知錯在哪裡。
    非常感謝李老師提供blog學習機會。

    回覆刪除
    回覆
    1. 依經驗判斷是這樣

      在kompozer上會顯示錯誤
      你不要管,那是軟體的狀況
      你直接到瀏覽器chrome去看
      如果沒問題就ok了

      刪除