仿写携程旅游手机浏览器页面

最新推荐文章于 2022-02-12 01:37:59 发布

十友九

最新推荐文章于 2022-02-12 01:37:59 发布

阅读量580

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43778556/article/details/106224483

版权

HTML 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

在这里插入图片描述

xiecheng.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    约束视口宽度，每个手机根据自身进行设置，必须添加-->
    <meta name="viewport" content="width=device-width">
    <title>携程</title>
<!--    外链式-->
<!--    清楚默认样式-->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
<!--    首页样式-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--    移动端没有版心，移动端宽度一般使用百分比布局-->
<!--百分比布局设置最小宽度和最大宽度-->
<!--header书写-->
    <div class="header">
<!--        固比： 搜索框-->
        <div class="search">
            <span>搜索：目的地/酒店/景点/航班号</span>
        </div>
<!--        固： 注册-->
        <a href="" class="login">我的</a>
    </div>
<!--banner-->
    <div class="banner">
        <div class="pic">
<!--            插入图-->
            <img src="image/banner.jpg">
        </div>
<!--        小圆点-->
        <div class="circles">
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
<!--主导航-->
    <div class="main-nav">
        <div class="row">
            <ul>
                <li><a href="">酒店1</a></li>
                <li><a href="">酒店2</a></li>
                <li><a href="">酒店3</a></li>
                <li><a href="">酒店4</a></li>
                <li><a href="">酒店5</a></li>
            </ul>
        </div>
        <div class="row">
            <ul>
                <li><a href="">机票</a></li>
                <li><a href="">酒店2</a></li>
                <li><a href="">酒店3</a></li>
                <li><a href="">酒店4</a></li>
                <li><a href="">酒店5</a></li>
            </ul>
        </div>
        <div class="row">
            <ul>
                <li><a href="">旅游</a></li>
                <li><a href="">酒店2</a></li>
                <li><a href="">酒店3</a></li>
                <li><a href="">酒店4</a></li>
                <li><a href="">酒店5</a></li>
            </ul>
        </div>
        <div class="row">
            <ul>
                <li><a href="">景点</a></li>
                <li><a href="">酒店2</a></li>
                <li><a href="">酒店3</a></li>
                <li><a href="">酒店4</a></li>
                <li><a href="">酒店5</a></li>
                <li><a href="">酒店5</a></li>
            </ul>
        </div>
    </div>
<!--侧导航-->
    <div class="sub-nav">
        <ul>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
            <li><a href="">自由行</a></li>
        </ul>
    </div>
<!--特卖会-->
    <div class="sale">
<!--        标题-->
        <div class="hd">
            <h3>特卖会</h3>
            <a href="" class="hongbao">领红包再下单</a>
        </div>
<!--        内容bd 左右两部分-->
        <div class="bd">
            <div class="left">
<!--                图片-->
                <div class="pic">
                    <img src="image/banner.jpg">
                    <span>爆款</span>
                </div>
                <div class="txt">
                    <p class="info">三亚五日游三亚五日游三亚五日游三亚五日游
                        三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游</p>
                    <p class="price">
                        <i>￥</i><b>1499</b>起<span>2.7折</span>
                    </p>
                </div>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <p>千款特价</p>
                        <p>走过路过不要错过</p>
                    </li>
                    <li>
                        <p>千款特价</p>
                        <p>走过路过不要错过</p>
  --                  </li>
                    <li>
                        <p>千款特价</p>
                        <p>走过路过不要错过</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>

index.css

