在線實例
<div class="main"> <div class="mianc"> <h1>默認</h1> <!-- Demo start --> <div class="select"> <select class="myselect"> <option value="交互設計">交互設計</option> <option value="視覺設計">視覺設計</option> <optgroup label="開發"> <option value="前端開發">前端開發</option> <option value="后端開發">后端開發</option> </optgroup> <option value="用戶研究">用戶研究</option> <option value="產品經理">產品經理</option> </select> </div> <!-- Demo end --> </div> </div> <style> * { margin: 0; padding: 0;} html, body { height: 100%; overflow: hidden;} body { font-family: Consolas,arial,"宋體";} .menu { position: absolute; left: 0; top: 0; width: 200px; height: 100%; background-color: #ccc; font-family: Consolas,arial,"宋體";} .menuc { height: 100%; overflow-x: hidden; overflow-y: auto;} .menu span { display: block; height: 100px;} .menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;} .menu a:hover { background-color: #eee;} .menu .cur { color: #000; background-color: #fff !important;} .main { height: 100%; margin-left: 200px;} .mianc { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto;} .main h1 { width: 900px; margin: 40px auto; font: 32px "Microsoft Yahei";} .explain, .sucaihuo-explain { margin-top: 20px; font-size: 14px; text-align: center; color: #f50;} </style>