0
0

携程网移动端首页制作（html5+css3）

1.预期完成效果

主要是自己做记录，记录做的过程以及遇到的一些问题

2.开始制作

2.1 搜索框的制作

1.首先引入normal.css（Normalize.css: Make browsers render all elements more consistently.）。其中搜索符号使用图标，阿里图标（iconfont-阿里巴巴矢量图标库）：打开网址搜索需要的图标，添加到自己的项目中，点击“download code” ，下载后将压缩包放进项目中进行解压使用。

2.遇到的问题：手机模式下搜索框显示不完全

解决：给搜索框最大的盒子添加width:100%;

2.2 导航栏的制作

1.上面为图标，下面为文字的，可以采用flex布局将主轴设置成y轴，然后将侧轴设置为居中对齐。

2.渐变色的制作：background: -webkit-linear-gradient(起始方向 颜色1, 颜色2,...);

3.flex:wrap;换行

2.3销售模块制作

1.分为两个盒子，采用flex布局，各占50%

2.遇到的问题：

（1）在切换为移动设备仿真时，页面显示不完全，如图

修改了<head></head>标签中的 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">，将原本的1.0替换成了0.7，虽然可以正常显示了，但是不知道有没有更好的方法。

（2）写“权威排行榜”的时候样式突然不起效果，如图

后来发现自己html代码中把它的类名写错位置了，写在了href里面哈哈哈哈我还疑惑了半天

（3）滚动的时候搜索框无法显示在最上面，如图

给搜索框的大盒子添加 z-index: 1;置于最上层

2.4 底部图片

1.准备一个盒子，放一张图片

2.5 底部工具模块

1.需要下载新图标；小竖线采用伪类选择器做；&nbsp；空格符号

2.遇到的问题：

（1）在做“网站地图”和“电脑版”中间那根小竖线时，用的after伪类选择器，采用定位，但是一直没有内容，后面发现是把background-color写成了color

（2）2022前面的那个符号不会写，不知道是怎么来的

2.6 底部导航栏模块

1.大盒子用flex布局，每个占25%；小盒子为一个图标加文字，采用flex布局，将主轴设置成y轴；图标是精灵图

