• 移动WEB开发之流式布局--移动WEB开发之flex布局--携程网首页案例制作

    案例：携程网移动端首页

    访问地址：携程旅行-酒店预订,机票预订查询,旅游度假,商旅管理-携程无线官网 (ctrip.com)

    1. 技术选型

    方案：我们采取单独制作移动页面方案

    技术：布局采取flex布局

    2. 搭建相关文件夹结构

     3. 设置视口标签以及引入初始化样式

    1. <meta name="viewport" content="width=device-width, user-scalable=no, 
    2. initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    3.  <link rel="stylesheet" href="css/normalize.css">
    4.  <link rel="stylesheet" href="css/index.css">

    4. 常用初始化样式

    1. body {
    2. max-width: 540px;
    3. min-width: 320px;
    4. margin: 0 auto;
    5. font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft
    6. Yahei",STXihei,hei;
    7. color: #000;
    8. background: #f2f2f2;
    9. overflow-x: hidden;
    10. -webkit-tap-highlight-color: transparent;
    11. }

     搜索外观完成 

    结构伪类做：二倍图

    做法：1.打开PS缩放一半 2.量出需要的图标，在css中设置top和left负值 3.css中将缩放后的大小重新给就是background-size

     

    焦点图

    5. 常见模块命名

      6. 常见flex布局思路

     要设置为主轴为y轴,侧轴居中

    利用属性选择器更换背景图片

     第一个a要取消下边框

     

      7. 背景线性渐变

      语法1：

    1. background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
    2. background: -webkit-linear-gradient(left, red , blue);
    3. background: -webkit-linear-gradient(left top, red , blue);

    背景渐变必须添加浏览器私有前缀

    起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是top

     

    原理跟上面是一样的

     

     热门活动模块制作

     更多模块制作

    sales-bd模块制作

     完整代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <link rel="stylesheet" href="css/normalize.css">
    8.     <link rel="stylesheet" href="css/index.css">
    9.     <title>携程在手,说走就走</title>
    10. </head>
    11. <body>
    12.     <!-- 顶部搜索 -->
    13.     <div class="search-index">
    14.         <div class="search">搜索:目的地/酒店/景点/航班号</div>
    15.     </div>
    16.     <!-- 焦点图模块 -->
    17.     <div class="focus">
    18.         <img src="upload/focus.jpg" alt="">
    19.     </div>
    20.     <!-- 局部导航栏 -->
    21.     <ul class="local-nav">
    22.         <li>
    23.             <a href="#" title="景点·玩乐">
    24.                 <span class="local-nav-icon-icon1"></span>
    25.                 <span>景点·玩乐</span>
    26.             </a>
    27.         </li>
    28.         <li>
    29.             <a href="#" title="景点·玩乐">
    30.                 <span class="local-nav-icon-icon2"></span>
    31.                 <span>景点·玩乐</span>
    32.             </a>
    33.         </li>
    34.         <li>
    35.             <a href="#" title="景点·玩乐">
    36.                 <span class="local-nav-icon-icon3"></span>
    37.                 <span>景点·玩乐</span>
    38.             </a>
    39.         </li>
    40.         <li>
    41.             <a href="#" title="景点·玩乐">
    42.                 <span class="local-nav-icon-icon4"></span>
    43.                 <span>景点·玩乐</span>
    44.             </a>
    45.         </li>
    46.         <li>
    47.             <a href="#" title="景点·玩乐">
    48.                 <span class="local-nav-icon-icon5"></span>
    49.                 <span>景点·玩乐</span>
    50.             </a>
    51.         </li>
    52.     </ul>
    53.     <!-- 主导航栏 -->
    54.     <nav>
    55.         <div class="nav-common">
    56.             <div class="nav-items">
    57.                 <a href="#">海外酒店</a>
    58.             </div>
    59.             <div class="nav-items">
    60.                 <a href="#">海外酒店</a>
    61.                 <a href="#">特价酒店</a>
    62.             </div>
    63.             <div class="nav-items">
    64.                 <a href="#">海外酒店</a>
    65.                 <a href="#">特价酒店</a>
    66.             </div>
    67.         </div>
    68.         <div class="nav-common">
    69.             <div class="nav-items">
    70.                 <a href="#">海外酒店</a>
    71.             </div>
    72.             <div class="nav-items">
    73.                 <a href="#">海外酒店</a>
    74.                 <a href="#">特价酒店</a>
    75.             </div>
    76.             <div class="nav-items">
    77.                 <a href="#">海外酒店</a>
    78.                 <a href="#">特价酒店</a>
    79.             </div>
    80.         </div>
    81.         <div class="nav-common">
    82.             <div class="nav-items">
    83.                 <a href="#">海外酒店</a>
    84.             </div>
    85.             <div class="nav-items">
    86.                 <a href="#">海外酒店</a>
    87.                 <a href="#">特价酒店</a>
    88.             </div>
    89.             <div class="nav-items">
    90.                 <a href="#">海外酒店</a>
    91.                 <a href="#">特价酒店</a>
    92.             </div>
    93.         </div>
    94.     </nav>
    95.     <!-- 侧导航栏 -->
    96.     <ul class="subnav-entry">
    97.         <li>
    98.             <a href="#">
    99.                 <span class="subnav-entry-icon"></span>
    100.                 <span>电话费</span>
    101.             </a>
    102.         </li>
    103.         <li>2</li>
    104.         <li>3</li>
    105.         <li>4</li>
    106.         <li>5</li>
    107.         <li>6</li>
    108.         <li>7</li>
    109.         <li>8</li>
    110.         <li>9</li>
    111.         <li>10</li>
    112.     </ul>
    113.     <!-- 销售模块 -->
    114.     <div class="sales-box">
    115.         <div class="sales-hd">
    116.             <h2>热门活动</h2>
    117.             <a href="#" class="more">获取更多福利</a>
    118.         </div>
    119.         <div class="sales-bd">
    120.             <div class="row">
    121.                 <a href="#">
    122.                     <img src="upload/pic1.jpg" alt="" srcset="">
    123.                 </a>
    124.                 <a href="#">
    125.                     <img src="upload/pic2.jpg" alt="">
    126.                 </a>
    127.             </div>
    128.             <div class="row">
    129.                 <a href="#">
    130.                     <img src="upload/pic3.jpg" alt="" srcset="">
    131.                 </a>
    132.                 <a href="#">
    133.                     <img src="upload/pic4.jpg" alt="">
    134.                 </a>
    135.             </div>
    136.             <div class="row">
    137.                 <a href="#">
    138.                     <img src="upload/pic5.jpg" alt="" srcset="">
    139.                 </a>
    140.                 <a href="#">
    141.                     <img src="upload/pic6.jpg" alt="">
    142.                 </a>
    143.             </div>
    144.         </div>
    145.     </div>
    146.     <!-- 切换模块 -->
    147.     <ul class="cut-nav">
    148.         <li>
    149.             <a href="#" title="首页">
    150.                 <span class="cut-nav-icon-icon1"></span>
    151.                 <span>首页</span>
    152.             </a>
    153.         </li>
    154.         <li>
    155.             <a href="#" title="社区">
    156.                 <span class="cut-nav-icon-icon2"></span>
    157.                 <span>社区</span>
    158.             </a>
    159.         </li>
    160.         <li>
    161.             <a href="#" title="消息">
    162.                 <span class="cut-nav-icon-icon3"></span>
    163.                 <span>消息</span>
    164.             </a>
    165.         </li>
    166.         <li>
    167.             <a href="#" title="我的">
    168.                 <span class="cut-nav-icon-icon4"></span>
    169.                 <span>我的</span>
    170.             </a>
    171.         </li>
    172.         <li>
    173.             <a href="#" title="签到">
    174.                 <span class="cut-nav-icon-icon5"></span>
    175.                 <span>签到</span>
    176.             </a>
    177.         </li>
    178.     </ul>
    179. </body>
    180. </html>
    1. body {
    2.     max-width: 540px;
    3.     min-width: 320px;
    4.     margin: 0 auto;
    5.     font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"MicrosoftYahei",STXihei,hei;
    6.     color: #000;
    7.     background: #f2f2f2;
    8.     /* 永远不会出现水平滚动条 */
    9.     overflow-x: hidden;
    10.     /* 防止出现高亮 */
    11.     -webkit-tap-highlight-color: transparent;
    12.     height: 2000px;
    13. }
    14. a{
    15.     text-decoration: none;
    16.     color: #222;
    17. }
    18. div{
    19.     box-sizing: border-box;
    20. }
    21. ul{
    22.     list-style: none;
    23.     margin: 0;
    24.     padding: 0;
    25. }
    26. /* 搜索模块 */
    27. .search-index{
    28.     display: flex;
    29.     /* 固定定位跟父级没有关系 它以屏幕为准 */
    30.     position: fixed;
    31.     top: 0;
    32.     left: 50%;
    33.     transform: translateX(-50%);
    34.     -webkit-transform: translateX(-50%);
    35.      /* 固定的比较特殊，要写宽度  跟页面同宽*/
    36.     width: 100%;
    37.     max-width: 540px;
    38.     min-width: 320px;
    39.     height: 44px;
    40.     /* background-color: pink; */
    41.     /*  margin: 0 auto; 无效的 因为已经写定位了 */
    42.     background: #F6F6F6;
    43.     border-top: 1px solid #ccc;
    44.     border-bottom: 1px solid #ccc;
    45. }
    46. .search{
    47.     position: relative;
    48.     height: 26px;
    49.     border: 1.8px solid #0086f6;
    50.     flex: 1;
    51.     font-size: 12px;
    52.     color: #666;
    53.     /* 上下是都有边框，但是在有边框情况，又是c3盒模型，
    54.     盒子做了自减，所以实际内容区域变小，原本26px的行高，
    55.     在24px的内容里装不下，字体下边空白行间距溢出，
    56.     所以看见字体偏下。传统盒模型就没有这个影响， */
    57.     line-height: 24px;
    58.     padding-left: 25px;
    59.     margin: 7px 10px;
    60.     border-radius: 5px;
    61.     /* 水平不要，垂直2px,模糊4px,颜色 */
    62.     box-shadow: 0 2px 4px rgba(0,0,0,.2);
    63. }
    64. .search::before{
    65.     content: "";
    66.     position: absolute;
    67.     top: 5px;
    68.     left: 5px;
    69.     width: 15px;
    70.     height: 15px;
    71.     background: url(../images/sprite.png) no-repeat -59px -279px;
    72.     background-size: 104px auto;
    73. }
    74. /* 老板的 */
    75. /* .user{
    76.     width: 44px;
    77.     height: 44px;
    78.     font-size: 12px;
    79.     text-align: center;
    80.     color: #2eaae0;
    81. }
    82. .user::before{
    83.     content: "";
    84.     display: block;
    85.     width: 23px;
    86.     height: 23px;
    87.     background: url(../images/sprite.png) no-repeat -59px -194px;
    88.     background-size: 104px auto;
    89.     margin: 4px auto -2px;
    90. } */
    91. /* focus */
    92. .focus{
    93.     padding-top: 44px;
    94. }
    95. .focus img{
    96.     width: 100%;
    97. }
    98.  
    99. /* 局部导航栏 */
    100. .local-nav{
    101.     display: flex;
    102.     height: 64px;
    103.     margin: 3px 4px;
    104.     background-color: #fff;
    105.     border-radius: 7px;
    106.     box-shadow: 1px 1px rgba(0,0,0,.2);
    107. }
    108. .local-nav li{
    109.     flex: 1;
    110. }
    111. .local-nav a{
    112.     display: flex;
    113.     flex-direction: column;
    114.     /* 侧轴居中对齐，因为是单行 */
    115.     align-items: center;
    116.     font-size: 12px;
    117. }
    118. .local-nav li [class^="local-nav-icon"]{
    119.     width: 32px;
    120.     height: 32px;
    121.     background-color: pink;
    122.     margin-top: 8px;
    123.     background: url(../images/localnav_bg.png) no-repeat 0 0;
    124.     background-size: 32px auto;
    125. }
    126. .local-nav li .local-nav-icon-icon2{
    127.     background-position: 0 -32px;
    128. }
    129. .local-nav li .local-nav-icon-icon3{
    130.     background-position: 0 -64px;
    131. }
    132. .local-nav li .local-nav-icon-icon4{
    133.     background-position: 0 -96px;
    134. }
    135. .local-nav li .local-nav-icon-icon5{
    136.     background-position: 0 -128px;
    137. }
    138.  
    139. /* nav */
    140. nav{
    141.     /* 因为我们给了nav设置了小圆角 nav下面的li也设置了 */
    142.     overflow: hidden;
    143.     border-radius: 8px;
    144.     margin: 0 4px 3px;
    145.     
    146. }
    147. .nav-common{
    148.     display: flex;
    149.     height: 88px;
    150.     /* background-color: pink; */
    151. }
    152. .nav-items{
    153.     /* 不冲突 */
    154.     flex:1;
    155.     display: flex;
    156.     flex-direction: column;
    157.    
    158. }
    159. .nav-items a{
    160.     flex: 1;
    161.     text-align: center;
    162.     line-height: 44px;
    163.     color: #fff;
    164.     font-size: 14px;
    165.     text-shadow: 1px 1px rgba(0,0,0,.2);
    166. }
    167. .nav-items a:nth-child(1){
    168.     border-bottom: 1px solid #fff;
    169. }
    170. .nav-common:nth-child(1) .nav-items:nth-child(1) a{
    171.     border: 0;
    172.     /* 靠低端对齐 */
    173.     background: url(../images/hotel.png) no-repeat bottom center;
    174.     /* 3倍图，要缩放成原来的3分之一 */
    175.     background-size: 121px auto;
    176. }
    177. .nav-common:nth-child(2) .nav-items:nth-child(1) a{
    178.     border: 0;
    179.     /* 靠低端对齐 */
    180.     background: url(../images/hotel.png) no-repeat bottom center;
    181.     /* 3倍图，要缩放成原来的3分之一 */
    182.     background-size: 121px auto;
    183. }
    184. .nav-common:nth-child(3) .nav-items:nth-child(1) a{
    185.     border: 0;
    186.     /* 靠低端对齐 */
    187.     background: url(../images/hotel.png) no-repeat bottom center;
    188.     /* 3倍图，要缩放成原来的3分之一 */
    189.     background-size: 121px auto;
    190. }
    191.  
    192. /* 选择前面俩个 */
    193. .nav-items:nth-child(-n+2){
    194.     border-right:1px solid #fff ;
    195. }
    196. .nav-common:nth-child(2){
    197.     margin: 3px 0 ;
    198. }
    199. .nav-common:nth-child(1){
    200.     background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
    201. }
    202. .nav-common:nth-child(2){
    203.     background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
    204. }
    205. .nav-common:nth-child(3){
    206.     background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
    207. }
    208.  
    209. /* subnav-entry */
    210. .subnav-entry{
    211.     border-radius: 8px;
    212.     background-color: #fff;
    213.     margin: 0 4px;
    214.     display: flex;
    215.     flex-wrap: wrap;
    216.     padding: 5px 0;
    217.     
    218. }
    219. .subnav-entry li{
    220.     /* 里面的子盒子可以写%相对于父级来说的 */
    221.     flex: 20%;
    222. }
    223. .subnav-entry a{
    224.     display: flex;
    225.     flex-direction: column;
    226.     align-items: center;
    227. }
    228. .subnav-entry-icon{
    229.     width: 28px;
    230.     height: 28px;
    231.     background-color: pink;
    232.     margin-top: 4px;
    233.     background: url(../images/subnav-bg.png) no-repeat 0px -96px;
    234.     background-size: 28px auto;
    235. }
    236. /* sales-box */
    237. .sales-box{
    238.     border-top: 1px solid #bbb;
    239.     background-color: #fff;
    240.     margin: 4px;
    241. }
    242. .sales-hd{
    243.     position: relative;
    244.     height: 44px;
    245.     border-bottom: 1px solid #ccc;
    246. }
    247. /* SEO优化 */
    248. .sales-hd h2{
    249.     position: relative;
    250.     text-indent:-999px ;
    251.     overflow: hidden;
    252. }
    253. .sales-hd h2::after{
    254.     position: absolute;
    255.     top: 8px;
    256.     left: 20px;
    257.     content: "";
    258.     width: 79px;
    259.     height: 15px;
    260.     background:url(../images/hot.png) no-repeat 0 -20px;
    261.     background-size: 79px auto;
    262. }
    263. .more{
    264.     position: absolute;
    265.     right: 5px;
    266.     top: 0px;
    267.     background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
    268.     border-radius: 15px;
    269.     padding: 3px 20px 3px 10px; 
    270.     color: #fff;
    271. }
    272. .more::after{
    273.     content: "";
    274.     position: absolute;
    275.     top: 10px;
    276.     right: 9px;
    277.     width: 7px;
    278.     height: 7px;
    279.     border-top: 2px solid #fff;
    280.     border-right: 2px solid #fff;
    281.     transform: rotate(45deg);
    282. }
    283. .row{
    284.     display: flex;
    285. }
    286. .row a{
    287.     flex: 1;
    288.     border-bottom: 1px solid #eee;
    289. }
    290. .row a:nth-child(1){
    291.     border-right: 1px solid #eee;
    292. }
    293. .row a img{
    294.     width: 100%;
    295. }
    296. /* 切换 */
    297. .cut-nav{
    298.     display: flex;
    299.     /* 固定定位跟父级没有关系 它以屏幕为准 */
    300.     position: fixed;
    301.     bottom: 0;
    302.     left: 50%;
    303.     transform: translateX(-50%);
    304.     -webkit-transform: translateX(-50%);
    305.      /* 固定的比较特殊，要写宽度  跟页面同宽*/
    306.     width: 100%;
    307.     max-width: 540px;
    308.     min-width: 320px;
    309.     height: 44px;
    310.     background: #F6F6F6;
    311.     border-top: 1px solid #ccc;
    312.     border-bottom: 1px solid #ccc;
    313.     height: 64px;
    314. }
    315. .cut-nav li{
    316.     flex: 1;
    317. }
    318. .cut-nav a{
    319.     display: flex;
    320.     flex-direction: column;
    321.     /* 侧轴居中对齐，因为是单行 */
    322.     align-items: center;
    323.     font-size: 12px;
    324. }
    325. .cut-nav li [class^="cut-nav-icon"]{
    326.     width: 32px;
    327.     height: 32px;
    328.     margin-top: 8px;
    329.     background: url(../images/tabbar.png) no-repeat 0 0;
    330.     background-size: 32px auto;
    331. }
    332. .cut-nav li .cut-nav-icon-icon2{
    333.     background-position: 0 -32px;
    334. }
    335. .cut-nav li .cut-nav-icon-icon3{
    336.     background-position: 0 -64px;
    337. }
    338. .cut-nav li .cut-nav-icon-icon4{
    339.     background-position: 0 -96px;
    340. }
    341. .cut-nav li .cut-nav-icon-icon5{
    342.     background-position: 0 -128px;
    343. }

  • 相关阅读:
    第58节——redux-toolkit中的createAsyncThunk
    信息化发展52
    入门C++程序员需要怎么下手？
    兼容低版本浏览器方法 Babel
    【自考必看】《信息资源管理基础》信息资源管理基础，第1章，速通指南
    javascript二维数组(20)JSON对象
    物联网智能家居基本方法实现之经典
    【Python】Python 模式匹配与正则表达式
    python2
    SpringBoot国际化配置组件支持本地配置和数据库配置
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/128067374