• 移动端携程网首页flex布局完整制做(详细代码版)含footer部分

    目录

     

    1、样式展示

     2、全部代码

    2.1、index.htnl文件

    2.2、index.css文件

    3、分布研究

    3.1 初始准备

    3.2在index.css文件中写body的样式，引入字体图标等基本设置

    3.3搜索模块的制作

    3.4、focus模块制作

    3.5、局部导航栏的制作

    3.6、nav部分

    3.7、sub-nav 部分

    3.8、剩余模块（sales模块、service模块、footer模块）

    文章有点长，可以点击目录查看相应内容

    1、样式展示

     2、全部代码

    2.1、index.htnl文件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width,initial-scale=1.0,
    8.     user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    9.     <title>携程在手，畅通无阻</title>
    10.     <link rel="stylesheet" href="css/normalize.css">
    11.     <link rel="stylesheet" href="css/index.css">
    12. </head>
    13.  
    14. <body>
    15.     <!-- 搜索模块 -->
    16.     <div class="search-index">
    17.         <div class="search">
    18.             搜索:目的地/酒店/景点/航班号
    19.         </div>
    20.         <a href="#" class="user">我 的</a>
    21.     </div>
    22.     <!-- focus模块 -->
    23.     <div class="focus">
    24.         <a href="#" title="高速享受慢生活">
    25.             <img src="upload/focus.jpg" alt="">
    26.         </a>
    27.     </div>
    28.     <!-- 局部导航栏模块 -->
    29.     <ul class="local-nav">
    30.         <li>
    31.             <a href="#" title="景点·玩乐">
    32.                 <span class="local-nav-icon1"></span>
    33.                 <span>景点·玩乐</span>
    34.             </a>
    35.         </li>
    36.         <li>
    37.             <a href="#" title="周边游">
    38.                 <span class="local-nav-icon1"></span>
    39.                 <span>周边游</span>
    40.             </a>
    41.         </li>
    42.         <li>
    43.             <a href="#" title="美食林">
    44.                 <span class="local-nav-icon1"></span>
    45.                 <span>美食林</span>
    46.             </a>
    47.         </li>
    48.         <li>
    49.             <a href="#" title="一日游">
    50.                 <span class="local-nav-icon1"></span>
    51.                 <span>一日游</span>
    52.             </a>
    53.         </li>
    54.         <li>
    55.             <a href="#" title="当地攻略">
    56.                 <span class="local-nav-icon1"></span>
    57.                 <span>当地攻略</span>
    58.             </a>
    59.         </li>
    60.     </ul>
    61.     <!-- nav部分 -->
    62.     <nav class="nav">
    63.         <div class="nav-common">
    64.             <div class="nav-items">
    65.                 <a href="#">酒店</a>
    66.             </div>
    67.             <div class="nav-items">
    68.                 <a href="#">海外酒店</a>
    69.                 <a href="#">特价酒店</a>
    70.             </div>
    71.             <div class="nav-items">
    72.                 <a href="#">团购</a>
    73.                 <a href="#">民宿·客栈</a>
    74.             </div>
    75.         </div>
    76.         <div class="nav-common">
    77.             <div class="nav-items">
    78.                 <a href="#">机票</a>
    79.             </div>
    80.             <div class="nav-items">
    81.                 <a href="#">火车票</a>
    82.                 <a href="#">特价机票</a>
    83.             </div>
    84.             <div class="nav-items">
    85.                 <a href="#">汽车票·船票</a>
    86.                 <a href="#">专车·租车</a>
    87.             </div>
    88.         </div>
    89.         <div class="nav-common">
    90.             <div class="nav-items">
    91.                 <a href="#">旅游</a>
    92.             </div>
    93.             <div class="nav-items">
    94.                 <a href="#">门票</a>
    95.                 <a href="#">目的地攻略</a>
    96.             </div>
    97.             <div class="nav-items">
    98.                 <a href="#">游轮旅行</a>
    99.                 <a href="#">定制旅行 </a>
    100.             </div>
    101.         </div>
    102.     </nav>
    103.     <!-- 侧导航栏 -->
    104.     <ul class="subnav-entry">
    105.         <li>
    106.             <a href="#" title="电话费">
    107.                 <span></span>
    108.                 <span>电话费</span>
    109.             </a>
    110.         </li>
    111.         <li>
    112.             <a href="#" title="保险·签证">
    113.                 <span></span>
    114.                 <span>保险·签证</span>
    115.             </a>
    116.         </li>
    117.         <li>
    118.             <a href="#" title="外币兑换">
    119.                 <span></span>
    120.                 <span>外币兑换</span>
    121.             </a>
    122.         </li>
    123.         <li>
    124.             <a href="#" title="购物">
    125.                 <span></span>
    126.                 <span>购物</span>
    127.             </a>
    128.         </li>
    129.         <li>
    130.             <a href="#" title="当地向导">
    131.                 <span></span>
    132.                 <span>当地向导</span>
    133.             </a>
    134.         </li>
    135.         <li>
    136.             <a href="#" title="自由行">
    137.                 <span></span>
    138.                 <span>自由行</span>
    139.             </a>
    140.         </li>
    141.         <li>
    142.             <a href="#" title="境外玩乐">
    143.                 <span></span>
    144.                 <span>境外玩乐</span>
    145.             </a>
    146.         </li>
    147.         <li>
    148.             <a href="#" title="礼品卡">
    149.                 <span></span>
    150.                 <span>礼品卡</span>
    151.             </a>
    152.         </li>
    153.         <li>
    154.             <a href="#" title="信用卡">
    155.                 <span></span>
    156.                 <span>信用卡</span>
    157.             </a>
    158.         </li>
    159.         <li>
    160.             <a href="#" title="更多">
    161.                 <span></span>
    162.                 <span>更多</span>
    163.             </a>
    164.         </li>
    165.     </ul>
    166.     <!-- sales模块 -->
    167.     <div class="sales">
    168.         <div class="sales-hd">
    169.             <!-- SEO优化 -->
    170.             <h2>热门活动</h2>
    171.             <a class="more">获取更多福利</a>
    172.         </div>
    173.         <div class="sales-bd">
    174.             <div class="row">
    175.                 <a href="#">
    176.                     <img src="upload/pic1.jpg" alt="">
    177.                 </a>
    178.                 <a href="#">
    179.                     <img src="upload/pic2.jpg" alt="">
    180.                 </a>
    181.             </div>
    182.             <div class="row">
    183.                 <a href="#">
    184.                     <img src="upload/pic3.jpg" alt="">
    185.                 </a>
    186.                 <a href="#">
    187.                     <img src="upload/pic4.jpg" alt="">
    188.                 </a>
    189.             </div>
    190.             <div class="row">
    191.                 <a href="#">
    192.                     <img src="upload/pic5.jpg" alt="">
    193.                 </a>
    194.                 <a href="#">
    195.                     <img src="upload/pic6.jpg" alt="">
    196.                 </a>
    197.             </div>
    198.         </div>
    199.     </div>
    200.     <!-- service模块 -->
    201.     <ul class="service">
    202.         <li>
    203.             <span></span>
    204.             <span>电话预订</span>
    205.         </li>
    206.         <li>
    207.             <span></span>
    208.             <span>下载客户端</span>
    209.         </li>
    210.         <li>
    211.             <span></span>
    212.             <span>我的</span>
    213.         </li>
    214.     </ul>
    215.     <!-- footer -->
    216.     <footer>
    217.         <h5>
    218.             <a href="#">网站地图 </a>|
    219.             <a href="#">language </a>|
    220.             <a href="#">电脑版</a>
    221.         </h5>
    222.         <p>©2022携程旅行 | 沪ICP备08023580号</p>
    223.     </footer>
    224. </body>
    225.  
    226. </html>

    2.2、index.css文件

    1. /* 字体图标 */
    2.  
    3. @font-face {
    4.     font-family: 'icomoon';
    5.     src: url('../fonts/icomoon.eot?o1ezsk');
    6.     src: url('../fonts/icomoon.eot?o1ezsk#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?o1ezsk') format('truetype'), url('../fonts/icomoon.woff?o1ezsk') format('woff'), url('../fonts/icomoon.svg?o1ezsk#icomoon') format('svg');
    7.     font-weight: normal;
    8.     font-style: normal;
    9.     font-display: block;
    10. }
    11.  
    12.  
    13. /* body常用初始化样式 */
    14.  
    15. body {
    16.     max-width: 540px;
    17.     min-width: 320px;
    18.     margin: 0 auto;
    19.     font: normal 14px/1.5 "Microsoft Yahei";
    20.     color: #000;
    21.     background-color: #f2f2f2;
    22.     /* 如果点击有高亮的设置透明 */
    23.     -webkit-tap-highlight-color: transparent;
    24.     /* 永远不会有横向导航条 */
    25.     overflow-x: hidden;
    26. }
    27.  
    28. div {
    29.     box-sizing: border-box;
    30. }
    31.  
    32. a {
    33.     text-decoration: none;
    34. }
    35.  
    36. h5 {
    37.     padding: 0;
    38.     margin: 0;
    39. }
    40.  
    41. ul {
    42.     margin: 0;
    43.     padding: 0;
    44.     list-style: none;
    45. }
    46.  
    47. .search-index {
    48.     display: flex;
    49.     position: fixed;
    50.     left: 50%;
    51.     top: 0;
    52.     transform: translateX(-50%);
    53.     /* 兼容其他版本 */
    54.     -webkit-transform: translateX(-50%);
    55.     width: 100%;
    56.     height: 44px;
    57.     min-width: 320px;
    58.     max-width: 540px;
    59.     border-bottom: 1px solid #ccc;
    60.     border-top: 1px solid #ccc;
    61.     background-color: #f6f6f6;
    62. }
    63.  
    64. .search-index .search {
    65.     position: relative;
    66.     flex: 1;
    67.     height: 26px;
    68.     border: 1px solid #ccc;
    69.     margin: 7px 10px;
    70.     padding-left: 25px;
    71.     font-size: 12px;
    72.     color: #666;
    73.     line-height: 24px;
    74.     box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    75.     border-radius: 5px;
    76. }
    77.  
    78. .search-index .search::before {
    79.     content: '';
    80.     position: absolute;
    81.     top: 5px;
    82.     left: 5px;
    83.     width: 15px;
    84.     height: 15px;
    85.     background: url(../images/sprite.png) -59px -279px no-repeat;
    86.     background-size: 104px auto;
    87. }
    88.  
    89. .search-index a {
    90.     width: 44px;
    91.     height: 44px;
    92.     color: #2eaae0;
    93.     font-size: 12px;
    94.     text-align: center;
    95. }
    96.  
    97. .search-index a::before {
    98.     content: '';
    99.     display: block;
    100.     width: 23px;
    101.     height: 23px;
    102.     margin: 3px 0 0 11px;
    103.     background: url(../images/sprite.png) -59px -193px no-repeat;
    104.     background-size: 104px auto;
    105. }
    106.  
    107.  
    108. /* focus */
    109.  
    110. .focus {
    111.     margin-top: 44px;
    112. }
    113.  
    114. .focus a img {
    115.     width: 100%;
    116. }
    117.  
    118.  
    119. /* 局部导航栏 */
    120.  
    121. .local-nav {
    122.     overflow: hidden;
    123.     display: flex;
    124.     height: 64px;
    125.     background-color: #fff;
    126.     margin: 3px;
    127.     border-radius: 8px;
    128. }
    129.  
    130. .local-nav li {
    131.     flex: 1;
    132. }
    133.  
    134. .local-nav li a {
    135.     display: flex;
    136.     flex-direction: column;
    137.     align-items: center;
    138.     font-size: 12px;
    139.     color: #222;
    140. }
    141.  
    142. .local-nav li [class^='local-nav-icon'] {
    143.     margin-top: 8px;
    144.     margin-bottom: 2px;
    145.     width: 32px;
    146.     height: 32px;
    147.     background: url(../images/localnav_bg.png) 0 0 no-repeat;
    148.     background-size: 32px auto;
    149. }
    150.  
    151. .local-nav li:nth-child(2) a span:nth-child(1) {
    152.     background-position: 0 -32px;
    153. }
    154.  
    155. .local-nav li:nth-child(3) a span:nth-child(1) {
    156.     background-position: 0 -64px;
    157. }
    158.  
    159. .local-nav li:nth-child(4) a span:nth-child(1) {
    160.     background-position: 0 -96px;
    161. }
    162.  
    163. .local-nav li:nth-child(5) a span:nth-child(1) {
    164.     background-position: 0 -128px;
    165. }
    166.  
    167.  
    168. /* nav  */
    169.  
    170. .nav {
    171.     margin-top: 5px;
    172.     border-radius: 5px;
    173.     overflow: hidden;
    174. }
    175.  
    176. .nav-common {
    177.     display: flex;
    178.     height: 88px;
    179.     margin-bottom: 3px;
    180. }
    181.  
    182. .nav-common:nth-child(1) {
    183.     background: -webkit-linear-gradient(left, #FA5B55, #FA984D);
    184. }
    185.  
    186. .nav-common:nth-child(2) {
    187.     background: -webkit-linear-gradient(left, #4B90ED, #53BBED);
    188. }
    189.  
    190. .nav-common:nth-child(3) {
    191.     background: -webkit-linear-gradient(left, #35c3a8, #6bd55b);
    192. }
    193.  
    194. .nav-items {
    195.     flex: 1;
    196.     display: flex;
    197.     flex-direction: column;
    198.     align-items: center;
    199. }
    200.  
    201. .nav-items:nth-child(-n+2) {
    202.     border-right: 1px solid #fff;
    203. }
    204.  
    205. .nav-items a {
    206.     flex: 1;
    207.     line-height: 44px;
    208.     font-size: 14px;
    209.     color: #fff;
    210.     padding: 0 25px;
    211.     text-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    212. }
    213.  
    214. .nav-items:nth-child(1) a {
    215.     background: url(../images/hotel.png) bottom center no-repeat;
    216.     background-size: 121px auto;
    217. }
    218.  
    219.  
    220. /* subnav-entry */
    221.  
    222. .subnav-entry {
    223.     overflow: hidden;
    224.     padding-top: 5px;
    225.     margin-top: 3px;
    226.     display: flex;
    227.     flex-wrap: wrap;
    228.     background-color: #fff;
    229.     border-radius: 5px;
    230. }
    231.  
    232. .subnav-entry li {
    233.     flex: 20%;
    234. }
    235.  
    236. .subnav-entry li a {
    237.     display: flex;
    238.     padding-top: 7px;
    239.     padding-bottom: 3px;
    240.     flex-direction: column;
    241.     align-items: center;
    242. }
    243.  
    244. .subnav-entry li span:nth-child(1) {
    245.     width: 28px;
    246.     height: 28px;
    247.     background: url(../images/subnav-bg.png) 0 0 no-repeat;
    248.     background-size: 28px auto;
    249. }
    250.  
    251. .subnav-entry li:nth-child(2) a span:nth-child(1) {
    252.     background-position: 3px -28px;
    253. }
    254.  
    255. .subnav-entry li:nth-child(3) a span:nth-child(1) {
    256.     background-position: 3px -63px;
    257. }
    258.  
    259. .subnav-entry li:nth-child(4) a span:nth-child(1) {
    260.     background-position: 3px -100px;
    261. }
    262.  
    263. .subnav-entry li:nth-child(5) a span:nth-child(1) {
    264.     background-position: 3px -132px;
    265. }
    266.  
    267. .subnav-entry li:nth-child(6) a span:nth-child(1) {
    268.     background-position: 3px -164px;
    269. }
    270.  
    271. .subnav-entry li:nth-child(7) a span:nth-child(1) {
    272.     background-position: 3px -199px;
    273. }
    274.  
    275. .subnav-entry li:nth-child(8) a span:nth-child(1) {
    276.     background-position: 3px -232px;
    277. }
    278.  
    279. .subnav-entry li:nth-child(9) a span:nth-child(1) {
    280.     background-position: 3px -262px;
    281. }
    282.  
    283. .subnav-entry li:nth-child(10) a span:nth-child(1) {
    284.     background-position: 3px -291px;
    285. }
    286.  
    287.  
    288. /* sales  */
    289.  
    290. .sales {
    291.     margin-top: 3px;
    292. }
    293.  
    294. .sales-hd {
    295.     position: relative;
    296.     height: 44px;
    297.     background-color: #fff;
    298.     /* border-top: 1px solid #ccc; */
    299.     border-bottom: 1px solid #ccc;
    300. }
    301.  
    302. .sales-hd h2 {
    303.     margin: 0;
    304.     overflow: hidden;
    305.     text-indent: -999px;
    306. }
    307.  
    308. .sales-hd h2::after {
    309.     content: '';
    310.     position: absolute;
    311.     left: 20px;
    312.     top: 14px;
    313.     width: 79px;
    314.     height: 15px;
    315.     background: url(../images/hot.png) 0px -20px no-repeat;
    316.     background-size: 79px auto;
    317. }
    318.  
    319. .sales-hd .more {
    320.     position: absolute;
    321.     right: 30px;
    322.     top: 9px;
    323.     font-size: 14px;
    324.     padding: 2px 20px 2px 15px;
    325.     border-radius: 15px;
    326.     color: #fff;
    327.     background: -webkit-linear-gradient(left, #ff5170, #ff6ac3);
    328. }
    329.  
    330. .sales-hd .more::after {
    331.     position: absolute;
    332.     top: 8px;
    333.     right: 11px;
    334.     content: '';
    335.     width: 8px;
    336.     height: 8px;
    337.     border-top: 1px solid #fff;
    338.     border-right: 1px solid #fff;
    339.     transform: rotate(45deg);
    340. }
    341.  
    342.  
    343. /* sales-bd */
    344.  
    345. .sales-bd .row {
    346.     display: flex;
    347. }
    348.  
    349. .sales-bd .row:nth-child(-n+2) {
    350.     border-bottom: 1px solid #ccc;
    351. }
    352.  
    353. .sales-bd .row a {
    354.     flex: 1;
    355.     background-color: pink;
    356.     height: 100%;
    357. }
    358.  
    359. .sales-bd .row a:nth-child(1) {
    360.     border-right: 1px solid #ccc;
    361. }
    362.  
    363. .sales-bd .row a img {
    364.     width: 100%;
    365.     display: block;
    366. }
    367.  
    368.  
    369. /* service */
    370.  
    371. .service {
    372.     display: flex;
    373.     height: 60px;
    374.     border-bottom: 1px solid #ccc;
    375.     border-top: 1px solid #ccc;
    376.     margin-top: 5px;
    377.     text-align: center;
    378.     align-items: center;
    379.     background-color: #fff;
    380. }
    381.  
    382. .service li {
    383.     flex: 1;
    384.     display: flex;
    385.     flex-direction: column;
    386.     align-items: center;
    387.     color: #333;
    388. }
    389.  
    390. .service li span:nth-child(1) {
    391.     position: relative;
    392.     width: 30px;
    393.     height: 30px;
    394. }
    395.  
    396. .service li span:nth-child(1)::before {
    397.     position: absolute;
    398.     content: '\e964';
    399.     left: 7px;
    400.     top: 2px;
    401.     font-family: 'icomoon';
    402.     font-size: 18px;
    403.     color: #ccc;
    404. }
    405.  
    406. .service li:nth-child(2) span:nth-child(1)::before {
    407.     position: absolute;
    408.     content: '\ea3e';
    409.     left: 4px;
    410.     top: 2px;
    411.     font-family: 'icomoon';
    412.     font-size: 22px;
    413.     color: #ccc;
    414. }
    415.  
    416. .service li:nth-child(3) span:nth-child(1)::before {
    417.     position: absolute;
    418.     content: '\e902';
    419.     left: 3px;
    420.     top: 0px;
    421.     font-family: 'icomoon';
    422.     font-size: 22px;
    423.     color: #ccc;
    424. }
    425.  
    426.  
    427. /* footer  */
    428.  
    429. footer {
    430.     margin-top: 10px;
    431.     text-align: center;
    432.     color: #ccc;
    433.     font-size: 12px;
    434. }
    435.  
    436. footer h5 a {
    437.     font-size: 12px;
    438.     color: #999;
    439.     font-weight: 400;
    440. }
    441.  
    442. footer h5 a:nth-child(2) {
    443.     position: relative;
    444.     padding: 0 15px;
    445. }
    446.  
    447. footer h5 a:nth-child(2)::before {
    448.     content: '\e910';
    449.     font-family: 'icomoon';
    450.     position: absolute;
    451.     top: 0;
    452.     left: 0;
    453.     width: 10px;
    454.     height: 10px;
    455. }
    456.  
    457. footer h5 a:nth-child(2)::after {
    458.     content: '\e959';
    459.     font-family: 'icomoon';
    460.     position: absolute;
    461.     top: 2px;
    462.     right: 6px;
    463.     width: 10px;
    464.     height: 10px;
    465. }

    3、分布研究

    3.1 初始准备

    文件夹的创建

    视口标签，title，链接css文件没问题吧！

    1.     <meta name="viewport" content="width=device-width,initial-scale=1.0,
    2.     user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    3.     <title>携程在手，畅通无阻</title>
    4.     <link rel="stylesheet" href="css/normalize.css">
    5.     <link rel="stylesheet" href="css/index.css">

    3.2在index.css文件中写body的样式，引入字体图标等基本设置

    注意：在index.css文件中

    1. /* 字体图标 */
    2.  
    3. @font-face {
    4.     font-family: 'icomoon';
    5.     src: url('../fonts/icomoon.eot?o1ezsk');
    6.     src: url('../fonts/icomoon.eot?o1ezsk#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?o1ezsk') format('truetype'), url('../fonts/icomoon.woff?o1ezsk') format('woff'), url('../fonts/icomoon.svg?o1ezsk#icomoon') format('svg');
    7.     font-weight: normal;
    8.     font-style: normal;
    9.     font-display: block;
    10. }
    11.  
    12.  
    13. /* body常用初始化样式 */
    14.  
    15. body {
    16.     max-width: 540px;
    17.     min-width: 320px;
    18.     margin: 0 auto;
    19.     font: normal 14px/1.5 "Microsoft Yahei";
    20.     color: #000;
    21.     background-color: #f2f2f2;
    22.     /* 如果点击有高亮的设置透明 */
    23.     -webkit-tap-highlight-color: transparent;
    24.     /* 永远不会有横向导航条 */
    25.     overflow-x: hidden;
    26. }
    27. div {
    28.     box-sizing: border-box;
    29. }
    30.  
    31. a {
    32.     text-decoration: none;
    33. }
    34.  
    35. h5 {
    36.     padding: 0;
    37.     margin: 0;
    38. }
    39.  
    40. ul {
    41.     margin: 0;
    42.     padding: 0;
    43.     list-style: none;
    44. }

    3.3搜索模块的制作

     主要思路：

    1、让盒子的高度固定，只让他们的宽度随着屏幕的大小而变化！

    2、search-index 父盒子固定定位，固定定位的盒子必须有宽度，所以让他的宽度为100%

    3、固定定位的盒子，是以屏幕为准的，所以body中的margin：0 auto;对他不管用

    4、因此他使用left:50%;(让他的最左边移动到屏幕的一半位置)，再使用transform：translateX(-50%) (这里的50%是以当前移动的盒子为准的)，就是让这个盒子再往左移动盒子本身一半的长度

    5、flex布局可以无限加，他爹有display：flex,它还可以加

    6、flex布局中的flex属性，只能是他的亲爹有display：flex;才能正常平均分配。

    如果他爷爷有display：flex，他爹没有display：flex，那么他不能平均分配他爹的长度！

    5、右边小盒子固定大小，左边小盒子flex:1,平分剩余部分，从而使左边的盒子能根据屏幕的大小放大和缩小。

    index.html中

    1.  <!-- 搜索模块 -->
    2.     <div class="search-index">
    3.         <div class="search">
    4.             搜索:目的地/酒店/景点/航班号
    5.         </div>
    6.         <a href="#" class="user">我 的</a>
    7.     </div>

    index.css文件中

    1. /* 搜索模块 */
    2.  
    3. .search-index {
    4.     display: flex;
    5.     position: fixed;
    6.     left: 50%;
    7.     top: 0;
    8.     transform: translateX(-50%);
    9.     /* 兼容其他版本 */
    10.     -webkit-transform: translateX(-50%);
    11.     width: 100%;
    12.     height: 44px;
    13.     min-width: 320px;
    14.     max-width: 540px;
    15.     border-bottom: 1px solid #ccc;
    16.     border-top: 1px solid #ccc;
    17.     background-color: #f6f6f6;
    18. }
    19.  
    20. .search-index .search {
    21.     position: relative;
    22.     flex: 1;
    23.     height: 26px;
    24.     border: 1px solid #ccc;
    25.     margin: 7px 10px;
    26.     padding-left: 25px;
    27.     font-size: 12px;
    28.     color: #666;
    29.     line-height: 24px;
    30.     box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    31.     border-radius: 5px;
    32. }
    33.  
    34. .search-index .search::before {
    35.     content: '';
    36.     position: absolute;
    37.     top: 5px;
    38.     left: 5px;
    39.     width: 15px;
    40.     height: 15px;
    41.     background: url(../images/sprite.png) -59px -279px no-repeat;
    42.     background-size: 104px auto;
    43. }
    44.  
    45. .search-index a {
    46.     width: 44px;
    47.     height: 44px;
    48.     color: #2eaae0;
    49.     font-size: 12px;
    50.     text-align: center;
    51. }
    52.  
    53. .search-index a::before {
    54.     content: '';
    55.     display: block;
    56.     width: 23px;
    57.     height: 23px;
    58.     margin: 3px 0 0 11px;
    59.     background: url(../images/sprite.png) -59px -193px no-repeat;
    60.     background-size: 104px auto;
    61. }
    62.

    3.4、focus模块制作

    index.html文件

    1.     <!-- focus模块 -->
    2.     <div class="focus">
    3.         <a href="#" title="高速享受慢生活">
    4.             <img src="upload/focus.jpg" alt="">
    5.         </a>
    6.     </div>

    index.css文件

    高度固定，往里面放图片，让他的长度跟随a的长度即可

    1.  
    2. /* focus */
    3.  
    4. .focus {
    5.     margin-top: 44px;
    6. }
    7.  
    8. .focus a img {
    9.     width: 100%;
    10. }

    3.5、局部导航栏的制作

     主要思路：

    1、大盒子里面包含五个小盒子     ul>li*5   

    2、大盒子display:flex;  主轴方向为横向（row）五个小盒子flex:1;  平分大盒子的长度，高度用里面的撑开即可。

    3、li 盒子中又分上下两个模块，上边图像，下边文字；又可以使用flex布局，主轴方向为纵向（column）。

    4、给图像定长和定宽，再往里面添加背景图片即可（里面用到精灵图技术），千万不要忘记缩放相应的倍数。

    index.html文件

    1.  <!-- 局部导航栏模块 -->
    2.     <ul class="local-nav">
    3.         <li>
    4.             <a href="#" title="景点·玩乐">
    5.                 <span class="local-nav-icon1"></span>
    6.                 <span>景点·玩乐</span>
    7.             </a>
    8.         </li>
    9.         <li>
    10.             <a href="#" title="周边游">
    11.                 <span class="local-nav-icon1"></span>
    12.                 <span>周边游</span>
    13.             </a>
    14.         </li>
    15.         <li>
    16.             <a href="#" title="美食林">
    17.                 <span class="local-nav-icon1"></span>
    18.                 <span>美食林</span>
    19.             </a>
    20.         </li>
    21.         <li>
    22.             <a href="#" title="一日游">
    23.                 <span class="local-nav-icon1"></span>
    24.                 <span>一日游</span>
    25.             </a>
    26.         </li>
    27.         <li>
    28.             <a href="#" title="当地攻略">
    29.                 <span class="local-nav-icon1"></span>
    30.                 <span>当地攻略</span>
    31.             </a>
    32.         </li>
    33.     </ul>

    index.css文件

    1.  
    2. /* 局部导航栏 */
    3.  
    4. .local-nav {
    5.     overflow: hidden;
    6.     display: flex;
    7.     height: 64px;
    8.     background-color: #fff;
    9.     margin: 3px;
    10.     border-radius: 8px;
    11. }
    12.  
    13. .local-nav li {
    14.     flex: 1;
    15. }
    16.  
    17. .local-nav li a {
    18.     display: flex;
    19.     flex-direction: column;
    20.     align-items: center;
    21.     font-size: 12px;
    22.     color: #222;
    23. }
    24.  
    25. .local-nav li [class^='local-nav-icon'] {
    26.     margin-top: 8px;
    27.     margin-bottom: 2px;
    28.     width: 32px;
    29.     height: 32px;
    30.     background: url(../images/localnav_bg.png) 0 0 no-repeat;
    31.     /* 千万别忘记缩放相应的比例 *
    32.     background-size: 32px auto;
    33. }
    35. .local-nav li:nth-child(2) a span:nth-child(1) {
    36.     background-position: 0 -32px;
    37. }
    39. .local-nav li:nth-child(3) a span:nth-child(1) {
    40.     background-position: 0 -64px;
    41. }
    43. .local-nav li:nth-child(4) a span:nth-child(1) {
    44.     background-position: 0 -96px;
    45. }
    47. .local-nav li:nth-child(5) a span:nth-child(1) {
    48.     background-position: 0 -128px;
    49. }

    3.6、nav部分

     主要思路：

    1、写出一行来其他两行复制即可

    2、每一行中有三个模块使用flex布局，横向平均分配

    3、三个小模块中又采用上下的flex布局分配

    4、每一行中有线性渐变背景颜色

    5、每一行中的第一个给他添加背景图片

    index.html文件

    1.  <!-- nav部分 -->
    2.     <nav class="nav">
    3.         <div class="nav-common">
    4.             <div class="nav-items">
    5.                 <a href="#">酒店</a>
    6.             </div>
    7.             <div class="nav-items">
    8.                 <a href="#">海外酒店</a>
    9.                 <a href="#">特价酒店</a>
    10.             </div>
    11.             <div class="nav-items">
    12.                 <a href="#">团购</a>
    13.                 <a href="#">民宿·客栈</a>
    14.             </div>
    15.         </div>
    16.         <div class="nav-common">
    17.             <div class="nav-items">
    18.                 <a href="#">机票</a>
    19.             </div>
    20.             <div class="nav-items">
    21.                 <a href="#">火车票</a>
    22.                 <a href="#">特价机票</a>
    23.             </div>
    24.             <div class="nav-items">
    25.                 <a href="#">汽车票·船票</a>
    26.                 <a href="#">专车·租车</a>
    27.             </div>
    28.         </div>
    29.         <div class="nav-common">
    30.             <div class="nav-items">
    31.                 <a href="#">旅游</a>
    32.             </div>
    33.             <div class="nav-items">
    34.                 <a href="#">门票</a>
    35.                 <a href="#">目的地攻略</a>
    36.             </div>
    37.             <div class="nav-items">
    38.                 <a href="#">游轮旅行</a>
    39.                 <a href="#">定制旅行 </a>
    40.             </div>
    41.         </div>
    42.     </nav>

    index.css文件

    1. /* nav  */
    2.  
    3. .nav {
    4.     margin-top: 5px;
    5.     border-radius: 5px;
    6.     overflow: hidden;
    7. }
    8.  
    9. .nav-common {
    10.     display: flex;
    11.     height: 88px;
    12.     margin-bottom: 3px;
    13. }
    14.  
    15. .nav-common:nth-child(1) {
    16.     background: -webkit-linear-gradient(left, #FA5B55, #FA984D);
    17. }
    18.  
    19. .nav-common:nth-child(2) {
    20.     background: -webkit-linear-gradient(left, #4B90ED, #53BBED);
    21. }
    22.  
    23. .nav-common:nth-child(3) {
    24.     background: -webkit-linear-gradient(left, #35c3a8, #6bd55b);
    25. }
    26.  
    27. .nav-items {
    28.     flex: 1;
    29.     display: flex;
    30.     flex-direction: column;
    31.     align-items: center;
    32. }
    33.  
    34. .nav-items:nth-child(-n+2) {
    35.     border-right: 1px solid #fff;
    36. }
    37.  
    38. .nav-items a {
    39.     flex: 1;
    40.     line-height: 44px;
    41.     font-size: 14px;
    42.     color: #fff;
    43.     padding: 0 25px;
    44.     text-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    45. }
    46.  
    47. .nav-items:nth-child(1) a {
    48.     background: url(../images/hotel.png) bottom center no-repeat;
    49.     background-size: 121px auto;
    50. }

    3.7、sub-nav 部分

    主要思路 ：

    1、还是使用flex布局，只是里面每个小盒子不给宽度的情况下是不能换行的，使用flex-wrap也不行.

    2、此时设置 flex:20%; 让每个小盒子占大盒子宽度的20%，那么五个盒子就能占满一行，在设置换行，就能五个一行平均分配空间了。

    3、小盒子里面还是使用flex布局，主轴为column

    index.html文件

    1.  <!-- 侧导航栏 -->
    2.     <ul class="subnav-entry">
    3.         <li>
    4.             <a href="#" title="电话费">
    5.                 <span></span>
    6.                 <span>电话费</span>
    7.             </a>
    8.         </li>
    9.         <li>
    10.             <a href="#" title="保险·签证">
    11.                 <span></span>
    12.                 <span>保险·签证</span>
    13.             </a>
    14.         </li>
    15.         <li>
    16.             <a href="#" title="外币兑换">
    17.                 <span></span>
    18.                 <span>外币兑换</span>
    19.             </a>
    20.         </li>
    21.         <li>
    22.             <a href="#" title="购物">
    23.                 <span></span>
    24.                 <span>购物</span>
    25.             </a>
    26.         </li>
    27.         <li>
    28.             <a href="#" title="当地向导">
    29.                 <span></span>
    30.                 <span>当地向导</span>
    31.             </a>
    32.         </li>
    33.         <li>
    34.             <a href="#" title="自由行">
    35.                 <span></span>
    36.                 <span>自由行</span>
    37.             </a>
    38.         </li>
    39.         <li>
    40.             <a href="#" title="境外玩乐">
    41.                 <span></span>
    42.                 <span>境外玩乐</span>
    43.             </a>
    44.         </li>
    45.         <li>
    46.             <a href="#" title="礼品卡">
    47.                 <span></span>
    48.                 <span>礼品卡</span>
    49.             </a>
    50.         </li>
    51.         <li>
    52.             <a href="#" title="信用卡">
    53.                 <span></span>
    54.                 <span>信用卡</span>
    55.             </a>
    56.         </li>
    57.         <li>
    58.             <a href="#" title="更多">
    59.                 <span></span>
    60.                 <span>更多</span>
    61.             </a>
    62.         </li>
    63.     </ul>

    index.css文件

    1. /* subnav-entry */
    2.  
    3. .subnav-entry {
    4.     overflow: hidden;
    5.     padding-top: 5px;
    6.     margin-top: 3px;
    7.     display: flex;
    8.     flex-wrap: wrap;
    9.     background-color: #fff;
    10.     border-radius: 5px;
    11. }
    12.  
    13. .subnav-entry li {
    14.     flex: 20%;
    15. }
    16.  
    17. .subnav-entry li a {
    18.     display: flex;
    19.     padding-top: 7px;
    20.     padding-bottom: 3px;
    21.     flex-direction: column;
    22.     align-items: center;
    23. }
    24.  
    25. .subnav-entry li span:nth-child(1) {
    26.     width: 28px;
    27.     height: 28px;
    28.     background: url(../images/subnav-bg.png) 0 0 no-repeat;
    29.     background-size: 28px auto;
    30. }
    31.  
    32. .subnav-entry li:nth-child(2) a span:nth-child(1) {
    33.     background-position: 3px -28px;
    34. }
    35.  
    36. .subnav-entry li:nth-child(3) a span:nth-child(1) {
    37.     background-position: 3px -63px;
    38. }
    39.  
    40. .subnav-entry li:nth-child(4) a span:nth-child(1) {
    41.     background-position: 3px -100px;
    42. }
    43.  
    44. .subnav-entry li:nth-child(5) a span:nth-child(1) {
    45.     background-position: 3px -132px;
    46. }
    47.  
    48. .subnav-entry li:nth-child(6) a span:nth-child(1) {
    49.     background-position: 3px -164px;
    50. }
    51.  
    52. .subnav-entry li:nth-child(7) a span:nth-child(1) {
    53.     background-position: 3px -199px;
    54. }
    55.  
    56. .subnav-entry li:nth-child(8) a span:nth-child(1) {
    57.     background-position: 3px -232px;
    58. }
    59.  
    60. .subnav-entry li:nth-child(9) a span:nth-child(1) {
    61.     background-position: 3px -262px;
    62. }
    63.  
    64. .subnav-entry li:nth-child(10) a span:nth-child(1) {
    65.     background-position: 3px -291px;
    66. }

    3.8、剩余模块（sales模块、service模块、footer模块）

    剩余部分和前面都差不多，就不再赘述。

    index.html文件

    1.  <!-- sales模块 -->
    2.     <div class="sales">
    3.         <div class="sales-hd">
    4.             <!-- SEO优化 -->
    5.             <h2>热门活动</h2>
    6.             <a class="more">获取更多福利</a>
    7.         </div>
    8.         <div class="sales-bd">
    9.             <div class="row">
    10.                 <a href="#">
    11.                     <img src="upload/pic1.jpg" alt="">
    12.                 </a>
    13.                 <a href="#">
    14.                     <img src="upload/pic2.jpg" alt="">
    15.                 </a>
    16.             </div>
    17.             <div class="row">
    18.                 <a href="#">
    19.                     <img src="upload/pic3.jpg" alt="">
    20.                 </a>
    21.                 <a href="#">
    22.                     <img src="upload/pic4.jpg" alt="">
    23.                 </a>
    24.             </div>
    25.             <div class="row">
    26.                 <a href="#">
    27.                     <img src="upload/pic5.jpg" alt="">
    28.                 </a>
    29.                 <a href="#">
    30.                     <img src="upload/pic6.jpg" alt="">
    31.                 </a>
    32.             </div>
    33.         </div>
    34.     </div>
    35.     <!-- service模块 -->
    36.     <ul class="service">
    37.         <li>
    38.             <span></span>
    39.             <span>电话预订</span>
    40.         </li>
    41.         <li>
    42.             <span></span>
    43.             <span>下载客户端</span>
    44.         </li>
    45.         <li>
    46.             <span></span>
    47.             <span>我的</span>
    48.         </li>
    49.     </ul>
    50.     <!-- footer -->
    51.     <footer>
    52.         <h5>
    53.             <a href="#">网站地图 </a>|
    54.             <a href="#">language </a>|
    55.             <a href="#">电脑版</a>
    56.         </h5>
    57.         <p>©2022携程旅行 | 沪ICP备08023580号</p>
    58.     </footer>

    index.css文件

    1.  
    2. /* sales  */
    3.  
    4. .sales {
    5.     margin-top: 3px;
    6. }
    7.  
    8. .sales-hd {
    9.     position: relative;
    10.     height: 44px;
    11.     background-color: #fff;
    12.     /* border-top: 1px solid #ccc; */
    13.     border-bottom: 1px solid #ccc;
    14. }
    15.  
    16. .sales-hd h2 {
    17.     margin: 0;
    18.     overflow: hidden;
    19.     text-indent: -999px;
    20. }
    21.  
    22. .sales-hd h2::after {
    23.     content: '';
    24.     position: absolute;
    25.     left: 20px;
    26.     top: 14px;
    27.     width: 79px;
    28.     height: 15px;
    29.     background: url(../images/hot.png) 0px -20px no-repeat;
    30.     background-size: 79px auto;
    31. }
    32.  
    33. .sales-hd .more {
    34.     position: absolute;
    35.     right: 30px;
    36.     top: 9px;
    37.     font-size: 14px;
    38.     padding: 2px 20px 2px 15px;
    39.     border-radius: 15px;
    40.     color: #fff;
    41.     background: -webkit-linear-gradient(left, #ff5170, #ff6ac3);
    42. }
    43.  
    44. .sales-hd .more::after {
    45.     position: absolute;
    46.     top: 8px;
    47.     right: 11px;
    48.     content: '';
    49.     width: 8px;
    50.     height: 8px;
    51.     border-top: 1px solid #fff;
    52.     border-right: 1px solid #fff;
    53.     transform: rotate(45deg);
    54. }
    55.  
    56.  
    57. /* sales-bd */
    58.  
    59. .sales-bd .row {
    60.     display: flex;
    61. }
    62.  
    63. .sales-bd .row:nth-child(-n+2) {
    64.     border-bottom: 1px solid #ccc;
    65. }
    66.  
    67. .sales-bd .row a {
    68.     flex: 1;
    69.     background-color: pink;
    70.     height: 100%;
    71. }
    72.  
    73. .sales-bd .row a:nth-child(1) {
    74.     border-right: 1px solid #ccc;
    75. }
    76.  
    77. .sales-bd .row a img {
    78.     width: 100%;
    79.     display: block;
    80. }
    81.  
    82.  
    83. /* service */
    84.  
    85. .service {
    86.     display: flex;
    87.     height: 60px;
    88.     border-bottom: 1px solid #ccc;
    89.     border-top: 1px solid #ccc;
    90.     margin-top: 5px;
    91.     text-align: center;
    92.     align-items: center;
    93.     background-color: #fff;
    94. }
    95.  
    96. .service li {
    97.     flex: 1;
    98.     display: flex;
    99.     flex-direction: column;
    100.     align-items: center;
    101.     color: #333;
    102. }
    103.  
    104. .service li span:nth-child(1) {
    105.     position: relative;
    106.     width: 30px;
    107.     height: 30px;
    108. }
    109.  
    110. .service li span:nth-child(1)::before {
    111.     position: absolute;
    112.     content: '\e964';
    113.     left: 7px;
    114.     top: 2px;
    115.     font-family: 'icomoon';
    116.     font-size: 18px;
    117.     color: #ccc;
    118. }
    119.  
    120. .service li:nth-child(2) span:nth-child(1)::before {
    121.     position: absolute;
    122.     content: '\ea3e';
    123.     left: 4px;
    124.     top: 2px;
    125.     font-family: 'icomoon';
    126.     font-size: 22px;
    127.     color: #ccc;
    128. }
    129.  
    130. .service li:nth-child(3) span:nth-child(1)::before {
    131.     position: absolute;
    132.     content: '\e902';
    133.     left: 3px;
    134.     top: 0px;
    135.     font-family: 'icomoon';
    136.     font-size: 22px;
    137.     color: #ccc;
    138. }
    139.  
    140.  
    141. /* footer  */
    142.  
    143. footer {
    144.     margin-top: 10px;
    145.     text-align: center;
    146.     color: #ccc;
    147.     font-size: 12px;
    148. }
    149.  
    150. footer h5 a {
    151.     font-size: 12px;
    152.     color: #999;
    153.     font-weight: 400;
    154. }
    155.  
    156. footer h5 a:nth-child(2) {
    157.     position: relative;
    158.     padding: 0 15px;
    159. }
    160.  
    161. footer h5 a:nth-child(2)::before {
    162.     content: '\e910';
    163.     font-family: 'icomoon';
    164.     position: absolute;
    165.     top: 0;
    166.     left: 0;
    167.     width: 10px;
    168.     height: 10px;
    169. }
    170.  
    171. footer h5 a:nth-child(2)::after {
    172.     content: '\e959';
    173.     font-family: 'icomoon';
    174.     position: absolute;
    175.     top: 2px;
    176.     right: 6px;
    177.     width: 10px;
    178.     height: 10px;
    179. }

  • 相关阅读:
    PyTorch笔记 - Convolution卷积运算的原理 (3)
    idea项目中java类名出现带 j 小红点，如何解决？
    远距离双目视觉测量系统纵深方向测量精度较低原因分析
    3D目标检测实战 | 详解2D/3D检测框交并比IoU计算(附Python实现)
    IE退役倒计时， Edge接棒
    Python爬虫-爬取全国各地市的邮编链接
    linux 批量关闭运行中的rsync进程
    简述事务隔离级别
    模拟滴答声
    机器学习（十九）：梯度提升回归(GBR)
  • 原文地址：https://blog.csdn.net/m0_45142186/article/details/126732701