老师嗯啊好深再用力一点,亚洲最大福利视频网,国产伦理电影网

(

元素表示文檔、頁面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。) 元素，構(gòu)成對應(yīng)于每個(gè)選項(xiàng)卡的內(nèi)容面板。每個(gè)面板包含一些示例內(nèi)容。

這里的思路是我們將樣式化選項(xiàng)卡看起來是一個(gè)標(biāo)準(zhǔn)的水平導(dǎo)航菜單，使用絕對定位樣式化面板互相坐落其頂上。我們也給你一點(diǎn)JavaScript包含到你的頁面上，當(dāng)選項(xiàng)卡被按下時(shí)，顯示對應(yīng)的面板，并且樣式化選項(xiàng)卡本身。你不需要在這個(gè)階段了解JavaScript本身，但是你應(yīng)該盡快學(xué)習(xí)一些基本的 JavaScript——你的用戶界面越復(fù)雜，越需要一些JavaScript來實(shí)現(xiàn)你渴望的功能。

一般設(shè)置

開始前，在?


    Information

    Some very important information about your app:

    
      It has a really cool slide-out information box.
      This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.
      It also uses a cool technique called the checkbox hack.
      This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)

這個(gè)例子并沒有用先前的例子，所以我們需要一個(gè)新的開始文件。讓我們來仔細(xì)觀察一下這個(gè)HTML文件：

?



  ...

//label的 for屬性規(guī)定label屬性綁定到哪個(gè)表單元素。

開始，我們看到了一個(gè)label 元素和input元素——元素普遍用來聯(lián)系文字標(biāo)簽和表單，目的是能更好的理解表單（允許用戶查看表單元素的描述）。這里通過for屬性綁定id到了標(biāo)簽的checkbox元素。

提示：我們已經(jīng)設(shè)置了一個(gè)特殊的問題標(biāo)記特性到我們的HTML中，來當(dāng)作我們的信息圖標(biāo)——這代表著這個(gè)按鈕將可以按下顯示或隱藏面板。

現(xiàn)在我們使用這些元素稍稍不同的目的——另一個(gè)標(biāo)簽有副作用使你能通過點(diǎn)擊checkbox的label標(biāo)簽來選擇這個(gè)checkbox，就好像點(diǎn)擊了這個(gè)checkbox自己一樣。這就會實(shí)現(xiàn)有名的checkbox hack 技術(shù)，可以提供無JS的方法來控制一個(gè)元素，通過一個(gè)按鈕的聯(lián)系。我們將控制的元素使aside元素，通過其他兩個(gè)（為了簡潔起見，我們已將其內(nèi)容從上述代碼列表中刪除）。

在下面的部分我們將解釋這一切如何運(yùn)作。

設(shè)置表單元素樣式

首先讓我們處理表單元素 - 在style標(biāo)簽之間添加以下CSS：

label[for="toggle"] {
  font-size: 3rem;
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 1;
  cursor: pointer;
}

input[type="checkbox"] {
  position: absolute;
  top: -100px;
}

第一條label樣式的規(guī)則，我們有：
- 設(shè)置字體大小使圖標(biāo)更美觀。
- 設(shè)置為絕對定位，使用top屬性和right屬性來讓他能很合適的位于右上角。
- 設(shè)置z-index屬性為1——因此當(dāng)信息面板被賦予樣式和顯示的時(shí)候，不會覆蓋我們的圖標(biāo)；相反圖標(biāo)依然會位于最上層能夠再次被按下來隱藏信息平板。
- 使用cursor屬性來說改變鼠標(biāo)的指針，當(dāng)鼠標(biāo)懸浮在圖標(biāo)上面的時(shí)候變成一個(gè)手形指針（就像你看到的當(dāng)懸浮在鏈接上一樣），作為一個(gè)額外的可視化線索告訴用戶這個(gè)圖標(biāo)可以做一些有趣的事情。
第二條規(guī)則是在實(shí)際的checkbox元素上設(shè)置絕對定位屬性，并隱藏在頂部的上面，我們并不希望在我們的用戶界面里看到她。

設(shè)置面板的樣式

現(xiàn)在是時(shí)候?yàn)閷?shí)際的滑動面板設(shè)計(jì)風(fēng)格了。在你的css底部添加下列規(guī)則：

aside {
  background-color: #a60000;
  color: white;

  width: 340px;
  height: 98%;
  padding: 10px 1%;

  position: fixed;
  top: 0;
  right: -370px;

  transition: 0.6s all;
}

這里有很多項(xiàng)——讓我們一點(diǎn)一點(diǎn)討論：

