|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 在我們進行前端布局時，我們有時候需要將文字以列的形式展示出來，在css3的新屬性columns出現(xiàn)之前那種多列文字展示的實現(xiàn)還是比較麻煩的，但是css3中column布局的出現(xiàn)讓文字的多列展示變得更加簡單了，接下來的這篇文章就來給大家介紹一下css3c的olumns屬性實現(xiàn)的多列布局我們先來看一下css3的column布局的相關(guān)屬性（參考：css3學(xué)習(xí)手冊） column-count：規(guī)定元素應(yīng)該被分隔的列數(shù)；最大列數(shù)。 column-fill：規(guī)定如何填充列；默認值auto各列的高度隨內(nèi)容自動調(diào)整，balance所有列高都設(shè)為最高的列高。 column-gap：規(guī)定列之間的間隔；默認值normal，相當(dāng)于1em。需要注意的是，如果column-gap與column-width加起來大于總寬度的話，就無法顯示column-count指定的列數(shù)，會被瀏覽器自動調(diào)整列數(shù)和列寬。 column-rule：設(shè)置所有 column-rule-* 屬性的簡寫屬性；類似于border，區(qū)別是不占用任何空間，因此設(shè)了column-rule不會導(dǎo)致列寬的變化。另外如果邊框?qū)挾却笥赾olumn-gap列間距，將不會顯示邊框。 column-span：規(guī)定元素應(yīng)該橫跨的列數(shù)；默認值none表示不跨列，all表示跨越所有列。例如文章標題可以設(shè)成all來跨列。 column-width：規(guī)定列的寬度；給列定義個最小的寬度。默認值為auto表示將根據(jù)column-count列的數(shù)量自動調(diào)整列寬。 上述屬性中column-width和column-count是最常用的，這兩個屬性的簡寫： columns；比如： #col {
-moz-columns: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
}上述代碼中所聲明的意思就是列的寬度為：8em，但是總的列數(shù)不會超過 12 個。 下面我們就來看一個css3多列布局的完整實現(xiàn)代碼： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多列布局</title>
<style>
.div {
column-count: 3;
column-gap: 90px;
column-rule: 1px dashed green;
column-width: 370px;
}
.div h1 {
text-align: center;
-webkit-column-span: all;
}
</style>
</head>
<body>
<div>
<h1>我的愛好</h1>
<h3>第一段內(nèi)容</h3>
<p>每個人都生活在成長當(dāng)中，在成長當(dāng)中也會有更多的夢想，更多的堅持！慢慢凝結(jié)成成長的深海。我=畫畫</p>
<h3>第二段內(nèi)容</h3>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學(xué)校的一次美術(shù)課上，美術(shù)老師展示著別的班同學(xué)的畫，個個栩栩如生，活靈活現(xiàn)！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學(xué)習(xí)美術(shù)，學(xué)號美術(shù)！讓我的手用筆一揮也能描述出這種境界！</p>
<h3>第三段內(nèi)容</h3>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學(xué)校的一次美術(shù)課上，美術(shù)老師展示著別的班同學(xué)的畫，個個栩栩如生，活靈活現(xiàn)！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學(xué)習(xí)美術(shù)，學(xué)號美術(shù)！讓我的手用筆一揮也能描述出這種境界！</p>
<h3>第四段內(nèi)容</h3>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學(xué)校的一次美術(shù)課上，美術(shù)老師展示著別的班同學(xué)的畫，個個栩栩如生，活靈活現(xiàn)！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學(xué)習(xí)美術(shù)，學(xué)號美術(shù)！讓我的手用筆一揮也能描述出這種境界！</p>
<h3>第五段內(nèi)容</h3>
<p>畫畫，這個愛好如此的平凡！卻感染著大部分女孩的心！看著筆在手中輕輕揮動，紙上一切都活了！走了起來！一片栩栩如生。在學(xué)校的一次美術(shù)課上，美術(shù)老師展示著別的班同學(xué)的畫，個個栩栩如生，活靈活現(xiàn)！我羨慕極了！小小的心靈被這些美麗的畫驚醒了。讓我下定了決心，努力地堅持學(xué)習(xí)美術(shù)，學(xué)號美術(shù)！讓我的手用筆一揮也能描述出這種境界！</p>
</div>
</body>
</html>css3多列布局效果如下：
說明： CSS3 的 Column 布局規(guī)范要求每一列的高度保持平衡：瀏覽器會自動設(shè)置列布局塊的最大高度，并保證其它列的高度與最大高度大致相等。 不過在某些情況下，可能需要顯式的設(shè)置列的高度。此時列布局會從第一個列開始填充內(nèi)容，并盡可能根據(jù)聲明或者計算的個數(shù)創(chuàng)建列，如果內(nèi)容過多則向右溢出。 本篇文章到這里就全部結(jié)束了，更多精彩內(nèi)容可以關(guān)注php中文網(wǎng)相關(guān)教程！！！ 以上就是css3多列布局如何實現(xiàn)？css3多列布局的實現(xiàn)方法（column）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
