携程页面(适配)

这篇博客展示了携程页面的HTML结构和CSS样式,详细解释了如何进行响应式设计以适应不同设备的屏幕尺寸。内容包括头部适配设置、导航栏布局、链接样式、图片全屏显示以及底部导航和页脚的样式设计。通过这段代码,读者可以学习到如何创建具有良好用户体验的网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

              /*适配头*/
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
        <title></title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        img{
            display: block;
            width: 100%;
        }
        .nav .item{
            height: 90px;
            display: flex;
            background-color: deeppink;
            margin: 10px;
            border-radius: 15px;
        }
        .nav .item:nth-child(2){
            background-color: mediumseagreen;
        }
        .nav .item:nth-child(3){
            background-color: #daa520;
        }
        .nav .item:nth-child(4){
            background-color: #e92322;
        }
        .item .pub{
            flex: 1;
            border-right: 1px solid #fff;
            /*border-bottom: 1px solid #fff;*/
        }
        .item .sub{
            flex: 2;
        }
        .item .sub a{
            width: 50%;
            float: left;
            text-align: center;
            line-height: 45px;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            /*盒子内减*/
            box-sizing: border-box;
        }
        .nav .item:nth-child(4) .sub a{
            width: 33.333%;
        }
        .extre{
            display: flex;
        }
        .extre a{
            flex: 1;
        }
        .footer .f-nav{
            display: flex;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        .footer .f-nav li{
            flex: 1;
            text-align: center;
            line-height: 70px;
        }
        .footer p{
            text-align: center;
            font-size: 12px;
            color: #999;
            line-height: 60px;
        }
    </style>
    <body>
    <div class="layout">
        <div class="timg">
            <a href="#"><img src="img/timg.jpg"></a>
        </div>
        <!--导航结构-->
        <nav class="nav">
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">海外酒店</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">特惠酒店</a>
                    <a href="javascript:;">客栈公寓</a>
                </div>
            </div>
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">火车票</a>
                    <a href="javascript:;">汽车票船票</a>
                    <a href="javascript:;">国际机票</a>
                    <a href="javascript:;">自家专车</a>
                </div>
            </div>
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">海外酒店</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">特惠酒店</a>
                    <a href="javascript:;">客栈公寓</a>
                </div>
            </div>
            <div class="item">
                <div class="pub"></div>
                <div class="sub">
                    <a href="javascript:;">海外酒店</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">特惠酒店</a>
                    <a href="javascript:;">客栈公寓</a>
                    <a href="javascript:;">客栈公寓</a>
                    <a href="javascript:;">客栈公寓</a>
                </div>
            </div>
        </nav>
        <!--其他-->
        <div class="extre">
            <a href="#"><img src="img/extra_2.jpg"/></a>
            <a href="#"><img src="img/extra_1.jpg"/></a>
        </div>
        <div class="footer">
            <ul class="f-nav">
                <li>客户端</li>
                <li>关于</li>
                <li>联系我们</li>
            </ul>
            <p><a href="">网站地图</a>|<a href="">English</a>|<a href="">电脑版</a></p>
            <p>@2015 携程在手,说走就走</p>
        </div>
    </div>
    </body>
</html>

                                                        本文只做学习交流,不做他途

非常方便,直接可以用 <div class="demo"> <div> 出发地: <input type="text" value="" size="15" id="homecity_name" name="homecity_name" mod="address|notice" mod_address_source="hotel" mod_address_suggest="@Beijing|北京|53@Shanghai|上海|321@Shenzhen|深圳|91@Guangzhou|广州|80@Qingdao|青岛|292@Chengdu|成都|324@Hangzhou|杭州|383@Wuhan|武汉|192@Tianjin|天津|343@Dalian|大连|248@Xiamen|厦门|61@Chongqing|重庆|394@" mod_address_reference="cityid" mod_notice_tip="中文/拼音" /> <input id="cityid" name="cityid" type="hidden" value="{$cityid}" /> </div> <div> 目的地: <input type="text" value="" size="15" id="getcity_name" name="getcity_name" mod="address|notice" mod_address_source="hotel" mod_address_suggest="@Beijing|北京|53@Shanghai|上海|321@Shenzhen|深圳|91@Guangzhou|广州|80@Qingdao|青岛|292@Chengdu|成都|324@Hangzhou|杭州|383@Wuhan|武汉|192@Tianjin|天津|343@Dalian|大连|248@Xiamen|厦门|61@Chongqing|重庆|394@" mod_address_reference="getcityid" mod_notice_tip="中文/拼音" /> <input id="getcityid" name="getcityid" type="hidden" value="{$getcityid}" /> </div> </div> <div id="jsContainer" class="jsContainer" style="height:0"> <div id="tuna_alert" style="display:none;position:absolute;z-index:999;overflow:hidden;"></div> <div id="tuna_jmpinfo" style="visibility:hidden;position:absolute;z-index:120;"></div> </div> <script type="text/javascript" src="js/fixdiv.js"></script> <script type="text/javascript" src="js/address.js"></script> <div align="center" style="clear:both;font-size:12px;color:#666;">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值