目錄
摘要:
DIV+CSS其实是错误的叫法
CSS2时代的布局方式
多栏布局
盒子布局
首頁 web前端 html教學 玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose

玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose

Jun 24, 2016 pm 12:03 PM
css3 佈局 玩轉 頁面

摘要:

    CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局。在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的布局方式。


DIV+CSS其实是错误的叫法

     关于当前的页面布局,很多人都习惯于叫做DIV+CSS,其实这是一种错误的叫法,标准叫法应该叫做XHTML+CSS.
这是为什么呢?传统的页面布局采用的是Table布局,即Table+CSS,后来出现了使用DIV的布局方式,所以人们就把它叫做DIV+CSS,而且有些人认为用DIV+CSS制作的页面才是标准页面,其实这句话是比较狭隘的。
那什么是标准页面呢?WEB标准由结构,表现和行为三部分组成。其中结构话标准语言是XHTML和XML,表现化标准语言是CSS。因为XML比较复杂,大多数浏览器都没有完全支持,故不使用XML来实现页面布局,所以标准的页面布局应该是符合WEB标准的页面布局,即XHTML+CSS。
而XHTML中不仅仅只有DIV标签,还有a,p,ul,li,dl,dt等等标签,所以即使不使用DIV标签,制作的页面也是标准页面,XHTML的各个标签都有其功能,并不是说只能用DIV去实现页面布局(在一本书上有怎么一句话:如果满屏都是DIV,那也算不上标准页面了)
所以说,以后我们要尽可能的说XHTML+CSS,而不是DIV+CSS.


CSS2时代的布局方式

      简单点说,CSS2时代是使用float的浮动属性来实现布局的。

layout.css


/* CSS Document *//*基本信息*/body{margin:0px;  /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB;  /*背景色*/}/*页面层容器*/#container{     width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left;    /*浮动属性,居左对齐,使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left;     /*取消左侧浮动*/}#banner{float:right;   /*浮动属性,居右对齐,使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right;    /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}
登入後複製


layout.html


<meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css"><div id="container">   <div id="header">       <div id="logo">	     logo	   </div>	   <div id="banner">	   banner	   </div>	   container   </div>   <div id="menu">   menu   </div>   <div id="pageBody">   </div>   <div id="footer">   footer   </div>
</div>
登入後複製



但是,使用float实现布局会有一些缺点,由于各个div是相互独立的,所以在一个div中加入一些内容后会使得无法对齐,CSS3提供了多栏布局和盒子布局来弥补这种缺点。


多栏布局

layout.css

/* CSS Document *//*基本信息*/body{margin:0px;  /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB;  /*背景色*/}/*页面层容器*/#container{     width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left;    /*浮动属性,居左对齐,使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left;     /*取消左侧浮动*/}#banner{float:right;   /*浮动属性,居右对齐,使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right;    /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;-moz-column-count:4;       /*多栏布局:火狐浏览器中需要的格式,表示列数*/-moz-column-gap:10px;      /*列之间的间隔*/-moz-column-rule:1px solid red;   /*在列之间加一条红色的线*/-webkit-column-count:4;    /*多栏布局:safari和chrome需要的格式*/-webkit-column-gap:10px;   /*列之间的间隔*/-webkit-column-rule:1px solid red;   /*在列之间加一条红色的线*/}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}
登入後複製

layout.html

<meta charset="utf-8"><title>布局</title><link href="style/layout.css" rel="stylesheet" type="text/css"><div id="container">   <div id="header">       <div id="logo">	     logo	   </div>	   <div id="banner">	   banner	   </div>	   container   </div>   <div id="menu">   menu   </div>   <div id="pageBody">    内容省略   </div>   <div id="footer">   footer   </div>
</div>
登入後複製

效果图:



盒子布局

hezi.css

/* CSS Document *//*基本信息*/body{margin:0px;  /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB;  /*背景色*/}/*页面层容器*/#container{     display:-moz-box;display:-webkit-box;}#left_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FF0000}#center_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#00FF00}#right_side{width:200px;height:200px;margin:20px;padding:50px;background-color:#FFFF00;}#left_side,#center_side,#right_side{      /*实现盒子布局*/-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}#down_left{-moz-box-flex:1;        /*可根据内容自动调整大小,实现弹性盒子,此为火狐下的格式*/-webkit-box-flex:1;padding:20px;margin:20px;background-color:blue;}#down_left{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
登入後複製
hexi.html

<meta charset="utf-8"><title>布局</title><link href="style/hezi.css" rel="stylesheet" type="text/css"><div id="container">  <div id="left_side">  百度  </div>  <div id="center_side">  谷歌  </div>  <div id="right_side">  淘宝  </div>    <div id="down_left">  亚马逊  </div>
</div>
登入後複製

效果图:


如果想要让盒子垂直分部,可以在将container改为:

#container{     display:-moz-box;display:-webkit-box;-moz-box-orient:vertical;   /*垂直分布*/-webkit-box-orient:vertical;}
登入後複製


这里仅给出了大致的布局方式,关于更多的属性,大家可以阅读相关的书籍和资料。




本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Word複製頁面 如何在Word複製頁面 Feb 20, 2024 am 10:09 AM

