| | |
| | | <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"> |
| | | <link rel="stylesheet" type="text/css" href="../static/css/console.css"> |
| | | <style> |
| | | html { |
| | | height: 100%; |
| | |
| | | height: 100%; |
| | | /*background-color: #007DDB;*/ |
| | | } |
| | | #container { |
| | | position: relative; |
| | | } |
| | | #box { |
| | | position: absolute; |
| | | top: 15px; |
| | | left: 30px; |
| | | |
| | | /* 头部 */ |
| | | header { |
| | | height: 20%; |
| | | border: 1px solid red; |
| | | } |
| | | |
| | | /* 按钮组 */ |
| | | .group .item { |
| | | float: left; |
| | | border-top: 2px solid #333; |
| | | border-bottom: 2px solid #333; |
| | | border-left: 1px solid #333; |
| | | border-right: 1px solid #333; |
| | | /* 主体 */ |
| | | main { |
| | | height: 80%; |
| | | } |
| | | .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"> |
| | | <header> |
| | | <span>描述信息</span> |
| | | </header> |
| | | <main> |
| | | <!-- 左输送线 --> |
| | | <div class="site"> |
| | | |
| | | </div> |
| | | <!-- 货架 + 堆垛机 --> |
| | | <div class="main-part"> |
| | | <!-- 货架 --> |
| | | <div class="stock-group"> |
| | | <button class="item">1</button> |
| | | <button class="item">2</button> |
| | | <button class="item">3</button> |
| | | <button class="item">4</button> |
| | | <button class="item">5</button> |
| | | <button class="item">6</button> |
| | | <button class="item">7</button> |
| | | <button class="item">8</button> |
| | | <button class="item">9</button> |
| | | <button class="item">10</button> |
| | | <button class="item">11</button> |
| | | <button class="item">12</button> |
| | | <button class="item">13</button> |
| | | <button class="item">14</button> |
| | | <button class="item">15</button> |
| | | <button class="item">16</button> |
| | | <button class="item">17</button> |
| | | <button class="item">18</button> |
| | | <button class="item">19</button> |
| | | <button class="item">20</button> |
| | | <button class="item">21</button> |
| | | <button class="item">22</button> |
| | | <button class="item">23</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 class="crn"> |
| | | <hr class="pathway"> |
| | | <button class="machine">堆垛机</button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 右输送线 --> |
| | | <div class="site"> |
| | | |
| | | </div> |
| | | </main> |
| | | </body> |
| | | </html> |