整合營(yíng)銷服務(wù)商

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

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

          CSS-in-JS,使用JavaScript來編寫你

          CSS-in-JS,使用JavaScript來編寫你的css網(wǎng)頁(yè)樣式-JSS

          JSS是CSS的創(chuàng)作工具,它允許你使用JavaScript以聲明,無沖突和可重用的方式描述樣式。它可以在瀏覽器,服務(wù)器端或在構(gòu)建時(shí)在Node中編譯。JSS與框架無關(guān)。它由多個(gè)包組成:核心部分,插件以及框架集成等。



          Github

          https://github.com/cssinjs/jss stars:5.1k


          快速開始

          如果你已經(jīng)對(duì)使用JSS感興趣,可以使用在線代碼編輯器。在CodeSandbox(一個(gè)非常實(shí)用的在線編輯器,可以用來學(xué)習(xí)各種編程技能)上嘗試Hello World示例。以下是三種不同框架下的用法(代碼圖片生成自carbon網(wǎng)站):

          • JSS


          • React-JSS


          • Styled-JSS


          特性

          • 真實(shí)的CSS

          JSS生成實(shí)際的CSS,而不是內(nèi)聯(lián)樣式。它支持每個(gè)現(xiàn)有的CSS功能。CSS規(guī)則只創(chuàng)建一次,并使用其類名與元素重復(fù)使用,與內(nèi)聯(lián)樣式相反。此外,當(dāng)DOM元素更新時(shí),將應(yīng)用先前創(chuàng)建的CSS規(guī)則。

          • 無沖突選擇器

          JSS默認(rèn)生成唯一的類名。它允許避免典型的CSS問題,默認(rèn)情況下一切都是全局的。它完全消除了命名約定的需要。

          • 代碼重用

          使用JavaScript作為宿主語言使我們有機(jī)會(huì)以常規(guī)CSS無法實(shí)現(xiàn)的方式重用CSS規(guī)則。您可以利用JavaScript模塊,變量,函數(shù),數(shù)學(xué)運(yùn)算等。如果做得好,它仍然可以完全聲明。

          • 易于拆卸和修改

          CSS規(guī)則的明確使用允許您跟蹤消費(fèi)者并確定是否可以安全地刪除或修改它。

          • 動(dòng)態(tài)Style

          使用JavaScript函數(shù)和Observable可以在瀏覽器中動(dòng)態(tài)生成樣式,使有機(jī)會(huì)訪問應(yīng)用程序狀態(tài),瀏覽器API或遠(yuǎn)程數(shù)據(jù)以進(jìn)行樣式設(shè)置。你不僅可以定義一次樣式,還可以在任何時(shí)間點(diǎn)以有效的方式更新樣式。

          • 用戶控制的動(dòng)畫

          JSS可以高效地處理CSS更新,可以使用它創(chuàng)建復(fù)雜的動(dòng)畫。使用函數(shù)值,Observables并將它們與CSS過渡相結(jié)合,可以為用戶控制的動(dòng)畫提供最大的性能。對(duì)于預(yù)定義的動(dòng)畫,使用@keyframes和transition更好,因?yàn)樗鼈儗⑼耆∠柚笿avaScript線程。

          • 關(guān)鍵的CSS

          要優(yōu)化第一次繪制的時(shí)間,你可以使用服務(wù)器端渲染并提取關(guān)鍵CSS??梢詫SS的呈現(xiàn)與HTML的呈現(xiàn)結(jié)合起來,這樣就不會(huì)生成未使用的CSS。它將導(dǎo)致在服務(wù)器端呈現(xiàn)期間提取的最小關(guān)鍵CSS,并允許內(nèi)聯(lián)它。

          • 插件

          JSS核心實(shí)現(xiàn)了基于插件的架構(gòu)。它允許您創(chuàng)建可以實(shí)現(xiàn)自定義語法或其他強(qiáng)大功能的自定義插件。JSS有許多官方插件,可以單獨(dú)安裝或使用默認(rèn)預(yù)設(shè)。社區(qū)插件的一個(gè)很好的例子是jss-rtl。

          • Expressive 語法

          由于各種插件,JSS允許您使用現(xiàn)有的全局類名來嵌套,全局選擇器和組合。例如,允許您以比CSS更可讀的方式表達(dá)屬性。如果要直接從瀏覽器開發(fā)工具復(fù)制粘貼樣式,也可以使用模板字符串。jss-plugin-expandbox-shadow

          • 完全隔離

          另一個(gè)有用的插件示例是,它允許您完全隔離元素與全局級(jí)聯(lián)規(guī)則,并可能覆蓋不需要的屬性。在創(chuàng)建應(yīng)該在第三方文檔內(nèi)部呈現(xiàn)的窗口小部件時(shí)尤其有用。jss-plugin-isolate

          • React整合。

          React-JSS包提供了一些額外的功能:

          1. 動(dòng)態(tài)主題 - 允許基于上下文的主題傳播和運(yùn)行時(shí)更新。
          2. 關(guān)鍵CSS提取 - 僅提取渲染組件中的CSS。
          3. 延遲評(píng)估 - 樣式表在組件安裝時(shí)創(chuàng)建。
          4. 樣式表的靜態(tài)部分在所有元素之間共享。
          5. 使用props作為參數(shù)自動(dòng)更新函數(shù)值和規(guī)則。
          • JavaScript構(gòu)建管道

          CSS不需要額外的構(gòu)建管道配置。無論你選擇構(gòu)建JavaScript的工具是什么,它都可以與JSS一起使用。

          安裝使用

          yarn add jss
          

          yarn add jss-preset-default //使用默認(rèn)設(shè)置
          

          import jss from 'jss'
          import preset from 'jss-preset-default'
          jss.setup(preset())
          // 創(chuàng)造你的style.
          const style={
           myButton: {
           color: 'green'
           }
          }
          //編譯樣式,應(yīng)用插件。
          const sheet=jss.createStyleSheet(style)
          //如果要在客戶端上呈現(xiàn),請(qǐng)將其插入DOM。
          sheet.attach()
          //如果要渲染服務(wù)器端,請(qǐng)獲取CSS文本。
          sheet.toString()
          

          • 使用自定義插件進(jìn)行設(shè)置
          import jss from 'jss'
          import camelCase from 'jss-plugin-camel-case'
          import somePlugin from 'jss-some-plugin'
          //使用插件。
          jss.use(camelCase(), somePlugin())
          // Create your style.
          const style={
           myButton: {
           color: 'green'
           }
          }
          //編譯樣式,應(yīng)用插件。
          const sheet=jss.createStyleSheet(style)
          // 如果要在客戶端上呈現(xiàn),請(qǐng)將其插入DOM
          sheet.attach()
          // 如果要渲染服務(wù)器端,請(qǐng)獲取CSS文本。
          sheet.toString()
          

          • 指定DOM插入點(diǎn)
          <head>
           <title>JSS</title>
           <!-- 自定義插入點(diǎn) -->
          </head>
          

          import jss from 'jss'
          jss.setup({insertionPoint: 'custom-insertion-point'})
          

          <head>
           <title>JSS in body</title>
          </head>
          <body>
           <div id="insertion-point">
           這可能是你選擇的任何DOM節(jié)點(diǎn),可以作為插入點(diǎn)。
           </div>
          </body
          

          import jss from 'jss'
          jss.setup({
           insertionPoint: document.getElementById('insertion-point')
          })
          

          簡(jiǎn)單案例

          通過兩張圖片來體驗(yàn):




          總結(jié)

          JSS的功能是十分強(qiáng)大的,不僅僅讓寫css的方式放到了JavaScript,這樣對(duì)更加喜愛編寫javascript的小伙伴來說是值得嘗試的,而且還支持服務(wù)器端渲染等更多高級(jí)的特性,前端技術(shù)百花齊放,但目前仍然不變的是掌握J(rèn)avaScript者得天下的時(shí)代!

          設(shè)計(jì)網(wǎng)頁(yè)中,錨點(diǎn)滾動(dòng)是不可或缺的,現(xiàn)在分享給大家,好好看看。

          jq代碼

          為了好復(fù)制,插入整個(gè)demo源碼

          <!DOCTYPE html>

          <html>

          <head>

          <metacharset="UTF-8">

          <metaname="viewport"content="width=device-width, initial-scale=1.0">

          <metahttp-equiv="X-UA-Compatible"content="ie=edge">

          <title>js錨點(diǎn)滾動(dòng)效果</title>

          <style>

          ul>li{float: left;margin: 10px ;}

          .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}

          .clearfix{zoom:1}

          .step{width:80%;height:1300px;border:10pxsolidred;margin:0auto;}

          </style>

          </head>

          <body>

          <ulclass="clearfix">

          <li><ahref="#step1">#step1</a></li>

          <li><ahref="#step2">#step2</a></li>

          <li><ahref="#step3">#step3</a></li>

          </ul>

          <div>

          <divid="step1"class="step">step1</div>

          <divid="step2"class="step">step2</div>

          <divid="step3"class="step">step3</div>

          </div>

          </body>

          <scriptsrc="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

          <script>

          //頁(yè)面錨點(diǎn)滾動(dòng)js

          $('a[href*=#],area[href*=#]').click(function {

          if (location.pathname.replace(/^//, '')==this.pathname.replace(/^//, '') &&location.hostname==this.hostname) {

          var$target=$(this.hash);

          $target=$target.length &&$target||$('[name='+this.hash.slice(1) +']');

          if ($target.length) {

          vartargetOffset=$target.offset.top;

          $('html,body').animate({

          scrollTop: targetOffset

          },

          1000);

          returnfalse;

          }

          }

          });

          //頁(yè)面錨點(diǎn)滾動(dòng)js結(jié)束

          </script>

          </html>

          ps:希望喜歡我的朋友點(diǎn)贊,關(guān)注,轉(zhuǎn)發(fā)一下。

          網(wǎng)站開發(fā),程序設(shè)計(jì),UI等相關(guān)問題,編程技巧以及其他你想向我問的問題,來者不拒。

          疊樣式表(Cascading Style Sheet,簡(jiǎn)稱:CSS)是為網(wǎng)頁(yè)添加樣式的代碼。本節(jié)將介紹 CSS 的基礎(chǔ)知識(shí),并解答類似問題:怎樣將文本設(shè)置為黑色或紅色?怎樣將內(nèi)容顯示在屏幕的特定位置?怎樣用背景圖片或顏色來裝飾網(wǎng)頁(yè)?

          CSS 究竟什么來頭?

          和 HTML 類似,CSS 也不是真正的編程語言,甚至不是標(biāo)記語言。它是一門樣式表語言,這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說,要選擇一個(gè) HTML 頁(yè)面里所有的段落元素,然后將其中的文本改成紅色,可以這樣寫 CSS:

          p {
            color: red;
          }

          不妨試一下:首先新建一個(gè) styles 文件夾,在其中新建一個(gè) style.css 文件,將這三行 CSS 保存在這個(gè)新文件中。

          然后再將該 CSS 文件連接至 HTML 文檔,否則 CSS 代碼不會(huì)對(duì) HTML 文檔在瀏覽器里的顯示效果有任何影響。(如果你沒有完成前幾節(jié)的實(shí)踐,請(qǐng)復(fù)習(xí)處理文件 和 HTML 基礎(chǔ)。在筆記本里有這個(gè)方面的內(nèi)容!)

          1、打開 index.html 文件,然后將下面一行粘貼到文檔頭(也就是 <head></head> 標(biāo)簽之間)。

          <link href="styles/style.css" rel="stylesheet">

          2、保存 index.html 并用瀏覽器將其打開。應(yīng)該看到以下頁(yè)面:

          如果段落文字變紅,那么祝賀你,你已經(jīng)成功地邁出了 CSS 學(xué)習(xí)的第一步。

          “CSS 規(guī)則集”詳解

          讓我們來仔細(xì)看一看上述CSS:

          整個(gè)結(jié)構(gòu)稱為 規(guī)則集(通常簡(jiǎn)稱“規(guī)則”),各部分釋義如下:

          • 選擇器(Selector
          • HTML 元素的名稱位于規(guī)則集開始。它選擇了一個(gè)或者多個(gè)需要添加樣式的元素(在這個(gè)例子中就是 p 元素)。要給不同元素添加樣式只需要更改選擇器就行了。
          • 聲明(Declaration
          • 一個(gè)單獨(dú)的規(guī)則,比如說 color: red; 用來指定添加樣式元素的屬性。
          • 屬性(Properties
          • 改變 HTML 元素樣式的途徑。(本例中 color 就是 `` 元素的屬性。)CSS 中,由編寫人員決定修改哪個(gè)屬性以改變規(guī)則。
          • 屬性的值(Property value
          • 在屬性的右邊,冒號(hào)后面即屬性的值,它從指定屬性的眾多外觀中選擇一個(gè)值(我們除了 red 之外還有很多屬性值可以用于 color )。

          注意其他重要的語法:

          • 每個(gè)規(guī)則集(除了選擇器的部分)都應(yīng)該包含在成對(duì)的大括號(hào)里({})。
          • 在每個(gè)聲明里要用冒號(hào)(:)將屬性與屬性值分隔開。
          • 在每個(gè)規(guī)則集里要用分號(hào)(;)將各個(gè)聲明分隔開。

          如果要同時(shí)修改多個(gè)屬性,只需要將它們用分號(hào)隔開,就像這樣:

          p {
            color: red;
            width: 500px;
            border: 1px solid black;
          }

          多元素選擇

          也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。例如:

          p, li, h1 {
            color: red;
          }

          不同類型的選擇器

          選擇器有許多不同的類型。上面只介紹了元素選擇器,用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型:

          選擇器名稱

          選擇的內(nèi)容

          示例

          元素選擇器(也稱作標(biāo)簽或類型選擇器)

          所有指定(該)類型的 HTML 元素

          p 選擇 <p>

          ID 選擇器

          具有特定 ID 的元素(單一 HTML 頁(yè)面中,每個(gè) ID 只對(duì)應(yīng)一個(gè)元素,一個(gè)元素只對(duì)應(yīng)一個(gè) ID)

          #my-id 選擇 <p id="my-id"><a id="my-id">

          類選擇器

          具有特定類的元素(單一頁(yè)面中,一個(gè)類可以有多個(gè)實(shí)例)

          .my-class 選擇 <p class="my-class"><a class="my-class">

          屬性選擇器

          擁有特定屬性的元素

          img[src] 選擇 <img src="myimage.png"> 而不是 <img>

          偽(Pseudo)類選擇器

          特定狀態(tài)下的特定元素(比如鼠標(biāo)指針懸停)

          a:hover 僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇 <a>。

          選擇器的種類遠(yuǎn)不止于此,更多信息請(qǐng)參閱 選擇器。

          字體和文本

          譯注:再一次說明,中文字體文件較大,不適合直接用于 Web Font。

          在探索了一些 CSS 基礎(chǔ)后,我們來把更多規(guī)則和信息添加至 style.css 中,從而讓示例更美觀。首先,讓字體和文本變得更漂亮。

          第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進(jìn)index.html文檔頭(<head></head>之間的任意位置)。代碼如下:

           <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 

          以上代碼為當(dāng)前網(wǎng)頁(yè)下載 Open Sans 字體,從而使自定義 CSS 中可以對(duì) HTML 元素應(yīng)用這個(gè)字體。

          第二步:接下來,刪除 style.css 文件中已有的規(guī)則。雖然測(cè)試是成功的了,但是紅字看起來并不太舒服。

          第三步:將下列代碼添加到相應(yīng)的位置,用你在 Google Fonts 找到的字體替代 font-family 中的占位行。( font-family 意味著你想要你的文本使用的字體。)這條規(guī)則首先為整個(gè)頁(yè)面設(shè)定了一個(gè)全局字體和字號(hào)(因?yàn)?<html> 是整個(gè)頁(yè)面的父元素,而且它所有的子元素都會(huì)繼承相同的 font-sizefont-family):

          html {
            /* px 表示 “像素(pixels)”: 基礎(chǔ)字號(hào)為 10 像素 */
            font-size: 10px;
            /* Google fonts 輸出的 CSS */
            font-family: 'Open Sans', sans-serif;
          }

          注:CSS 文檔中所有位于 /**/ 之間的內(nèi)容都是 CSS 注釋,它會(huì)被瀏覽器在渲染代碼時(shí)忽略。你可以在這里寫下對(duì)你現(xiàn)在要做的事情有幫助的筆記。

          譯注:/*``*/ 不可嵌套,/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。

          接下來為文檔體內(nèi)的元素(<h1> (en-US)、<li><p>)設(shè)置字號(hào)。將標(biāo)題居中顯示,并為正文設(shè)置行高和字間距,從而提高頁(yè)面的可讀性。

             h1 {
               font-size: 60px;
               text-align: center;
             }
             
             p, li {
               font-size: 16px;
               /* line-height 后而可以跟不同的參數(shù),如果是數(shù)字,就是當(dāng)前字體大小乘上數(shù)字 */
               line-height: 2;
               letter-spacing: 1px;
             }

          可以隨時(shí)調(diào)整這些 px 值來獲得滿意的結(jié)果,以下是大體效果:

          一切皆盒子

          編寫 CSS 時(shí)你會(huì)發(fā)現(xiàn),你的工作好像是圍繞著一個(gè)一個(gè)盒子展開的——設(shè)置尺寸、顏色、位置,等等。頁(yè)面里大部分 HTML 元素都可以被看作若干層疊的盒子。



          并不意外,CSS 布局主要就是基于盒模型的。每個(gè)占據(jù)頁(yè)面空間的塊都有這樣的屬性:

          • padding:即內(nèi)邊距,圍繞著內(nèi)容(比如段落)的空間。
          • border:即邊框,緊接著內(nèi)邊距的線。
          • margin:即外邊距,圍繞元素外部的空間。



          這里還使用了:

          • width :元素的寬度
          • background-color :元素內(nèi)容和內(nèi)邊距底下的顏色
          • color :元素內(nèi)容(通常是文本)的顏色
          • text-shadow :為元素內(nèi)的文本設(shè)置陰影
          • display :設(shè)置元素的顯示模式(暫略)

          開始在頁(yè)面中添加更多 CSS 吧!大膽將這些新規(guī)則都添加到頁(yè)面的底部,而不要糾結(jié)改變屬性值會(huì)帶來什么結(jié)果。

          更改頁(yè)面顏色

          html{
            background-color:#00539f;
          }

          這條規(guī)則將整個(gè)頁(yè)面的背景顏色設(shè)置為 所計(jì)劃的顏色。

          文檔體格式設(shè)置

          body{
             width:600px;
             margin:0 auto;
             background-color:#ff9500;
             padding:0 20px 20px 20px;
             border:5px solid black;
          }

          現(xiàn)在是 <body> 元素。以上條聲明,我們來逐條查看:

          • width: 600px; —— 強(qiáng)制頁(yè)面永遠(yuǎn)保持 600 像素寬。
          • margin: 0 auto; —— 為 marginpadding 等屬性設(shè)置兩個(gè)值時(shí),第一個(gè)值代表元素的上方下方(在這個(gè)例子中設(shè)置為 0),而第二個(gè)值代表左邊右邊(在這里,auto 是一個(gè)特殊的值,意思是水平方向上左右對(duì)稱)。你也可以使用一個(gè),三個(gè)或四個(gè)值,參考 這里 。
          • background-color: #FF9500; —— 如前文所述,指定元素的背景顏色。我們給 body 用了一種略微偏紅的橘色以與深藍(lán)色的 `` 元素形成反差,你也可以嘗試其它顏色。
          • padding: 0 20px 20px 20px; —— 我們給內(nèi)邊距設(shè)置了四個(gè)值來讓內(nèi)容四周產(chǎn)生一點(diǎn)空間。這一次我們不設(shè)置上方的內(nèi)邊距,設(shè)置右邊,下方,左邊的內(nèi)邊距為20像素。值以上、右、下、左的順序排列。
          • border: 5px solid black; —— 直接為 body 設(shè)置 5 像素的黑色實(shí)線邊框。

          定位頁(yè)面主標(biāo)題并添加樣式

          h1{
            margin: 0;
            padding:20px 0;
            color: #00539f;
            text-shadow:3px 3px 1px black
          }

          你可能發(fā)現(xiàn)頁(yè)面的頂部有一個(gè)難看的間隙,那是因?yàn)闉g覽器會(huì)在沒有任何 CSS 的情況下 給 <h1>en-US等元素設(shè)置一些默認(rèn)樣式。但這并不是個(gè)好主意,因?yàn)槲覀兿M粋€(gè)沒有任何樣式的網(wǎng)頁(yè)也有基本的可讀性。為了去掉那個(gè)間隙,我們通過設(shè)置margin: 0;來覆蓋默認(rèn)樣式。

          至此,我們已經(jīng)把標(biāo)題的上下內(nèi)邊距設(shè)置為 20 像素,并且將標(biāo)題文本與 HTML 的背景顏色設(shè)為一致。

          需要注意的是,這里使用了一個(gè) text-shadow 屬性,它可以為元素中的文本提供陰影。四個(gè)值含義如下:

          • 第一個(gè)值設(shè)置水平偏移值 —— 即陰影右移的像素?cái)?shù)(負(fù)值左移)。
          • 第二個(gè)值設(shè)置垂直偏移值 —— 即陰影下移的像素?cái)?shù)(負(fù)值上移)。
          • 第三個(gè)值設(shè)置陰影的模糊半徑 —— 值越大產(chǎn)生的陰影越模糊。
          • 第四個(gè)值設(shè)置陰影的基色。

          不妨嘗試不同的值看看能得出什么結(jié)果。

          圖像居中

          img{
            display:block;
            margin:0 auto;
          }

          最后,我們把圖像居中來使頁(yè)面更美觀??梢詮?fù)用 body 的margin: 0 auto,但是需要一點(diǎn)點(diǎn)調(diào)整。<body>元素是塊級(jí)元素,意味著它占據(jù)了頁(yè)面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內(nèi)聯(lián)元素,不具備塊級(jí)元素的一些功能。所以為了使圖像有外邊距,我們必須使用display: block 給予其塊級(jí)行為。

          注:以上說明假定所選圖片小于頁(yè)面寬度(600 pixels)。更大的圖片會(huì)溢出 body 并占據(jù)頁(yè)面的其他位置。要解決這個(gè)問題,可以:

          1)使用 圖片編輯器 來減小圖片寬度; 2)用 CSS 限制圖片大小,即減小 <img> 元素 width 屬性的值(比如 400 px)。

          注:如果你暫時(shí)不能理解 display: block 和塊級(jí)元素與行內(nèi)元素的差別也沒關(guān)系;隨著你對(duì) CSS 學(xué)習(xí)的深入,你將明白這個(gè)問題。

          小結(jié)

          如果你按部就班完成本文的實(shí)踐,那么最終可以得到以下頁(yè)面


          相關(guān)推薦:

          前端新手看過來,手把手帶你輕松上手html的實(shí)操


          主站蜘蛛池模板: 无码一区二区三区爆白浆| 秋霞电影网一区二区三区| 日韩一区二区电影| 国产亚洲欧洲Aⅴ综合一区| 欧洲精品免费一区二区三区| 日韩精品一区二区三区毛片| 视频一区二区在线观看| 性色AV一区二区三区| 高清精品一区二区三区一区| 一区二区三区四区无限乱码| 日本一区二区三区在线观看| AV天堂午夜精品一区二区三区| 亚洲性日韩精品国产一区二区| 中文字幕日韩精品一区二区三区 | 亚洲熟妇av一区| 国产一在线精品一区在线观看| 国产精品一区二区四区| 91国偷自产一区二区三区| 老熟女五十路乱子交尾中出一区| 一区二区三区国模大胆| 天堂成人一区二区三区| 午夜福利av无码一区二区 | 亚洲美女视频一区二区三区| 色老板在线视频一区二区| 精品人妻一区二区三区四区| 日韩在线视频一区二区三区| 亚洲.国产.欧美一区二区三区| tom影院亚洲国产一区二区| 蜜臀AV一区二区| 国产精品乱码一区二区三| 亚洲AV成人一区二区三区观看 | 最新中文字幕一区二区乱码| 亚洲综合一区二区三区四区五区 | 亚洲高清一区二区三区| 无码播放一区二区三区| 国产MD视频一区二区三区| 亚洲性日韩精品国产一区二区| 中文字幕在线无码一区| 中文字幕AV一区二区三区 | 五十路熟女人妻一区二区| 天天爽夜夜爽人人爽一区二区 |