移动开发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;
   100%;
  height: 40px;
  z-index: 100;
  .logo {
     70px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
       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;
       100%;
      height: 100%;
      border-radius: 15px;
      padding-left: 40px;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
       20px;
      height: 20px;
      background: url(../images/jd-sprites.png) no-repeat;
      background-size: 200px 200px;
      background-position: -58px -110px;
      left: 12px;
      top: 10px;
    }
  }
  .login {
     50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }
}

// 首页导航部分
nav {
  display: flex;
  // 让子项换行
  flex-wrap: wrap;
  a {
     25%;
    text-align: center;
    padding: 6px 0;
    font-size: 15px;
    color: #666;
    img {
       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;
//         50%;
//        img {
//           95%;
//          margin: 0 auto;
//        }
//      }
//    }
//   }
// }
.activity {
  .activity_title {
    position: relative;
    .acti_info {
      position: absolute;
      // 让宽度继承屏幕的宽度
       100%;
      bottom: 0;
      left: 0;
      a {
        float: left;
         50%;
      }
    }
  }
  .activity_content {
    display: flex;
    flex-wrap: wrap;
    a {
       50%;
    }
    a:nth-child(-n+3) {
       30%;
    }
  }
}

// 特色超市内容
.market {
  .market_title {
    font-size: 14px;
    color: #c91523;
    font-weight: 700;
    font-size: 20px;
  }
  .market_content {
    a {
       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) {
       50%;
    }
    a:nth-child(2) {
      padding-bottom: 1px;
    }
    a {
       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;
           18px;
          height: 18px;
          vertical-align: middle;
        }
      }
    }
  .guess_content {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
         50%;
      }
    }
    .similarity{
      display: flex;
      justify-content: space-between;
      span {
        color: red;
      }
      a {
        color: #666;
        display: block;
        border: 1px solid #666;
      }
    }
    .product_details{
      img{
         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;
         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;
   100%;
  height: 50px;
  background-color: #fff;
  a {
    flex: 1;
    img {
       64px;
      height: 50px;
      margin: 0 auto;
    }
  }
}

index.less

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

页面效果：

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

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

相关阅读:
使用eclipse从github导入maven项目
 J2SE 8的Lambda --- Comparator
J2SE 8的Lambda --- functions
J2SE 8的Lambda --- 语法
 J2SE 8的流库 --- 收集处理结果
 J2SE 8的流库 --- 转换流, 得到的还是流
 J2SE 8的流库 --- 基本类型流的使用
 J2SE 8的流库 --- 生成流
 Hadoop 3.0 安装
 程序员到底要不要读研，过来人给你几点建议！
原文地址：https://www.cnblogs.com/replaceroot/p/10663043.html