网络编程&移动端布局&笔记总结

傷城~ 2022-12-21 03:22 121阅读 0赞

### 网络编程&移动端布局&笔记总结 ###

*  1.移动端现状
 *   *  1.1内核
     *  1.2屏幕分辨率
     *  1.3谷歌浏览器
 *  2.viewport（视口）
 *   *  2.1定义
     *  2.2设置前
     *  2.3语法
 *  3.二倍图
 *   *  3.1物理像素点
     *  3.2屏幕分辨率
     *  3.3图片分辨率
     *   *  分析：
         *  问题：不同的屏幕下，显示的图片大小是不一样；
         *  目标：显示一样；
         *  解决：
         *  移动端：
     *  3.4二倍图由来
 *  4.移动端常见布局
 *   *  4.1单独制作移动端页面
     *  4.2响应式页面兼容移动端
     *  4.3方案
     *  4.4样式初始化-了解
 *  5.仿京东移动端布局代码
 *   *  5.1 HTML
     *  5.2 css
     *  5.3 效果展示

# 1.移动端现状 #

了解移动端浏览器的内核、屏幕分辨率的问题；

## 1.1内核 ##

国产主流手机浏览器，内核 Webkit。

## 1.2屏幕分辨率 ##

*  手机分辨率：碎片化太多
 *  Android：480x800, 480x854, 540x960, 720x1280，1080x1920 等
 *  iPhone：640x960, 640x1136, 750x1334, 1242x2208 等
 *  2K：手机分辨率

## 1.3谷歌浏览器 ##

*  是开发过程中的主要模拟手段；
 *  步骤：
    
     *  1.鼠标右键 检查 或 F12 控制器界面方向；
     *  2.选择 手机模式
     *  3.选择 手机类型及尺寸；调节适当的显示比例；
     *  4.点右键 查看 页面元素；

# 2.viewport（视口） #

视口：PC端的页面直接放入手机屏显示，不友好。内容原因没有设置viewport；

## 2.1定义 ##

*  视口：浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的；
 *  viewport就是为了解决上面问题；  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 1]

## 2.2设置前 ##

HTML默认为980px不是很合适；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 2]  
那么设置HTML宽度多少为合适呢？我们眼睛能看到的，屏幕的窗口多大，设置多大就合适

## 2.3语法 ##

*  默认：HTML980px；
 *  理想：手机屏幕多大，HTML就设置是多大；
 *  meta标签设置：

*  width=device-width：改变HTML默认的980px 为 屏幕的宽度；
 *  user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；
 *  initial-scale：初始化缩放比例；1.0：不缩放；
 *  maximum-scale：用户对页面的最大缩放比例；值：比例
 *  minimum-scale：用户对页面的最小缩放比例；值：比例

# 3.二倍图 #

## 3.1物理像素点 ##

*  指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光点。每个点可以发一个颜色，就是我们看到的画面。
 *  早期的屏幕，物理像素点都比较大，比如玩游戏的超级玛丽的画面的颗粒感很强：随着技术的进步，物理像素点会被做的越来越小；会被做小；

## 3.2屏幕分辨率 ##

*  屏幕分辨率：物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数，物理像素点有多少个；
 *  iPhone3和iPhone4是同一个屏幕尺寸下，比较分辨率：
 *  Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；从而达到更高的分辨率，并提高屏幕显示的细腻程度。
 *  物理像素点：越做越小；（iPhone4坑的宽度是iPhone3物理像素点的宽度一半）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 3]

## 3.3图片分辨率 ##

*  假设：有200\*200分辨率的图片，展示在宽度分别是320（iphone3）、640(iphone4)分辨率的手机上，展示的效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 4]

### 分析： ###

*  200\*200分辨率的图片：200个颜色发光点；
 *  一个物理像素点发一个颜色：屏幕都需要200个物理像素点；
 *  物理像素点的宽度大小：320（1）；640（0.5）；
 *  所以显示为上图。

### 问题：不同的屏幕下，显示的图片大小是不一样； ###

*  宽度：第2个是第1个的0.5倍；
 *  面积：第2个是第1个的1/4倍；

### 目标：显示一样； ###

### 解决： ###