*{
    padding: 0;
    margin: 0;
}
body{
    /*大背景*/
    background-color: #f2f2f2;
    font-size: 12px;
    color: #000000;
}
a{
    text-decoration: none;
    color: #2eaae0;
}
img{
    /*去掉图片小间隔*/
    display: block;
    /*图片和父盒子相同*/
    width: 100%;
}
ul,ol{
    list-style: none;
}
/*header开始*/
.header{
    /*1移动端一般使用百分比布局*/
    /*2移动端必须设置最小宽度和最大宽度 使用px*/
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    /*高度使用  px*/
    height: 45px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    /*固定定位：脱标 参考浏览器窗口*/
    position: fixed;
    /*固定定位水平居中*/
    left: 50%;
    /*拉回自身宽度*/
    transform: translateX(-50%);
    /*padding：上，左为了子盒子距离父盒子远，右padding为了挤出固比固模型中的固*/
    padding: 7px 50px 0 8px;
    /*盒子最终占有宽度100%，高45px，还设置了paddingborder*/
    /*内减盒模型：width height占有*/
    box-sizing: border-box;
    /*默认压盖顺序：都有定位的元素后面压盖前面*/
    z-index: 10;
}

.header .search{
    /*比：标准流 百分比：父盒子内容宽比值*/
    width: 100%;
    height: 26px;
    border: 1px solid #999999;
    border-radius: 4px;
    /*盒子阴影*/
    box-shadow: 0 3px 3px rgba(0,0,0,.2);
    background-color: #ffffff;
    box-sizing: border-box;
    /*挤出背景图区域，将文字挤远点*/
    padding-left: 24px;
    line-height: 24px;
}
.header .search::before{
    /*伪元素content*/
    content: "";
/*    行内元素不能设置宽高*/
/*    设置大小，位置调整 绝对定位*/
/*    绝对定位参考：参考距离最近且有定位的祖先元素，header有固定定位
        参考顶点：边框以内的四个顶点，无视padding*/
    position: absolute;
    top: 13px;
    left: 17px;
    /*渲染效果13*14，设计师将图片放大2倍，前端开发缩小一般使用*/
    width: 13px;
    height: 14px;
    /*背景图设置*/
    /*background-position坐标减半*/
    background: url("../image/icon.png") no-repeat -0.5px -0.5px;
    /*引入背景缩小*/
    background-size: 21px 123px;
}
/*固比固模型：固 使用绝对定位*/
.header .login{
    /*a是行内元素不能设置宽高*/
    position: absolute;
    /*绝对定位：脱标 可以设置宽高*/
    /*子绝父固*/
    right: 0;
    top: 4px;
    width: 50px;
    height: 39px;
    text-align: center;
    line-height: 15px;
    color: #2eaae0;
}

