移动开发day4_京东移动页面

复习

父项身上有哪些属性

可以设置主轴方向 fd flex-direction : row; column;
主轴子项的排列方式

j justify-content: flex-start;flex-end;center; sb space-between sd space-around
换行父项默认不会换行！！！！！ flex-wrap:wrap;
侧轴子项多行 align-content:
侧轴子项单行 align-items

子项身上有哪些属性

自己在侧轴上排列 align-self
之间的排列顺序 order
设置子项平分父项的宽度的比例 flex:1 ;

写静态页面的步骤携程

从上往下分析
从左往右分析
先写好一点大的布局的标签的结构加上注释
马上在 less中写好的对应样式的嵌套结构
定大的样式比如上下分层显示左右各种比例的样式
再去处理一些小的细节字体大小背景图片边框圆角颜色。。。

手机屏幕知识

逻辑分辨率

屏幕的宽度 * 屏幕的高度单位 px

设备分辨率

屏幕里面一共拥有的物理像素点的个数

物理像素点 - 屏幕显示图像的最小的单位

这个参数是硬件决定

屏幕大小一定的情况下，谁的设备分辨率=物理像素点越高，谁屏幕就越清晰

srcset属性

可以自动根据当前屏幕的清晰度去加载对应的图片

  <img src="./images/科比.png" srcset="./images/赵丽颖.png 2x ,./images/高圆圆.png 3x "    alt="">

PPI

单位英寸里面一共拥有的物理像素点

像素密度，外面卖手机的手机厂商看这个参数来表示手机屏幕的清晰度

值越大屏幕就越清晰

设备像素比

手机屏幕清晰度的倍数

视口

移动端的页面肯定是用到理想视口

布局视口

没有理想视口的代码段

html标签宽度被设置成了 980px
1. 手机厂商，大的pc端的页面放入到小手机屏幕上显示
2. 手机厂商把pc端的版心 980px 缩小，其他不管了
3. 在以前老的旧的pc端的网页的版心都小于等于980px
使用绝对长度写的div大小被缩放

理想视口

存在这个代码

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

以后只要是写移动web 一定要加上理想视口的代码

在vs code 中快速的敲出理想视口的代码

  <!-- meta:vp -->

标准的理想视口的代码

 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />

京东项目代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>手机京东</title>

  <link rel="stylesheet" href="./css/common.css">

  <link rel="stylesheet" href="./css/index.css">

</head>

