整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML中的定位

          次我們來說一下,HTML網頁中的定位,有很多小伙伴一定好奇,為什么我們寫的代碼都是按順序羅列的而在網頁的展示效果中,我們的各種樣式,標簽,圖片等東西都是出現在網頁的各個位置,網頁看起來很美觀,各種盒模型擺放合理,這是因為在HTML中有定位的能力,今天我們就來學習一下。

          position在英語中是位置的意思,而在我們CSS代碼中position也是跟位置有關的,position有三個屬性值分別為relative(相對定位:相對于自己原來的位置進行定位,但保留自己原來的位置,別的元素無法占用),absolute(絕對定位:相對于有定位的父級進行定位,如果沒有則相對于文檔進行定位,定位會脫離文檔,不保留原來的位置,會和原來的文檔不在一個層),fixed(位置定位:他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告,他也會脫離文檔流)。

          我們說完了position,接下來我們就說說他是怎么進行定位的,我們有left,top,right,bottom,五個屬性分別對應 距左邊,距上邊,距右邊,距下邊,大家注意到我在每個方向前都加了個字,我們所做的定位是距各個方向的距離而不是移動,例:left:200px,是向右移動200像素,他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom,我們知道,滑輪是可以一直往下滑的,所以我們相對于底部定位的話就很困難。

          我們來通過代碼和結果來看一下:


          沒有定位的樣式


          加了relative


          加了relative的結果

          上面這個結果圖看著比例不太對是因為作者截圖沒截好[捂臉]

          我們可以看出貓圖片并沒有移動,而是給兔子圖片留著位置。


          加了absolute


          加了absolute的結果

          這個結果我們可以看出貓圖片向前移動了,并沒有保留兔子圖片原來的位置


          加了fixed

          代碼中的<br>是為了使滑輪可以滑動,以便更好的展示效果。

          <script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          用了fixed的效果展示。

          以上的代碼樣式只對兔子圖片起作用,我沒有給貓添加任何樣式,貓圖片只是作為參照物。

          SS 有兩個最重要的基本屬性,前端開發必須掌握:displayposition

          display屬性指定網頁的布局。兩個重要的布局,我已經介紹過了:彈性布局flex[1]和網格布局grid[2]

          本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀,幫助大家輕松掌握網頁定位,說清楚瀏覽器如何計算網頁元素的位置,尤其是新引進的sticky定位。

          本文由國內最大的在線教育平臺之一“騰訊課堂”[3]贊助。他們現在啟動了“騰訊課堂101計劃”[4],推廣平臺上的課程資源,有不少優質內容。希望提高前端技術水平的同學,可以留意一下本文結尾的免費課程信息。

          一、position 屬性的作用

          position屬性用來指定一個元素在網頁上的位置,一共有5種定位方式,即position屬性主要有五個值。

          ?static?relative?fixed?absolute?sticky

          下面就依次介紹這五個值。最后一個sticky是2017年瀏覽器才支持的,本文將重點介紹。

          二、static 屬性值

          staticposition屬性的默認值。如果省略position屬性,瀏覽器就認為該元素是static定位。

          這時,瀏覽器會按照源碼的順序,決定每個元素的位置,這稱為“正常的頁面流”(normal flow)。每個塊級元素占據自己的區塊(block),元素與元素之間不產生重疊,這個位置就是元素的默認位置。

          注意,static定位所導致的元素位置,是瀏覽器自主決定的,所以這時topbottomleftright這四個屬性無效。

          三、relative,absolute,fixed

          relativeabsolutefixed這三個屬性值有一個共同點,都是相對于某個基點的定位,不同之處僅僅在于基點不同。所以,只要理解了它們的基點是什么,就很容易掌握這三個屬性值。

          這三種定位都不會對其他元素的位置產生影響,因此元素之間可能產生重疊。

          3.1 relative 屬性值

          relative表示,相對于默認位置(即static時的位置)進行偏移,即定位基點是元素的默認位置。

          它必須搭配topbottomleftright這四個屬性一起使用,用來指定偏移的方向和距離。

          div { position: relative; top: 20px;}

          上面代碼中,div元素從默認位置向下偏移20px(即距離頂部20px)。

          3.2 absolute 屬性值

          absolute表示,相對于上級元素(一般是父元素)進行偏移,即定位基點是父元素。

          它有一個重要的限制條件:父元素不能是static定位,否則定位基點就會變成整個網頁的根元素html。另外,absolute定位也必須搭配topbottomleftright這四個屬性一起使用。

          /* HTML 代碼如下 <div id="father"> <div id="son"></div> </div>*/
          #father { positon: relative;}#son { position: absolute; top: 20px;}

          上面代碼中,父元素是relative定位,子元素是absolute定位,所以子元素的定位基點是父元素,相對于父元素的頂部向下偏移20px。如果父元素是static定位,上例的子元素就是距離網頁的頂部向下偏移20px

          注意,absolute定位的元素會被“正常頁面流”忽略,即在“正常頁面流”中,該元素所占空間為零,周邊元素不受影響。

          3.3 fixed 屬性值

          fixed表示,相對于視口(viewport,瀏覽器窗口)進行偏移,即定位基點是瀏覽器窗口。這會導致元素的位置不隨頁面滾動而變化,好像固定在網頁上一樣。

          它如果搭配topbottomleftright這四個屬性一起使用,表示元素的初始位置是基于視口計算的,否則初始位置就是元素的默認位置。

          div { position: fixed; top: 0;}

          上面代碼中,div元素始終在視口頂部,不隨網頁滾動而變化。

          四、sticky 屬性值

          sticky跟前面四個屬性值都不一樣,它會產生動態效果,很像relativefixed的結合:一些時候是relative定位(定位基點是自身默認位置),另一些時候自動變成fixed定位(定位基點是視口)。

          因此,它能夠形成“動態固定”的效果。比如,網頁的搜索工具欄,初始加載時在自己的默認位置(relative定位)。

          頁面向下滾動時,工具欄變成固定位置,始終停留在頁面頭部(fixed定位)。

          等到頁面重新向上滾動回到原位,工具欄也會回到默認位置。

          sticky生效的前提是,必須搭配topbottomleftright這四個屬性一起使用,不能省略,否則等同于relative定位,不產生“動態固定”的效果。原因是這四個屬性用來定義“偏移距離”,瀏覽器把它當作sticky的生效門檻。

          它的具體規則是,當頁面滾動,父元素開始脫離視口時(即部分不可見),只要與sticky元素的距離達到生效門檻,relative定位自動切換為fixed定位;等到父元素完全脫離視口時(即完全不可見),fixed定位自動切換回relative定位。

          請看下面的示例代碼。(注意,除了已被淘汰的 IE 以外,其他瀏覽器目前都支持sticky。但是,Safari 瀏覽器需要加上瀏覽器前綴-webkit-。)

          #toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 20px;}

          上面代碼中,頁面向下滾動時,#toolbar的父元素開始脫離視口,一旦視口的頂部與#toolbar的距離小于20px(門檻值),#toolbar就自動變為fixed定位,保持與視口頂部20px的距離。頁面繼續向下滾動,父元素徹底離開視口(即整個父元素完全不可見),#toolbar恢復成relative定位。

          五、 sticky 的應用

          sticky定位可以實現一些很有用的效果。除了上面提到“動態固定”效果,這里再介紹兩個。

          5.1 堆疊效果

          堆疊效果(stacking)指的是頁面滾動時,下方的元素覆蓋上方的元素。下面是一個圖片堆疊的例子,下方的圖片會隨著頁面滾動,覆蓋上方的圖片(查看 demo[5])。

          HTML 代碼就是幾張圖片。

          <div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

          CSS 代碼極其簡單,只要兩行。

          div { position: sticky; top: 0;}

          它的原理是頁面向下滾動時,每張圖片都會變成fixed定位,導致后一張圖片重疊在前一張圖片上面。詳細解釋可以看這里[6]

          5.2 表格的表頭鎖定

          大型表格滾動的時候,表頭始終固定,也可以用sticky實現(查看 demo[7])。

          CSS 代碼也很簡單。

          th { position: sticky; top: 0; }

          需要注意的是,sticky必須設在<th>元素上面,不能設在<thead><tr>元素,因為這兩個元素沒有relative定位,也就無法產生sticky效果。詳細解釋可以看這里[8]

          (正文完)

          免費前端全棧課程

          初學者剛接觸前端,往往會被一大堆技術名詞、框架和工具,搞得眼花繚亂。

          到底哪些技術是目前的主流技術棧,既能用于公司的開發實務,又能為自己的簡歷增添亮點?

          下面就是一套目前主流的前端技術棧。

          (1)Node.js:服務器端的 JavaScript 運行環境,不管哪種前端開發,都必不可少的底層環境。

          (2)Webpack:語法轉換工具,把 ES6/TypeScript/JSX 語法轉成瀏覽器可以運行的代碼。

          (3)Koa2:一個非常流行、簡潔強大的 Node.js 后端的 Web 開發框架。

          (4)MongoDB:目前應用最廣泛的非關系數據庫之一,功能豐富,用法較簡單。

          (5)Vue 全家桶:

          ?Vue:前端基礎框架?Vuex:配套的前端狀態管理庫。?Vue Router:官方的路由插件,構建單頁面應用必不可少。?Vue CLI:腳手架工具,幫你快速上手 Vue 開發,無需再花多余時間去實現項目架構。?Vant:有贊前端團隊開發的輕量級移動端 Vue 組件庫,讓你快速使用已經封裝好的各種頁面組件。

          看到這個名單,你是不是感到有點頭大,全部掌握它們需要多少時間啊?

          現在,騰訊課堂就有一門這樣的課程,內容包含了所有這些工具,教你怎么用它們從頭完成一個全棧項目,親手做出一個手機端的移動商城,是由 慕課網的精英講師--謝成老師講授

          該課程的制作單位是青盟科技。它是《騰訊課堂101計劃》重點推廣的優質機構,已有7年 IT 行業教學經驗,培養收費學員2000+,有超過72%的學員都進入到名企大廠。如果你想了解課程的詳細內容,獲取課程大綱,或者想接受系統的前端培訓,可以登錄騰訊課堂查看“青盟科技”。

          (完)

          References

          [1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

          [2]網格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

          [3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

          [4]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm

          [5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

          [6]這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

          [7]demo:https://jsbin.com/decemanohe/edit?html,css,output

          [8]這里:https://css-tricks.com/position-sticky-and-table-headers/

          什么需要定位?


          • 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,多用于橫向排列盒子.
          • 定位則可讓盒子自由地在某個盒子內移動或者固定屏幕某個位置,并且可以壓住其他盒子.

          定位組成

          定位:將盒子定在某一個位置

          定位=定位模式+邊偏移

          定位模式~>指定一個元素在文檔中的定位方式


          div {
                  /* 定位模式 值
                  static~>靜態定位 (默認方式) 無定位
                  relative~>相對定位 
                  absolute~>絕對定位 
                  fixed~>固定定位 */
                  position: static;
              }


          邊的偏移~>決定了該元素的最終位置


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                  div {
                      width: 200px;
                      height: 200px;
                      position: absolute;
                      /* 偏移方向:偏移距離 上 下 左 右 */
                      top: 100px;
                      bottom: 100px;
                      left: 100px;
                      right: 100px;
                      background-color: lightsteelblue;
                  }
              </style>
          </head>
          
          <body>
              <div>盒子A</div>
          </body>
          
          </html>


          相對定位 relative

          相對定位是元素在移動位置的時候,相當于它原來的位置

          特點:

          • 移動位置的時候參照點是自己原來的位置
          • 原來在標準流的位置繼續占有.后面盒子仍然以標準流的方式對于它

          實踐效果:

          代碼展示:


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                  div {
                      width: 200px;
                      height: 200px;
                      background-color: pink;
                  }
                  .Lazy {
                      position: relative;
                      top: 100px;
                      left: 100px;
                      background-color: lightsteelblue;
                  }
              </style>
          </head>
          
          <body>
              <div class="Lazy">懶羊羊</div>
              <div>喜羊羊</div>
          </body>
          
          </html>


          絕對定位 absolute

          絕對定位 是元素在移動位置的時候,是相對于它祖先的元素來說的

          特點:

          • 如果沒有祖先元素/祖先元素沒有定位,則以瀏覽器為準定位(Document文檔)
          • 絕對定位不再占有原先的位置
          • 如果祖先的元素有定位(相對 絕對 固定),則以最近一級有定位祖先為參考點移動位置

          實踐

          1.祖先元素無定位 以瀏覽器為基礎

          效果展示:


          代碼展示:


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                   .Pleasant {
                      float: right;
                      width: 400px;
                      height: 400px;
                      background-color: pink;
                  }
          
                  .small-bell {
                      position: absolute;
                      width: 200px;
                      height: 200px;
                      top: 50px;
                      left: 50px;
                      background-color: lightsteelblue;
                  }
              </style>
          </head>
          
          <body>
              <div class="Pleasant">
                  喜羊羊 
                  <div class="small-bell">鈴鐺</div>
              </div>
          
          </body>
          
          </html>

          2.祖先有定位 以上一級為基礎

          效果展示



          代碼展示

          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                  .sheep {
                    position: absolute;
                    background-color: sandybrown;
                    width: 600px;
                    height: 600px;
                  }
                  .Pleasant {
                      position: absolute;
                      bottom: 50px;
                      width: 400px;
                      height: 400px;
                      background-color: pink;
                  }
                  .small-bell {
                      position: absolute;
                      width: 200px;
                      height: 200px;
                      top: 50px;
                      left: 50px;
                      background-color: lightsteelblue;
                  }
              </style>
          </head>
          
          <body>
              <div class="sheep">
                  
                  <div class="Pleasant">
                      喜羊羊 
                      <div class="small-bell">鈴鐺</div>
                  </div>
              </div>
          
          </body>
          
          </html>


          子絕父相

          子級是絕對定位的話 父級要用相對定位

          使用原因:

          1. 子盒子絕對定位,不會占有位置,可以放到父盒子里面的任何一個地方,不影響其他兄弟盒子
          2. 父盒子需要加定位限制子盒子在父盒子內顯示
          3. 父盒子布局時,需要占有位置,因此父盒子只能相對定位

          總結:父級需要占用位置,則選相對定位.子盒子不需要占位置,則選擇絕對定位

          但是不是一成不變 按需求來開發 靈活變動

          實踐

          使用效果


          代碼展示

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
          </head>
          <style>
              .box {
                  height: 240px;
                  padding: 20px 5px;
                  border: 1px solid coral;
              }
              .goods {
                  position: relative;
                  width: 200px;
                  height: 200px;
              }
              .goods .hot {
                 position: absolute;
                 top: -7px;
                 right: -10px;
                 width: 25px;
              }
          </style>
          <body>
              <div class="box">
                  <div class="goods">
                      <img class="hot" src="img/hot.png" alt="">
                      <img src="img/thing.png" alt="">
                  </div>
              </div>
          </body>
          </html>

          固定定位 fixed

          固定定位是元素固定于瀏覽器可視區域的位置

          特點

          1.以瀏覽器的可視窗口為參照點移動元素(跟父元素沒有任何關系,不隨滾動條滾動)

          2.固定定位不再占有原先的位置

          大廠使用案例:


          實踐

          效果展示


          代碼展示


          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>fixed</title>
          </head>
          <style>
              .core {
                  width: 900px;
                  height: 1300px;
                  margin: 0 auto;
                  background-color: #11659a;
              }
              /* 固定標簽的基本用法 */
              .navigation {
                  position: fixed;
                  width: 900px;
                  height: 50px;
                  background-color: darkgoldenrod;
              }
              /* 小技巧 固定在版心右側位置 */
              /* 
              1.讓固定定位的盒子left:50% 走到瀏覽器可視區的一半位置 
              2.讓固定定位的盒子margin-left:版心寬度的一半距離(如此案例 900px寬度 一半450px 為了存在縫隙 可多些距離) 多走版心寬度的一半位置
              就實現讓固定定位的盒子貼著版心右側對齊了
              */
              .tag {
                 width: 50px;
                 height: 50px;
                 background-color: #12a182;
                 position: fixed;
                 top: 100px;
                 left: 50%;
                 margin-left: 455px;
              }
          </style>
          <body>
              <div class="core">
                  <div class="navigation"></div>
                  <div class="tag">TAG</div>
              </div>
          </body>
          </html>


          ?粘性定位 sticky

          粘性定位可以被認為是相對定位和固定定位的混合

          特點

          • 以瀏覽器的可視窗口為參照點移動元素
          • 占有原先的位置(相對定位的特點)
          • 必須添加top left right bottom 其中一個才有效
          • 跟頁面滾動搭配使用

          大廠使用案例:


          實踐

          使用效果:

          代碼展示:


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>fixed</title>
          </head>
          <style>
              .core {
                  width: 900px;
                  height: 1300px;
                  margin: 0 auto;
                  background-color: #11659a;
              }
          
              /* 固定標簽的基本用法 */
              .navigation {
                  position: sticky;
                  /* 必須存在一個偏移量 */
                  top: 0;
                  width: 900px;
                  height: 50px;
                  background-color: darkgoldenrod;
              }
          </style>
          
          <body>
              <div class="core">
                  <div class="navigation"></div>
                  <span>河邊蘆葦密又繁,秋深露水結成霜。意中之人在何處?就在河水那一方。</span>
                  <br>
                  <span> 逆著流水去找她,道路險阻又太長。順著流水去找她,仿佛在那水中央。</span>
                  <br>
                  <span>河邊蘆葦密又繁,清晨露水未曾干。意中之人在何處?就在河岸那一邊。</span>
                  <br>
                  <span>逆著流水去找她,道路險阻攀登難。順著流水去找她,仿佛就在水中灘。</span>
                  <br>
                  <span>河邊蘆葦密稠稠,早晨露水未全收。意中之人在何處?就在水邊那一頭。</span>
                  <br>
                  <span>逆著流水去找她,道路險阻曲難求。順著流水去找她,仿佛就在水中洲。</span>
              </div>
          </body>
          
          </html>

          定位小總結?

          定位模式

          是否脫標

          移動位置

          static(默認)

          不能使用邊偏移

          relative

          否(占有位置)

          相對于自身位置移動

          absolute

          是(不占有位置)

          帶有定位的父級

          fixed

          是(不占有位置)

          瀏覽器可視區

          sticky

          否(占有位置)

          瀏覽器可視區

          定位疊放次序 z-index

          在使用定位布局時,可能會出現盒子重疊的情況.

          可以使用z-index來控制盒子的前后次序 z軸

          • 數值可為正/負/0(無單位) 默認auto,數值越大,盒子越靠上
          • 如果屬性值相同,則按照書寫順序,后來居上
          • 只有定位盒子才有z-index屬性

          實踐

          效果展示




          代碼展示

          無z-index時


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
          </head>
          <style>
              div {
                  position: absolute;
                  width: 300px;
                  height: 300px;
              }
          
              div:nth-child(1) {
                  background-color: lightblue;
                  top: 50px;
                  left: 50px;
              }
          
              div:nth-child(2) {
                  background-color: lightpink;
                  top: 100px;
                  left: 100px;
              }
          
              div:nth-child(3) {
                  background-color: lightyellow;
                  top: 150px;
                  left: 150px;
              }
          </style>
          
          <body>
              <div>光頭強</div>
              <div>熊大</div>
              <div>熊二</div>
          </body>
          
          </html>

          有z-index時


          <!DOCTYPE html>
          <html lang="en">
          
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
          </head>
          <style>
              div {
                  position: absolute;
                  width: 300px;
                  height: 300px;
              }
          
              div:nth-child(1) {
                  background-color: lightblue;
                  top: 50px;
                  left: 50px;
                  /* 層級排上 */
                  z-index: 1;
              }
          
              div:nth-child(2) {
                  background-color: lightpink;
                  top: 100px;
                  left: 100px;
              }
          
              div:nth-child(3) {
                  background-color: lightyellow;
                  top: 150px;
                  left: 150px;
              }
          </style>
          
          <body>
              <div>光頭強</div>
              <div>熊大</div>
              <div>熊二</div>
          </body>
          
          </html>


          定位拓展

          1.絕對定位的盒子居中?

          加了絕對定位的盒子不能通過margin:0 auto水平居中,但是通過計算實現水平和垂直居中

          • left:50% 讓盒子的左側移動到父級元素的中心位置
          • margin-left:-1/2*元素寬度 讓盒子向左移動自身寬度的一半

          2.定位特殊特性

          • 行內元素添加絕對或者固定定位,可以直接設置高度和寬度
          • 塊級元素添加絕對或者固定定位,如果不給寬度或者高度,默認大小是內容的大小

          3.脫標的盒子不會觸發外邊距塌陷

          • 浮動元素,絕對定位(固定定位) 元素的都不會觸發外邊距合并的問題.

          外邊距塌陷:兩個嵌套關系的(父子關系)塊元素,當父元素有上外邊距或者沒有上外邊距(margin-top),子元素也有上外邊距的時候。兩個上外邊距會合成一個上外邊距,以相對較大的上外邊距值為準(下邊距一樣)。左右邊距不會出現這種問題

          4.絕對定位(固定定位)會完全壓住盒子

          • 絕對定位(固定定位)會壓住下面標準流所有的內容[包括文字 浮動不會壓住文字]

          主站蜘蛛池模板: 国产精品电影一区二区三区| 亚洲一区二区三区国产精品| 日韩一区二区三区精品| 亚洲熟女少妇一区二区| 日韩精品一区二区三区毛片| 精品无码av一区二区三区 | 精品乱子伦一区二区三区高清免费播放| 国产成人AV一区二区三区无码| 一区二区三区91| 无码精品蜜桃一区二区三区WW | 加勒比无码一区二区三区| 无码人妻精品一区二区三| 免费日本一区二区| 亚洲线精品一区二区三区影音先锋| 波多野结衣电影区一区二区三区 | 日韩人妻无码一区二区三区久久| 久久国产一区二区三区| 无码一区二区三区老色鬼| 国产成人一区二区三区视频免费 | 影院无码人妻精品一区二区| 亚洲中文字幕乱码一区| 中文字幕一区在线播放| 亚洲av无码一区二区三区观看| 亚洲人成网站18禁止一区 | 亚洲AV无码一区二区三区国产 | 久久国产精品免费一区二区三区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 一区二区三区在线观看视频| 视频一区二区三区在线观看| 一区二区国产精品| 中文字幕一区日韩在线视频| 三上悠亚日韩精品一区在线 | 无码aⅴ精品一区二区三区| 国产精品一区二区四区| 一区二区网站在线观看| 精品日产一区二区三区手机| 中文字幕在线一区二区在线| 亚洲欧洲精品一区二区三区| 成人区人妻精品一区二区三区 | 亚洲A∨精品一区二区三区下载| 在线观看一区二区精品视频|