.header .login::before{
    content: "";
    /*标准流：块级元素可以设置宽高*/
    display: block;
    width: 23px;
    height: 24px;
    /*块级元素水平居中*/
    margin: 0 auto;
    background: url("../image/icon.png") no-repeat -0px -78.5px;
    background-size: 21px 123px;
}
.banner{
    width: 100%;
    min-width: 320px;
    max-width: 540px;
    /*盒子水平居中*/
    margin: 0 auto;
    /*由于header设置固定定位，脱标压盖住标准流*/
    padding-top: 45px;
    position: relative;
}
.banner .circles{
    /*小圆点盒子压盖图片*/
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 167px;
    height: 5px;
}
.banner .circles ol li{
    /*浮动：同级元素并排显示并且设置宽高*/
    float: left;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    background-color: rgba(255,255,255,.5);
    border-radius: 5px;
}
.banner .circles ol .active{
    width: 17px;
    background-color: #ffffff;
}
/*主导航*/
.main-nav{
    /*一般盒子设置通栏*/
    width: 100%;
    /*省略高度内容撑开*/
    /*利用padding挤出间隔*/
    padding: 4px;
    box-sizing: border-box;
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
}
.main-nav .row{
    width: 100%;
    height: 90px;
    background-color: #ff697a;
    border-radius: 8px;
    margin-bottom: 4px;
}
.main-nav .row ul li{
    float: left;
    /*均分*/
    width: 33.33%;
    height: 45px;
    /*有左边框 上边框*/
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    box-sizing: border-box;
}
.main-nav .row ul li:first-child{
    border: none;
    height: 90px;
}
.main-nav .row ul li:nth-child(2),
.main-nav .row ul li:nth-child(3){
    border-top: none;
}
.main-nav .row ul li a{
    /*a行内元素*/
    display: block;
    /*标准流：父盒子的内容高度的比值*/
    height: 100%;
    text-align: center;
    line-height: 45px;
    color: #ffffff;
    /*文字阴影*/
    text-shadow: 0 2px 2px rgba(0,0,0,.2);
}
.main-nav .row ul li:first-child a{
    position: relative;
}
/*序选择器：所有儿子中的排名*/
.main-nav .row ul li:first-child a::after{
    content: "";
    position: absolute;
    /*绝对定位水平居中*/
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
    width: 73px;
    height: 34px;
    background: url("../image/hotel.png") no-repeat 0 0;
    /*背景图压缩*/
    background-size: 73px 32.5px;
}
.main-nav .row:nth-child(2){
    background-color: #3d98ff;
}
.main-nav .row:nth-child(3){
    background-color: #44c522;
}
.main-nav .row:nth-child(4){
    background-color: #fc9720;
}
.main-nav .row:nth-child(2) ul li:first-child a::after{
    background: url("../image/fly.png") no-repeat 0 0;
    /*背景图压缩*/
    background-size: 79.5px 34px;
}
.main-nav .row:nth-child(3) ul li:first-child a::after{
    background: url("../image/travel.png") no-repeat;
    /*背景图压缩*/
    background-size: 90.5px 47px;
    bottom: 11px;
}
.main-nav .row:nth-child(4) ul li:first-child{
    height: 45px;
}
.main-nav .row:nth-child(4) ul li:first-child a::after{
    background: none;
}
.main-nav .row:nth-child(4) ul li:nth-child(4){
    border-left: 0;
}
.sub-nav{
    width: 100%;
    height: 182px;
    padding: 0 4px;
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
}
.sub-nav ul{
    /*大盒子不设置白色背景，设置四个圆角*/
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /*将li多余背景色溢出隐藏*/
    overflow: hidden;
}
.sub-nav ul li{
/*    均分  水平方向：li+border-right
            垂直方向：li 60px 上下间隔使用mg*/
    float: left;
    width: 25%;
    height: 60px;
    border-right: 1px solid #f2f2f2;
    margin-bottom: 1px;
    box-sizing: border-box;
    /*白色背景渲染*/
    background-color: #ffffff;
}
.sub-nav ul li:nth-child(4n){
    border-right: none;
}
.sub-nav ul li a{
    display: block;
    width: 100%;
    height: 100%;
    color: #000000;
    /*单行垂直方向调整：line-height*/
    line-height: 90px;
    text-align: center;
    position: relative;
}
.sub-nav ul li a::before{
/*    小图标：伪元素  绝对定位*/
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: 11px;
    width: 25px;
    height: 25px;
    background: url("../image/sub.png") no-repeat -4px -4px;
    background-size: 28px 280px;
}
.sub-nav ul li:nth-child(5) a::before{
    background-position: -3px -33px;
}
/*特卖会*/
.sale{
    width: 100%;
    height: 263px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    background-color: #ffffff;
    margin: 8px auto;
    min-width: 320px;
    max-width: 540px;
    padding: 15px 8px 0 8px;
    box-sizing: border-box;
}
.sale .hd{
    width: 100%;
    height: 14px;
    margin-bottom: 15px;
    position: relative;
}
.sale .hd h3{
    /*渲染背景图  同时有文字不能让用户看到，利用padding-top挤出盒子高度*/
    /*移动端宽度一般使用百分比布局，但是对于固定宽度还是是哦那个px*/
    width: 56px;
    height: 0;
    padding-top: 14px;
    background: url("../image/home_text.png") no-repeat;
    background-size: 79px 57.5px;
    overflow: hidden;
}
.sale .hd .hongbao{
    /*a行内元素  位置定在右侧  绝对*/
    position: absolute;
    top: -4px;
    right: 0;
    width: 102px;
    height: 20px;
    /*text-align: center;*/
    /*line-height: 20px;*/
    /*渐变*/
    background-image: -webkit-linear-gradient(left,#fe6375,#fe7ccd);
    border-radius: 20px;
    padding-left: 11px;
    box-sizing: border-box;
    line-height: 20px;
    color: #ffffff;
}
.sale .hd .hongbao::after{
    content: "";
    position: absolute;
    top: 6px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    /*正方向旋转45°*/
    transform: rotate(45deg);
}
.sale .bd{
    width: 100%;
    height: 205px;
}
.sale .bd .left{
    float: left;
    width: 50%;
    height: 100%;
    border-right: 2px solid #ffffff;
    background-color: #f9f9f9;
    box-sizing: border-box;
}
.sale .bd .left .pic{
    width: 100%;
    height: 117px;
    overflow: hidden;
    position: relative;

}
.sale .bd .left .pic span{
    /*利用长方形+三角形*/
    position: absolute;
    /*长方形*/
    width: 38px;
    height: 20px;
    left: 0;
    top: 0;
    background-color: #fd3a51;
    color: #ffffff;
    text-align: center;
    line-height: 20px;
}
.sale .bd .left .pic span::after{
    content: "";
    /*设置10px宽度的上边框三角*/
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid #fd3a51;
    /*上边框 ，上三角形*/
    border-color: #fd3a51 transparent transparent;
    /*上边框宽度边长到20px*/
    border-top-width: 20px;
    right: -10px;
}
.sale .bd .left .txt{
    padding: 8px 6px 0 8px;
    font-size: 12px;
    line-height: 22px;
}
.sale .bd .left .txt .info{
    /*多行文字显示省略号*/
    /*盒子宽高*/
    width: 100%;
    height: 44px;
    /*文字转box*/
    display: -webkit-box;
    /*垂直*/
    -webkit-box-orient: vertical;
    /*2行*/
    -webkit-line-clamp: 2;
    /*文字溢出显示省略号*/
    text-overflow: ellipsis;
    /*盒子溢出省略*/
    overflow: hidden;
}
.sale .bd .left .txt .price{
    height: 23px;
    font-size: 14px;
    line-height: 23px;
    color: #ff495e;
}
.sale .bd .left .txt .price i{
    /*文字不倾斜*/
    font-style: normal;
    font-size: 12px;
}
.sale .bd .left .txt .price span{
    padding: 2px 6px;
    font-size: 12px;
    color: #ffffff;
    background-color: #fd3a51;
    border-radius: 10px;
    margin-left: 4px;
}
.sale .bd .right{
    float: left;
    width: 50%;
    border-left: 2px solid #ffffff;
    box-sizing: border-box;
}
.sale .bd .right ul li {
    /*同级元素要设置浮动都必须设置浮动*/
    float: left;
    background-color: #f9f9f9;
    padding-top: 9px;
    box-sizing: border-box;
}
.sale .bd .right ul li:first-child {
    width: 100%;
    height: 88px;
    margin-bottom: 4px;
    padding-left: 7px;
    position: relative;
}
.sale .bd .right ul li:first-child p:first-child {
    color: #fd3a51;
    font-weight: bold;
}
.sale .bd .right ul li:first-child::after{
    content: "";
    position: absolute;
    right: 4px;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: url("../image/pic-1.png") no-repeat;
    background-size: 50px 50px;
}
.sale .bd .right ul li:nth-child(2){
    width: 50%;
    height: 112px;
    position: relative;
}
.sale .bd .right ul li:nth-child(3){
    width: 50%;
    border-left: 4px solid #ffffff;
    height: 112px;
    position: relative;
}
.sale .bd .right ul li:nth-child(2)::after{
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3px;
    background: url("../image/pic-2.png") no-repeat;
    background-size: 50px 50px;
}
.sale .bd .right ul li:nth-child(3)::after{
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 3px;
    background: url("../image/pic-3.png") no-repeat;
    background-size: 50px 50px;
}

十友九

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
仿写携程旅游手机浏览器页面

xiecheng.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>携程</title><!-- 外.
复制链接

扫一扫