<body>

  <!-- 头部内容 -->

  <header>

    <a href="#" class="logo">

      <i></i>

    </a>

    <div class="search">

      <input type="text" placeholder="全场8折,限时秒杀">

    </div>

    <a href="#" class="login">登录</a>

  </header>

  <!-- 轮播图内容 -->

   <div class="slide">

     <a href="#"><img src="./uploads/l1.jpg" alt=""></a>

   </div>

   <!-- 首页导航 -->

   <nav>

     <a href="#">

       <img src="./images/nav_1.png" alt="">

       <p>京东超市</p>

     </a>

     <a href="#">

       <img src="./images/nav_2.png" alt="">

       <p>全球购</p>

     </a>

     <a href="#">

       <img src="./images/nav_3.png" alt="">

       <p>充值中心</p>

     </a>

     <a href="#">

       <img src="./images/nav_4.png" alt="">

       <p>服装城</p>

     </a>

     <a href="#">

       <img src="./images/nav_5.png" alt="">

       <p>理财</p>

     </a>

     <a href="#">

       <img src="./images/nav_6.png" alt="">

       <p>领卷</p>

     </a>

     <a href="#">

       <img src="./images/nav_7.png" alt="">

       <p>物流查询</p>

     </a>

     <a href="#">

       <img src="./images/nav_8.png" alt="">

       <p>我的关注</p>

     </a>

   </nav>

  <!-- 掌上秒杀 -->

  <div class="hand">

    <div class="hand_title">

      <span class="hand_t_clock">

          ⏰

      </span>

      <span class="hand_t_kill">

        掌上秒杀

      </span>

      <div class="hand_t_timer">

        <span>0</span>

        <span>5</span>

        <span>:</span>

        <span>0</span>

        <span>0</span>

        <span>:</span>

        <span>0</span>

        <span>0</span>

      </div>

      <a class="hand_t_morekill">

        更多秒杀 >

      </a>

    </div>

    <div class="hand_content">

      <a href="#">

        <img src="./uploads/seckill_1.jpg" alt="">

        <span>热卖</span>

        <p>￥79</p>

        <del>￥139</del>

      </a>

      <a href="#">

          <img src="./uploads/seckill_2.jpg" alt="">

          <span>热卖</span>

          <p>￥79</p>

          <del>￥139</del>

        </a>

        <a href="#">

            <img src="./uploads/seckill_3.jpg" alt="">

            <span>热卖</span>

            <p>￥79</p>

            <del>￥139</del>

        </a>

    </div>

  </div>

  <!-- 活动内容 -->

  <!-- <div class="activity">

    <div class="activity_title">

      <img src="./uploads/banner_bg.jpg" alt="">

      <ul>

        <li><a href="#"><img src="./uploads/banner_1.jpg" alt=""></a></li>

        <li><a href="#"><img src="./uploads/banner_2.jpg" alt=""></a></li>

        <li><a href="#"><img src="./uploads/banner_3.jpg" alt=""></a></li>

      </ul>

    </div>

    <div class="activity_content"></div>

  </div> -->

  <div class="activity">

    <div class="activity_title">

      <img src="./uploads/banner_bg.jpg" alt="">

      <div class="acti_info clearfix">

        <a href="#"><img src="./uploads/banner_1.jpg" alt=""></a>

        <a href="#"><img src="./uploads/banner_2.jpg" alt=""></a>

        <a href="#"><img src="./uploads/banner_3.jpg" alt=""></a>

      </div>

    </div>

    <div class="activity_content">

      <a href="#"><img src="./uploads/major_1.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_2.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_3.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_4.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_5.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_6.jpg" alt=""></a>

      <a href="#"><img src="./uploads/major_7.jpg" alt=""></a>

    </div>

    <a href="#">

        <img src="./uploads/advert_1.jpg" alt="">

    </a>

  </div>

  <!-- 特色超市 -->

  <div class="market">

    <div class="market_title">特色超市</div>

    <div class="market_content clearfix">

      <a href="#"><img src="./uploads/market_1.jpg" alt=""></a>

      <a href="#"><img src="./uploads/market_2.jpg" alt=""></a>

      <a href="#"><img src="./uploads/market_3.jpg" alt=""></a>

      <a href="#"><img src="./uploads/market_4.jpg" alt=""></a>

      <a href="#"><img src="./uploads/market_5.jpg" alt=""></a>

    </div>

  </div>

  <a href="#">

    <img src="./uploads/advert_2.jpg" alt="">

  </a>

  <!-- 主题街 -->

  <div class="theme">

    <div class="theme_title">主题街</div>

    <div class="theme_content clearfix">

      <a href="#"><img src="./uploads/theme_1.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_2.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_3.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_4.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_5.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_6.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_7.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_8.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_9.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_10.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_11.jpg" alt=""></a>

      <a href="#"><img src="./uploads/theme_12.jpg" alt=""></a>

    </div>

  </div>

  <a href="#">

    <img src="./uploads/advert_3.jpg" alt="">

  </a>

  <!-- 品牌推荐 -->

  <div class="brand">

    <div class="brand_title">品牌推荐</div>

    <div class="brand_content">

      <a href="#"><img src="./uploads/brand_1.jpg" alt=""></a>

      <a href="#"><img src="./uploads/brand_2.jpg" alt=""></a>

      <a href="#"><img src="./uploads/brand_3.jpg" alt=""></a>

    </div>

  </div>

  <a href="#">

    <img src="./uploads/advert_4.jpg" alt="">

  </a>

  <!-- 猜你喜欢 -->

  <div class="guess">

    <div class="guess_title">

      <span>猜你喜欢</span>

      <a href="#">

        <img src="./images/icon-login.png" alt="">

        登陆后更懂你

      </a>

    </div>

    <div class="guess_content">

      <ul>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_1.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_2.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_3.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_4.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_5.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_6.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_7.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_8.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_9.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

        <li>

          <!-- 看相似 -->

          <div class="similarity">

            <span>￥999</span>

            <a href="#">看相似</a>

          </div>

          <!-- 商品详情 -->

          <a class="product_details">

            <img src="./uploads/item_10.jpg" alt="">

            <p>迪士尼（Disney）防水夜光儿童手表男孩蓝色米奇电子表 多功能运动表男童学生手表80008-1</p>

          </a>

        </li>

      </ul>

    </div>

  </div>

  <!-- 工具栏底部 -->

  <div class="bottom_tools">

    <!-- 点击加载更多 -->

    <a class="more title_info">点击加载更多</a>

    <!-- 登陆注册 -->

    <div class="register title_info">

      <a href="#">登录</a>

      <a href="#">注册</a>

      <a href="#">反馈</a>

      <a href="#">回到顶部</a>

    </div>

    <!-- 设备客户端 -->

    <div class="device title_info">

      <a href="#">

        <span></span>

        <p>客户端</p>

      </a>

      <a href="#">

        <span></span>

        <p>触屏版</p>

      </a>

      <a href="#">

        <span></span>

        <p>电脑版</p>

      </a>

    </div>

    <!-- 网站版权信息 -->

    <div class="copy_right title_info">

        Copyright © 2004-2016 京东JD.com 版权所有

    </div>

  </div>

  <!-- 网站底部 -->

  <footer>

    <a href="#"><img src="./images/index-icon.png" alt=""></a>

    <a href="#"><img src="./images/sort-icon.png" alt=""></a>

    <a href="#"><img src="./images/618-icon.png" alt=""></a>

    <a href="#"><img src="./images/cart-icon.png" alt=""></a>

    <a href="#"><img src="./images/center-icon.png" alt=""></a>

  </footer>

