我的哈哈

最新推荐文章于 2024-08-13 16:49:21 发布

Ahu123.

最新推荐文章于 2024-08-13 16:49:21 发布

阅读量185

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_49068056/article/details/107054455

版权

<!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="https://dimg04.c-ctrip.com/images/0zg3r120002f7bv9x7711.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;
}

Ahu123.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
我的哈哈

<!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><bod.
复制链接

扫一扫