<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板</title>
<link rel="stylesheet" href="ll.css">
</head>
<body background="1.jpg"
style="background-repeat:no-repeat;
background-attachment:fixed;
background-size: 100% 100%;">
<header>
<h1>标题</h1>
</header>
<div class="a">
<img src="2.jpg" alt="">
<div class="spba">
<span class="jpa">景区管理</span><br>
<a href="">景区查询和统计分析</a>
</div>
</div>
<div class="b">
<img src="2.jpg" alt="">
<div class="spbb">
<span class="jpb">景点管理</span><br>
<b href="">景点查询和统计分析</b>
<div class="tt"></div>
</div>
</div>
<div class="c">
<img src="2.jpg" alt="">
<div class="spbc">
<span class="jpc">评论管理</span><br>
<c href="">评论查询和统计分析</c>
</div>
</div>
<div class="d">
<img src="2.jpg" alt="">
<div class="spbd">
<span class="jpd">推荐管理</span><br>
<d href="">用户的旅游需求和推荐结果</d>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
position: relative;/*子绝父相*/
background: #ccc;
text-align: center;
height: 125px;
background-size: 100% 100%;
}
header>h1{ /*子选择器*/
font-size: 4vh;
color: rgb(10, 11, 12);
text-align: center;
line-height:125px; /*要等于头部高度才可以使字体居中*/
}
div{
white-space:nowrap;
}
html{
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 0;
}
.a{
width: 200px;
height: 300px;
background: aquamarine;
margin-top: 100px;
margin-left: 70px;
line-height: 90px;
border: 1px solid rgb(21, 21, 19);
border-radius: 10px ;
overflow: hidden;
float: left;
box-shadow: 0px 1px 3px #666;
}
.b{
width: 200px;
height: 300px;
background: aquamarine;
margin-top: 100px;
margin-left: 200px;
line-height: 90px;
border: 1px solid rgb(21, 21, 19);
border-radius: 10px ;
overflow: hidden;
float: left;
box-shadow: 0px 1px 3px #666;
position: relative;
}
.c{
width: 200px;
height: 300px;
background: aquamarine;
margin-top: 100px;
margin-left: 200px;
line-height: 90px;
border: 1px solid rgb(21, 21, 19);
border-radius: 10px ;
overflow: hidden;
float: left;
box-shadow: 0px 1px 3px #666;
}
.d{
width: 200px;
height: 300px;
background: aquamarine;
margin-top: 100px;
margin-left: 200px;
line-height: 90px;
border: 1px solid rgb(21, 21, 19);
border-radius: 10px ;
overflow: hidden;
float: left;
box-shadow: 0px 1px 3px #666;
}
.d img{
width: 200px;
height: 210px;
float: left;
}
.c img{
width: 200px;
height: 210px;
float: left;
}
.b img{
width: 200px;
height: 210px;
float: left;
}
.a img{
width: 200px;
height: 210px;
float: left;
}
.spbd{
width: 200px;
height: 90px;
background: #fff;
float: left;
line-height: 30px;
text-align: center;
}
.spbc{
width: 200px;
height: 90px;
background: #fff;
float: left;
line-height: 30px;
text-align: center;
}
.spba{
width: 200px;
height: 90px;
background: #fff;
float: left;
line-height: 30px;
text-align: center;
}
.spbb{
width: 200px;
height: 90px;
background: #fff;
float: left;
line-height: 30px;
text-align: center;
}
.jpa{
color:red;
font-weight:bold ;
font-size: 20px;
}
.jpb{
color:red;
font-weight:bold ;
font-size: 20px;
}
.jpc{
color:red;
font-weight:bold ;
font-size: 20px;
}
.jpd{
color:red;
font-weight:bold ;
font-size: 20px;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
color:red
}
b{
text-decoration: none;
color: #000;
}
b:hover{
color:red
}
.tt{
position: absolute;
top:525px;
left: 0;
width: 100%;
height: 100px;
border-top: 1px solid #c24242;
background-color: #871010;
box-shadow: 0 3px 4px rgba(0,0,0,0.18);
}
请大家帮我检查一下我的代码，是这样的，我想要将鼠标移动至图中这个字段的位置悬停时，会出现一个弹窗来，然后这个弹窗内会有其他内容供我选择，就很像京东的那种
然后我跟着教程做的，可能是我的位置没有放对，一直没有达到我想要到效果，所以想请大家帮我看一下应该怎么改正，谢谢！