是否要複製MicrosoftWord中的頁面,並保持格式不變?這是一個聰明的想法,因為當您想要建立特定文件佈局或格式的多個副本時,在Word中複製頁面可能是一種有用的節省時間的技術。本指南將逐步引導您在Word中複製頁面的過程,無論是建立範本還是複製文件中的特定頁面。這些簡單的說明旨在幫助您輕鬆地重新製作頁面,省去從頭開始的麻煩。為什麼要在MicrosoftWord中複製頁面?在Word中複製頁面非常有益的原因有以下幾點:當您有一個具有特定佈局或格式的文件要複製時。與從頭開始重新建立整個頁面不同

CS玩家的首選:建議的電腦配置 CS玩家的首選:建議的電腦配置 Jan 02, 2024 pm 04:26 PM

1.處理器在選擇電腦配置時,處理器是至關重要的組件之一。對於玩CS這樣的遊戲來說,處理器的效能直接影響遊戲的流暢度和反應速度。建議選擇IntelCorei5或i7系列的處理器,因為它們具有強大的多核心處理能力和高頻率,可以輕鬆應對CS的高要求。 2.顯示卡顯示卡是遊戲表現的重要因素之一。對於射擊遊戲如CS而言,顯示卡的表現直接影響遊戲畫面的清晰度和流暢度。建議選擇NVIDIAGeForceGTX系列或AMDRadeonRX系列的顯示卡,它們具備出色的圖形處理能力和高幀率輸出,能夠提供更好的遊戲體驗3.內存電

如何在iPhone上自訂和編輯待機模式:iOS 17的新功能 如何在iPhone上自訂和編輯待機模式:iOS 17的新功能 Sep 21, 2023 pm 04:01 PM

待機是iOS17更新中的一項新功能,它提供了一種新的增強方式,可以在手機快速閒置時存取資訊。透過StandBy,您可以輕鬆查看時間、查看即將發生的事件、瀏覽日曆、獲取您所在位置的天氣更新等等。啟動後,iPhone在充電時設定為橫向時會直觀地進入待機模式。此功能非常適合床頭櫃等無線充電點,或在日常任務中離開iPhone充電時。它允許您輕掃待機中顯示的各種小部件,以存取來自各種應用程式的不同資訊集。但是,您可能希望根據您的偏好和您經常需要的資訊修改這些小部件,甚至刪除一些小部件。因此,讓我們深入

如何快速刷新網頁? 如何快速刷新網頁? Feb 18, 2024 pm 01:14 PM

頁面刷新在我們日常的網路使用中非常常見,當我們訪問一個網頁後,有時會遇到一些問題,例如網頁加載不出來或顯示不正常等。這時候我們通常會選擇刷新頁面來解決問題,那麼要如何快速刷新頁面呢?下面我們就來探討頁面刷新的快捷鍵。頁面刷新快捷鍵是一種透過鍵盤操作來快速刷新目前網頁的方法。在不同的作業系統和瀏覽器中,頁面刷新的快捷鍵可能有所不同。下面我們以常見的W

WordPress網頁錯位現象解決攻略 WordPress網頁錯位現象解決攻略 Mar 05, 2024 pm 01:12 PM

WordPress網頁錯位現象解決攻略在WordPress網站開發中,有時候我們會遇到網頁元素錯位的情況,這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象,我們需要仔細分析問題、找出可能的原因,並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略,同時提供具體的程式碼範例,幫助開

處理Laravel頁面無法正確顯示CSS的方法 處理Laravel頁面無法正確顯示CSS的方法 Mar 10, 2024 am 11:33 AM

《處理Laravel頁面無法正確顯示CSS的方法,需要具體程式碼範例》在使用Laravel框架開發Web應用程式時,有時候會遇到頁面無法正確顯示CSS樣式的問題,這可能會導致頁面呈現不正常的樣式,影響使用者體驗。本文將介紹一些處理Laravel頁面無法正確顯示CSS的方法,並提供具體的程式碼範例,幫助開發者解決這個常見問題。一、檢查檔案路徑首先要檢查CSS檔案的路徑是

重新排列、停用和刪除 iPhone 主畫面頁面的方法 重新排列、停用和刪除 iPhone 主畫面頁面的方法 Nov 29, 2023 am 08:22 AM

在iOS中,Apple允許您停用iPhone上的單一主畫面頁面。還可以重新排列主螢幕頁面的順序,並直接刪除頁面,而不僅僅是停用它們。這是它的工作原理。如何重新排列主畫面頁面觸碰並按住主畫面上的空格以進入抖動模式。輕點代表主螢幕頁面的圓點行。在顯示的主螢幕網格中,輕觸並拖曳頁面以將其相對於其他頁面重新排列。其他人會移動以響應您的拖曳動作。當您對新排列感到滿意時,點擊螢幕右上角的“完成”,然後再次點擊“完成”以退出抖動模式。如何停用或刪除主畫面頁面觸碰並按住主畫面上的空格可進入抖動模式。輕點代表主螢幕

3秒跳轉頁面實作方法:PHP程式指南 3秒跳轉頁面實作方法:PHP程式指南 Mar 25, 2024 am 10:42 AM

標題:3秒跳轉頁面實作方法:PHP程式設計指南在網頁開發中,頁面跳轉是常見的操作,一般情況下我們使用HTML中的meta標籤或JavaScript的方法進行頁面跳轉。不過,在某些特定的情況下,我們需要在伺服器端進行頁面跳轉。本文將介紹如何使用PHP程式實作一個在3秒內自動跳到指定頁面的功能,同時會給出具體的程式碼範例。 PHP實現頁面跳躍的基本原理PHP是一種在

See all articles