您好,歡迎來到網暖!
?
當前位置:網暖 » 站長資訊 » 建站基礎 » 網絡技術 » 文章詳細 訂閱RssFeed

web前端入門到實戰:html的組成部分、DIV+CSS布局

來源:網絡整理 瀏覽:181次 時間:2019-12-10
HTML的組成部分
  • dtd部分:文檔類型說明,聲明版本、標準

    web前端入門到實戰:html的組成部分、DIV+CSS布局

web前端入門到實戰:html的組成部分、DIV+CSS布局

  • header部分:給機器看的
  • body部分:給人看的
CSS控制div顯示
  • <div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上,換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。
  • 如下代碼是CSS通過id設置每個div的寬高和背景色
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #a {            width: 200px;            height: 100px;            background: red;        }        #b {            width: 200px;            height: 100px;            background: blue;        }        #c {            width: 200px;            height: 100px;            background: green;        }    </style></head><body>    <div id="a"></div>    <div id="b"></div>    <div id="c"></div></body></html>web前端開發學習Q-q-u-n: 767273102 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻)

執行效果:

web前端入門到實戰:html的組成部分、DIV+CSS布局

浮動布局

我們先寫兩個div設置上背景顏色看看效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #lside {            height: 200px;            background: red;        }        #rside {            height: 200px;            background: green;        }    </style></head><body>    <div id="lside">我是左邊</div>    <div id="rside">我是右邊</div></body></html>web前端開發學習Q-q-u-n: 767273102 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻)

web前端入門到實戰:html的組成部分、DIV+CSS布局

上文也說ddiv的內容會自動地開始一個新行,所以想將兩個div左右排列就要進行浮動布局
我們分別在CSS中加上float屬性

    <style type="text/css">        #lside {            height: 200px;            background: red;            float: left;        }        #rside {            height: 200px;            background: green;            float: right;        }    </style>

效果如下圖:

web前端入門到實戰:html的組成部分、DIV+CSS布局

清除浮動

當有浮動布局和普通div共同存在時,會發生如下覆蓋的情況

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        #lside {            height: 200px;            background: red;            float: left;        }        #rside {            height: 300px;            background: green;            float: right;        }        #normal {            height: 400px;            background: blue;        }    </style></head><body>    <div id="lside">我是左邊</div>    <div id="rside">我是右邊</div>    <div id="normal">我不設置浮動</div></body></html>web前端開發學習Q-q-u-n: 767273102 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻)

web前端入門到實戰:html的組成部分、DIV+CSS布局

所以如果不想被覆蓋,就要清除浮動
在CSS中對普通元素設置clear屬性
當我們增加 clear: left; 時,代表不讓左邊浮動蓋著自己

        #normal {            height: 400px;            background: blue;            clear: left;        }

此時清除左浮的div就會貼著左浮的div下邊顯示,如圖:

web前端入門到實戰:html的組成部分、DIV+CSS布局

同樣的還可設置 clear: right; 代表不讓右邊浮動蓋著自己;設置 clear: both; 代表不讓浮動蓋著自己。這里不做演示

推薦站點

  • 騰訊騰訊

    騰訊網(www.QQ.com)是中國瀏覽量最大的中文門戶網站,是騰訊公司推出的集新聞信息、互動社區、娛樂產品和基礎服務為一體的大型綜合門戶網站。騰訊網服務于全球華人用戶,致力成為最具傳播力和互動性,權威、主流、時尚的互聯網媒體平臺。通過強大的實時新聞和全面深入的信息資訊服務,為中國數以億計的互聯網用戶提供富有創意的網上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐網是全球最大的中文門戶網站,為用戶提供24小時不間斷的最新資訊,及搜索、郵件等網絡服務。內容包括全球熱點事件、突發新聞、時事評論、熱播影視劇、體育賽事、行業動態、生活服務信息,以及論壇、博客、微博、我的搜狐等互動空間。

    www.sohu.com
  • 網易網易

    網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。

    www.163.com
  • 新浪新浪

    新浪網為全球用戶24小時提供全面及時的中文資訊,內容覆蓋國內外突發新聞事件、體壇賽事、娛樂時尚、產業資訊、實用信息等,設有新聞、體育、娛樂、財經、科技、房產、汽車等30多個內容頻道,同時開設博客、視頻、論壇等自由互動交流空間。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com
?
买北京单场