3. 代码部分

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport"
  8.         content="width=device-width,user-scalable=no,initial-scale=0.7,user-scalable=yes,maximum-scale=1.0,minimum-scale=0.7">
  9.     <!-- 引入我们的css初始化文件 -->
  10.     <link rel="stylesheet" href="css/normalize.css">
  11.     <link rel="stylesheet" href="css/index.css">
  12.     <title>携程旅行-酒店预订，机票预订查询</title>
  13. </head>
  15. <body>
  16.     <!-- 搜索框 -->
  17.     <div class="search-box">
  18.         <div class="search">
  19.             <i class="iconfont icon">&#xe651;</i>
  20.             <span>搜索：目的地/酒店/景点/航班号</span>
  21.         </div>
  22.     </div>
  23.     <!-- 导航栏 -->
  24.     <nav>
  25.         <ul class="nav-entry">
  26.             <li class="nav-entry-li1">
  27.                 <a href="#">
  28.                     <span class="nav-entry-icon1"></span>
  29.                     <span>酒店</span>
  30.                 </a>
  31.             </li>
  32.             <li class="nav-entry-li2">
  33.                 <a href="#">
  34.                     <span class="nav-entry-icon2"></span>
  35.                     <span>机票</span>
  36.                 </a>
  37.             </li>
  38.             <li class="nav-entry-li3">
  39.                 <a href="#">
  40.                     <span class="nav-entry-icon3"></span>
  41.                     <span>火车票</span>
  42.                 </a>
  43.             </li>
  44.             <li class="nav-entry-li4">
  45.                 <a href="#">
  46.                     <span class="nav-entry-icon4"></span>
  47.                     <span>旅游</span>
  48.                 </a>
  49.             </li>
  50.             <li class="nav-entry-li5">
  51.                 <a href="#">
  52.                     <span class="nav-entry-icon5"></span>
  53.                     <span>攻略景点</span>
  54.                 </a>
  55.             </li>
  56.             <li class="nav-entry-li6">
  57.                 <a href="#">
  58.                     <span class="nav-entry-icon6"></span>
  59.                     <span>民宿/客栈</span>
  60.                 </a>
  61.             </li>
  62.             <li class="nav-entry-li7">
  63.                 <a href="#">
  64.                     <span class="nav-entry-icon7"></span>
  65.                     <span>机+酒</span>
  66.                 </a>
  67.             </li>
  68.             <li class="nav-entry-li8">
  69.                 <a href="#">
  70.                     <span class="nav-entry-icon8"></span>
  71.                     <span>汽车/船票</span>
  72.                 </a>
  73.             </li>
  74.             <li class="nav-entry-li9">
  75.                 <a href="#">
  76.                     <span class="nav-entry-icon9"></span>
  77.                     <span>门票/活动</span>
  78.                 </a>
  79.             </li>
  80.             <li class="nav-entry-li10">
  81.                 <a href="#">
  82.                     <span class="nav-entry-icon10"></span>
  83.                     <span>美食</span>
  84.                 </a>
  85.             </li>
  86.             <li class="nav-entry-li11">
  87.                 <a href="#">
  88.                     <span class="nav-entry-icon11"></span>
  89.                     <span>特价/爆款</span>
  90.                 </a>
  91.             </li>
  92.             <li class="nav-entry-li12">
  93.                 <a href="#">
  94.                     <span class="nav-entry-icon12"></span>
  95.                     <span>接送机/包车</span>
  96.                 </a>
  97.             </li>
  98.             <li class="nav-entry-li13">
  99.                 <a href="#">
  100.                     <span class="nav-entry-icon13"></span>
  101.                     <span>租车</span>
  102.                 </a>
  103.             </li>
  104.             <li class="nav-entry-li14">
  105.                 <a href="#">
  106.                     <span class="nav-entry-icon14"></span>
  107.                     <span>周边游</span>
  108.                 </a>
  109.             </li>
  110.             <li class="nav-entry-li15">
  111.                 <a href="#">
  112.                     <span class="nav-entry-icon15"></span>
  113.                     <span>购物/免税</span>
  114.                 </a>
  115.             </li>
  116.         </ul>
  117.     </nav>
  118.     <!-- 销售模块 -->
  119.     <div class="sales">
  120.         <div class="salse-hd">
  121.             <!-- 左边 -->
  122.             <div class="sales-tejia">
  123.                 <div class="tejia-hd">
  124.                     <a href="#" class="tejia-hd-zuo"></a>
  125.                     <a href="#" class="tejia-hd-you">特价好货直播中</a>
  126.                 </div>
  127.                 <div class="tejia-bd">
  128.                     <a href="#"></a>
  129.                 </div>
  130.                 <div class="tejia-ft">
  131.                     <a href="#">￥</a>
  132.                     <a href="#">660</a>
  133.                 </div>
  134.             </div>
  135.             <!-- 右边 -->
  136.             <div class="sales-rank">
  137.                 <div class="rank-hd">
  138.                     <a href="#" class="rank-hd-zuo"></a>
  139.                     <a href="#" class="rank-hd-you">权威排行榜</a>
  140.                 </div>
  141.                 <div class="rank-bd">
  142.                     <div class="rank-bd-zuo">
  143.                         <a href="#" class="tu"></a>
  144.                         <span class="tubiao">上海</span>
  145.                         <span class="text">上海10大奢华酒店</span>
  146.                     </div>
  147.                     <div class="rank-bd-you">
  148.                         <a href="#" class="tu"></a>
  149.                         <span class="tubiao">上海</span>
  150.                         <span class="text">上海亲子乐园酒店榜</span>
  151.                     </div>
  152.                 </div>
  153.             </div>
  154.         </div>
  155.     </div>
  156.     <!-- 底部图片 -->
  157.     <div class="bottom-img">
  158.         <a href="#"></a>
  159.     </div>
  160.     <!-- 底部功能模块 -->
  161.     <div class="toolbox">
  162.         <div class="tool-group">
  163.             <a href="#" class="link">
  164.                 <span class="iconfont">&#xe88b;</span>
  165.                 <span>电话预订</span>
  166.             </a>
  167.             <a href="#" class="download">
  168.                 <span class="iconfont">&#xe668;</span>
  169.                 <span>下载携程</span>
  170.             </a>
  171.         </div>
  172.         <div class="tool-text">
  173.             <a href="#" class="zuo">网站地图</a>
  174.             <a href="#">电脑版</a>
  175.             <p>c2022携程旅行 &nbsp;泸ICP备08023580号</p>
  176.         </div>
  177.     </div>
  178.     <!-- 底部导航栏 -->
  179.     <!-- 局部导航栏 -->
  180.     <ul class="bottom-nav">
  181.         <li>
  182.             <a href="#">
  183.                 <span class="local-nav-icon-icon1"></span>
  184.                 <span>首页</span>
  185.             </a>
  186.         </li>
  187.         <li>
  188.             <a href="#">
  189.                 <span class="local-nav-icon-icon2"></span>
  190.                 <span>社区</span>
  191.             </a>
  192.         </li>
  193.         <li>
  194.             <a href="#">
  195.                 <span class="local-nav-icon-icon3"></span>
  196.                 <span>消息</span>
  197.             </a>
  198.         </li>
  199.         <li>
  200.             <a href="#">
  201.                 <span class="local-nav-icon-icon4"></span>
  202.                 <span>我的</span>
  203.             </a>
  204.         </li>
  205.     </ul>
  206. </body>
  208. </html>