</body>

</html>

index.html

body {

  padding-bottom: 50px;

}

header {

  position: fixed;

  top: 0;

  left: 0;

  display: flex;

  background-color: #c91523;

  width: 100%;

  height: 40px;

  z-index: 100;

  .logo {

    width: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    i {

      width: 57px;

      height: 42px;

      background: url(../images/jd-sprites.png) no-repeat;

      background-size: 200px 200px;

      background-position: 0 -102px;

    }

  }

  .search {

    flex: 1;

    padding: 5px 0;

    position: relative;

    input {

      display: block;

      width: 100%;

      height: 100%;

      border-radius: 15px;

      padding-left: 40px;

    }

    &::before {

      content: "";

      display: block;

      position: absolute;

      width: 20px;

      height: 20px;

      background: url(../images/jd-sprites.png) no-repeat;

      background-size: 200px 200px;

      background-position: -58px -110px;

      left: 12px;

      top: 10px;

    }

  }

  .login {

    width: 50px;

    line-height: 40px;

    text-align: center;

    color: #fff;

  }

}

// 首页导航部分

nav {

  display: flex;

  // 让子项换行

  flex-wrap: wrap;

  a {

    width: 25%;

    text-align: center;

    padding: 6px 0;

    font-size: 15px;

    color: #666;

    img {

      width: 50%;

      // 注意：快级元素无法通过text-align:center进行居中 需要转成行内快

      display: inline-block;

    }

  }

}

// 掌上秒杀部分

.hand {

  .hand_title{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px;

    // background-color: pink;

    .hand_t_clock {

    }

    .hand_t_kill {

      font-size: 15px;

      color: red;

    }

    .hand_t_timer {

      span {

        background-color: black;

        color: #fff;

        font-size: 14px;

      }

      span:nth-child(3n) {

        background-color: #fff;

        color: #000;

      }

    }

    .hand_t_morekill {

      font-size: 14px;

    }

  }

  .hand_content{

    display: flex;

    text-align: center;

    a {

      position: relative;

      flex: 1;

      img{}

      span{

        position: absolute;

        right: 10%;

        top: 30%;

        background-color: red;

        border-radius: 50%;

        padding: 2px 10px;

        color: #fff;

      }

      p{

        font-size: 14px;

        color: #c91523;

      }

      del{

        font-size: 14px;

        color: #666;

      }

    }

  }

}

// 活动内容部分开始

// .activity {

//   .activity_title {

//    position: relative;

//    ul {

//      position: absolute;

//      bottom: 4px;

//      li {

//        float: left;

//        width: 50%;

//        img {

//          width: 95%;

//          margin: 0 auto;

//        }

