整合營銷服務商

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

          免費咨詢熱線:

          最詳細的html+css筆記(三)

          三部分 附錄(因為暫時不支持插入超鏈接所以部分內容無法顯示


          附錄一 DIV命名規范


          • 企業DIV使用頻率高的命名方法
          • 網頁內容類
          • 標題: title
          • 摘要: summary
          • 箭頭: arrow
          • 商標: label
          • 網站標志: logo
          • 轉角/圓角:corner
          • 橫幅廣告: banner
          • 子菜單: subMenu
          • 搜索: search
          • 搜索框: searchBox
          • 登錄: login
          • 登錄條:loginbar
          • 工具條: toolbar
          • 下拉: drop
          • 標簽頁: tab
          • 當前的: current
          • 列表: list
          • 滾動: scroll
          • 服務: service
          • 提示信息: msg
          • 熱點:hot
          • 新聞: news
          • 小技巧: tips
          • 下載: download
          • 欄目標題: title
          • 熱點: hot
          • 加入:joinus
          • 注冊: regsiter
          • 指南: guide
          • 友情鏈接: friendlink
          • 狀態: status
          • 版權: copyright
          • 按鈕: btn
          • 合作伙伴: partner
          • 投票: vote
          • 左右中:left right center


          • 注釋的寫法: /* Footer */ 內容區/* End Footer */
          • id的命名:
          • 頁面結構
          • 容器: container
          • 頁頭:header
          • 內容:content/container
          • 頁面主體:main
          • 頁尾:footer
          • 導航:nav
          • 側欄:sidebar
          • 欄目:column
          • 頁面外圍控制整體布局寬度:wrapper
          • 左右中:left right center

          • 導航
          • 導航:nav
          • 主導航:mainbav
          • 子導航:subnav
          • 頂導航:topnav
          • 邊導航:sidebar
          • 左導航:leftsidebar
          • 右導航:rightsidebar
          • 菜單:menu
          • 子菜單:submenu
          • 標題: title
          • 摘要: summary

          • 功能
          • 標志:logo
          • 廣告:banner
          • 登陸:login
          • 登錄條:loginbar
          • 注冊:regsiter
          • 搜索:search
          • 功能區:shop
          • 標題:title
          • 加入:joinus
          • 狀態:status
          • 按鈕:btn
          • 滾動:scroll
          • 標簽頁:tab
          • 文章列表:list
          • 提示信息:msg
          • 當前的:current
          • 小技巧:tips
          • 圖標: icon
          • 注釋:note
          • 指南:guild
          • 服務:service
          • 熱點:hot
          • 新聞:news
          • 下載:download
          • 投票:vote
          • 合作伙伴:partner
          • 友情鏈接:link
          • 版權:copyright

          • class的命名:
          • 顏色:使用顏色的名稱或者16進制代碼,如
          • .red { color: red; }
          • .f60 { color: #f60; }
          • .ff8600 { color: #ff8600; }
          • 字體大小,直接使用”font+字體大小”作為名稱,如
          • .font12px { font-size: 12px; }
          • .font9px {font-size: 9pt; }
          • 對齊樣式,使用對齊目標的英文名稱,如
          • .left { float:left; }
          • .bottom { float:bottom; }
          • 標題欄樣式,使用”類別+功能”的方式命名,如
          • .barnews { }
          • .barproduct { }

          • 注意事項::
          • 一律小寫;
          • 盡量用英文;
          • 不加中杠和下劃線;
          • 盡量不縮寫,除非一看就明白的單詞.


          • 推薦的 CSS 書寫順序:
          • 顯示屬性
          • display
          • list-style
          • position
          • float
          • clear
          • 自身屬性
          • width
          • height
          • margin
          • padding
          • border
          • background
          • 文本屬性
          • color
          • font
          • text-decoration
          • text-align
          • vertical-align
          • white-space
          • other text
          • content

          附錄二 CSS精靈


          • CSS精靈原理以及應用
          • CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中,從而減少你的網站的HTTP請求數量。
          • 該圖片使用CSS background和background-position屬性渲染,這也就意味著你的標簽變得更加復雜了,圖片是在CSS中定義,而非<img>標簽。
          • 一個簡單的例子:
          • 一張圖片作出一個按鈕的三個狀態
          • 一個鏈接用CSS做成按鈕的樣式,我們可以使用同一張圖片,完成按鈕的三個狀態,a:link,a:hover,a:active <a class="button" href="#">鏈接</a>
          • 加入右側的圖片為:200px 65px的三個按鈕圖拼合而成的圖片button.png,從上到下一次為按鈕的普通、鼠標滑過、鼠標點擊的狀態。則可以使用CSS進行定義。
          a {
           display:block; 
           width:200px; 
           height:65px; 
           line-height:65px; /*定義狀態*/
           text-indent:-2015px; /*隱藏文字*/
           background-image:url(button.png); /*定義背景圖片*/
           background-position:0 0;
           /*定義鏈接的普通狀態,此時圖像顯示的是頂上的部分*/
          }
          a:hover {
           background-position:0 -66px;
           /*定義鏈接的滑過狀態,此時顯示的為中間部分,向下取負值*/
          }
          a:active {
           background-position:0 -132px; 
           /*定 義鏈接的普通狀態,此時顯示的是底部的部分,向下取負值*/
          }
          
          • 更多的CSS雪碧,圖片更復雜,背景定位更精確。可能會用到大量的數值
          • 如:background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
          • 優點:
          • 減少加載網頁圖片時對服務器的請求次數
          • 可以合并多數背景圖片和小圖標,方便在任何位置使用,這樣不同位置的請求只需要調用一個圖片,從而減少對服務器的請求次數,降低服務器壓力,同時提高了頁面的加載速度,節約服務器的流量。
          • 提高頁面的加載速度
          • sprite技術的其中一個好處是圖片的加載時間(在有許多 sprite 時,單張圖片的加載時間)。由所需圖片拼成的一張 GIF圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF只有相關的一個色表,而單獨分割的每一張 GIF 都有自己的一個色表,這就增加了總體的大小。因此,單獨的一張 JPEG 或者 PNGsprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
          • 減少鼠標滑過的一些bug
          • IE6不會主動預加載鼠標滑過即a:hover中的背景圖片,所以,如果使用多張圖片,鼠標滑過會出現閃白的現象。使用CSS雪碧,由于一張圖片即可,所以不會出現這種現象。
          • 不足:
          • CSS雪碧的最大問題是內存使用
          • 影響瀏覽器的縮放功能
          • 拼圖維護比較麻煩
          • 使CSS的編寫變得困難
          • CSS 雪碧調用的圖片不能被打印
          • 錯誤得使用 Sprites 影響可訪問性

          附錄三 一些tips解決方案


          頁面優化實踐


          • 從下面的幾個方面可以進行頁面的優化:
          • 減少請求數
          • 圖片合并
          • CSS文件合并
          • 減少內聯樣式
          • 避免在 CSS中使用 import
          • 減少文件大小
          • 選擇適合的圖片格式
          • 圖片壓縮
          • CSS 值縮寫(Shorthand Property)
          • 文件壓縮
          • 頁面性能
          • 調整文件加載順序
          • 減少標簽數量
          • 調整選擇器長度
          • 盡量使用CSS 制作顯示表現
          • 增強代碼可讀性與可維護性
          • 規范化
          • 語義化
          • 模塊化

          寫DIV+CSS 的一些常識


          • 不要使用過小的圖片做背景平鋪
          • 這就是為何很多人都不用 1px 的原因,這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域,需要 200200=40, 000 次,占用資源
          • 無邊框
          • 推薦的寫法是 border:none;,哈哈,我一直在用這個。 border:0; 只是定義邊框寬度為零,但邊框樣式、顏色還是會被瀏覽器解析,占用資源
          • 慎用 通配符
          • 所謂通配符,就是將CSS 中的所有標簽均初始化,不管用的不用的,過時的先進的,一視同仁,這樣,大大的占用資源。要有選擇的初始化標簽。
          • CSS的十六進制顏色代碼縮寫
          • 習慣了縮寫及小寫,這才知道,原來不是推薦的寫法,為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣,有待仔細考證。
          • 樣式放頭上,腳本放腳下。不內嵌,只外鏈
          • 堅決不用 CSS表達式
          • 使用 引用樣式表,而不是通過@import 導入。
          • 一般來說,PNG比 GIF 要小,小得多。再者,GIF 中有多少顏色是被浪費的,很值得優化。
          • 千萬不要在 HTML中縮放圖片,一者不好看,二者占資源。
          • 正文字體最好用偶數
          • 12px、14px、16px,效果非常好。特例,15px。
          • block、ul、ol等上下留出至少一倍行距,左側至少兩倍行距,右側隨意。
          • 段落之間,至少要有一倍行距
          • 強行指定某些元素的 line-height,正文 1.6倍于文字大小,標題1.3倍。
          • 中文標點用全角
          • 英文夾雜在中文中,左右空格,半角。
          • 中文字體的粗體和斜體,遠離較好

          常用代碼片段


          • 雅虎工程師提供的CSS初始化示例代碼【僅供參考】
          • 可以在html頭文件中直接引用,從而避免瀏覽器的不兼容帶來的錯誤。
          body,
          div,
          dl,
          dt,
          dd,
          ul,
          ol,
          li,
          h1,
          h2,
          h3,
          h4,
          h5,
          h6,
          pre,
          code,
          form,
          fieldset,
          legend,
          input,
          button,
          textarea,
          p,
          blockquote,
          th,
          td { 
           margin:0; padding:0; 
          }
          body {
           background:#fff; 
           color:#555; 
           font-size:14px; 
           font-family: Verdana, Arial, Helvetica, sans-serif; 
          }
          td,
          th,
          caption { 
           font-size:14px;
          }
          h1, 
          h2, 
          h3, 
          h4, 
          h5, 
          h6 { 
           font-weight:normal; 
           font-size:100%; 
          }
          address, 
          caption,
          cite, 
          code, 
          dfn, 
          em, 
          strong,
          th, 
          var { 
           font-style:normal; 
           font-weight:normal;
          }
          a { 
           color:#555; 
           text-decoration:none; 
          }
          a:hover { 
           text-decoration:underline; 
          }
          img {
           border:none;
          }
          ol,ul,li { 
           list-style:none; 
          }
          input, 
          textarea, 
          select, 
          button { 
           font:14px Verdana,Helvetica,Arial,sans-serif; 
          }
          table { 
           border-collapse:collapse; 
          }
          html {
           overflow-y: scroll;
          } 
          .clearfix:after {
           content: "."; 
           display: block; 
           height:0; 
           clear:both; 
           visibility: hidden;
          }
          .clearfix { 
           *zoom:1; 
          }
          
          • mobile meta標簽
          <meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
          
          • 表格不被撐開
          table-layout: fixed; word-break: break-all;;border-collapse: collapse
          
          • 不設寬高居中
          <div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
           <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
           <input type=”button” value=”item1″ />
           </span>
          </div>
          
          • 透明度的兼容代碼
          filter:alpha(opacity=50); /*1-100*/
          -moz-opacity:0.5; /*0-1.0*/
          -khtml-opacity:0.5; /*0-1.0*/
          opacity:0.5; /*0-1.0*/
          
          • 文字溢出點點省略
          white-space:nowrap;
          text-overflow:ellipsis;
          overflow:hidden;
          
          • 清除浮動的幾種方法
          • 方法一:投機取巧法 – 不推薦
          • 直接一個放到當作最后一個子標簽放到父標簽那兒,此方法屢試不爽,兼容性強
          • 方法二:overflow + zoom方法 –不推薦
          • .fix{overflow:hidden; zoom:1;}
          • 此方法優點在于代碼簡潔,涵蓋所有瀏覽器
          • 方法三:after + zoom方法 -推薦–此方法可以說是綜合起來最好的方法了
          • clearfix只應用在包含浮動子元素的父級元素上
          .fix{zoom:1;}
          .fix:after{
           display:block; 
           content:'clear'; 
           clear:both;
           line-height:0; 
           visibility:hidden;
          }
          
          • 更多代碼片段詳情
          • 實用的60個CSS代碼片段

          一些總結


          • 自動繼承屬性:
          • color
          • font
          • text-align
          • list-style
          • 非繼承屬性:
          • background
          • border
          • position
          • 具有破壞性的元素:
          • float
          • display:none;
          • position:absoblute/fixed/sticky;
          • 具有包裹性的元素:
          • display:inline-block/table-cell
          • position:absolute/fixed/sticky
          • overflow:hidden/scroll
          • 消除圖片底部間隙的方法
          • 圖片塊狀化-無基線對齊
          • img{display:block;}
          • 圖片底線對齊
          • img{vertical-align:bottom;}
          • 行高足夠小 - 基線位置上移
          • .box{line-height:0;}

          一些概念


          • BFC
          • BFC全稱”Block Formatting Context” 中文為“塊級格式化上下文”
          • 記住這么一句話:BFC元素特性表現原則就是,內部子元素再怎么翻江倒海,翻云覆雨都不會影響外部的元素
          • BFC就是頁面上的一個隔離的獨立容器,容器里面的子元素不會影響到外面的元素。反之也如此
          • 優雅降級(graceful degradation)
          • 一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容
          • 漸進增強 progressive enhancement:
          • 是在瀏覽器開啟JavaScript功能后,如果瀏覽器版本不支持某些 JavaScript 能力,我們解決這種問題的方式
          • 平穩退化
          • 是在瀏覽器沒有JavaScript功能,或沒有開啟JavaScript功能情況下,我們解決這種問題的方式;

          學習從來不是一個人的事情,要有個相互監督的伙伴,想要學習或交流前端問題的小伙伴可以私信“學習”小明加群獲取2019web前端最新入門資料,一起學習,一起成長!

          過CSS背景屬性,可以給頁面元素添加背景樣式。

          背景屬性可設置背景顏色背景圖片背景平鋪背景圖片位置背景圖像固定等。

          背景顏色

          background-color:rgb值或顏色單詞;

          默認背景顏色值為transparent(透明)。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>背景屬性</title>
              <style>
                  div {
                      width: 300px;
                      height: 300px;
                      border: 1px solid;
                  }
                  /* 背景顏色 */
                  .bg-color {
                      background-color: transparent;
                  }
                  .bg-color-trans {
                      text-align: center;
                      background-color: pink;
                      width: 100px;
                      height: 100px;
                      line-height: 100px;
                  }
              </style>
          </head>
          <body>
              <div class="bg-color">背景顏色
                  <div class="bg-color-trans">透明背景</div>
              </div>
          </body>
          </html>

          效果:

          背景圖片

          Background-image:圖片路徑URL;

          默認背景圖片值為none。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>背景屬性</title>
              <style>
                  div {
                      width: 300px;
                      height: 300px;
                      border: 1px solid;
                  }
                  .bg-image {
                      background-image: url(../images/meitizhub.jpg);
                  }
              </style>
          </head>
          <body>
              
              <div class="bg-image">背景圖片</div>
              
          </body>
          </html>

          效果:

          背景平鋪

          background-repeat:repeat | no-repeat | repeat-x | repeat-y

          background-repeat:repeat;

          默認情況下背景圖片狀態為平鋪,指的是圖片會從左向右且從上到下整個鋪滿盒子。

          background-repeat:no-repeat;

          關閉默認平鋪狀態,只在盒子左上角顯示一個完整的背景圖片。

          background-repeat:repeat-x;

          沿著x軸方向在盒子內最頂部橫向平鋪背景圖片。

          background-repeat:repeat-y;

          沿著y軸方向在盒子內最左側縱向平鋪背景圖片。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>背景屬性</title>
              <style>
                  div {
                      width: 300px;
                      height: 300px;
                      border: 1px solid;
                  }
                  .bg-repeat {
                      background-repeat: no-repeat;
                  }
              </style>
          </head>
          <body>
              <div class="bg-image">背景平鋪默認值</div>
              <div class="bg-image bg-repeat">背景不平鋪</div>
              <div class="bg-image bg-repeatx">x軸方向平鋪背景圖片</div>
              <div class="bg-image bg-repeaty">y軸方向平鋪背景圖片</div>
          </body>
          </html>

          效果:

          背景圖片位置

          background-position:x y;

          x軸和y軸的值可以是方位名詞或者精確數值都可。

          方位名詞:top、bottom、center、left、right。

          當屬性值使用方位名詞時如果只寫一個值,則第二個值默認為居中狀態。

          當屬性值使用精確數值時如果只寫一個值,則默認是x軸方向的值,y軸方向默認垂直居中。

          如果參數是方位詞和精確單位混合使用時,默認第一個值是x值,第二個是y值。

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>背景屬性</title>
              <style>
                  div {
                      width: 300px;
                      height: 300px;
                      border: 1px solid;
                  }
                  .bg-position {
                      background-repeat: no-repeat;
                      background-position: center top;
                  }
                  .bg-position2 {
                      background-repeat: no-repeat;
                      background-position: right;
                  }
                  .bg-position3 {
                      background-repeat: no-repeat;
                      background-position: 20px 50px;
                  }
                  .bg-position4 {
                      background-repeat: no-repeat;
                      background-position: 20px ;
                  }
                  .bg-position5 {
                      background-repeat: no-repeat;
                      background-position: 80px bottom ;
                  }
              </style>
          </head>
          <body>
              <div class="bg-image bg-position">背景圖片存放位置1</div>
              <div class="bg-image bg-position2">背景圖片存放位置,設置一個值</div>
              <div class="bg-image bg-position3">背景圖片存放位置精確單位值</div>
              <div class="bg-image bg-position4">背景圖片存放位置精確單位值</div>
              <div class="bg-image bg-position5">背景圖片存放位置混合使用</div>
          
          </body>
          </html>

          效果:

          背景圖像固定

          background-attachment:scroll | fixed;

          背景圖像在頁面的某一處固定不動或者隨頁面的其余部分滾動。可以制作視差滾動效果。

          background-attachment:scroll ;

          默認值,背景圖像固定在頁面上,隨著滾動條滾動而移動。

          background-attachment:fixed;

          背景圖像固定在某一區域,滾動條滑動時位置不變。

          body {
                      background-image: url(../images/43619545307190.png);
                      background-repeat: no-repeat;
                      background-position: center top;
                      background-attachment: fixed;
                  }

          背景屬性復合寫法

          background:背景顏色、背景圖片地址、背景平鋪、背景圖像滾動、背景圖片位置;

          沒有特定書寫順序,按需使用屬性。

          背景顏色半透明

          實現背景顏色半透明效果

          background:rgb(0,0,0, 0.3);

          最后一個參數是alpha透明度,取值范圍在0~1之間

          總結:

          屬性

          定義

          Background-color

          背景顏色

          Rgb值 | 十六進制 | 顏色英文單詞

          Background-image

          背景圖片

          Url(圖片路徑)

          Background-repeat

          背景平鋪

          Repeat | no-repeat |repeat-x |repeat-y

          Background-position

          背景固定

          x軸和y軸。方向名詞或者精確數值

          Background-attachment

          背景附著

          Scroll(固定在頁面上)|

          fixed(與滾動條固定)

          背景復合寫法

          代碼簡潔

          背景顏色、圖片地址、平鋪、

          滾動、位置。

          背景顏色半透明

          顯示效果

          Background:rgba(0,0,0,0~1)

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>登錄頁面</title>
              /*總體的樣式*/
              <style>
              	/*盒子樣式*/
                  #box{
                      width: 350px; //寬
                      height: 450px; //高
                      border: 1px solid black; //邊框
                      border-radius: 10px; //邊框弧度
                      font-family: 黑體; //字體
                      letter-spacing:8px; //段間距
                      word-spacing: 10px; //字間距
                      line-height: 40px; //行高
                      font-size: 18px; //字大小
                      padding: 20px; //內邊框
                  }
                  /*給'注冊'賦予樣式*/
                  .register{
                      width:280px ; //寬
                      height: 50px; //高
                      background-color: skyblue; //背景顏色
                      border-radius: 10px; //邊框弧度
          
                  }
                  /*將所有邊框都改變*/
                  *{
                      border-radius: 5px; 邊框弧度
                  }
                  /*使用class選擇器,賦予number寬高和邊框*/
                  .number{
                      width: 185px; //寬
                      height: 27px; //高
                      border-width: 1px; //邊框寬度
          
                  }
                  /*id選擇器*/
                  #two{
                      width: 55px; //寬
                      border-width: 1px; 邊框寬度
                  }
                  /*id選擇器*/
                  #phone{
                      width: 103px; //寬
                  }
                  /*class 選擇器*/
                  .boxs{
                      zoom: 75%; //清除浮動
                      color: darkgray; //顏色
                  }
                  /*class選擇器*/
                  .box_a{
                      width: 50px; //寬
                      height: 50px; //高
                      background-image: url("../image/04.jpg "); //背景圖片
                      background-repeat: no-repeat; // 是否平鋪
                      background-size: 50px 25px; //背景尺寸
                      position: relative; //定位 相對定位
                      left: 310px; //定位后左移
                      bottom: 32px; //定位后下移
          
                  }
              </style>
          </head>
          <body>
          <div id="box">
              <h1>請注冊</h1>
          <p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
          <form action="" method="post">
              <label for="name">用戶名</label>
              <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
              <label for="phone">手機號</label>
              <select name="" id="two" class="number">
              <optgroup>
                  <option style="" class="">+86</option>
              </optgroup>
              </select>
              <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
              <label for="mima">密?碼</label>
              <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
              <label for="mima">驗證碼</label>
              <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
              <div class="box_a"></div>
              <div class="boxs">
                  <input type="radio" id="" class="accept">閱讀并接受協議<br>
              </div>
              <input type="submit" value="注冊" class="register" >
          
              </form>
          </div>
          
          
          </body>
          </html>
          在這里插入圖片描述


          主站蜘蛛池模板: 无码人妻av一区二区三区蜜臀 | 亚洲av无码不卡一区二区三区| 青娱乐国产官网极品一区| 一区二区免费在线观看| 综合一区自拍亚洲综合图区| 91成人爽a毛片一区二区| 无码精品人妻一区| 加勒比精品久久一区二区三区| 99久久人妻精品免费一区| 日韩欧国产精品一区综合无码| 久久精品国产一区二区三区不卡| 国产精品一区二区无线| 国产麻豆媒一区一区二区三区 | 亚洲AV日韩AV一区二区三曲| 无码一区二区三区在线观看| 国产视频一区在线观看| 精品一区二区三区高清免费观看| 国产精品福利一区| 国产精品一区电影| 日韩少妇无码一区二区三区| 精品一区精品二区| 麻豆视传媒一区二区三区| 一区二区国产在线播放| 国产精品区AV一区二区| 久久无码一区二区三区少妇 | 国内精品视频一区二区八戒| 精品国产乱子伦一区二区三区| 精品日韩亚洲AV无码一区二区三区| 精品无码一区二区三区爱欲| 国产高清在线精品一区| 午夜爽爽性刺激一区二区视频| 色综合久久一区二区三区| 无码人妻一区二区三区免费视频| 免费一区二区无码视频在线播放 | 国产精品久久久久一区二区| 卡通动漫中文字幕第一区| 黄桃AV无码免费一区二区三区| 日本精品一区二区三区在线观看| 日韩精品无码一区二区三区免费| 91精品一区二区三区在线观看| 天天视频一区二区三区|