携程页面（适配）

最新推荐文章于 2023-06-07 17:41:17 发布

Caishunqi

最新推荐文章于 2023-06-07 17:41:17 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css HTML

本文链接：https://blog.youkuaiyun.com/weshouldhelp/article/details/82252731

css 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

这篇博客展示了携程页面的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>

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