首先，我們在信息盒子中設(shè)置了一些簡單的背景顏色和顏色。
然后，我們在面板上設(shè)置一個(gè)固定的寬度，讓她的高度充滿整個(gè)瀏覽器窗口的高度。
我們同樣包括一些內(nèi)邊距來組成我們小于那個(gè)要的高度和寬度總體的值（如果我們沒有設(shè)置box-sizing：border-box來說的話是很必要的，正如這個(gè)例子）
然后，我們設(shè)置面板的定位為fixed，即使頁面的內(nèi)容在滾動，也總是顯示在同一個(gè)位置。我們把設(shè)置top屬性讓窗口粘在頂部，然后設(shè)置默認(rèn)情況下遠(yuǎn)離屏幕，設(shè)置right屬性使其位于屏幕的右邊。
最后我們設(shè)置transition屬性，Transitions是一個(gè)有意思的特性，允許你在狀態(tài)改變的時(shí)候平滑的過渡，而不是粗暴的“變”或“還原”。在這個(gè)例子中我們嘗試在checkbox被選中時(shí)讓面板平滑的滑動到屏幕上。（或者換句話說，當(dāng)問題標(biāo)記圖標(biāo)被點(diǎn)擊以后——記住，點(diǎn)擊標(biāo)簽也會選擇相對應(yīng)的checkbox！我們已經(jīng)告訴你這是一種hack了）你將會學(xué)到更多。。。

設(shè)置選擇后的狀態(tài)

這是最后的css添加——把這些放到你的css底部:

input[type=checkbox]:checked + aside {
  right: 0px;
}

這里的選擇器是復(fù)雜的——我們選擇元素鄰接的

元素，但是僅僅在他被選擇（請注意使用checked偽類來實(shí)現(xiàn)此目的），在這種情況下，我們將right屬性設(shè)置為0px，會造成面板再次出現(xiàn)在屏幕上（由于過渡屬性會平滑的出現(xiàn)）。再一次點(diǎn)擊這個(gè)標(biāo)簽會取消選中checkbox，面板將會跟著再一次消失。

所以你有它 ——一個(gè)相當(dāng)巧妙的避免使用JavaScript來創(chuàng)建一個(gè)切換按鈕效果方式。這將在IE9及以上版本中起作用（平滑過渡將在IE10及更高版本中起作用）。這種效果確實(shí)有一些問題 ——這是有點(diǎn)濫用表單元素（它們不是為了這個(gè)目的），并且在可訪問性方面效果不是很好 - 標(biāo)簽在默認(rèn)情況下不可聚焦，并且表單元素的非語義使用可能會導(dǎo)致屏幕朗讀器出現(xiàn)問題。 JavaScript和鏈接或按鈕可能更合適，但這樣的實(shí)驗(yàn)仍然很有趣。

最后完成的代碼如下：
（另外這里我使用了?來取代那個(gè)問號的圖標(biāo)，效果是一樣的。）




    
    Hidden info panel

  





  ?
  
  
    Information

    Some very important information about your app:

    
      It has a really cool slide-out information box.
      This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.
      It also uses a cool technique called the checkbox hack.
      This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)

gif效果圖：

總結(jié)

這樣完成了我們對定位的關(guān)注——現(xiàn)在，你應(yīng)該理解基本機(jī)制的工作原理，同樣理解了怎樣應(yīng)用這些知識去構(gòu)建一些有趣的用戶界面功能，不要由于你還未完全理解所有的知識而擔(dān)心——定位是一個(gè)相當(dāng)高級的話題，你可以隨時(shí)讀這篇文章來幫助你的理解。下一個(gè)主題我們將轉(zhuǎn)向Flexbox。

【end】

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS學(xué)習(xí)摘要-定位實(shí)例

CSS學(xué)習(xí)摘要-定位實(shí)例

列表消息盒子

The first tab

The second tab

The third tab

一般設(shè)置

設(shè)置表單元素樣式

設(shè)置面板的樣式

設(shè)置選擇后的狀態(tài)

相關(guān)文章

CSS學(xué)習(xí)摘要-定位

CSS學(xué)習(xí)摘要-布局

CSS學(xué)習(xí)摘要-浮動與清除浮動

CSS學(xué)習(xí)摘要-數(shù)值和單位及顏色

css 定位及屬性命名規(guī)范

發(fā)表評論

0條評論

kuangcaibao

男|高級講師

TA的文章

jupyter安裝tensorflow

SpringBoot集成Redis

Facebook宣布“元宇宙”相關(guān)部門負(fù)責(zé)人晉升首席技術(shù)官

浮動布局錯誤

一次完整的react hooks實(shí)踐

React Router4.0

也來探討一下Object.assign

React源碼解析之React.children.map()

最新活動