css樣式實例
阿新 • • 發佈:2019-05-04
發生 導航 pad black -s 響應式 ddd img lac
* { box-sizing: border-box; } /*box-sizing屬性允許您以特定的方式定義匹配某個區域的特定元素*/ body { font: Arial; margin: 0; } .header { padding: 80px; text-align: center; background: burlywood; color: white; } .header h1 { font-size: 40px; } /*導航*/ .navbar { overflow: hidden;/*規定當內容已出發生的事情*/ background-color: #333; } .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px;/*設置內邊距*/ text-decoration: none; } /*設置右邊的鏈接*/ .navbar a.right { float: right; } .navbar a:hover { background-color: #ddd; color: black; } /*列容器*/ .row { display: -ms-flexbox;/*規定屬性應該生成框的類型,-ms混合版彈性布局*/ display: flex;/*布局,指定這個框的布局是flex類型,彈性布局*/ -ms-flex-wrap: wrap;/*讓彈性盒在必要的時候拆行*/ flex-wrap: wrap; } /*創建兩個列*/ /*邊欄*/ .side { -ms-flex: 30%; flex: 30%; background-color: #f1f1f1; padding: 20px; } /*主要內容區域*/ .main { -ms-flex: 70%; flex: 70%; background-color: white; padding: 20px; } /*測試圖片*/ .fakeimg {/*冒充的,偽造的,填充*/ background-color: #aaa; width: 100%;/*寬度*/ padding: 20px; } /*底部*/ .footer {/*頁腳*/ padding: 20px; text-align: center; background: #ddd; } /*響應式布局 - 在屏幕設備寬度尺寸小於 700px 時,讓兩欄上下堆疊顯示*/ @media screen and (max-width: 700px) {/*在設置響應式的頁面時需要的多些*/ .row { flex-direction: column; } } @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } }
css樣式實例