当前位置: 首页 > 工具软件 > Select-or-Die > 使用案例 >

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

申屠涛
2023-12-01


在线预览

下载地址

在线实例
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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

转载于:https://www.cnblogs.com/wang1593840378/p/6124081.html

 类似资料: