網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS3多列屬性_第1頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS3多列屬性_第2頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS3多列屬性_第3頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS3多列屬性_第4頁
網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)（第7版）課件：CSS3的盒模型-CSS3多列屬性_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

CSS3的多列屬性可以將文本內(nèi)容設(shè)計成像報紙一樣的多列布局。

CSS3的盒模型CSS3多列屬性目錄

CSS的盒模型6.1CSS盒模型的組成和大小6.2CSS盒模型的屬性6.3CSS布局屬性6.4CSS盒子定位屬性 6.5CSS3多列屬性6.6CSS基本布局樣式 6.7實訓(xùn)——制作社區(qū)網(wǎng)網(wǎng)頁6.8練習(xí)6.5CSS3多列屬性6.5.1列數(shù)屬性column-count語法：column-count:<integer>|auto示例：<styletype="text/css">.newspaper{column-count:3;}</style><body><divclass="newspaper">

文字…</div></body>6.5CSS3多列屬性6.5.2列寬屬性column-width語法：column-width:

<length>|auto示例：.newspaper{column-width:100px;column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}6.5CSS3多列屬性6.5.3列寬屬性column語法：columns:

[column-width]|[column-count]示例：.newspaper{columns:100px3;}6.5CSS3多列屬性6.5.4列之間的間隔屬性olumn-gap語法：column-gap:<length>|normal示例：.newspaper{column-count:3;column-gap:40px;}6.5CSS3多列屬性6.5.5是否橫跨所有列屬性column-span語法：column-span:

none|all示例：.newspaper{column-count:3;}h2{column-span:all;}6.5CSS3多列屬性6.5.6列間隔樣式屬性column-rule-style語法：column-rule-style:

none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:dotted;}6.5CSS3多列屬性6.5.7列之間間隔顏色屬性column-rule-color語法：column-rule-color:<color>.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-color:#ff0000;}6.5CSS3多列屬性6.5.8列之間寬度屬性column-rule-width語法：column-rule-width:<length>|thin|medium|thick示例：.newspaper{column-count:3;column-gap:40px;column-rule-style:outset;column-rule-width:1px;}6.5CSS3多列屬性6.5.9列之間間隔所有屬性column-rule語法：column-rule:

[column-rule-width]|[column-rule-style]|[column-rule-color]示例：.newspaper{column-count:3;column-gap:40px;column-rule:4pxoutset#ff00ff;}6.5CSS3多列屬性【例6-24】多列屬性示例，本例文件6-24.html在瀏覽器中的顯示效果，如圖6-34所示。6.5CSS3多列屬性<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>多列屬性</title> <styletype="text/css"> .newspaper1{ column-count:4; column-width:auto; column-rule-style:dashed; column-rule-width:thick; column-rule-color:green; } .newspaper2{ column-count:5; column-width:auto; column-rule-style:none; column-gap:10px; } .h3_span{6.5CSS3多列屬性 .h3_span{ column-span:all; } p{ text-indent:2em; margin:0px;/*p標(biāo)簽段落距離設(shè)置為0px*/ } </style> </head>6.5CSS3多列屬性

<body> <divclass="newspaper1"> <h3>古埃及文明</h3> <p>大約兩萬年前，埃及出現(xiàn)了舊石器時代的原始人類，住在現(xiàn)撒哈拉大沙漠和阿拉伯沙漠地區(qū)。</p> <p>約從公元前4500年（至今6500年），埃及進入新石器時代或銅石并用時代。根據(jù)考古材料，埃及銅石并用文化的典型代表是巴達里文化（約公元前4500—前4000年），涅加達文化Ⅰ（約公元前4000—前3500年）和涅加達文化Ⅱ（約公元前3500—前3100年）。習(xí)慣上把這三種文化稱為前王朝文化。</p> <p>公元前2480年（距今4500年）的古埃及，是胡夫王的統(tǒng)治初期。與每個法老一樣，上任伊始他就準(zhǔn)備建造百年后的墳?zāi)?。于是，在每個夏天，皇室成員走遍尼羅河流域，從每個村落中選擇身強體健的男子，作為建造大金字塔的勞力，為君王服務(wù)。他們被分成10萬人的大群來工作，每一大群人要勞動3個月。這些勞動者中有奴隸，也有許多普通的農(nóng)民和手工業(yè)者。古埃及奴隸是借助畜力和滾木，把巨石運到建筑地點的，他們又將場地四周天然的沙土堆成斜面，把巨石沿著斜面拉上金字塔。就這樣，堆一層坡，砌一層石，逐漸加高金字塔。建造胡夫金字塔花了整整20年的時間。</p> </div> <hr/>

6.5CSS3多列屬性 <divclass="newspaper2"> <h3class="h3_span">幾何之父——歐幾里得</h3> <p>我們現(xiàn)在學(xué)習(xí)的幾何學(xué)，就是由古希臘數(shù)學(xué)家歐幾里得（公元前330—前275年，此時是中國的戰(zhàn)國時期）創(chuàng)立的。他在公元前300年編寫的《幾何原本》，2300多年來都被看作學(xué)習(xí)幾何的標(biāo)準(zhǔn)課本，所以稱歐幾里得為幾何之父。</p> <p>在公元前337年，馬其頓國王菲力二世用武力征服了希臘各城邦。次年亞歷山大即位，在很短的時間內(nèi)，他繼承父業(yè)，開創(chuàng)了一個橫跨歐、亞、非三大陸的馬其頓王國。在地中海沿岸的尼羅河三角洲上，亞歷山大建立了以他名字命名的城市——亞歷山大城，并把它作為這個龐大帝國的文化、商業(yè)和工業(yè)中心，同時也是科學(xué)思想的中心。這兒有稱譽世界，擁有70萬卷藏書的圖書館，還有博物館、天文臺和聞名天下的博學(xué)園，成為當(dāng)時歐洲乃至世界數(shù)學(xué)的中心。歐幾里得就是被亞歷山大的后繼者——托勒密一世重金聘請到博學(xué)園的教師。</p> <p>古希臘的數(shù)學(xué)研究有著十分悠久的歷史，曾經(jīng)出版過一些幾何學(xué)著作，但都是討論某一方面的問題，內(nèi)容不夠系統(tǒng)。歐幾里得匯集了前人的成果，采用前所未有的獨特編寫方式，先提出定義、公理、公設(shè)，然后由簡到繁地證明了一系列定理，討論了平面圖形和立體圖形，還討論了整數(shù)、分數(shù)、比例等，終于完成了《幾何原本》這部巨著，此書至今還是幾何學(xué)的權(quán)威著作。在歐美國家，《幾何原本》是學(xué)習(xí)數(shù)學(xué)必讀的原著之一。在編寫此書時，他一開始就推出一系列令人欽佩的簡要而精致的公理和公式。然后他將定理一一排列，其邏輯性非常強，幾乎無須改進。</p> <p>后來的哥白尼、開普勒、伽利略、牛頓這些卓越的科學(xué)人物，統(tǒng)統(tǒng)都接受了歐幾里得的傳統(tǒng)。他們都認真地學(xué)習(xí)過歐幾里得的《幾何原本》，并使之成為他們數(shù)學(xué)知識的基礎(chǔ)。

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論