*  物理像素点的宽度大小：i3（1）；i4（0.5）；
 *  物理像素点的数量：320（1 x 200=200长度）、640(0.5 x 400=200长度）；都是200长度，才能保证显示的大小一样；

### 移动端： ###

*  上面这个都是200长度到底如何设置呢？
 *  设置CSS 宽高200px后，会自动保证每个屏幕显示元素大小一样，
 *  **会自动算出不同屏幕下，背后需要提供物理像素点需要多少个。**
 *  针对上面，每个手机会自动算出要给图片准备200个物理像素点、400个物理像素点；

## 3.4二倍图由来 ##

*  开始：设置CSS像素200px宽，320分辨率（200）,640分辨率（400）；这样才显示一样；
 *  像针对640分辨率手机屏（iPhone4），要求设计给400\*400图，对应我们CSS设置200px,有二倍的关系；
 *  命名：
    
     *  xxxxx@2x.png：二倍图
     *  xxxxx@3x.png：三倍图

# 4.移动端常见布局 #

了解常见布局不同，针对业务需求选择不同的方案；实际开发过程中，都是混合使用，没有哪一种是绝对的单独使用；

## 4.1单独制作移动端页面 ##

*  流式布局 (百分比布局)
 *  flex弹性布局 (强列推荐)
 *  less+rem+媒体查询布局
 *  混合布局

## 4.2响应式页面兼容移动端 ##

*  媒体查询
 *  bootstrap

## 4.3方案 ##

*  单独制作：淘宝、京东、苏宁手机端都是单独制作的，流式、flex、rem布局、专门针对各种手机屏幕进行开发。
 *  响应式：三星电子官网。www.samsung.com/cn/ ；特点：可兼容PC 移动端，一个页面多个端适配显示；制作起来要考虑到兼容性的样式。
 *  选择：公司业务需求；

## 4.4样式初始化-了解 ##

*  国产移动浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
 *  normalize.css：大家以前自己写的base.css
    
     *  http://necolas.github.io/normalize.css/
     *  保护了有价值的默认值；
     *  修复了浏览器的bug；

# 5.仿京东移动端布局代码 #

## 5.1 HTML ##

<!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>JD_demo</title>
      <link rel="stylesheet" href="./css/normalize.css">
      <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
      
      <header>
        <div class="close">
          <img src="./images/close.png" alt="">
        </div>
        <div class="logo">
          <img src="./images/logo.png" alt="">
        </div>
        <div class="info">打开京东App，购物更轻松</div>
        <div class="open">立即打开</div>
      </header>
    
    
      
      <div class="search">
        <div class="left">
          <img src="./images/s-btn.png" alt="">
        </div>
        <div class="mid">
          <span class="jd"></span>
          <span class="fangda"></span>
        </div>
        <div class="right">登录</div>
      </div>
    
    
      
      <div class="banner">
        <a href="#">
          <img src="./upload/banner.dpg" alt="">
        </a>
      </div>
    
    
      
      <div class="shops">
        <a href="#">
          <img src="./upload/pic11.dpg" alt="">
        </a>
        <a href="#">
          <img src="./upload/pic22.dpg" alt="">
        </a>
        <a href="#">
          <img src="./upload/pic33.dpg" alt="">
        </a>
      </div>
    
    
      
      <nav>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
        <a href="#">
          <img src="./upload/nav1.webp" alt="">
          <span>京东超市</span>
        </a>
    
      </nav>
    
    
    
      
      <div class="news">
        <a href="#">
          <img src="./upload/new1.dpg" alt="">
        </a>
        <a href="#">
          <img src="./upload/new2.dpg" alt="">
        </a>
        <a href="#">
          <img src="./upload/new3.dpg" alt="">
        </a>
      </div>
    </body>
    
    </html>

## 5.2 css ##

index.css

body { 
      width: 100%;
      /* 限制 :市场约定，不能比320px 宽度*/
      min-width: 320px;
      /* 最大 :根据公司的业务 */
      max-width: 640px;
      margin: 0 auto;
      font-size: 14px;
      background-color: #ccc;
    }
    
    a { 
      text-decoration: none;
    }
    
    
    /* ------------------------------顶部栏 */
    
    header { 
      height: 45px;
    }
    
    header div { 
      float: left;
      height: 45px;
      background-color: #222;
      line-height: 45px;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }
    
    header div:nth-child(1) { 
      width: 8%;
    }
    
    header div:nth-child(1) img { 
      width: 10px;
    }
    
    header div:nth-child(2) { 
      width: 10%;
    }
    
    header div:nth-child(2) img { 
      width: 30px;
      vertical-align: middle;
    }
    
    header div:nth-child(3) { 
      width: 57%;
    }
    
    header div:nth-child(4) { 
      width: 25%;
      background-color: red;
    }
    
    
    /* ----------------------------------------search */
    
    .search { 
      height: 44px;
      /* 固定定位：宽度100%失效*/
      position: fixed;
      /* 固定定位，相对于当前屏幕的宽度 */
      width: 100%;
      /* 不受body 管理，但是要求search又要和body 一样 */
      /* 限制 :市场约定，不能比320px 宽度*/
      min-width: 320px;
      /* 最大 :根据公司的业务 */
      max-width: 640px;
      /* 解决塌陷问题 */
      overflow: hidden;
      /* background-color: #222; */
    }
    
    .search .left { 
      position: absolute;
      top: 0;
      left: 0;
      width: 40px;
      height: 44px;
    }
    
    .search .left img { 
      width: 20px;
      margin: 14px 0 0 15px;
    }
    
    .search .mid { 
      /* 不要指定宽度 */
      margin: 0 50px;
      margin-top: 7px;
      height: 30px;
      background-color: #fff;
      border-radius: 15px;
      position: relative;
    }
    
    .search .mid .jd { 
      width: 20px;
      height: 15px;
      background: url('../images/jd.png');
      /* 当前盒子*/
      background-size: 20px;
      position: absolute;
      top: 7px;
      left: 15px;
    }
    
    
    /* 小竖线 */
    
    .search .mid .jd::before { 
      content: "";
      position: absolute;
      top: 0;
      right: -5px;
      width: 1px;
      height: 15px;
      background-color: #ccc;
    }
    
    .search .mid .fangda { 
      width: 15px;
      height: 15px;
      background: url('../images/jd-sprites.png') no-repeat;
      background-position: -83px 0;
      background-size: 199px;
      position: absolute;
      top: 8px;
      left: 45px;
    }
    
    .search .right { 
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 44px;
      line-height: 44px;
      color: #fff;
    }
    
    
    /* ------------------------------- */
    
    .banner { }
    
    .banner a { }
    
    .banner a img { 
      width: 100%;
      display: block;
    }
    
    
    /* ----------------------------------- */
    
    .shops { 
      overflow: hidden;
    }
    
    .shops a { 
      float: left;
      width: 33.33%;
    }
    
    .shops a img { 
      width: 100%;
    }
    
    
    /* ---------------------------------nav */
    
    nav { 
      margin: 20px 0;
      overflow: hidden;
    }
    
    nav a { 
      float: left;
      width: 20%;
      text-align: center;
    }
    
    nav a img { 
      width: 40px;
      margin: 8px 0;
    }
    
    nav a span { 
      display: block;
      color: #666;
    }
    
    
    /* ---------------------------news */
    
    .news { }
    
    .news a { 
      float: left;
      width: 25%;
      box-sizing: border-box;
    }
    
    .news a:nth-child(1) { 
      width: 50%;
    }
    
    .news a img { 
      width: 100%;
    }
    
    .news a:nth-child(2), .news a:nth-child(3) { 
      border-left: 1px solid #ccc;
    }

normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
    
    /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */
    
    /* Document ========================================================================== */
    
    html { 
      font-family: sans-serif; /* 1 */
      line-height: 1.15; /* 2 */
      -ms-text-size-adjust: 100%; /* 3 */
      -webkit-text-size-adjust: 100%; /* 3 */
    }
    
    /* Sections ========================================================================== */
    
    /** * Remove the margin in all browsers (opinionated). */
    
    body { 
      margin: 0;
    }
    
    /** * Add the correct display in IE 9-. */
    
    article, aside, footer, header, nav, section { 
      display: block;
    }
    
    /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */
    
    h1 { 
      font-size: 2em;
      margin: 0.67em 0;
    }
    
    /* Grouping content ========================================================================== */
    
    /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */
    
    figcaption, figure, main {  /* 1 */
      display: block;
    }
    
    /** * Add the correct margin in IE 8. */
    
    figure { 
      margin: 1em 40px;
    }
    
    /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */
    
    hr { 
      box-sizing: content-box; /* 1 */
      height: 0; /* 1 */
      overflow: visible; /* 2 */
    }
    
    /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
    
    pre { 
      font-family: monospace, monospace; /* 1 */
      font-size: 1em; /* 2 */
    }
    
    /* Text-level semantics ========================================================================== */
    
    /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
    
    a { 
      background-color: transparent; /* 1 */
      -webkit-text-decoration-skip: objects; /* 2 */
    }
    
    /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */
    
    a:active, a:hover { 
      outline-width: 0;
    }
    
    /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
    
    abbr[title] { 
      border-bottom: none; /* 1 */
      text-decoration: underline; /* 2 */
      text-decoration: underline dotted; /* 2 */
    }
    
    /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
    
    b, strong { 
      font-weight: inherit;
    }
    
    /** * Add the correct font weight in Chrome, Edge, and Safari. */
    
    b, strong { 
      font-weight: bolder;
    }
    
    /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */
    
    code, kbd, samp { 
      font-family: monospace, monospace; /* 1 */
      font-size: 1em; /* 2 */
    }
    
    /** * Add the correct font style in Android 4.3-. */
    
    dfn { 
      font-style: italic;
    }
    
    /** * Add the correct background and color in IE 9-. */
    
    mark { 
      background-color: #ff0;
      color: #000;
    }
    
    /** * Add the correct font size in all browsers. */
    
    small { 
      font-size: 80%;
    }
    
    /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */
    
    sub, sup { 
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
    }
    
    sub { 
      bottom: -0.25em;
    }
    
    sup { 
      top: -0.5em;
    }
    
    /* Embedded content ========================================================================== */
    
    /** * Add the correct display in IE 9-. */
    
    audio, video { 
      display: inline-block;
    }
    
    /** * Add the correct display in iOS 4-7. */
    
    audio:not([controls]) { 
      display: none;
      height: 0;
    }
    
    /** * Remove the border on images inside links in IE 10-. */
    
    img { 
      border-style: none;
    }
    
    /** * Hide the overflow in IE. */
    
    svg:not(:root) { 
      overflow: hidden;
    }
    
    /* Forms ========================================================================== */
    
    /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */
    
    button, input, optgroup, select, textarea { 
      font-family: sans-serif; /* 1 */
      font-size: 100%; /* 1 */
      line-height: 1.15; /* 1 */
      margin: 0; /* 2 */
    }
    
    /** * Show the overflow in IE. * 1. Show the overflow in Edge. */
    
    button, input {  /* 1 */
      overflow: visible;
    }
    
    /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */
    
    button, select {  /* 1 */
      text-transform: none;
    }
    
    /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */
    
    button,
    html [type="button"], /* 1 */
    [type="reset"], [type="submit"] { 
      -webkit-appearance: button; /* 2 */
    }
    
    /** * Remove the inner border and padding in Firefox. */
    
    button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 
      border-style: none;
      padding: 0;
    }
    
    /** * Restore the focus styles unset by the previous rule. */
    
    button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { 
      outline: 1px dotted ButtonText;
    }
    
    /** * Change the border, margin, and padding in all browsers (opinionated). */
    
    fieldset { 
      border: 1px solid #c0c0c0;
      margin: 0 2px;
      padding: 0.35em 0.625em 0.75em;
    }
    
    /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */
    
    legend { 
      box-sizing: border-box; /* 1 */
      color: inherit; /* 2 */
      display: table; /* 1 */
      max-width: 100%; /* 1 */
      padding: 0; /* 3 */
      white-space: normal; /* 1 */
    }
    
    /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
    
    progress { 
      display: inline-block; /* 1 */
      vertical-align: baseline; /* 2 */
    }
    
    /** * Remove the default vertical scrollbar in IE. */
    
    textarea { 
      overflow: auto;
    }
    
    /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */
    
    [type="checkbox"], [type="radio"] { 
      box-sizing: border-box; /* 1 */
      padding: 0; /* 2 */
    }
    
    /** * Correct the cursor style of increment and decrement buttons in Chrome. */
    
    [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 
      height: auto;
    }
    
    /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */
    
    [type="search"] { 
      -webkit-appearance: textfield; /* 1 */
      outline-offset: -2px; /* 2 */
    }
    
    /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
    
    [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { 
      -webkit-appearance: none;
    }
    
    /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */
    
    ::-webkit-file-upload-button { 
      -webkit-appearance: button; /* 1 */
      font: inherit; /* 2 */
    }
    
    /* Interactive ========================================================================== */
    
    /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */
    
    details, /* 1 */
    menu { 
      display: block;
    }
    
    /* * Add the correct display in all browsers. */
    
    summary { 
      display: list-item;
    }
    
    /* Scripting ========================================================================== */
    
    /** * Add the correct display in IE 9-. */
    
    canvas { 
      display: inline-block;
    }
    
    /** * Add the correct display in IE. */
    
    template { 
      display: none;
    }
    
    /* Hidden ========================================================================== */
    
    /** * Add the correct display in IE 10-. */
    
    [hidden] { 
      display: none;
    }

## 5.3 效果展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/804d7740ed3d4d2e9cef89a3eb17dfad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/87f2eac511264cc68028a5dd24c7be5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/2959f7cb7efb4b5c8bf018042f6002f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/85c3cab46fd74a60b416384dba604db4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/2e9682fad5174d489458611bee3a8963.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/d2b8f01ef9e94ad3a50d11e5ed6d41db.png