首頁 > web前端 > html教學 > 布爾教育_燕十八_HTML視頻資源課件

布爾教育_燕十八_HTML視頻資源課件

黄舟
發布: 2017-12-04 11:27:00
原創
4707 人瀏覽過

《布爾教育_燕十八_HTML教程》從最基本的概念開始講起,步步深入,帶領大家學習HTML、CSS樣式基礎知識,了解各種常用標籤的意義以及基本用法,後半部分講解CSS樣式程式碼添加,為後面的案例課程打下基礎。

布爾教育_燕十八_HTML視頻資源課件

課程播放網址:http://www.php.cn/course/222.html

該老師講課風格:

教師講課深入淺出,條理清楚,層層剖析,環環相扣,論證嚴密,結構嚴謹,用思維的邏輯力量吸引學生的注意力,用理智控制課堂教學進程。學生透過聽教師的講授,不僅學到知識,也受到思考的訓練,也受到教師嚴謹的治學態度的薰陶和感染

本影片中較為難點是oveflow溢出處理了:

問題的提出:
最簡單的一種情形就是我們把一個小的、固定寬度的p元素(例如導航、引用等)和其他元素內容一起包含在一個大的p中。例如下面這段程式碼:

<p id="outer">     
  <p id="inner"> <h2>A Column</h2> </p>     
  <h1>Main Content</h1>     
  <p>Lorem ipsum</p>     
</p>
登入後複製

我們可以為「#inner」設定一個寬度值(比如說20%),但由於p是區塊級元素,即使我們設定了寬度,其後面的內容也只能在下一行中顯示,除非我們給它設定一個浮動屬性(無論是向左浮動或向右浮動)。那麼此時就會產生我們上面提到的問題了。

如果「#inner」的寬度和高度都比「#outer」小,這不會有問題。

但是,如果“#inner”的高度超過了“#outer”,那麼的底部就會超出“#outer”的底部。這是因為我們為「#inner」設定了float屬性後,它就會脫離的文字流,無論其寬度和高度怎麼變化都不會使「#outer」跟隨變化。

例一:未清除浮動時的佈局表現
在這個例子中,最開始由於「#inner」的高度小於「#outer」所以不會有問題,但是當你點擊「加長」後你會發現「#inner」的底邊已經超出了「#outer」的範圍,而「#outer」沒有改變。這就是我們所提到的「清除浮動(閉合浮動元素)」或是「閉合浮動」問題

解決方法:
1)額外標籤法
第一個,也是W3C推薦的方法就是使用額外標籤的辦法。這種方法就是在內容的結尾增加一個空的標籤,典型的做法就是使用類似

<br style="clear:both;" />
登入後複製

或使用

<p style="clear:both;"></p>
登入後複製

這種辦法透過增加一個HTML元素迫使外部容器撐開。不過這個辦法會增加額外的標籤讓HTML結構看起來不夠簡潔。

這裡也推薦了資料給大家的下載:http://www.php.cn/xiazai/learn/1857

  1. lionhit

  2. minilionhit

  3. xhtml

#

以上是布爾教育_燕十八_HTML視頻資源課件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板