css+div布局pc端携程旅游飞机票酒店预定模仿代码-html代码-BFW代码库

css+div布局pc端携程旅游飞机票酒店预定模仿代码

代码语言：html

代码描述：css+div布局pc端携程旅游飞机票酒店预定模仿代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程旅行-酒店预订, 机票预订, 旅游度假</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <style>
        body { background-color: #f4f7f9; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
        .ctrip-blue { color: #0066CC; }
        .bg-ctrip-blue { background-color: #0066CC; }
        .bg-ctrip-gradient { background-image: linear-gradient(90deg, #0086F6 0%, #0066CC 100%); }
        .nav-item-active { background-color: #0066CC; color: white !important; }
        .search-card-shadow { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
        
        /* 模拟携程特有的多行导航样式 */
        .sub-nav:hover { color: #0066CC; border-bottom: 2px solid #0066CC; }
        .tab-active { border-bottom: 3px solid #0066CC; color: #0066CC; font-weight: bold; }
    </style>
</head>
<body>

<div id="app">
    <!-- 1. 顶部状态栏 -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-[1180px] mx-auto.........完整代码请登录后点击上方下载按钮下载查看