
|
網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點。 【實例介紹】 css float元素的浮動屬性 浮動屬性是css布局的最佳利器,可以通過不同的浮動屬性值靈活地定位div元素.以達(dá)到靈活布局網(wǎng)頁的目的。我們可以通過CSS的屬性float使元素向左或向右浮動。也就是說,讓盒子及其中的內(nèi)容浮動到文檔的右邊或者左邊。以往這個屬性總應(yīng)用于圖像,使文本圍繞在圖像周圍,不過在CSS中,任何元素都可以浮動。浮動元素會生成一個塊級框,而不論它本身是何種元素。 【基本語法】 fioat:none | left | right | inherit 【語法介紹】 none:默認(rèn)值,元素不浮動,并會顯示其在文本中出現(xiàn)的位置; 【實例代碼】
【代碼分析】 上面的代碼定義了4個<div>塊,其中一個父塊,另外3個是它的子塊。為了便于觀察,將各個塊都加上了邊框以及背景顏色,并且讓body以及各個div有一定的margin值。如果3個div都沒有設(shè)置任何浮動屬性,在父盒子中,4個盒子各自向右伸展,豎直方向依次排列,效果如圖所示。
(1)、設(shè)置第1個浮動的div 下面將第一個div設(shè)置為浮動,在上面的代碼中找到: 將.sonl盒子設(shè)置為向左浮動,代碼如下: 這時效果如圖所示。可以看到box2的文字圍繞著boxl排列,而此時浮動的盒子boxl的寬度不再延伸,其寬度為容納內(nèi)容的最小寬度。
(2)、設(shè)置第2個浮動的div 下面對第2個浮動的div設(shè)為left,將.son2盒子設(shè)置為向左浮動,代碼如下: ·son2{ 這時瀏覽效果如圖所示?梢钥吹絙ox2也變?yōu)楦鶕?jù)內(nèi)容確定寬度,并使box3的文字圍繞box2排列。boxl與box2之間的空間是由二者之間的margin構(gòu)成的。
(3)、設(shè)置第3個浮動的div 下面把box3也設(shè)置為左浮動,將.son3盒子設(shè)置為向左浮動,代碼如下: 這時效果如圖所示。可以看到文字所在的盒子范圍,以及文字會圍繞浮動的盒子排列。
(4)、改變浮動的方向 CSS中很多時候會用到浮動來布局,也就是經(jīng)常見到的float:left或者float:right,下面看看改變box3浮動方向,即float:right,這時效果如圖所示?梢钥吹絙ox3移動到了最右端,文字段落盒子的范圍沒有改變,但文字變成了夾在box2和box3之間。
【素材及源碼下載】 請點擊:元素的浮動屬性css float 下載本實例相關(guān)素材及源碼
網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!