css代码

  1. body {
  2.     color: #000;
  3.     /* 防止水平滚动条出现 */
  4.     overflow-x: hidden;
  5.     /* 防止一些元素点击之后背景会高亮 */
  6.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  7.     -webkit-text-size-adjust: none;
  8.     max-width: 540px;
  9.     min-width: 320px;
  10.     margin: 0 auto;
  11.     font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
  12.     background: #f4f4f4;
  13. }
  15. div {
  16.     box-sizing: border-box;
  17. }
  19. ul li {
  20.     list-style: none;
  21. }
  23. a {
  24.     text-decoration: none;
  25. }
  27. @font-face {
  28.     font-family: 'iconfont';
  29.     src: url('../fonts/iconfont.woff2?t=1662898789972') format('woff2'),
  30.         url('../fonts/iconfont.woff?t=1662898789972') format('woff'),
  31.         url('../fonts/iconfont.ttf?t=1662898789972') format('truetype');
  32. }
  34. .iconfont {
  35.     font-family: "iconfont" !important;
  36.     font-size: 16px;
  37.     font-style: normal;
  38.     -webkit-font-smoothing: antialiased;
  39.     -moz-osx-font-smoothing: grayscale;
  40. }
  42. /* 搜索框 */
  43. .search-box {
  44.     /* 因为滚动时一直保持在上面，所以用固定定位 */
  45.     position: fixed;
  46.     /* 在页面最上层 */
  47.     z-index: 1;
  48.     top: 0;
  49.     display: flex;
  50.     width: 100%;
  51.     height: 50px;
  52.     max-width: 540px;
  53.     min-width: 320px;
  54.     background-color: #fff;
  55. }
  57. .search {
  58.     flex: 1;
  59.     width: 516px;
  60.     height: 32px;
  61.     border: 1.5px solid #377ab1;
  62.     border-radius: 16px;
  63.     margin: 10px;
  64. }
  66. .search .icon {
  67.     position: absolute;
  68.     top: 11px;
  69.     left: 24px;
  70.     font-size: 20px;
  71. }
  73. .search span {
  74.     position: absolute;
  75.     top: 13px;
  76.     left: 53px;
  77.     color: #a2a2a2;
  78.     font-size: 16px;
  79. }
  81. /* 导航栏模块 */
  82. nav {
  83.     margin-top: 50px;
  84.     height: 184px;
  85.     width: 100%;
  86. }
  88. .nav-entry {
  89.     display: flex;
  90.     padding: 6px 12px 2px;
  91.     background-color: #fff;
  92.     /* 换行 */
  93.     flex-wrap: wrap;
  94.     /* 因为没有宽度所以只写上面这一句不会换行 将flex写成百分比，相对于父级来说*/
  95. }
  97. .nav-entry li [class^="nav-entry-icon"] {
  98.     width: 28px;
  99.     height: 28px;
  100.     margin-top: 4px;
  101.     background-size: 28px auto;
  102. }
  104. .nav-entry-icon1 {
  105.     background: url(../images/hotel.png) no-repeat;
  106. }
  108. .nav-entry-icon2 {
  109.     background: url(../images/flight.png) no-repeat;
  110. }
  112. .nav-entry-icon3 {
  113.     background: url(../images/train_ticket.png) no-repeat;
  114. }
  116. .nav-entry-icon4 {
  117.     background: url(../images/vacation.png) no-repeat;
  118. }
  120. .nav-entry-icon5 {
  121.     background: url(../images/gs.png) no-repeat;
  122. }
  124. .nav-entry-icon6 {
  125.     background: url(../images/hotel_inn.png) no-repeat;
  126. }
  128. .nav-entry-icon7 {
  129.     background: url(../images/flight_package.png) no-repeat;
  130. }
  132. .nav-entry-icon8 {
  133.     background: url(../images/bus_ticket.png) no-repeat;
  134. }
  136. .nav-entry-icon9 {
  137.     background: url(../images/ticket.png) no-repeat;
  138. }
  140. .nav-entry-icon10 {
  141.     background: url(../images/food.png) no-repeat;
  142. }
  144. .nav-entry-icon11 {
  145.     background: url(../images/hotel_sale.png) no-repeat;
  146. }
  148. .nav-entry-icon12 {
  149.     background: url(../images/airport_transfer.png) no-repeat;
  150. }
  152. .nav-entry-icon13 {
  153.     background: url(../images/car.png) no-repeat;
  154. }
  156. .nav-entry-icon14 {
  157.     background: url(../images/weekend.png) no-repeat;
  158. }
  160. .nav-entry-icon15 {
  161.     background: url(../images/shop.png) no-repeat;
  162. }
  164. .nav-entry [class^="nav-entry-li"] {
  165.     flex: 18%;
  166.     border-right: 1px solid #fff;
  167.     border-bottom: 1px solid #fff;
  168. }
  170. .nav-entry-li1 {
  171.     border-radius: 8px 0 0 0;
  172.     /* 渐变色 */
  173.     background: -webkit-linear-gradient(#fb5f53, #fc8251);
  174. }
  176. .nav-entry-li2 {
  177.     background: -webkit-linear-gradient(#3e87fa, #4facf9);
  178. }
  180. .nav-entry-li3 {
  181.     background: -webkit-linear-gradient(#6084fe, #6aa1ff);
  182. }
  184. .nav-entry-li4 {
  185.     background: -webkit-linear-gradient(#32c5b5, #4ed5b4);
  186. }
  188. .nav-entry-li5 {
  189.     border-radius: 0 8px 0 0;
  190.     background: -webkit-linear-gradient(#ff8c39, #ffa338);
  191. }
  193. .nav-entry-li6,
  194. .nav-entry-li11 {
  195.     background-color: #fff6f1;
  196. }
  198. .nav-entry-li11 {
  199.     border-radius: 0 0 0 8px;
  200. }
  202. .nav-entry-li7,
  203. .nav-entry-li12 {
  204.     background-color: #f1f8ff;
  205. }
  207. .nav-entry-li8,
  208. .nav-entry-li13 {
  209.     background-color: #f2f4ff;
  210. }
  212. .nav-entry-li9,
  213. .nav-entry-li14 {
  214.     background-color: #ecfcf9;
  215. }
  217. .nav-entry-li10,
  218. .nav-entry-li15 {
  219.     background-color: #fff8f3;
  220. }
  222. .nav-entry-li15 {
  223.     border-radius: 0 0 8px 0;
  224. }
  226. .nav-entry a {
  227.     display: flex;
  228.     flex-direction: column;
  229.     align-items: center;
  230.     font-size: 13px;
  231.     color: #fff;
  232. }
  234. .nav-entry [class^="nav-entry-li"]:nth-child(n+6) a {
  235.     color: #2d2824;
  236. }
  238. /* 销售模块 */
  239. .sales {
  240.     display: flex;
  241.     width: 100%;
  242. }
  244. .salse-hd {
  245.     display: flex;
  246.     flex: 1;
  247. }
  249. /* 特价直播 */
  250. .sales-tejia {
  251.     height: 148px;
  252.     flex: 50%;
  253.     background-color: #fff;
  254.     border-radius: 8px;
  255.     margin: -7px 16px;
  256. }
  258. .tejia-hd {
  259.     position: relative;
  260. }
  262. .tejia-hd-zuo {
  263.     display: inline-block;
  264.     width: 73px;
  265.     height: 20px;
  266.     background: url(../images/salezb.png) no-repeat;
  267.     background-size: 73px auto;
  268.     margin: 6px;
  269. }
  271. .tejia-hd-you {
  272.     position: absolute;
  273.     top: 8px;
  274.     right: 9px;
  275.     display: inline-block;
  276.     width: 84px;
  277.     height: 18px;
  278.     color: #ff4607;
  279.     font-size: 12px;
  280.     background-color: #ffebe3;
  281.     padding: 1px 4px;
  282.     border-radius: 2px;
  283. }
  285. .tejia-bd a {
  286.     display: inline-block;
  287.     width: 230px;
  288.     height: 84px;
  289.     border-radius: 8px;
  290.     margin-left: 6px;
  291.     background: url(../upload/02018120008mxmb3g3DDF_D_280_280_R5.jpg) no-repeat center;
  292.     background-size: 238px auto;
  293. }
  295. .tejia-ft a {
  296.     color: #f06500;
  297.     margin: 5px;
  298.     font-weight: 700;
  299. }
  301. .tejia-ft a:nth-child(2) {
  302.     margin: -9px;
  303. }
  305. /* 携程精选榜 */
  306. .sales-rank {
  307.     flex: 50%;
  308.     height: 148px;
  309.     background-color: #fff;
  310.     border-radius: 8px;
  311.     margin: -7px 3px;
  312. }
  314. .rank-hd {
  315.     position: relative;
  316. }
  318. .rank-hd-zuo {
  319.     display: block;
  320.     width: 73px;
  321.     height: 20px;
  322.     background: url(../upload/0zc6g120008g0hcb587E5.png) no-repeat;
  323.     background-size: 73px auto;
  324.     margin: 8px;
  325. }
  327. .rank-hd-you {
  328.     position: absolute;
  329.     top: 1px;
  330.     right: 9px;
  331.     display: inline-block;
  332.     width: 61px;
  333.     height: 18px;
  334.     color: #ae6e15;
  335.     font-size: 12px;
  336.     background-color: #fdefd2;
  337.     padding: 1px 4px;
  338.     border-radius: 2px;
  339. }
  341. .rank-bd {
  342.     display: flex;
  343. }
  345. .rank-bd-zuo {
  346.     position: relative;
  347.     overflow: hidden;
  348.     flex: 50%;
  349. }
  351. .rank-bd .tu {
  353.     display: inline-block;
  354.     width: 117px;
  355.     height: 84px;
  356.     border-radius: 8px;
  357. }
  359. .rank-bd-zuo .tu {
  360.     background: url(../upload/zuo.jpg) no-repeat center;
  361.     background-size: 117px auto;
  362.     margin: 0 6px;
  363. }
  365. .rank-bd-you {
  366.     overflow: hidden;
  367.     position: relative;
  368. }
  370. .rank-bd-you .tu {
  371.     background: url(../upload/you.webp) center;
  372.     background-size: 117px auto;
  373. }
  375. .rank-bd .tubiao {
  376.     position: absolute;
  377.     top: 0;
  378.     left: 0;
  379.     display: inline-block;
  380.     width: 30px;
  381.     height: 16px;
  382.     color: #663c00;
  383.     font-size: 12px;
  384.     background-color: #dab996;
  385.     border-radius: 8px 0 8px 0;
  386. }
  388. .rank-bd .rank-bd-zuo .tubiao {
  389.     left: 6px;
  390. }
  392. .text {
  393.     display: block;
  394.     font-size: 12px;
  395. }
  397. /* 底部图片 */
  398. .bottom-img a {
  399.     display: block;
  400.     height: 129px;
  401.     width: 518px;
  402.     background: url(../upload/bottom.jpg)no-repeat;
  403.     background-size: 518px auto;
  404.     margin: 20px 18px;
  405.     border-radius: 8px;
  406. }
  408. /* 底部工具模块 */
  409. .tool-group .link,
  410. .download {
  411.     box-sizing: border-box;
  412.     display: inline-block;
  413.     width: 104px;
  414.     height: 34px;
  415.     border: 1px solid #ccc;
  416.     text-align: center;
  417.     line-height: 32px;
  418.     border-radius: 4px;
  419.     color: #000;
  420. }
  422. .link {
  423.     margin: 7px 153px 14px 100px;
  424. }
  426. .tool-text a {
  427.     display: inline-block;
  428.     color: #666;
  429.     /* padding: 10px; */
  430.     width: 96px;
  431.     height: 15px;
  432. }
  434. .tool-text a:nth-child(2) {
  435.     margin-left: 12px;
  436. }
  438. .tool-text .zuo {
  439.     position: relative;
  440.     margin-top: 9px;
  441.     margin-left: 200px;
  442. }
  444. .tool-text .zuo::after {
  445.     position: absolute;
  446.     top: 2px;
  447.     left: 85px;
  448.     content: "";
  449.     background-color: #e0e0e0;
  450.     width: 1px;
  451.     height: 18px;
  452. }
  454. .tool-text p {
  455.     color: #666;
  456.     margin-left: 171px;
  457.     font-size: 13px;
  458. }
  460. /* 底部导航栏 */
  461. .bottom-nav {
  462.     display: flex;
  463.     height: 49px;
  464.     background-color: #fff;
  465. }
  467. .bottom-nav li {
  468.     flex: 1;
  469. }
  471. .bottom-nav a {
  472.     display: flex;
  473.     /* 将主轴设置成y轴 */
  474.     flex-direction: column;
  475.     /* 侧轴居中对齐 单行的· */
  476.     align-items: center;
  477.     font-size: 12px;
  478.     color: #666;
  479. }
  481. /* 利用属性选择器 */
  482. .bottom-nav li [class^="local-nav-icon"] {
  483.     width: 32px;
  484.     height: 32px;
  485.     background: url(../images/tabbar.png) no-repeat 0 0;
  486.     background-size: 32px auto;
  487. }
  489. .bottom-nav li .local-nav-icon-icon2 {
  490.     background-position: 0 -32px;
  491. }
  493. .bottom-nav li .local-nav-icon-icon3 {
  494.     background-position: 0 -64px;
  495. }
  497. .bottom-nav li .local-nav-icon-icon4 {
  498.     background-position: 0 -96px;
  499. }
  501. .bottom-nav li .local-nav-icon-icon5 {
  502.     background-position: 0 -128px;
  503. }

4. 完成效果

5. 总结

  1.   内容参考来自b站的up主：黑马前端 的pink老师前端入门教程。自己动手做的时候感觉自己学的太差了呜呜呜，什么都没掌握好，最后的完成效果也一般，完成时间也比预期中耗费的更多，只能说继续努力吧。
标签： css3 html5 前端
本文转载自: https://blog.csdn.net/qq_53767416/article/details/126808498
版权归原作者 俗世没有清欢 所有， 如有侵权，请联系我们删除。
登录后发布评论

“携程网移动端首页制作（html5+css3）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？