|  |  | 
 |  |  |     <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> |