下单菜单源码分析-司徒正美

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Backbone-test</title>

  7     <link rel="stylesheet" href="main.css">
  8      <style>
  9             .dropdown{
 10                 position: relative;
 11             }
 12             .dropdown div{
 13                 position: relative;
 14                 200px;
 15                 height:30px;
 16                 border:1px solid rgb(228,228,228);
 17                 overflow: hidden;
 18             }
 19             .dropdown div input{
 20                 200px;
 21                 height:30px;
 22                 border: 0 none;
 23                 padding-left:10px;
 24                 position: absolute;
 25                 top:0px;
 26                 left:0px;
 27                 z-index: 1;
 28 
 29             }
 30             .dropdown div .close{
 31                 position: absolute;
 32                 40px;
 33                 height:30px;
 34                 text-align: center;
 35                 background: rgb(240, 240 240);
 36                 border:1px solid rgb(228,228,228);
 37                 line-height: 30px;
 38                 color:rgb(228,228,228);
 39                 z-index: 10;
 40                 right:0px;
 41                 top: 0px;
 42             }
 43             .dropdown select{
 44                 -webkit-appearance: none;
 45                 -moz-appearance: none;
 46                 position: absolute;
 47                 border:1px solid rgb(228,228,228);
 48                 top: 30px;
 49                 left: 0px;
 50                 z-index: 0;
 51                 200px;  
 52                 display: none;
 53             }
 54             .dropdown select:focus{
 55                 border:1px solid rgb(228,228,228);
 56             }
 57             .dropdown.focus select{
 58                 display: block;
 59                 z-index: 2;
 60             }
 61             .dropdown select option{
 62                 padding-top:5px;
 63                 200px;
 64                 height:30px;
 65                 line-height: 30px;
 66                 padding-left: 10px;
 67             }
 68         </style>
 69 </head>
 70     <body>
 71         <div class="dropdown">
 72             <div><input placeholder="选择服务类型" readonly><span class="close">X</span></div>
 73             <select multiple>
 74                 <option>1111</option>
 75                 <option>2222</option>
 76                 <option>3333</option>
 77                 <option>4444</option>
 78             </select>
 79         </div>
 80     </body>
 81     <script src="lib/jquery.js"></script>
 82     <script src="bootstrap.js"></script>
 83     <script src="lib/underscore.js"></script>
 84     <script src="lib/backbone.js"></script>
 85             <script>
 86             $(function () {
 87                 $(".close").click(function () {
 88 
 89                     if ($(".dropdown").hasClass("focus")) {
 90                         $(".dropdown").removeClass("focus")
 91                     } else {
 92                         $(".dropdown").addClass("focus")
 93 
 94                     }
 95                 })
 96                 $(".dropdown select").change(function () {
 97                     $(".dropdown input").val($(this).val())
 98                     $(".dropdown").removeClass("focus")
 99                 })
100             })
101         </script>
102 </html>

①absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素-相对于 static 定位以外的第一个父元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

②border: 0 none;————宽为0，且样式为无。