flex伸缩布局之携程网项目

编程小白的学习日常

已于 2022-04-17 17:16:05 修改

阅读量283

点赞数

分类专栏： HTML&CSS 文章标签： html5 css3

于 2022-04-17 17:05:21 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51161351/article/details/124232317

版权

本文通过HTML5和CSS3的flex布局技术，详细展示了如何实现携程网项目的页面效果。文章提供了具体的HTML代码和CSS样式，以供读者学习和交流。

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

效果图如下：

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手、天下我有</title>

</head>

<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">
            <!-- 要改成定位的方式来写否则文字会显示在下方的不会显示在盒子里面的  margin: 5px没有用了在定位的时候; -->
            搜索:目的地/酒店/饭店
        </div>
        <a href="#" class="user"> 我 的</a>

    </div>


    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>
    <!-- 局部导航栏 -->

    <ul class="local-nav">
        <li>
            <a href="#" title="景点·玩乐">
                <span class="local-nav-icon-icon1"> </span>
                <span> 景点·玩乐</span></a>
        </li>
        <li>
            <a href="#" title="周边游">
                <span class="local-nav-icon-icon2"> </span>
                <span> 周边游</span></a>
        </li>
        <li>
            <a href="#" title="美食林">
                <span class="local-nav-icon-icon3"> </span>
                <span> 美食林</span></a>
        </li>
        <li>
            <a href="#" title=" 一日游">
                <span class="local-nav-icon-icon4"> </span>
                <span> 一日游</span></a>
        </li>
        <li>
            <a href="#" title="当地攻略">
                <span class="local-nav-icon-icon5"> </span>
                <span> 当地攻略</span></a>
        </li>

    </ul>

    <!-- 主导航栏 不要给高度让盒子来撑开盒子-->
    <nav class="nav">
        <div class="nav-common">
            <div class="nav-items">
                <a href="#" class="nav-items-icon1">酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div class="nav-items">
                <a href="#">团购</a>
                <a href="#">民宿·客栈</a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">机票</a>
                <a href="#" class="nav-items-icon2"></a>
            </div>
            <div class="nav-items">
                <a href="#">火车票</a>
                <a href="#">特价机票</a>
            </div>
            <div class="nav-items">