摘要：學(xué)習(xí)摘要定位實(shí)例學(xué)習(xí)摘要定位實(shí)例注全文摘自定位實(shí)例列表消息盒子列表消息盒子我們研究的第一個(gè)例子是一個(gè)經(jīng)典的選項(xiàng)卡消息框，你想用一塊小區(qū)域包括大量信息時(shí)，一個(gè)非常常用的特征。刪除你的不需要居中顯示，添加定位調(diào)整屬性把她粘在瀏覽器的視域。
注：全文摘自MDN-CSS定位實(shí)例
我們研究的第一個(gè)例子是一個(gè)經(jīng)典的選項(xiàng)卡消息框，你想用一塊小區(qū)域包括大量信息時(shí)，一個(gè)非常常用的特征。這包括含有大信息量的應(yīng)用，比如策略戰(zhàn)爭(zhēng)游戲，比如從移動(dòng)版的網(wǎng)頁(yè)，屏幕狹小、空間有限；比如你可能想要放置許多信息的緊湊消息框，不用就會(huì)充滿整個(gè)UI。我們簡(jiǎn)單的例子完成后就會(huì)像下面這樣：
注意： 你能看完整的示例，可運(yùn)行在 info-box.html (source code)。檢出它以理解你在本文章里要建立什么。
你可能會(huì)想：”為什么不僅僅做獨(dú)立的選項(xiàng)卡為一個(gè)獨(dú)立的網(wǎng)頁(yè)，然后通過(guò)點(diǎn)擊不同的標(biāo)簽來(lái)在不同的頁(yè)面跳轉(zhuǎn)來(lái)達(dá)到這個(gè)效果？“這樣代碼可能會(huì)簡(jiǎn)單一些，是的。但是這樣每個(gè)獨(dú)立的”頁(yè)面“視圖將會(huì)實(shí)際上是一個(gè)新加載的網(wǎng)頁(yè)，跨視圖更難保存信息，并把這個(gè)特征融入一個(gè)更大的UI設(shè)計(jì)。另外，所謂的”單頁(yè)應(yīng)用“正在變得非常流行——尤其是移動(dòng)網(wǎng)頁(yè)UI——因?yàn)榘岩磺械姆?wù)放在一個(gè)多帶帶的文件上可以減少HTTP請(qǐng)求的數(shù)量來(lái)瀏覽所有內(nèi)容，從而提高性能。
注意： 一些網(wǎng)絡(luò)開發(fā)者甚至更超前，每次只加載一頁(yè)的信息，并且使用JavaScript諸如 XMLHttpRequest特征動(dòng)態(tài)改變信息顯示。在你學(xué)習(xí)的此刻，然而，我們希望盡可能保持簡(jiǎn)單。接下來(lái)有一些JavaScript，但是只有一點(diǎn)。
在開始之前，我們需要你拷貝文件到本地，當(dāng)作起始的HTML文件—— info-box-start.html. 保存到你的計(jì)算機(jī)合適的位置，然后在你的編輯器里打開。讓我們看看包含在 body 里的HTML代碼：
The first tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.
The second tab
This tab hasn"t got any Lorem Ipsum in it. But the content isn"t very exciting all the same.
The third tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!
- dui neque eleifend lorem, a auctor libero turpis at sem.
- Aliquam ut porttitor urna.
- Nulla facilisi
這樣我們已經(jīng)得到了一個(gè) 這里的思路是我們將樣式化選項(xiàng)卡看起來(lái)是一個(gè)標(biāo)準(zhǔn)的水平導(dǎo)航菜單，使用絕對(duì)定位樣式化面板互相坐落其頂上。我們也給你一點(diǎn)JavaScript包含到你的頁(yè)面上，當(dāng)選項(xiàng)卡被按下時(shí)，顯示對(duì)應(yīng)的面板，并且樣式化選項(xiàng)卡本身。你不需要在這個(gè)階段了解JavaScript本身，但是你應(yīng)該盡快學(xué)習(xí)一些基本的 JavaScript——你的用戶界面越復(fù)雜，越需要一些JavaScript來(lái)實(shí)現(xiàn)你渴望的功能。 開始前，在元素帶有類（class）為 info-box。此元素又包含一個(gè) div 包含三個(gè) (元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，其意在成為可獨(dú)立分配的或可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。) 元素，構(gòu)成對(duì)應(yīng)于每個(gè)選項(xiàng)卡的內(nèi)容面板。 每個(gè)面板包含一些示例內(nèi)容。
一般設(shè)置