| | |
|---|
| | | |
|---|
| | | iframe { |
|---|
| | | border-width: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 布局 */ |
|---|
| | | .row::after, .row::before { |
|---|
| | | content: ""; |
|---|
| | | display: table; |
|---|
| | | clear: both; |
|---|
| | | } |
|---|
| | | .row div:empty { |
|---|
| | | background:rgba(0,0,0,0.04); |
|---|
| | | border: 1px solid rgba(0,0,0,.3); |
|---|
| | | min-height:32px; |
|---|
| | | height: inherit; |
|---|
| | | z-index:1; |
|---|
| | | } |
|---|
| | | .col-md1,.col-md10,.col-md11,.col-md12,.col-md2,.col-md3,.col-md4,.col-md5,.col-md6,.col-md7,.col-md8,.col-md9{ |
|---|
| | | float:left; |
|---|
| | | } |
|---|
| | | .col-md1{width:8.33333333%} |
|---|
| | | .col-md2{width:16.66666667%} |
|---|
| | | .col-md3{width:25%} |
|---|
| | | .col-md4{width:33.33333333%} |
|---|
| | | .col-md5{width:41.66666667%} |
|---|
| | | .col-md6{width:50%} |
|---|
| | | .col-md7{width:58.33333333%} |
|---|
| | | .col-md8{width:66.66666667%} |
|---|
| | | .col-md9{width:75%} |
|---|
| | | .col-md10{width:83.33333333%} |
|---|
| | | .col-md11{width:91.66666667%} |
|---|
| | | .col-md12{width:100%} |
|---|
| New file |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title>Title</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/common.css"> |
|---|
| | | <style> |
|---|
| | | html { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | body { |
|---|
| | | height: 100%; |
|---|
| | | /*background-color: #007DDB;*/ |
|---|
| | | } |
|---|
| | | #container { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | #box { |
|---|
| | | position: absolute; |
|---|
| | | top: 15px; |
|---|
| | | left: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 按钮组 */ |
|---|
| | | .group .item { |
|---|
| | | float: left; |
|---|
| | | border-top: 2px solid #333; |
|---|
| | | border-bottom: 2px solid #333; |
|---|
| | | border-left: 1px solid #333; |
|---|
| | | border-right: 1px solid #333; |
|---|
| | | } |
|---|
| | | .group .item:first-child { |
|---|
| | | border-left: 2px solid #333; |
|---|
| | | } |
|---|
| | | .group .item:last-child { |
|---|
| | | border-right: 2px solid #333; |
|---|
| | | } |
|---|
| | | button.item { |
|---|
| | | padding: 1px 1px 1px 1px; |
|---|
| | | width: 22px; |
|---|
| | | height: 22px; |
|---|
| | | outline: none; |
|---|
| | | cursor: pointer; |
|---|
| | | color: #333; |
|---|
| | | background-color: transparent; |
|---|
| | | transition: 0.4s; |
|---|
| | | } |
|---|
| | | button.item:hover { |
|---|
| | | background-color: #333; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="container"> |
|---|
| | | <div id="box"> |
|---|
| | | <div class="group"> |
|---|
| | | <button class="item">1</button> |
|---|
| | | <button class="item">24</button> |
|---|
| | | <button class="item">25</button> |
|---|
| | | <button class="item">26</button> |
|---|
| | | <button class="item">27</button> |
|---|
| | | <button class="item">28</button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | |
|---|
| | | </ul> |
|---|
| | | |
|---|
| | | <!-- 主体内容 --> |
|---|
| | | <iframe id="content" src="stock.html"></iframe> |
|---|
| | | <iframe id="content" src="console.html"></iframe> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
