5.携程网头部

最新推荐文章于 2024-06-17 21:37:36 发布

转载最新推荐文章于 2024-06-17 21:37:36 发布 · 382 阅读

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了使用HTML和CSS创建响应式网页布局的方法，包括如何设置页面的基本样式，利用Flexbox实现灵活的导航栏设计，以及如何根据不同屏幕尺寸调整元素大小和位置。文章通过实例展示了如何构建具有自适应功能的网站，确保在各种设备上都能提供良好的用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       * {
           margin:0;
           padding:0;
       }
       ul {
           list-style:none;
       }
       body {
           min-width:320px;
           max-width:540px;
           margin:auto; 
       }
       header {
           width:100%;
           height: 100px;
           /* 继承Body的宽度 */
       }
       header img {
           width:100%;
           /* 继承header的宽度 */
           height:100%;
       }
       nav {
           padding:5px;
       }
       .row {
           height: 90px;
           width:100%;
           background-color: #ff697a;
           border-radius:8px;        
           display: flex;   
           margin-bottom:5px;
           
       }
       nav .row:nth-child(2) {
           background-color: #3d98ff;
       }
       nav .row:nth-child(3) {
           background-color: #44c522;
       }
       nav .row:nth-child(4) {
           background-color: #fc9720;
       }

       .row3 {
           border-left:1px solid #fff;
           flex:1;
       }
       
       .row div:first-child {
           border:0;
           
       }
       .hotel {
           display: flex;
           flex-direction:column; 
        
       }
       .hotel a {
           flex:1;
           font-size:16px;
           color:#fff;
           text-align:center;
           line-height:45px;
           text-decoration:none;
           text-shadow:0 2px 2px rgba(0,0,0,0.7);
       }
       .hotel a:first-child {
           border-bottom:1px solid #fff;
       }
    </style>

</head>
<body>
    <header>
        <img src="header.png" height="154" width="768" alt="">
    </header>
    <nav>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">同福客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">同福客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3"></div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">同福客栈</a>
            </div>
        </div>
        <div class="row">
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="row3 hotel">
                <a href="#">团购</a>
                <a href="#">同福客栈</a>
            </div>
        </div>
    </nav>
</body>
</html>