整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          CSS 這些你冷落的屬性,其實(shí)很好用能極大提升效率

          個成功的Web App必須有良好的用戶體驗(yàn)。當(dāng)我們談及改善用戶體驗(yàn)時,你會想到什么?

          其實(shí),有一點(diǎn)是很容易被開發(fā)者忽視的,那就是CSS。我們可以使用一些CSS技巧來改善網(wǎng)頁的表現(xiàn)形式、交互細(xì)節(jié)和可訪問性。

          而且這些技巧不需要花費(fèi)太多時間,也不需要消耗服務(wù)器資源。你只需要花兩個小時學(xué)習(xí),然后就可以把它應(yīng)用到你所有的項(xiàng)目中,并永遠(yuǎn)改善用戶體驗(yàn)。

          可點(diǎn)擊區(qū)域

          有時你的按鈕很小,這可能導(dǎo)致用戶無法準(zhǔn)確點(diǎn)擊按鈕。這種現(xiàn)象經(jīng)常發(fā)生在移動端上。如果用戶點(diǎn)擊次數(shù)太多,沒有點(diǎn)擊他們想要的按鈕,或者點(diǎn)擊錯誤的按鈕,會讓他們感到非常沮喪。

          那么,如何解決這個問題呢?有些開發(fā)者可能會說:把按鈕做大點(diǎn)。

          但網(wǎng)頁中元素的大小往往是固定的,我們不能輕易調(diào)整一個元素的大小。而且如果按鈕太大,感覺很奇怪。

          一個更好的解決方案是在不改變按鈕原始尺寸的情況下增加其可點(diǎn)擊區(qū)域。具體來說:我們可以使用偽元素來增加一個元素的可點(diǎn)擊區(qū)域。

          例如,這里有一個按鈕。

          <button id="btn">btn</button>
          

          然后我們可以為它添加一個偽類。

          #btn::before {
            content: "";
            position: absolute;
            top: -20px;
            right: -20px;
            bottom: -20px;
            left: -20px;
          }
          

          這時,如果我們點(diǎn)擊按鈕周圍的區(qū)域,我們?nèi)匀豢梢杂|發(fā)按鈕的點(diǎn)擊事件。

          事例地址:

          https://codepen.io/bytefishmedium/pen/rNYNoRX

          平滑滾動

          當(dāng)頁面被#鏈接滾動時,默認(rèn)效果是這樣的。

          這種突然的跳躍會讓人感到不舒服。為了解決這個問題,我們可以使用這個CSS樣式:sroll-behavior: smooth

          事例地址:https://codepen.io/bytefishmedium/pen/NWwWoKL

          選擇所有文本

          我們的網(wǎng)頁經(jīng)常需要提供一些內(nèi)容供用戶選擇,如電話號碼、地址、標(biāo)題等。而這些文字應(yīng)該是一個整體,我們希望當(dāng)用戶點(diǎn)擊部分文字時,剩余的文字會被自動選擇。

          要實(shí)現(xiàn)這種效果非常簡單,只需使用這個CSS樣式:user-select: all 。用戶選擇的CSS屬性控制用戶是否可以選擇文本。如果它的值是 all,意味著一個元素的所有內(nèi)容都將被原子化地選擇。

          事例地址:https://codepen.io/bytefishmedium/pen/xxPxMZO

          如果你想在文本被選中后添加一些額外的樣式,你可以使用::selection::selection CSS偽元素將樣式應(yīng)用于文檔中被用戶突出顯示的部分(比如在文本上點(diǎn)擊和拖動鼠標(biāo))。

          但要記住。只有某些CSS屬性可以和::selection一起使用。

          • color
          • background-color
          • text-decoration 及其相關(guān)屬性
          • text-shadow
          • stroke-color, fill-colorstroke-width

          事例地址:https://codepen.io/bytefishmedium/pen/gOXOqMz

          Cursor

          在不同的場景下使用不同的鼠標(biāo)樣式可以幫助讀者感知頁面的當(dāng)前狀態(tài),從而改善用戶的互動體驗(yàn)。

          cursor CSS屬性設(shè)置鼠標(biāo)指針在一個元素上時要顯示的鼠標(biāo)指針(如果有的話)。

          光標(biāo)設(shè)置應(yīng)該告知用戶在當(dāng)前位置可以進(jìn)行的鼠標(biāo)操作,包括文本選擇、激活幫助或上下文菜單、復(fù)制內(nèi)容、調(diào)整表格大小,等等。你可以用一個關(guān)鍵詞來指定光標(biāo)的類型,或者加載一個特定的圖標(biāo)來使用(有可選的回退圖像和強(qiáng)制性的關(guān)鍵詞作為最后的回退)。

          例如:

          事例地址:https://codepen.io/bytefishmedium/pen/bGYGzRz

          有很多光標(biāo)樣式,你可以在MDN文檔中找到它們。

          Text Overflow

          現(xiàn)在我們來看看 text-overflow 的問題。如果一個文本容器的內(nèi)容是從服務(wù)器返回的,或者是由用戶輸入的,那么就很難預(yù)測這個文本會有多長。

          如果沒有任何預(yù)防措施,你可能會寫出這樣的代碼。

          <head>
            <style>
              .container{
                border: 2px solid red;
                width: 200px;
                height: 60px;
              }
            </style>
          </head>
          <body>
            <div class="container">
              <div class="username">bytefish</div>
              <p class="profile">FE, UX Designer</p>
            </div>
          </body>
          

          這個容器有一個固定的寬度和高度,包裹著名字和介紹。

          但如果有些用戶的簡介太長,就會導(dǎo)致文本溢出容器,使頁面看起來很糟糕。

          在這一點(diǎn)上,我們可以將溢出的文本折疊起來。做到這一點(diǎn)就像添加三行CSS樣式一樣簡單。

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          

          white-space: nowrap; 可以使文本不被包起來。然后我們使用overflow: hidden來隱藏溢出的文本。最后,我們使用 text-overflow: ellipsis 在文本的末尾添加一個圓點(diǎn),向用戶表明有一些隱藏的文本。

          事例地址:https://codepen.io/bytefishmedium/pen/VwrwgdQ

          Image

          現(xiàn)在我們來討論一下圖片的風(fēng)格。網(wǎng)絡(luò)應(yīng)用中使用的圖片一般由后端提供。你可能已經(jīng)與后端開發(fā)者達(dá)成協(xié)議,將圖片保持在一個固定的尺寸。然后你寫下這樣的代碼。

          <!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>Document</title>
            <style>
              .img-list {
                display: flex;
                flex-direction: row;
                list-style: none;
              }
            </style>
          </head>
          
          <body>
            <ul class="img-list">
              <li>
                <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
              </li>
              <li>
                <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
              </li>
              <li>
                <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
              </li>
            </ul>
          
          </body>
          
          </html>
          

          而網(wǎng)頁看起來是這樣的。

          圖片的排列與我們所期望的一樣。

          通常情況下是沒有問題的。但是當(dāng)我們寫代碼時,我們不能假設(shè)一切都會按照我們的預(yù)期發(fā)展。我們需要做好充分的準(zhǔn)備。如果后端返回的圖片不正常,不符合預(yù)期的尺寸,可能大也可能小,那么布局就會被打亂。

          你可以用這個替換其中一張圖片的鏈接。

          https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg
          

          你會發(fā)現(xiàn),頁面突然變得雜亂無章。

          為了防止這個問題,使我們的頁面更加健壯,我們可以設(shè)置圖片的寬度和高度。這樣,我們就不必?fù)?dān)心后端返回的圖片的大小。

          img {
            width: 128px;
            height: 128px;
          }
          

          但上述寫法有一個缺點(diǎn):如果圖像本身的長寬比與我們設(shè)定的長寬比不一致,圖像將被壓縮或拉伸。

          為了保持圖像的原始長寬比,我們可以使用 object-fit: cover

          img {
            width: 128px;
            height: 128px;
            object-fit: cover;
          }
          

          object-fit 的CSS屬性設(shè)置一個被替換的元素的內(nèi)容,如<img><video>,應(yīng)該如何調(diào)整大小以適合其容器。

          如果該值是 cover,那么被替換的內(nèi)容的大小將保持其長寬比,同時填充元素的整個內(nèi)容框。如果對象的長寬比與它的盒子的長寬比不一致,那么該對象將被剪掉以適配。

          無圖片

          我們之前討論的情況都是建立在我們能夠得到圖片的前提下。但是,在實(shí)際應(yīng)用中,可能由于后端服務(wù)的不穩(wěn)定,或者用戶自身的網(wǎng)絡(luò)信號不好,我們的網(wǎng)頁可能無法正確加載圖片。

          當(dāng)圖片缺失時,瀏覽器的默認(rèn)樣式是不優(yōu)雅的,這里我們可以優(yōu)化它。

          我們可以給 img元素添加一個 onerror 事件。如果在加載圖片時出現(xiàn)了錯誤,那么我們可以通過 onerror事件給該元素添加一個樣式,并使用404圖片。

          img 元素:

          <img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">
          

          假設(shè)這就是我們的404圖像:

          https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg
          

          下面是 css 代碼

          img.error {
                display: inline-block;
                transform: scale(1);
                content: '';
                color: transparent;
              }
          img.error::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
              }
          

          這樣,當(dāng) img 元素中的圖片鏈接無法加載圖片時,我們的404圖片將被使用。

          這里還有一點(diǎn)需要優(yōu)化。在這種情況下,如果原始圖片沒有被正確加載,用戶就不知道這個圖片應(yīng)該是什么。為了方便用戶理解,我們可以將 img 元素的 alt 屬性顯示在頁面上。

          img.error::after {
                content: attr(alt);
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                line-height: 2;
                background-color: rgba(0, 0, 0, .5);
                color: white;
                font-size: 12px;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
          

          假設(shè)img的 alt 屬性是這樣的。

          <img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >
          

          事例地址:https://codepen.io/bytefishmedium/pen/vYWYMxG

          色彩對比度

          當(dāng)你在設(shè)計(jì)顏色組合時,你是否考慮過頁面的顏色對比?

          你需要知道,世界上有很多色盲和色弱用戶。如果你的頁面的對比度低,可能會導(dǎo)致他們無法正常使用你的產(chǎn)品。無論是出于人文關(guān)懷,還是出于留住客戶的考慮,你都應(yīng)該設(shè)計(jì)出合適的對比度。

          WCAG AA規(guī)范指出,所有重要的內(nèi)容需要有4.5:1以上的色彩對比度。

          這里有一個對比度檢查器的工具。

          https://webaim.org/resources/contrastchecker/

          事例:

          我們也可以使用Chrome DevTool來檢查一個元素的顏色對比。然后我們可以發(fā)現(xiàn),Medium的網(wǎng)頁也在實(shí)踐這一原則。

          總結(jié)

          俗話說得好,細(xì)節(jié)決定成敗。如果你的項(xiàng)目有很多可以改善用戶體驗(yàn)的細(xì)節(jié),你就可以讓用戶感到舒服,你就有更高的成功概率。

          ~完,我是刷碗智,新的一年我們一起刷刷刷!


          作者:Shadeed 譯者:前端小智 來源:medium 原文:https://betterprogramming.pub/10-css-tricks-that-greatly-improve-user-experience-5ee52886ca4b

          天,來實(shí)現(xiàn)這樣一個有意思的交互效果:

          將原本的鼠標(biāo)指針樣式,修改成自己想要的效果,并且添加上一些特殊的交互效果。

          修改鼠標(biāo)樣式

          首先,第一個問題,我們可以看到,上圖中,鼠標(biāo)指針的樣式被修改成了一個圓點(diǎn):

          正常而言應(yīng)該是這樣:

          當(dāng)然,這里比較簡單,在 CSS 中,我們可以通過 cursor 樣式,對鼠標(biāo)指針形狀進(jìn)行修改。

          利用cursor修改鼠標(biāo)樣式

          cursor CSS 屬性設(shè)置鼠標(biāo)指針的類型,在鼠標(biāo)指針懸停在元素上時顯示相應(yīng)樣式。

          cursor: auto;
          cursor: pointer;
          ...
          cursor: zoom-out;
          /* 使用圖片 */
          cursor: url(hand.cur)
          /* 使用圖片,并且設(shè)置 fallback 兜底 */
          cursor: url(hand.cur), pointer;
          

          這個大家應(yīng)該都清楚,通常而言,在不同場景下,選擇不同鼠標(biāo)指針樣式,也是一種提升用戶體驗(yàn)的手段。

          當(dāng)然,在本交互中,我們并非要將 cursor 光標(biāo)設(shè)置成任一樣式,剛好相反,我們需要將他隱藏

          通過cursor: none隱藏光標(biāo)

          在這里,我們通過 cursor: none 隱藏頁面的鼠標(biāo)指針:

          {
              cursor: none;
          }
          

          如此一來,頁面上的鼠標(biāo)指針就消失了:

          通過全局事件監(jiān)聽,模擬鼠標(biāo)指針

          既然,消失了,我們就簡單模擬一個鼠標(biāo)指針。

          我們首先實(shí)現(xiàn)一個 10px x 10px 的圓形 div,設(shè)置為基于 <body> 絕對定位:

          <div id="g-pointer"></div>
          
          #g-pointer {
              position: absolute;
              top: 0;
              left: 0;
              width: 10px;
              height: 10px;
              background: #000;
              border-radius: 50%;
          }
          

          那么,在頁面上,我們就得到了一個圓形黑點(diǎn):

          接著,通過事件監(jiān)聽,監(jiān)聽 body 上的 mousemove,將小圓形的位置與實(shí)時鼠標(biāo)指針位置重合:

          const element = document.getElementById("g-pointer");
          const body = document.querySelector("body");
          
          function setPosition(x, y) {
            element.style.transform  = `translate(${x}px, ${y}px)`;                
          }
          
          body.addEventListener('mousemove', (e) => {
            window.requestAnimationFrame(function(){
              setPosition(e.clientX - 5, e.clientY - 5);
            });
          });
          

          這樣,如果不設(shè)置 cursor: none,將會是這樣一個效果:

          再給 body 加上 cursor: none,就相當(dāng)于模擬了一個鼠標(biāo)指針:

          在這個基礎(chǔ)上,由于現(xiàn)在的鼠標(biāo)指針,實(shí)際上是個 div因此我們可以給它加上任意的交互效果

          以文章一開頭的例子為例,我們只需要借助混合模式 mix-blend-mode: exclusion,就能夠?qū)崿F(xiàn)讓模擬的鼠標(biāo)指針能夠智能地在不同背景色下改變自己的顏色。

          對于混合模式這個技巧還有所疑問的,可以看看我的這篇文章:利用混合模式,讓文字智能適配背景顏色

          完整的代碼:

          <p>Lorem ipsum dolor sit amet</p>
          <div id="g-pointer-1"></div>
          <div id="g-pointer-2"></div>
          
          body {
              cursor: none;
              background-color: #fff;
          }
          #g-pointer-1,
          #g-pointer-2
          {
              position: absolute;
              top: 0;
              left: 0;
              width: 12px;
              height: 12px;
              background: #999;
              border-radius: 50%;
              background-color: #fff;
              mix-blend-mode: exclusion;
              z-index: 1;
          }
          #g-pointer-2 {
              width: 42px;
              height: 42px;
              background: #222;
              transition: .2s ease-out;
          }
          
          const body = document.querySelector("body");
          const element = document.getElementById("g-pointer-1");
          const element2 = document.getElementById("g-pointer-2");
          const halfAlementWidth = element.offsetWidth / 2;
          const halfAlementWidth2 = element2.offsetWidth / 2;
          
          function setPosition(x, y) { 
              element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
          }
          
          body.addEventListener('mousemove', (e) => {
            window.requestAnimationFrame(function(){
              setPosition(e.clientX, e.clientY);
            });
          });
          

          我們就能完美還原出題圖的效果:

          完整的代碼,你可以戳這里:Mouse Cursor Transition

          偽類事件觸發(fā)

          有一點(diǎn)需要注意的是,利用模擬的鼠標(biāo)指針去 Hover 元素,Click 元素的時候,會發(fā)現(xiàn)這些事件都無法觸發(fā)。

          這是由于,此時被隱藏的指針下面,其實(shí)懸浮的我們模擬鼠標(biāo)指針,因此,所有的 Hover、Click 事件都觸發(fā)在了這個元素之上。

          當(dāng)然,這個也非常好解決,我們只需要給模擬指針的元素,添加上 pointer-events: none,阻止默認(rèn)的鼠標(biāo)事件,讓事件透傳即可:

          {
              pointer-events: none;
          }
          

          鼠標(biāo)跟隨,不僅于此

          當(dāng)然,這里核心就是一個鼠標(biāo)跟隨動畫,配合上 cursor: none

          而且,鼠標(biāo)跟隨,我們不一定一定要使用 JavaScript。

          我在 不可思議的純 CSS 實(shí)現(xiàn)鼠標(biāo)跟隨 一文中,介紹了一種純 CSS 實(shí)現(xiàn)的鼠標(biāo)跟隨效果,感興趣的也可以看看。

          基于純 CSS 的鼠標(biāo)跟隨,配合 cursor: none,也可以制作出一些有意思的動畫效果。像是這樣:

          CodePen Demo -- Cancle transition & cursor none

          文章來自https://www.cnblogs.com/coco1s/p/16396016.html

          果我們想在 HTML 元素中設(shè)置 CSS 樣式,則需要通過 CSS 選擇器進(jìn)行控制。換句話說,CSS 選擇器就是用于指向需要添加 CSS 樣式的標(biāo)簽,讓 CSS 樣式知道自己需要作用到那個標(biāo)簽上去。

          CSS 的繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性,即子元素可以繼承父元素的屬性。

          以下分別介紹了幾種常用的選擇器與其可繼承的屬性。

          常用的 CSS 選擇器有:

          id 選擇器

          我們通過設(shè)置標(biāo)簽的 id 屬性來設(shè)置id選擇器。CSS 中 id 選擇器以 # 來定義。如以下則是設(shè)置 id 為“box”的 CSS 樣式。為 div 添加一個高度為 100px,寬度為 100px,背景顏色為紅色的樣式。


          類選擇器

          常用的選擇器還有類選擇器。類選擇器通過設(shè)置標(biāo)簽的 class 屬性去設(shè)置樣式。CSS 中 class 選擇器以 . 來定義。如以下則是設(shè)置class 為“box”的 CSS 樣式。為div添加一個高度為 100px,寬度為 100px,背景顏色為藍(lán)色的樣式。



          標(biāo)簽選擇器

          標(biāo)簽選擇器是為某一類標(biāo)簽設(shè)置 CSS 樣式。在 CSS 中直接以標(biāo)簽名設(shè)置樣式。如以下是設(shè)置 div 的 CSS 樣式。給 div 加上一個高度為 100px,寬度為 100px,背景顏色為粉色的樣式。


          內(nèi)聯(lián)選擇器

          我們也可以直接在標(biāo)簽內(nèi)寫 CSS 代碼。通過加上 style 屬性,就可以在 style 內(nèi)添加 CSS 樣式了。


          可繼承的屬性:

          CSS 中可繼承的屬性有以下幾種。

          字體系列屬性

          font

          組合字體

          font-family

          規(guī)定元素的字體系列

          font-weight

          設(shè)置字體的粗細(xì)

          font-size

          設(shè)置字體的尺寸

          font-style

          定義字體的風(fēng)格

          font-variant

          設(shè)置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。

          font-stretch

          允許你使文字變寬或變窄。所有主流瀏覽器都不支持。

          font-size-adjust

          為某個元素規(guī)定一個 aspect 值,字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個字體的 aspect 值。這樣就可以保持首選字體的 x-height。

          文本系列屬性

          text-indent

          文本縮進(jìn)

          text-align

          文本水平對齊

          line-height

          行高

          word-spacing

          增加或減少單詞間的空白(即字間隔)

          letter-spacing

          增加或減少字符間的空白(字符間距)

          text-transform

          控制文本大小寫

          direction

          規(guī)定文本的書寫方向

          color

          文本顏色

          元素可見性

          visibility

          規(guī)定元素是否可見

          表格布局屬性

          caption-side

          規(guī)定表格標(biāo)題的放置方式

          border-collapse

          為表格設(shè)置合并邊框模型

          border-spacing

          設(shè)置相鄰單元格的邊框間的距離(僅用于“邊框分離”模式)

          empty-cells

          設(shè)置是否顯示表格中的空單元格(僅用于“分離邊框”模式)

          table-layout

          顯示表格單元格、行、列的算法規(guī)則

          列表屬性

          list-style-type

          設(shè)置列表項(xiàng)標(biāo)記的類型

          list-style-image

          使用圖像來替換列表項(xiàng)的標(biāo)記

          list-style-position

          設(shè)置在何處放置列表項(xiàng)標(biāo)記

          list-style

          在一個聲明中設(shè)置所有的列表屬性

          生成內(nèi)容屬性

          quotes

          設(shè)置嵌套引用(embedded quotation)的引號類型

          光標(biāo)屬性

          cursor

          規(guī)定要顯示的光標(biāo)的類型(形狀)

          頁面樣式屬性

          page

          檢索或指定顯示對象容器時使用的頁面類型

          page-break-inside

          設(shè)置元素內(nèi)部的 page-breaking 行為

          orphans

          設(shè)置或返回一個元素必須在頁面底部的可見行的最小數(shù)量(用于打印或打印預(yù)覽)

          聲音樣式屬性

          speak

          規(guī)定內(nèi)容是否將以聲音形式呈現(xiàn)

          speak-punctuation

          規(guī)定如何念出標(biāo)點(diǎn)符號

          speak-numeral

          規(guī)定如何念出數(shù)字

          speak-header

          指定如何處理表格標(biāo)題。應(yīng)該在每個單元格之前朗讀標(biāo)題,還是僅在標(biāo)題與前一個單元格不同的單元格之前念出標(biāo)題。

          speech-rate

          規(guī)定說話的速度

          volume

          規(guī)定說話的音量

          voice-family

          規(guī)定語音的語音家族

          pitch

          規(guī)定說話的聲音

          pitch-range

          規(guī)定語音的變化(單調(diào)還是動聽的聲音?)

          stress

          規(guī)定語音中的“壓力”

          richness

          指定語音的豐富程度。(聲音豐富還是稀薄?)

          azimuth

          設(shè)置聲音的來源

          elevation

          設(shè)置聲音的來源

          以上就是編程獅(w3cschool.cn)小編為你整理的 CSS 選擇器及其繼承屬性的總結(jié)。希望可以幫到你~


          主站蜘蛛池模板: 日本无码一区二区三区白峰美 | 亚洲中文字幕丝袜制服一区| 肥臀熟女一区二区三区| 激情无码亚洲一区二区三区| 少妇激情一区二区三区视频| 无码日韩人妻AV一区二区三区 | 亚洲AV网一区二区三区| 亚洲一区二区三区高清| 亚洲第一区精品观看| 无码日韩精品一区二区人妻| 精品国产一区在线观看| 亚洲av色香蕉一区二区三区| 国产福利一区二区三区在线观看 | 丰满人妻一区二区三区视频53 | 日韩精品无码一区二区三区四区| 国产精品免费视频一区| 精品国产一区二区二三区在线观看| 亚洲高清一区二区三区电影| 无码人妻一区二区三区免费手机 | 动漫精品专区一区二区三区不卡 | 国产亚洲一区区二区在线| 亚洲av高清在线观看一区二区| 日韩AV在线不卡一区二区三区| 国产成人无码精品一区不卡| 在线不卡一区二区三区日韩| 内射少妇一区27P| 鲁大师成人一区二区三区| 国产高清在线精品一区二区| 国产日韩AV免费无码一区二区 | 无码人妻精品一区二区三区66| 久久一本一区二区三区| 亚洲国产情侣一区二区三区 | 中文字幕一区二区人妻性色| 精品aⅴ一区二区三区| 久久4k岛国高清一区二区| 亚洲国产精品一区二区三区在线观看 | 日韩精品一区二三区中文| 国产精品免费大片一区二区| 亚洲国产一区国产亚洲| 亚洲AV无码一区二区三区久久精品| 精品3d动漫视频一区在线观看|