老师 下面代码不太理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高德地图线路导航</title>
<title>高德地图导航</title>
<link type="text/css" rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=45ab06c8820c3f5c9c7ab05bac748e32&plugin=AMap.AutoComplete"></script>
<style type="text/css">
* {
padding:0;
margin:0;
}
/* 如果元素不显示 给body,html设置高度 */
body,html {
height: 100%;
}
/* 搜索文本的过渡动画 */
@keyframes sildeInDown {
from {max-height: 0;}
to {max-height: 380px;}
}
/* icon提示动画 出现*/
@keyframes slideInUp {
from {
opacity:0;
transform: translate3d(0,10%,0);
visibility: visible;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
/* icon提示动画 消失 */
@keyframes slideOutDown {
from {
opacity:1;
transform: translate3d(0,0,0);
}
to {
visibility: hidden;
transform: translate3d(0,10%,0);
opacity: 0;
}
}
/* 地图容器 */
#container {
height: 100%;
width: 100%;
}
/* 路线搜索容器 */
#planForm {
width:360px;
position:absolute;
background: #3d93fd;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
top:15px;
left: 17px;
z-index:5;
text-align: center;
}
#planForm .searchIcon {
position: relative;
color:#fff;
}
#planForm .searchIcon i{
opacity: 0.5;
height: 20px;
width: 20px;
margin:20px 22px;
cursor: pointer;
}
.tip {
position:absolute;
color:white;
float: left;
top:44px;
z-index:10;
font-size:8px;
background-color:rgba(0,0,0,0.7);
padding: 5px 7px;
border-radius:2px;
animation: slideInUp 150ms linear;
}
#tip-car {
left:91px;
}
#tip-bus {
left:161px;
}
#tip-bicycle {
left:231px;
}
.tip .j {
position: absolute;
left:50%;
top:-10px;
margin-left:-5px;
}
.tip .j::before,.tip .j::after {
content: "";
/*display: block;*/
width:0;
height: 0;
border-width:5px;
border-style: solid;
position: absolute;
left: 0;
top:0;
}
.tip .j::before {
border-color:transparent transparent rgba(0,0,0,0.4) transparent;
}
.tip .j::after {
border-color:transparent transparent rgba(0,0,0,0.4) transparent;
top:1px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="planForm">
<div class="searchIcon">
<i class="fa fa-car" id="carTab"></i>
<i class="fa fa-bus" id="busTab"></i>
<i class="fa fa-bicycle" id="bicycleTab"></i>
</div>
<div class="tips">
<div class="tip" id="tip-car"><span class="j"></span>驾车</div>
<div class="tip" id="tip-bus"><span class="j"></span>公交</div>
<div class="tip" id="tip-bicycle"><span class="j"></span>骑行</div>
</div>
<div id="line-Search-form">
<p class="line-search_ipt">
<label for="">起</label>
<input id="dir_form_start" class="dir_ipt" type="text" placeholder="请输入您的起点">
</p>
<p class="line-search_ipt">
<label id="end" for="">终</label>
<input id="dir_form_end" class="dir_ipt" type="text" placeholder="请输入您的终点">
</p>
</div>
<div class="footer">
<button id="dir_submit"></button>
</div>
<div id="searchResult"></div>
</div>
</body>
<script>
//初始化地图
var myMap = new AMap.Map('container',{
zoom:10,
center:[116.40528500005604,39.90498900020126]
})
//
</script>
</html>
为啥要做两个
1个不就够了么
为什么第二个top是1px
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星