设置全局
*{
margin: 0px;
padding: 0px;
}
.H{
100%;
}
.top-nav{
1349px;
height: 30px;
margin: 20px 0px 0px 0px ;
background-color: cornflowerblue;
/*position: absolute;*/
}
.top-nav-1{
30%;
height: 30px;
float: left;
/*background-color: #FFFF00;*/
}
.top-nav-2{
widows: 100px;
height: 30px;
margin-right: 0px;
float: right;
font-size: 10px;
/*border: 1px solid black;*/
margin: 0px 200px 0px 0px;
}
.top-nav-1-1{
100%;
height: 30px;
float: left;
/*border: 1px solid black;*/
margin: 0px 0px 0px 250px;
}
.top-nav-2-1{
font-family: "新宋体";
font-size: 13px;
list-style: none;
text-decoration: none;
}
.photo{
1034px;
height: 690px;
margin: 0px auto;
margin-top: 40px;
margin-left: 148.5px;
position: relative;
}
.photo-1{
200px;
height: 50px;
background: darkgrey;
color: black;
/*opacity: 0.4;*/
}
.photo-2{
200px;
height: 50px;
background: darkgrey;
margin: 10px 0px 0px 0px;
}
.photo-3{
200px;
height: 50px;
background: darkgrey;
margin: 10px 0px 0px 0px;
}
.photo-4{
200px;
height: 50px;
background: darkgrey;
margin: 10px 0px 0px 0px;
}
.photo-5{
200px;
height: 50px;
background: darkgrey;
margin: 10px 0px 0px 0px;
}
.d1{
float: left;
200px;
max-height: 50px;
text-align: center;
line-height: 50px;
color: black;
overflow: hidden;
transition: 0.5s;
font-size: 20px;
}
.d1:hover{
background-color: coral;
color: white;
max-height: 300px;
cursor: pointer;
float: left;
opacity: 0.8;
}
.d11{
list-style: none;
background-color: #87CEFA;
border: 1px solid #CCCCCC;
color: #000000;
}
a{
color: black;
text-decoration: none;
}
span{
70px;
list-style: none;
float: right;
font-size: 13px;
}
<body>
<div class="H">
<div class="top-nav">
<div class="top-nav-1">
<div class="top-nav-1-1">
<div class="top-nav-2">
<a class="top-nav-2-1" href="#" target="_blank">
<img src="img/kefu.png" style="position: relative;"/>
<span>欢迎使用
<i>在线客服</i>
</span>
</a>
</div>
</div>
<div class="photo">
<div class="stage">
<div class="to-left"><</div>
<div class="to-right">></div>
<div class="banner">
<div class="items"><img src="img/lvyou10.png"/></div>
<div class="items"><img src="img/lvyou2.jpg" /></div>
<div class="items"><img src="img/jilv01.png" /></div>
<div class="items"><img src="img/jilv02.png" /></div>
<div class="items"><img src="img/jilv03.png" /></div>
</div>
</div>
<div class="pht">
<div class="photo-1">
<a href="#" target="_blank">
<div class="d1">旅游导购
<div class="d11">亲子游</div>
<div class="d11">自驾游</div>
<div class="d11">跟团旅行</div>
</div></a>
</div>
<div class="photo-2">
<a href="羁旅3.html" target="_blank">
<div class="d1">景点选择
<a href='羁旅2.html'><div class="d11">三亚</div></a>
<div class="d11">新疆</div>
<div class="d11">苏杭</div>
<a href="羁旅4.html"><div class="d11">昆明</div></a>
<div class="d11">西藏</div>
<div class="d11">欧洲</div>
</div></a>
</div>
<div class="photo-3">
<a href="#" target="_blank"><div class="d1">精彩回顾</div></a>
</div>
<div class="photo-4">
<a href="#" target="_blank"><div class="d1">经典路线</div></a>
</div>
<div class="photo-5">
<a href="#" target="_blank"><div class="d1">关于我们</div></a>
</div>
</div>
</div>
</div>
</body>