css佈局—直接自定義柵格系統，自己新增小型bootstrap樣式
阿新 • • 發佈：2018-12-09
要點：
1.這個例項中的佈局，通過自定義的柵格系統，模仿bootstrap庫，從而做到自己能有自己的庫樣式思路。
2.像background這個屬性，有許多的子屬性，要是想要連寫的話，如背景圖片和平鋪，只需寫image即可，不需要也不能寫成background-image。
效果：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css"> <!-- 引入整行的12等分樣式，類似bootst --> <style type="text/css"> body{ color: #fff; background: #413f3b url(images/bg.jpg); /*這裡注意背景顏色跟背景圖片同時設定的話，要用background*/ font-family: Georgia,"Times New Roman",Times,serif; /*通過逗號隔開字型，優先順序從前到後*/ font-size: 90%; text-align: center; margin: 0px; } a{ color: #b5c1ad; text-decoration: none; } a:hover{ color: #fff; } .header{ background-image: url(images/bg-header.jpg); padding: 0; height: 100px; position: fixed; top: 0px; width: 100%; /*跟父元素的寬度一樣*/ z-index: 999; /*層級權重*/ } .nav{ float: right; font-family: QuicksandBook,Helvetica,Arial,sans-serif; padding: 45px 0px 0px 0px; text-align: right; } .main{ width: 960px; margin: 0 auto; /*居中對齊 */ background: url(images/bg-triangle.png) no-repeat; /*背景圖片如果不想平鋪，直接在background中寫，不要新增-image*/ background-position: 0px 0px; text-align: left; } .logo{ margin-bottom: 20px; } h1,h2{ font-family: QuicksandBook,Helvetica,Arial,sans-serif; font-weight: normal; text-transform: uppercase; /*英文轉大寫*/ } h1{ font-size: 240%; margin-top: 140px; } .date{ font-size: 75%; font-family: Arial,Helvetica,sans-serif; color: #b5c1ad; } .intro{ clear: left; /*清除浮動*/ font-size: 90%; line-height: 1.4em; } .main-story{ background: url(images/triangles.png) no-repeat; background-position: 122px 142px; height: 570px; } .more-articles{ border-top: 1px solid #807c72; padding: 5px 0px 15px 0px; font-size: 80%; } .more-articles p:last-child{ border-bottom: none; } .footer{ clear: both; background-color: rgba(0,0,0,.2); /*透明度屬性*/ padding: 5px 10px; } .footer p{ font-family: Helvetica,Arial,sans-serif; font-size: 75%; text-align: right; } .footer a{ color: #807c72; } </style> </head> <body> <div class="header"> <div class="container_12"> <div class="grid_5"> <img class="logo" src="images/logo.png"> <img src="images/header-triangle.png"> </div> <div class="nav grid_7"> <a href="#">home</a>/ <a href="#">news</a>/ <a href="#">archives</a>/ <a href="#">about</a>/ <a href="#">contact</a> </div> </div> </div> <div class="main"> <div class="main-story container_12"> <div class="grid_6 push_6"> <h1><a href="#">Fixed Gear Forever</a></h1> </div> <div class="intro grid_3 push_9"> <p class="date">16 APRIL 2011</p> <p>The veloheld combines minimalist design with superb quality. Devoid of excessive graphics and gear shift components, the veloheld product range delights us with its beauty and simplicity. The black and white (yin and yang?) bicycles feature a short wheelbase, a single gear and a narrow handlebar... All you need to explore the city streets.For those who want to create their bike themselves, the veloheld frames come in three sizes and two colours and are the perfect starting point. Continue reading... </p> </div> </div> <div class="more-articles container_12"> <h2 class="grid_12"><a href="#">More Articles</a></h2> <div class="grid_3"> <img src="images/more1.jpg"> <p><a href="#">On the Road: from the fixed gear fanatic's point of view</a></p> <p><a href="#">Brand History: Pashley Cycles - hand-built in England</a></p> <p><a href="#">Frame Wars: Innovations in cycle manufacture and repair</a></p> </div> <div class="grid_3"> <img src="images/more2.jpg"> <p><a href="#">On the Road: from the fixed gear fanatic's point of view</a></p> <p><a href="#">Brand History: Pashley Cycles - hand-built in England</a></p> <p><a href="#">Frame Wars: Innovations in cycle manufacture and repair</a></p> </div> <div class="grid_3"> <img src="images/more3.jpg"> <p><a href="#">On the Road: from the fixed gear fanatic's point of view</a></p> <p><a href="#">Brand History: Pashley Cycles - hand-built in England</a></p> <p><a href="#">Frame Wars: Innovations in cycle manufacture and repair</a></p> </div> <div class="grid_3"> <img src="images/more4.jpg"> <p><a href="#">On the Road: from the fixed gear fanatic's point of view</a></p> <p><a href="#">Brand History: Pashley Cycles - hand-built in England</a></p> <p><a href="#">Frame Wars: Innovations in cycle manufacture and repair</a></p> </div> </div> </div> <div class="footer" clearfix> <div class="container_12"> <p class="grid_12"><a href="#">Legal Information</a> | <a href="#">Privacy Policy</a> <a href="#">Copyright & copy; Pedal Faster 2011</a> </p> </div> </div> </body> </html>
引用的css樣式：
/* 960 Grid System ~ Core CSS. Learn more ~ http://960.gs/ Licensed under GPL and MIT. */ /* Forces backgrounds to span full width, even if there is horizontal scrolling. Increase this if your layout is wider. Note: IE6 works fine without this fix. */ body { min-width: 960px; } /* `Containers ----------------------------------------------------------------------------------------------------*/ .container_12 { margin-left: auto; margin-right: auto; width: 960px; } /* `Grid >> Global ----------------------------------------------------------------------------------------------------*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display: inline; float: left; margin-left: 10px; margin-right: 10px; } .push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 { position: relative; } /* `Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* `Grid >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .grid_1 { width: 60px; } .container_12 .grid_2 { width: 140px; } .container_12 .grid_3 { width: 220px; } .container_12 .grid_4 { width: 300px; } .container_12 .grid_5 { width: 380px; } .container_12 .grid_6 { width: 460px; } .container_12 .grid_7 { width: 540px; } .container_12 .grid_8 { width: 620px; } .container_12 .grid_9 { width: 700px; } .container_12 .grid_10 { width: 780px; } .container_12 .grid_11 { width: 860px; } .container_12 .grid_12 { width: 940px; } /* `Prefix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .prefix_1 { padding-left: 80px; } .container_12 .prefix_2 { padding-left: 160px; } .container_12 .prefix_3 { padding-left: 240px; } .container_12 .prefix_4 { padding-left: 320px; } .container_12 .prefix_5 { padding-left: 400px; } .container_12 .prefix_6 { padding-left: 480px; } .container_12 .prefix_7 { padding-left: 560px; } .container_12 .prefix_8 { padding-left: 640px; } .container_12 .prefix_9 { padding-left: 720px; } .container_12 .prefix_10 { padding-left: 800px; } .container_12 .prefix_11 { padding-left: 880px; } /* `Suffix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .suffix_1 { padding-right: 80px; } .container_12 .suffix_2 { padding-right: 160px; } .container_12 .suffix_3 { padding-right: 240px; } .container_12 .suffix_4 { padding-right: 320px; } .container_12 .suffix_5 { padding-right: 400px; } .container_12 .suffix_6 { padding-right: 480px; } .container_12 .suffix_7 { padding-right: 560px; } .container_12 .suffix_8 { padding-right: 640px; } .container_12 .suffix_9 { padding-right: 720px; } .container_12 .suffix_10 { padding-right: 800px; } .container_12 .suffix_11 { padding-right: 880px; } /* `Push Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .push_1 { left: 80px; } .container_12 .push_2 { left: 160px; } .container_12 .push_3 { left: 240px; } .container_12 .push_4 { left: 320px; } .container_12 .push_5 { left: 400px; } .container_12 .push_6 { left: 480px; } .container_12 .push_7 { left: 560px; } .container_12 .push_8 { left: 640px; } .container_12 .push_9 { left: 720px; } .container_12 .push_10 { left: 800px; } .container_12 .push_11 { left: 880px; } /* `Pull Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .pull_1 { left: -80px; } .container_12 .pull_2 { left: -160px; } .container_12 .pull_3 { left: -240px; } .container_12 .pull_4 { left: -320px; } .container_12 .pull_5 { left: -400px; } .container_12 .pull_6 { left: -480px; } .container_12 .pull_7 { left: -560px; } .container_12 .pull_8 { left: -640px; } .container_12 .pull_9 { left: -720px; } .container_12 .pull_10 { left: -800px; } .container_12 .pull_11 { left: -880px; } /* `Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */ .clearfix:before, .clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; } /* The following zoom:1 rule is specifically for IE6 + IE7. Move to separate stylesheet if invalid CSS is a problem. */ .clearfix { zoom: 1; }