CSS3多列屬性--column-gap
阿新 • • 發佈:2018-11-17
code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>column-gap</title> <style type="text/css"> body { font: 14px/1.5 georgia, serif, sans-serif; } p { margin: 0; padding: 5px 10px; background: #eee; } h1 { margin: 10px 0; font-size: 16px; } .test { font-size: 48px; border: 10px solid #000; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; } .test2 { font-size: 12px; border: 10px solid #000; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: normal; -moz-column-gap: normal; column-gap: normal; } .test3 { font-size: 48px; border: 10px solid #000; -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .test4 { font-size: 12px; border: 10px solid #000; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } </style> </head> <body> <h1>48px字型,Normal:</h1> <div class="test"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡,你可以找到最好的網際網路技術牛人,也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言,包括基礎課程、實用案例、高階分享三大型別,適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點,為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神,將網際網路特性全面的應用在教育領域,致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> <h1>12px字型,Normal:</h1> <div class="test2"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡,你可以找到最好的網際網路技術牛人,也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言,包括基礎課程、實用案例、高階分享三大型別,適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點,為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神,將網際網路特性全面的應用在教育領域,致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> <h1>48px字型,Gap20px:</h1> <div class="test3"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡,你可以找到最好的網際網路技術牛人,也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言,包括基礎課程、實用案例、高階分享三大型別,適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點,為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神,將網際網路特性全面的應用在教育領域,致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> <h1>12px字型,Gap20px:</h1> <div class="test4"> <p>慕課網是垂直的網際網路IT技能免費學習網站。以獨家視訊教程、線上程式設計工具、學習計劃、問答社群為核心特色。在這裡,你可以找到最好的網際網路技術牛人,也可以通過免費的線上公開視訊課程學習國內領先的網際網路IT技術。</p> <p>慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言,包括基礎課程、實用案例、高階分享三大型別,適合不同階段的學習人群。以純乾貨、短視訊的形式為平臺特點,為在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。</p> <p>慕課網秉承“開拓、創新、公平、分享”的精神,將網際網路特性全面的應用在教育領域,致力於為教育機構及求學者打造一站式互動線上教育品牌。</p> </div> </body> </html>