Select-or-Die演示11种美化下拉框select方法

最新推荐文章于 2023-01-12 15:56:26 发布

weixin_30856725

最新推荐文章于 2023-01-12 15:56:26 发布

阅读量105

点赞数

文章标签：前端后端 ViewUI

原文链接：http://www.cnblogs.com/wang1593840378/p/6124081.html

版权

在线预览

下载地址

在线实例

 
         <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%; #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 { #eee;} 
        
                     .menu .cur { color: #000; } 
        
                     .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> 
        
          转载：http://www.cnblogs.com/niuboren/p/6108170.html