HTML CSS + DIV實現排版布局

xiaodao 發布于2019-08-02 10:53 / 3083人閱讀

HTML CSS + DIV實現排版布局 1.網頁可以看成是由一個一個“盒子”組成，如圖：

由上圖可以看出，頁面分為上(網站導航)、中、下(版權聲明)三個部分，
中間部分又分為左(商品分類)、中(主要部分)、右，這些版塊就像一個個
的盒子，這些"盒子"中放置著各種內容，頁面就是由這些"盒子"拼湊起來

案例布局分析：

單列布局案例：

代碼如下：

運行結果：

雙列布局案例：

代碼如下：



    
        
        雙列布局

運行結果如下圖：

三列布局案例：

代碼如下：



    
        
        三列布局

運行結果如下圖：

混合布局案例：

代碼如下：



    
        
        混合布局

運行結果如下圖：

總結：

排版布局需要掌握的知識

div 相關屬性

float 浮動屬性

position 定位屬性

clear 清除浮動的應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52626.html

HTML CSS + DIV實現排版布局

摘要：實現排版布局網頁可以看成是由一個一個盒子組成，如圖由上圖可以看出，頁面分為上網站導航中下版權聲明三個部分，中間部分又分為左商品分類中主要部分右，這些版塊就像一個個的盒子，這些盒子中放置著各種內容，頁面就是由這些盒子拼湊起來案例布局分析單列布 HTML CSS + DIV實現排版布局 1.網頁可以看成是由一個一個盒子組成，如圖： showImg(https://segmentfault....

mylxsw 2019-07-01 10:18 評論0 收藏0
HTML CSS + DIV實現排版布局

摘要：實現排版布局網頁可以看成是由一個一個盒子組成，如圖由上圖可以看出，頁面分為上網站導航中下版權聲明三個部分，中間部分又分為左商品分類中主要部分右，這些版塊就像一個個的盒子，這些盒子中放置著各種內容，頁面就是由這些盒子拼湊起來案例布局分析單列布 HTML CSS + DIV實現排版布局 1.網頁可以看成是由一個一個盒子組成，如圖： showImg(https://segmentfault....

keke 2019-08-30 15:54 評論0 收藏0
HTML+CSS基礎課程-imooc-【更新完畢】

摘要：包含后代選擇器包含選擇器，即加入空格用于選擇指定標簽元素下的后輩元素。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過進行選擇。 6-1 認識CSS樣式 CSS全稱為層疊樣式表 (Cascading Style Sheets)，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可...

Heier 2019-08-01 15:04 評論0 收藏0
前端基礎-CSS如何布局以及文檔流

摘要：一網頁布局方式二標準流三浮動流四定位流一網頁布局方式什么是網頁布局方式布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，比如，等等而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的網頁布局排版的三種方式標準一、網頁布局方式二、標準流三、浮動流四、定位流一、網頁布局方式　1、什么是網頁布局方式布局可以理解為排版，我們所熟知的文本編輯...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0