您好,登錄后才能下訂單哦!
這期內容當中小編將會給大家帶來有關div標簽定位樣式設置技巧是怎樣的,文章內容豐富且以專業的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
在默認的情形下,<div>標簽所定義的區塊在網頁上會占據一列的位置,并且向右邊靠齊,要改變這種默認的行為,只需定義float樣式屬性即可。
<div>標簽定位樣式設置技巧
<div>標簽被廣泛地應用在網頁布局的相關設置上,CSS的幾個重要屬性提供了這方面的支持,例如float、overflow或是text-align等。適當的設計與套用樣式屬性,可以讓我們有效率地完成網頁布局的工作。
在默認的情形下,<div>標簽所定義的區塊在網頁上會占據一列的位置,并且向右邊靠齊,要改變這種默認的行為,只需定義float樣式屬性即可。它主要的功能是定義對象在網頁上的浮動位置,可能的屬性值有兩個:left與right,指定<div>靠左或靠右對齊。指定了這個屬性的<div>標簽后,會自動配置在同一行并且往左邊或是右邊靠攏,以下面的標簽設置為例:
<divstyledivstyle="height:127px;background:black"> </div><divstyledivstyle="width:155px;height:336px;float:left;background:gray"> </div><divstyledivstyle="width:155px;height:336px;float:right;background:gray"> </div>
第1個標簽未指定float,因此它占據了網頁最上方單一列的空間,第2及第3個<div>標簽則緊接著在下面的位置,靠左及靠右配置,結果頁面如下:
除了指定float屬性,我們還可以通過嵌套式<div>標簽的配置來達到<table>標簽的效果。以一個3行×3列的表格為例,所需的<div>標簽如下:
<divstyledivstyle="width:auto;height:79px"> <divstyledivstyle="width:100px;height:100px; float:left;background:red"> </div><divstyledivstyle="width:100px;height:100px; float:left;background:blue"> </div></div><divstyledivstyle="width:auto;height:79px"> <divstyledivstyle="width:100px;height:100px;float:left; background:yellow"> </div><divstyledivstyle="width:100px;height:100px;float:left; background:green"> </div></div><divstyledivstyle="width:auto; height:79px"> <divstyledivstyle="width:100px;height:100px; float:left;background:black"> </div><divstyledivstyle="width:100px; height:100px;float:left;background:gray"> </div> </div>
這段標簽得到以下的頁面結果:
float屬性決定<div>區塊在網頁上的位置,如果要定義<div>區塊內容元素的位置,則必須使用另外一個名稱為text-align的屬性。其中比較重要的屬性值有left、right和center,使用這些屬性值,可以讓<div>內容達到靠左、靠右或居中的效果。以下面的標簽設計為例,3個<div>標簽設置了不同的text-align屬性值。
<divstyledivstyle="width:auto;height:100px;text-align:left"> ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> <divstyledivstyle="width:auto;height:100px;text-align:right"> ABCDEFGHIJKLMNOPQRSTUVWXYZ</div> <divstyledivstyle="width:auto;height:100px;text-align:center"> ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
巧用<div>標簽搭配CSS樣式,可以讓我們達到所要呈現的網頁布局效果。當你了解這些技巧之后,接下來就是根據自已的需求設計網頁版面。結束這一節的討論之前,還有一點要提醒讀者,CSS除了能有效地將樣式的設計從網頁內容中分割出來、讓HTML標簽專注在內容的表示之外,最重要的一點是,它還能提升網頁加載的速度。當用戶瀏覽網頁的時候,相關的CSS樣式文件只會加載一次,然后儲存在緩存中,當下一個請求被傳送到服務器的時候,所需的CSS樣式文件則是直接從高速緩存中取出的。而未使用樣式文件的網頁則必須將整個網頁重載,你可以想象這兩者的性能差異,這也是不建議使用<table>標簽設計布局的原因之一。
上述就是小編為大家分享的div標簽定位樣式設置技巧是怎樣的了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。