当前位置 博文首页 > m0_49068056的博客：我的哈哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/携程.css">
</head>
<body>
<!--顶部部分-->
<img src="http://style.iis7.com/uploads/2021/07/1846217300.jpg" class="beijing"/>
<div class="top">
<div class="sousuo">
<span>?</span>
<div class="souso1">搜索：目的地/酒店/景点/航班号</div>
</div>
<div class="my">?</div>
</div>
<!--主体部分-->
<div class="main">
<ul>
<li>
<a title="攻略·景点">
<span></span>
<span>攻略·景点</span>
</a>
</li>
<li>
<a title="门票·玩乐">
<span></span>
<span>门票·玩乐</span>
</a>
</li>
<li>
<a title="美食林">
<span></span>
<span>美食林</span>
</a>
</li>
<li>
<a title="周边游">
<span></span>
<span>周边游</span>
</a>
</li>
<li>
<a title="一日游">
<span></span>
<span>一日游</span>
</a>
</li>
</ul>
</div>
</body>
</html>
?
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7bfptk');
src: url('../fonts/icomoon.eot?7bfptk#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7bfptk') format('truetype'),
url('../fonts/icomoon.woff?7bfptk') format('woff'),
url('../fonts/icomoon.svg?7bfptk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body {
padding: 0;
width: 100%;
min-width: 320px;
max-width: 540px;
margin: 0 auto;
font-size: 14px;
height: 2000px;
color: #fff;
}
.top{
width: 600px;
height: 240px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.top .sousuo{
position: relative;
width: 500px;
height: 40px;
background-color: rgb(255, 255, 255);
border-radius: 16px;
margin-left: 30px;
display: inline-block;
}
.top .sousuo span{
position: absolute;
font-family: "icomoon";
top: 10px;
left: 20px;
color: #ff2800;
font-size:18px;
}
.top .sousuo .souso1{
position: absolute;
left: 50px;
width: 300px;
height: 40px;
line-height: 40px;
color: #000000;
}
.top .my{
margin: 5px;
font-family: "icomoon";
display: inline-block;
font-size: 30px;
}
.top .my::after{
content: "我的";
font-size: 15px;
display: block;
}
.beijing{
position: absolute;
top: -65px;
width: 600px;
height: 380px;
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
z-index: -1;
}
.main{
width: 560px;
height: 800px;
margin:0 20px;
background-color: #89ff00;
}
.main ul{
width: 516px;
height: 64px;
}
a {
width: 103.2px;
height: 52px;
}
/*.main ul li a span:nth-child(1){*/
/*background-image: url(//pic.c-ctrip.com/platform/h5/home/home-fivemain-sprite2x@v7.15.png);*/
/*background-repeat: no-repeat;*/
/*background-size: 40px auto;*/
/*display: block;*/
/*}*/
.subnav-entry {
width: 28px;
height: 28px;
background-image: url(//pic.c-ctrip.com/platform/h5/home/un_ico_subnav2x@v7.152.png);
background-size: 28px auto;
background-repeat: no-repeat;
margin-top: .63rem;
margin-bottom: .31rem;
display: block;
}
cs
