/* 地图部分 */ #mapContainer{ position: relative; } #map{ min-height: 550px; position: relative; } .leftButton{ position: absolute; left: 20px; top: 15px; } .big{ width:50px; height:50px; background:rgba(0,0,0,0.7) url(../img/zoom-in.png) no-repeat center; background-size:60%; border-radius: 50%; margin-left: 5px; margin-bottom: 10px; cursor: pointer; } .small{ width:50px; height:50px; background:rgba(0,0,0,0.7) url(../img/zoom-out.png) no-repeat center; background-size:60%; border-radius: 50%; margin-left: 5px; margin-bottom: 10px; cursor: pointer; } .change{ width:50px; height:50px; background:rgba(0,0,0,0.7) url(../img/change.png) no-repeat center; background-size:50%; border-radius: 50%; margin-left: 5px; margin-top: 10px; cursor: pointer; position: relative; } #layers-selector { width: 500px; background-color: rgba(0,0,0,0.5); color: #fff; font-weight: 600; padding-left: 20px; border: 2px solid #FFFFFF; position: absolute; left: 80px; top: 115px; } #layers-selector ul{ padding: 0; } #layers-selector li{ float: left; margin-right: 20px; margin-bottom: 10px; } #layers-selector li input{ margin-right: 5px; cursor: pointer; vertical-align: top; } #layers-selector div{ clear: both; } #layers-selector h4{ font-size: 16px; color: #fab808; font-weight: bold; } /*按钮*/ .rightButton{ position: absolute; right: 70px; top:30px; } .rightButton a:hover,.rightButton a:active{ color: #FFF; } .a_demo_two { float: right; margin-left: 10px; background-color:#333; padding:8px 10px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%); background-image: -o-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%); background-image: -moz-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%); background-image: -webkit-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%); background-image: -ms-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(146,144,144)),color-stop(1, rgb(110,107,107))); -webkit-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; -moz-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; -o-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .a_demo_two::before { background-color:#504e4e; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0px 1px 0px #fff; -moz-box-shadow: 0px 1px 0px #fff; -o-box-shadow: 0px 1px 0px #fff; box-shadow: 0px 1px 0px #fff; } .a_demo_two:active { color:#FFFFFF; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background:rgb(101,98,98); -webkit-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; -moz-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; -o-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e; top:7px; } .a_demo_two:hover{ color:#FFFFFF; } .a_demo_two:active:hover{ color:#FFFFFF; } .a_demo_two:active::before { top:-2px; color:#FFFFFF; }