css3 calc()應用程式碼例項
分享一段程式碼例項,它實現了利用calc()方法實現平均分配的九宮格功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } body { background: #ccc; } ul { padding: 8px 0 0 8px; list-style: none; } li { height: 100px; width: calc(100% / 3 - 8px); background: #fff; float: left; margin-right: 8px; margin-bottom: 8px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
關於calc()用法可以參閱CSS3 calc()一章節。
相關文章
- localStorage應用程式碼例項
- CSS3雪人程式碼例項CSSS3
- opacity應用程式碼例項
- CSS3卡通形象程式碼例項CSSS3
- css3 animation動畫程式碼例項CSSS3動畫
- css3星空效果程式碼例項CSSS3
- css3水滴效果程式碼例項CSSS3
- CSS3 名片效果程式碼例項CSSS3
- onfocus和onblur應用程式碼例項
- Object.defineProperty()應用程式碼例項Object
- CSS3紙飛機程式碼例項CSSS3
- CSS3發光背景程式碼例項CSSS3
- css3橢圓形程式碼例項CSSS3
- CSS3繪製菱形程式碼例項CSSS3
- CSS3小黃人效果程式碼例項CSSS3
- css3晃動效果程式碼例項CSSS3
- CSS3心形效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3彈球效果程式碼例項CSSS3
- css3實現tab選項卡程式碼例項CSSS3
- js實現開啟應用程式程式碼例項JS
- js呼叫執行exe應用程式程式碼例項JS
- CSS3圖層陰影程式碼例項CSSS3
- CSS3滑過光束效果程式碼例項CSSS3
- css3繪製月牙效果程式碼例項CSSS3
- css3折角效果程式碼例項CSSS3
- CSS3梯形效果程式碼例項CSSS3
- CSS3背景漸變效果程式碼例項CSSS3
- css3立方體效果程式碼例項CSSS3
- css3優惠券效果程式碼例項CSSS3
- CSS3星系運動效果程式碼例項CSSS3
- css3漂浮氣球效果程式碼例項CSSS3
- window.onload事件應用程式碼例項事件
- js prototype原型應用簡單例項程式碼JS原型單例
- dd dt dl標籤應用例項程式碼
- 表單序列化應用程式碼相關程式碼例項
- css3動態背景圖片程式碼例項CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3