//      }

//    }

//   }

// }

.activity {

  .activity_title {

    position: relative;

    .acti_info {

      position: absolute;

      // 让宽度继承屏幕的宽度

      width: 100%;

      bottom: 0;

      left: 0;

      a {

        float: left;

        width: 50%;

      }

    }

  }

  .activity_content {

    display: flex;

    flex-wrap: wrap;

    a {

      width: 50%;

    }

    a:nth-child(-n+3) {

      width: 30%;

    }

  }

}

// 特色超市内容

.market {

  .market_title {

    font-size: 14px;

    color: #c91523;

    font-weight: 700;

    font-size: 20px;

  }

  .market_content {

    a {

      width: 50%;

      float: left;

    }

    a:nth-child(2) {

      padding-bottom: 1px;

    }

  }

}

// 主题街

.theme {

  .theme_title {

    font-size: 14px;

    color: #c91523;

    font-weight: 700;

    font-size: 20px;

  }

  .theme_content {

    a:nth-child(-n+2) {

      width: 50%;

    }

    a:nth-child(2) {

      padding-bottom: 1px;

    }

    a {

      width: 25%;

      float: left;

    }

  }

}

// 品牌推荐

.brand {

  .brand_title{

    font-size: 14px;

    color: #c91523;

    font-weight: 700;

    font-size: 20px;

  }

  .brand_content{

    display: flex;

    a:nth-child(1) {

      flex: 4;

    }

    a:nth-last-child(-n+2) {

      flex: 3;

    }

  }

}

// 猜你喜欢

.guess {

  .guess_title {

    display: flex;

    justify-content: space-between;

    color: #c91523;

      a {

        img {

          display: inline-block;

          width: 18px;

          height: 18px;

          vertical-align: middle;

        }

      }

    }

  .guess_content {

    ul {

      display: flex;

      flex-wrap: wrap;

      li {

        width: 50%;

      }

    }

    .similarity{

      display: flex;

      justify-content: space-between;

      span {

        color: red;

      }

      a {

        color: #666;

        display: block;

        border: 1px solid #666;

      }

    }

    .product_details{

      img{

        width: 80%;

        margin: 0 auto;

      }

      p {

        height: 40px;

        font-size: 14px;

        overflow: hidden;

        border-bottom: 1px solid #000;

      }

    }

  }

}

.title_info {

  font-size: 14px;

  color: #666;

  padding:10px;

  border-bottom: 1px solid #666;

}

// 工具栏底部

.bottom_tools {

  text-align: center;

  .more{}

  .register{

    display: flex;

    a {

     flex: 1;

     border-right: 1px solid #666;

    }

    a:last-child {

      border-right: none;

    }

  }

  .device{

    display: flex;

    a {

      flex: 1;

      span {

        display: inline-block;

        width: 33px;

        height: 33px;

        // background-color: red;

        background-image: url(../images/jd-sprites.png);

        background-repeat: no-repeat;

        background-size: 200px 200px;

        background-position: -120px -70px;

      }

    }

    a:nth-child(2) span {

      background-position: -40px -70px;

    }

    a:nth-child(3) span {

      background-position: -80px -70px;

    }

  }

  .copy_right{

    border-bottom: none;

    padding: 20px 0;

  }

}

// 网站底部

footer {

  position: fixed;

  bottom: 0;

  left: 0;

  display: flex;

  width: 100%;

  height: 50px;

  background-color: #fff;

  a {

    flex: 1;

    img {

      width: 64px;

      height: 50px;

      margin: 0 auto;

    }

  }

}

index.less

提示：less是CSS的解析器，在这个文件里面写CSS代码，less会自动解析成CSS文件，vscode的同学需要安装Easy LESS插件。

页面效果：

这个项目还是很练手的，写了一整天才写出来，个别功能的思路还不是特别清除，还是要多写几遍，理清楚思路，熟能生巧；

昨天放假，我用笔记本玩了一天的GTA5，从前天晚上8点一直玩到早上9点，任务做了一半，睡到晚上起床发现同学们都把京东写完了，我压力很大，晚上11点开始写，写到3点多只写了一半，今天早上咬牙把下了3天的GTA5卸载了，不能再玩了，2W都交了，再浪费时间打游戏实在对不起父母。