<!DOCTYPE html>
<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="./style1.css">
<!--脑袋-->
<div class="head">
<div class="h-head">
<img src="../艺龙素材/艺龙.jpeg" width="130px" height="60px">
<div class="sanjiao"></div>
<div class="h-body">
<a href="https://promotion.elong.com/myelong/2018/JFgb/index.html">
<font size="2" color="grey">
里程商城
</font>
</a> |
<a href="https://my.elong.com/kf/index?g=31878">
<font size="2" color="grey">
在线客服
</font>
</a> |
<a href="https://my.elong.com/helpCenter/index">
<font size="2" color="grey">
帮助中心
</font>
</a> |
<a href="//">
<font size="2" color="grey">
网站无障碍
</font>
</a>
</div>
<div class="h-foot">
<div class="h-foot1">
<img src="../艺龙素材/ava_phone.png" width="50px" height="50px" alt="">
<p style="color: green;">
<!-- <font size="3"> -->
7×24小时客服电话
<!-- </font> -->
<br style="color: grey;">
<!-- <font size="3"> -->
专属热线咨询
<!-- </font> -->
</br>
</p>
</div>
<div class="h-foot2">
<img src="../艺龙素材/shouji.png" width="50px" height="50px" alt="">
<p style="color: purple;" >
手机版
<br style="color: purple;">
专项五折起
</p>
</div>
<div class="h-foot3">
<img src="../艺龙素材/xiaochengxu.png" width="45px" height="45px" alt="">
<p style="color: rgb(47, 112, 233);">
小程序
<br style="color: rgb(47, 112, 233);">
体验更轻盈
</p>
</div>
</div>
</div>
</div>
<div class="head1">
<div class="h1-head">
<div class="h-1">
<a href="https://secure.elong.com/passport/login_cn.html?nexturl=https://ihotel.elong.com/ihotel" style="color: white;">
登录
</a>
</div>
<div class="h-11">
<a href="https://secure.elong.com/passport/register_cn.html?rnd=20220322145846" style="color: white;">
注册
</a>
</div>
<div class="h-2">
<a href="https://www.elong.com" style="color: white;">
首页
</a>
</div>
<div class="h-3">
<a href="https://hotel.elong.com/hotel" style="color: white;" title="酒店预订">
国内酒店
</a>
</div>
<div class="h-4">
<a href="https://ihotel.elong.com/ihotel" style="color: white;" title="海外酒店">
海外酒店
</a>
</div>
<div class="h-5">
<a href="https://www.ly.com/flights/home?p=465" style="color: white;" title="机票预订">
国内.国际机票
</a>
</div>
<div class="h-6">
<a href="https://www.ly.com/huochepiao/?p=10045" style="color: white;" title="火车票">
火车票
</a>
</div>
<div class="h-7">
<a href="https://tmc.ly.com" style="color: white;" title="商旅">
商旅
</a>
</div>
</div>
</div>
<!-- 大图 -->
<div class="head2">
<div class="xuanze">
<div class="xuan1">
<div class="jiu">
<img src="./_酒店.png" width="20px" height="20px" alt="">
</div>
<div class="dian" style="color: #37D;">
酒店
</div>
</div>
<div class="xuan2">
<div class="fei">
<img src="./飞机中.png" width="25px" height="25px" alt="">
</div>
<div class="ji" style="color: #37D;">
<a href="https://www.ly.com/flights/home?p=465" >机票</a>
</div>
</div>
<div class="xuan3">
<div class="huo">
<img src="./火车.png" width="20px" height="20px" alt="">
</div>
<div class="che" style="color: #37D;">
<a href="https://www.ly.com/flights/home?p=465" >火车票</a>
</div>
</div>
<div class="xuan4">
</div>
<div class="xuan5">
</div>
<div class="xiangmu">
<div class="xiang">
<div class="da">
<div class="guonei">
<!-- <a> -->
<strong style="color: #37D;">国内酒店</strong>
<!-- </a> -->
</div>
<div class="haiwai">
<a href="https://ihotel.elong.com/ihotel" style="color: #555;">
<b>海外酒店</b>
</a>
</div>
<div class="xian">
</div>
</div>
<div class="sanjiao2">
</div>
</div>
<div class="mudi">
<a>目的地</a>
<!-- style="position: absolute;right: 5%;top: 0%;" -->
</div>
<div class="sousuo">
<a aria-setsize="10px">北京</a>
</div>
<div class="ruzhu">
<a>入住</a>
</div>
<div class="ruzhuri">
<strong>2022-3-22</strong>
<a style="color: #CCC;">今天</a>
<div class="rili"><img src="./日历.png" width="23px" height="23px">
</div>
</div>
<div class="tuifang">
<a>退房</a>
</div>
<div class="tuifangri">
<strong>2022-3-23</strong>
<a style="color: #CCC;">明天</a>
<div class="rili1"><img src="./日历.png" width="23px" height="23px">
</div>
</div>
</div>
<div class="guanjianci">
<a>关键词</a>
</div>
<div class="shuru">
<a style="color: #CCC;">如位置/酒店名/品牌</a>
</div>
<div class="sou">
<div class="suo">
<img src="./搜索.png" width="28px" height="27px">
<div class="zi">
<a style="color: aliceblue;">搜索</a>
</div>
</div>
</div>
</div>
</div>
<!-- 需要展示的五张图 -->
<div id="photo">
<img src="../艺龙素材/内容大图学生专享.png" />
<img src="../艺龙素材/内容大图订酒店.png" />
<img src="../艺龙素材/内容大图3.8.jpg" />
<img src="../艺龙素材/内容大图66元.jpg" />
</div>
</div>
<!-- 目的地指数 -->
<div class="body">
<div class="b2">
<a>目的地指数</a>
<hr>
</div>
<div class="b3">
<a >覆盖全球酒店,您想住的,我们都有</a>
</div>
<div class="guo">
<img src="../艺龙素材/国内-01.png" width="35px" height="35px">
<div class="nei">
<a href="https://hotel.elong.com/hotel/" style="color: #555;">国内</a>
</div>
<div class="deng">
<a href="https://www.elong.com/" style="color: aliceblue;">登高踏青</a>
</div>
<div class="xiao">
<a href="https://www.elong.com/" style="color: #555;">小憩温泉</a>
</div>
<div class="tian">
<a href="https://www.elong.com/" style="color: #555;">天然氧吧</a>
</div>
<div class="cao">
<a href="https://www.elong.com/" style="color: #555;">草原撒欢</a>
</div>
<div class="zhen">
<a href="https://www.elong.com/" style="color: #555;">小镇时光</a>
</div>
<div class="mei">
<a href="https://www.elong.com/" style="color: #555;">美食之城</a>
</div>
<div class="geng">
<a href="https://hotel.elong.com/hotel/">更多</a>
<div class="duo">
<img src="../艺龙素材/远大于.png" width="20px" height="20px">
</div>
</div>
</div>
</div>
*{
padding: 0;/* 内边距 */
margin: 0;/* 屏幕外边距 */
}
a{
text-decoration: none;/*消除a标签超链接的下划线*/
}
.head{
height: 62px;
border: 1px solid white;/* 边框厚度*/
padding: 12px;
background:url() repeat-x;/*浏览器水平铺满*/
}
.h-head{
width: 1200px;
height: 58px;
border: 1px;/* 边框厚度*/
position:absolute;
top:20px;
left:10%;
margin-left:-10px;
margin-top:-10px;
}
.sanjiao{
width:0;
height:0;
overflow:hidden;
/* font-size: 0; 是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:8px;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:rgb(0, 255, 106) transparent transparent transparent;
position:absolute;/*绝对定位*/
top:60px;
right:0;
margin-left:-10px;
margin-top:-10px;
float: left;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
}
.h-body{
width: 280px;
height: 25px;
border: 1px solid white;/* 边框厚度*/
position:absolute;
top:20px;
left:25%;
margin-left:-10px;
margin-top:-10px;
}
.h-foot{
width: 600px;
height: 48px;
border: 1px;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
right:5px;
margin-left:-10px;
margin-top:-10px;
float: right;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
text-align: center;
}
.h-foot1{
width: 200px;
height: 48px;
border: 1px;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
right:0;
margin-left:-10px;
margin-top:-10px;
float: left;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
}
.h-foot2{
width: 150px;
height: 48px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
right:250px;
margin-left:-10px;
margin-top:-10px;
float: right;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
}
.h-foot3{
width: 150px;
height: 48px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:10px;
margin-left:-10px;
margin-top:-10px;
float: right;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
}
.head1{
height: 40px;
border: 1px solid rgb(24, 85, 207);/* 边框厚度*/
background-color: rgb(24, 85, 207);
width: 100%;
}
.h1-head{
width: 1200px;
height: 40px;
border: 1px solid rgb(24, 85, 207);/* 边框厚度*/
position:absolute;
top:138px;
left:10%;
margin-left:-10px;
margin-top:-50px;
}
.h-1 {
width: 50px;
height: 38px;
border: 1px solid rgb(19, 10, 146);/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
right:50px;
background-color: rgb(19, 10, 146);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
}
.h-11 {
width: 50px;
height: 40px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
right:0;
background-color: rgb(19, 10, 146);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
border-right: none;
}
.h-2{
width: 50px;
height: 40px;
border: 1px solid rgb(19, 10, 146);/* 边框厚度*/
background-color: rgb(19, 10, 146);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
}
.h-3{
width: 80px;
height: 40px;
border: 1px solid #FFFFFF;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
left:50px;
background-color: rgb(24, 85, 207);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
}
.h-4{
width: 80px;
height: 40px;
border: 1px solid #FFFFFF;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
left:130px;
background-color: rgb(24, 85, 207);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
}
.h-5{
width: 130px;
height: 40px;
border: 1px solid #FFFFFF;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
left:210px;
background-color: rgb(24, 85, 207);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
}
.h-6{
width: 80px;
height: 40px;
border: 1px solid #FFFFFF;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
left:340px;
background-color: rgb(24, 85, 207);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
}
.h-7{
width: 50px;
height: 40px;
border: 1px solid #FFFFFF;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0;
left:420px;
background-color: rgb(24, 85, 207);
font-size: 3;
text-align: center;/*文字水平居中*/
line-height: 35px;
border-bottom:none;
border-top: none;
}
/大图/
head2{
width: 1750px;
height: 380px;
overflow: hidden;
}
photo {
width: 50000px;
animation: switch 8s ease-out infinite;/*自动慢速结束*/
}
photo > img{
float: left;
width: 1750px;
height: 380px;
display: block;
}
@keyframes switch{
0%,20% {
margin-left: 0;
}
25%,45% {
margin-left: -1750px;
}
50%,75% {
margin-left: -3500px;
}
80%,100% {
margin-left: -5250px;
}
}
.xuanze{
width: 600px;
height: 302px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:170px;
left:145px;
background-color: white;
}
.xuan1{
width: 100px;
height: 60px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:0px;
background-color: white;
}
.jiu{
width: 30px;
height: 38px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:18px;
background-color: white;
}
.dian{
width: 60px;
height: 38px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:38px;
background-color: white;
}
.xuan2{
width: 100px;
height: 58px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:60px;
left:-1px;
background-color: #f3f3f3;
border-left: transparent;
}
.fei{
width: 30px;
height: 36px;
border: 1px solid #f3f3f3;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:18px;
}
.ji{
width: 58px;
height: 36px;
border: 1px solid #f3f3f3;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:38px;
}
.xuan3{
width: 99px;
height: 61px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:120px;
left:0px;
background-color: #f3f3f3;
border-left: transparent;
border-top: transparent;
}
.huo{
width: 30px;
height: 38px;
border: 1px solid #f3f3f3;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:18px;
}
.che{
width: 58px;
height: 38px;
border: 1px solid #f3f3f3;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:38px;
}
.xuan4{
width: 99px;
height: 60px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:180px;
left:0px;
background-color: #f3f3f3;
border-left: transparent;
border-top: transparent;
}
.xuan5{
width: 99px;
height: 63px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:239px;
left:0px;
background-color: #f3f3f3;
border-left: transparent;
border-bottom: transparent;
border-top: transparent;
}
.xiangmu{
width: 500px;
height: 300px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:100px;
background-color: white;
}
.xiang{
width: 440px;
height: 257px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:27px;
}
.da{
width: 440px;
height: 28px;
border: 3px solid #aaa;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:20px;
left:0px;
background-color: white;
border-top: none;
border-left: none;
border-right: none;
}
.guonei{
width: 120px;
height: 28px;
border: 3px solid #37D;/* 边框厚度*/
border-top: none;
border-left: none;
border-right: none;
position:absolute;/*绝对定位*/
top:0px;/*距离头顶xiang距离*/
left:0px;
text-align: center;
}
.haiwai{
width: 120px;
height: 28px;
border: 1px solid #aaa;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:120px;
text-align: center;
font-size: 15px;
border-top: none;
border-left: none;
border-right: none;
}
/*鼠标悬停字体颜色改变*/
/* .xiangmu.xiang.da.haiwai.b a:hover{ */
/* color: #37D; */
/* text-decoration:none; */
/* } */
.sanjiao2{
width:0;
height:0;
overflow:hidden;
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width:5px;
border-top:0px;
border-style:solid; /*ie6下会出现不透明的兼容问题*/
border-color:#37D transparent;
position:absolute;/*绝对定位*/
top:43px;
left:50px;
float: left;
box-sizing: border-box;/*IE盒子/怪异盒子*/
display: flex;
}
.mudi{
width: 70px;
height: 30px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:65px;
left:27px;
color: #555;
text-align: center;
}
.sousuo{
width: 368px;
height: 34px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:60px;
right:31px;
border-radius: 5px;
line-height:32px;
}
.ruzhu{
width: 55px;
height: 30px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:115px;
left:42px;
color: #555;
text-align: center;
}
.ruzhuri{
width: 159px;
height: 34px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:110px;
left:98px;
border-radius: 5px;/*设置圆弧*/
line-height:32px;
font-size: 13px;
}
.rili{
width: 25px;
height: 25px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:5px;
left:130px;
}
.tuifang{
width: 48px;
height: 30px;
border: 1px solid white;/*边框厚度*/
position:absolute;/*绝对定位*/
top:115px;
right:190px;
color: #555;
text-align: center;
}
.tuifangri{
width: 158px;
height: 34px;
border: 1px solid #CCC;/*边框厚度*/
position:absolute;/*绝对定位*/
top:110px;
right:31px;
border-radius: 5px;
font-size: 13px;
line-height:32px;
}
.rili1{
width: 25px;
height: 25px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:5px;
right:5px;
}
.guanjianci{
width: 70px;
height: 30px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:165px;
left:127px;
color: #555;
text-align: center;
}
.shuru{
width: 368px;
height: 34px;
border: 1px solid #CCC;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:160px;
right:31px;
border-radius: 5px;
line-height:32px;
}
.sou{
width: 165px;
height: 28px;
border: 1px solid #f55;/* 边框厚度*/
position:absolute;/*绝对定位*/
bottom:50px;
left:198px;
background-color: #f55;
border-radius: 5px;
}
.suo{
width: 28px;
height: 27px;
border: 1px solid #f55;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:45px;
}
.zi{
width: 50px;
height: 26px;
border: 1px solid #f55;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:0px;
left:30px;
}
/目的地指数/
.body{
width: 1200px;
height: 800px;
border: 1px solid #f55;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:790px;
left:145px;
color: #f55;
font-size: 25px;
}
.b2{
width: 1200px;
height: 40px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
/* top:530px; */
/* left:145px; */
color: #f55;
font-size: 25px;
}
hr{
border: none;
height: 3px;
background-color: #f55;/*border: none;或者border: 0;是为防止出现一条黑框height: 1px;是为了防止在firefox下不显示*/
}
.b3{
width: 300px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:145px;
color: #999;
font-size: 15px;
}
.guo{
width: 1200px;
height: 40px;
border: 1px solid blue;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:50px;
font-size: 18px;
}
.nei{
width: 45px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:7px;
left: 35px;
font-size: 18px;
}
.deng{
width: 90px;
height: 20px;
border: 1px solid #f55;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:100px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
background-color: #f55;
}
.xiao{
width: 90px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:220px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
/* background-color: #f55; */
}
.tian{
width: 90px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:320px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
/* background-color: #f55; */
}
.cao{
width: 90px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:420px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
/* background-color: #f55; */
}
.zhen{
width: 90px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:520px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
/* background-color: #f55; */
}
.mei{
width: 90px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
left:620px;
border-radius: 10px;/*设置圆弧*/
/* line-height:32px; */
font-size: 15px;
text-align: center;
/* background-color: #f55; */
}
.geng{
width: 35px;
height: 20px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:10px;
right:25px;
font-size: 15px;
text-align: center;
}
.duo{
width: 15px;
height: 12px;
border: 1px solid white;/* 边框厚度*/
position:absolute;/*绝对定位*/
top:-1px;
right:-20px;
}