Practical positioning examples

帶有標(biāo)簽的信息框

我們將看到的第一個例子是一個經(jīng)典的標(biāo)簽式信息框 - 這是一個非常常見的功能，當(dāng)您想將大量信息包裝到一個小區(qū)域時使用。 這包括信息量大的應(yīng)用程序，如戰(zhàn)略/戰(zhàn)爭游戲，手機版的網(wǎng)站，屏幕狹窄，空間有限，以及緊湊的信息框，你可能想要使大量的信息可用，而無需填充整個UI。 我們的簡單示例在完成后將如下所示:

;">

你可能會想，"為什么不只是將單獨的選項卡創(chuàng)建為單獨的網(wǎng)頁，而只是讓標(biāo)簽單擊到單獨的頁面來創(chuàng)建效果？ 這個代碼會更簡單，是的，但是每個單獨的"頁面"視圖實際上將是一個新加載的網(wǎng)頁，這將使得難以跨視圖保存信息，并將此功能集成到一個更大的UI設(shè)計。 此外，所謂的"單頁應(yīng)用"變得非常流行 - 尤其是對于移動網(wǎng)絡(luò)用戶界面 - 因為將所有內(nèi)容作為單個文件，減少了查看所有內(nèi)容所需的HTTP請求數(shù)，從而提高性能。

首先，我們希望您制作起始HTML文件的本地副本 - -positioning-examples / info-box-start.html"class ="external"> info-box-start.html 。 將這個地方保存在本地計算機上的某個地方，并在文本編輯器中打開它。 讓我們來看看包含在正文中的HTML:

<section class="info-box">
  <ul>
    <li><a href="#" class="active">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>
  <div class="panels">
    <article class="active-panel">
      <h2>The first tab</h2>

      <p>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.</p>
    </article>
    <article>
      <h2>The second tab</h2>

      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
    </article>
    <article>
      <h2>The third tab</h2>

      <p>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!</p>

      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>

首先，我們希望您制作起始HTML文件的本地副本 - -positioning-examples / info-box-start.html"class ="external"> info-box-start.html 。 將這個地方保存在本地計算機上的某個地方，并在文本編輯器中打開它。 讓我們來看看包含在正文中的HTML:

這里的想法是，我們將樣式的標(biāo)簽看起來像一個標(biāo)準(zhǔn)的水平導(dǎo)航菜單，并使樣式的面板，以使用絕對定位的另一個頂部。 我們還會給你一些JavaScript來包含在頁面上，以便在按下標(biāo)簽時顯示相應(yīng)的面板，并設(shè)置標(biāo)簽本身的樣式。 在這個階段，您不需要了解JavaScript本身，但您應(yīng)該考慮盡快學(xué)習(xí)一些基本的 JavaScript - 您的UI功能變得越復(fù)雜 ，更可能需要一些JavaScript來實現(xiàn)所需的功能。

一般設(shè)置

首先，在打開和關(guān)閉之間添加以下內(nèi)容 默認(rèn)情況下，寫在該元素內(nèi)的樣式指令應(yīng)為CSS。"> < style> 標(biāo)簽:

html {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

這只是一些通用設(shè)置，在我們的頁面上設(shè)置無襯線字體，使用 border-box Web / CSS / box-sizing"title ="box-sizing屬性用于更改用于計算元素寬度和高度的默認(rèn)CSS框模型?？梢允褂么藢傩詠砟M瀏覽器的行為 不正確支持CSS盒子模型規(guī)范"> box-sizing 模型，并擺脫默認(rèn)的 CN / docs / Web / HTML / Element / body"title ="HTML元素表示HTML文檔的內(nèi)容，文檔中只能有一個元素。"> < body> / a> margin。

接下來，在您之前的CSS下面添加以下內(nèi)容:

.info-box {
  width: 450px;
  height: 400px;
  margin: 0 auto;
}

這會在內(nèi)容上設(shè)置特定的寬度和高度，并使用舊的 margin:0 auto 技巧將其居中在屏幕上。 以前在課程中，我們建議不要在內(nèi)容容器上設(shè)置固定高度，如果可能的話; 這是確定在這種情況下，因為我們有固定的內(nèi)容在我們的選項卡。 它也看起來有點不舒服，有不同的標(biāo)簽在不同的高度。

為樣式設(shè)置選項卡

現(xiàn)在我們要將標(biāo)簽樣式看起來像標(biāo)簽頁 - 基本上，這些是一個水平導(dǎo)航菜單，但是不是像我們以前在課程中看到的那樣加載不同的網(wǎng)頁，它們會導(dǎo)致不同的面板顯示在 同一頁。 首先，在CSS底部添加以下規(guī)則，刪除默認(rèn)的 -left元素的CSS屬性設(shè)置元素左側(cè)所需的填充空間，填充區(qū)域是元素內(nèi)容和邊界之間的空格，不允許使用負(fù)值"> padding- left 和 元素設(shè)置元素頂部所需的邊距空間，也允許使用負(fù)值。"> margin-top 從無序列表:

.info-box ul {
  padding-left: 0;
  margin-top: 0;
}

注意:在此示例中，我們在鏈的開頭使用帶有 .info-box 的后代選擇器 - 這樣我們可以將此功能插入到其他 內(nèi)容，而不必?fù)?dān)心干擾應(yīng)用到頁面其他部分的樣式。

添加以下CSS:

.info-box li {
  float: left;
  list-style-type: none;
  width: 150px;
}

.info-box li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  line-height: 3;
  background-color: red;
  color: black;
  text-align: center;
}

最后對于這一節(jié)，我們將在鏈接狀態(tài)上設(shè)置一些樣式。 首先，當(dāng)焦點/懸停時，我們將設(shè)置標(biāo)簽的:focus 和:hover 狀態(tài)看起來不同，為用戶提供一些視覺反饋。 其次，當(dāng)活動的類存在時，我們將設(shè)置一個規(guī)則，在其中一個選項卡上放置相同的樣式。 我們將在單擊選項卡時使用JavaScript設(shè)置。 將以下CSS放置在其他樣式下面:

.info-box li a:focus, .info-box li a:hover {
  background-color: #a60000;
  color: white;
}

.info-box li a.active {
  background-color: #a60000;
  color: white;
}

設(shè)計面板樣式

下一個工作是為我們的面板設(shè)計風(fēng)格。 我們走吧！

下一個工作是為我們的面板設(shè)計風(fēng)格。 我們走吧！

.info-box .panels {
  height: 352px;
  position: relative;
  clear: both;
}

下一個工作是為我們的面板設(shè)計風(fēng)格。 我們走吧！

我們將在這里添加的第二條規(guī)則是，其中設(shè)置了 active-panel 的類的面板將具有 developer.mozilla.org/zh-CN/docs/Web/CSS/z-index"title ="z-index屬性指定定位的元素及其后代的z順序，當(dāng)元素重疊時，z順序確定哪個 一個覆蓋另一個。具有較大z-索引的元素通常覆蓋具有較低索引的元素。"> z-index 為1，應(yīng)用于它， 其他面板(定位的元素默認(rèn)情況下具有 z-index 0，這將把它們放在下面)。 同樣，我們將在適當(dāng)?shù)臅r間使用JavaScript添加此類。

.info-box article {
  position: absolute;
  top: 0;
  left: 0;
  height: 352px;
  padding: 10px;
  color: white;
  background-color: #a60000;
}

.info-box .active-panel {
  z-index: 1;
}

添加JavaScript

獲取此功能的最后一步是添加一些JavaScript。 放置以下代碼塊，與打開和關(guān)閉之間寫的一樣。 script元素用于嵌入或引用可執(zhí)行腳本"> < script> 標(biāo)記(您會在HTML內(nèi)容下方找到這些標(biāo)記):

var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');

for(i = 0; i < tabs.length; i++) {
  var tab = tabs[i];
  setTabHandler(tab, i);
}

function setTabHandler(tab, tabPos) {
  tab.onclick = function() {
    for(i = 0; i < tabs.length; i++) {
      if(tabs[i].getAttribute('class')) {
        tabs[i].removeAttribute('class');
      }
    }

    tab.setAttribute('class', 'active');

    for(i = 0; i < panels.length; i++) {
      if(panels[i].getAttribute('class')) {
        panels[i].removeAttribute('class');
      }
    }

    panels[tabPos].setAttribute('class', 'active-panel');
  }
}

此代碼執(zhí)行以下操作:

• First we save a reference to all the tabs and all the panels in two variables called tabs and panels, so we can easily do things to them later on.
• Then we use a for loop to cycle through all the tabs and run a function called setTabHandler() on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number i that indentifies the tab's position in the tabs array.
• In the setTabHandler() function, the tab has an onclick event handler set on it, so that when the tab is clicked, the following occurs:
  • A for loop is used to cycle through all the tabs and remove any classes that are present on them.
  • A class of active is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same color and background-color on the tab as the panels are styled with.
  • A for loop is used to cycle through all the panels and remove any classes that are present on them.
  • A class of active-panel is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its z-index to 1, making it appear over the top of the other panels.

這是第一個例子。 保持你的代碼打開，我們將添加到它在第二個。

固定位置標(biāo)簽信息框

在第二個示例中，我們將使用我們的第一個示例 - 我們的信息框，并將其添加到完整網(wǎng)頁的上下文中。 但不僅如此 - 我們會給它固定的位置，使它在瀏覽器窗口中保持在相同的位置。 當(dāng)主內(nèi)容滾動時，信息框?qū)⒈３衷谄聊簧系南嗤恢谩?我們完成的示例將如下所示:

height:585px; margin:0px auto; width:1118px;">

作為起點，您可以使用本文第一部分中完整的示例，也可以創(chuàng)建本地副本 css-layout / practical-positioning-examples / info-box.html"class ="external"> info-box.html 從我們的Github倉庫。

HTML添加

首先，我們需要一些額外的HTML來表示網(wǎng)站的主要內(nèi)容。 添加以下 內(nèi)容的主題分組，通常帶有標(biāo)題。> < section> docs / Web / HTML / Element / body"title ="HTML元素表示HTML文檔的內(nèi)容。文檔中只能有一個元素。"> < body> >標(biāo)記，就在現(xiàn)有部分之前:

<section class="fake-content">
  <h1>Fake content</h1>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
  <p>This is fake content. Your main web page contents would probably go here.</p>
</section>

對現(xiàn)有CSS的更改

接下來，我們需要對現(xiàn)有CSS進(jìn)行一些小的更改，以獲取放置和定位的信息框。 更改您的 .info-box 規(guī)則以擺脫 margin:0 auto; (我們不再希望信息框居中)，添加 //developer.mozilla.org/zh-CN/docs/Web/CSS/position"title ="position CSS屬性為定位元素選擇替代規(guī)則，旨在對腳本動畫效果有用。"> position :fixed; ，然后粘貼到 title ="頂部CSS屬性指定已定位元素的位置的一部分，它對瀏覽器視口的非定位元素沒有影響"> top 。

它現(xiàn)在應(yīng)該看起來像這樣:

.info-box {
  width: 450px;
  height: 400px;
  position: fixed;
  top: 0;
}

設(shè)計主要內(nèi)容

這個例子只剩下為主要內(nèi)容提供一些樣式。 在CSS的其余部分下面添加以下規(guī)則:

.fake-content {
  background-color: #a60000;
  color: white;
  padding: 10px;
  height: 2000px;
  margin-left: 470px;
}

首先，我們給內(nèi)容相同background-color, 通過顏色值或關(guān)鍵字transparent來定義元素的背景顏色。"> background-color ，CN / docs / Web / CSS / color"title ="color屬性設(shè)置元素的文本內(nèi)容的前景顏色及其裝飾，它不會影響元素的任何其他特性;它實際上應(yīng)該被稱為文本顏色color, and 除了歷史原因以及它在CSS級別1中的外觀外，還會被命名為"> color 和zh-CN / docs / Web / CSS / padding"title ="padding屬性設(shè)置元素所有邊上的填充空間，填充區(qū)域是元素內(nèi)容和邊框之間的空格，不允許使用負(fù)值padding as the info-box panels.\">。"> padding 作為信息框面板。然后我們給它一個大的margin-left to move it over to the right, making space for the info-box to\">與元素關(guān)聯(lián)的框的左側(cè)，也允許使用負(fù)值。"> margin-left 將其移動到右側(cè)，為信息框留出空間坐在，所以它不重疊任何東西。

這標(biāo)志著第二個例子的結(jié)束; 我們希望你會發(fā)現(xiàn)第三個也很有趣。

一個滑動隱藏面板

我們在這里展示的最后一個例子是一個面板，在一個圖標(biāo)的按下，在屏幕上滑動和滑動 - 如前所述，這是受歡迎的情況，如移動布局，可用的屏幕空間很小， 想通過顯示菜單或信息面板而不是有用的內(nèi)容來使用它的大部分。

我們完成的示例將如下所示:

height:521px; margin:0px auto; width:950px;">

作為起點，請創(chuàng)建 -start.html"class ="external"> hidden-info-panel-start.html 從我們的Github倉庫。 這不從前面的例子繼續(xù)，因此需要一個新的開始文件。 讓我們看看文件中的HTML:

<label for="toggle">?</label>
<input type="checkbox" id="toggle">
<aside>

  ...

</aside>

從這里開始，我們有一個 項目在用戶界面中。"> < label> 元素和 / Element / input"title ="HTML輸入元素用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。輸入的工作原理根據(jù)類型屬性的值而有很大不同。"> 代碼>< input> element - < label> 元素通常用于將文本標(biāo)簽與表單元素相關(guān)聯(lián)， 什么描述與什么形式元素)。 這里，它使用 for 和 id 屬性與< input>

這里我們將使用這些元素的目的稍有不同 - < label> 元素的另一個有用的副作用是，您可以單擊復(fù)選框的標(biāo)簽以選中復(fù)選框， 本身。 這導(dǎo)致了眾所周知的復(fù)選框hack ，它提供了一種無JavaScript的方式 通過切換按鈕來控制元素。 我們要控制的元素是 文檔，其內(nèi)容與文檔的主要內(nèi)容相切(通常作為側(cè)邊欄)。"> < aside> 元素跟隨其他兩個 出于簡潔起見上面的代碼列表)。

在下面的部分，我們將解釋這一切如何工作。

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

首先讓我們處理表單元素 - 在 元素包含文檔或文檔的一部分的樣式信息默認(rèn)情況下，寫在該元素內(nèi)的樣式指令應(yīng)為CSS。"> < style> tags:

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

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

第一個規(guī)則樣式為< label> ; 這里我們有:

• Set a large font-size to make the icon nice and big.
• Set position absolute on it, and used top and right to position it nicely in the top-right corner.
• Set a z-index of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.
• Used the cursor property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.

第二個規(guī)則設(shè)置 腳本化的動畫效果"> position absolute ，并將其隱藏在頂部 屏幕。 我們實際上不想在我們的UI上看到這個。

為面板設(shè)置樣式

現(xiàn)在是時候?qū)嶋H滑動面板本身的風(fēng)格。 將以下規(guī)則添加到CSS的底部:

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

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

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

  transition: 0.6s all;
}

這里有很多事情 - 讓我們逐一討論一下:

• First, we set some simple background-color and color on the info box.
• Next, we set a fixed width on the panel, and make its height the entire height of the browser viewport.
• We also include some padding to make up the width/height to the total value we want (this was necessary as we've not set box-sizing: border-box; on this example).
• Next we set position: fixed; on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the top of the viewport, and set it so that by default it is offscreen to the right.
• Finally, we set a transition on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <label> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...

設(shè)置檢查狀態(tài)

有一個最后一點的CSS添加 - 把以下在CSS的底部:

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

<aside> element adjacent to the <input> element, but only when it is checked (note the use of\">這里的選擇器非常復(fù)雜 - 我們選擇與< input> 元素相鄰的< aside> 元素，但只有當(dāng)它被選中)，復(fù)選框(輸入類型="復(fù)選框")或選項(選擇中的選項)元素，選中或切換到打開狀態(tài)。用戶可以通過單擊元素或選擇不同的值來更改此狀態(tài)，其中:checked pseudo-class to achieve this).\">case:checked偽類不再適用于這個元素，而是將對相關(guān)的一個。\'> :checked 偽類來實現(xiàn)這一點)。在這種情況下，我們設(shè)置right property of the <aside> to 0px, which causes the panel to appear on the screen\">定位元素"> right 屬性設(shè)置為 0px ，這導(dǎo)致面板出現(xiàn)在屏幕上再次(由于轉(zhuǎn)變而平滑)。再次單擊標(biāo)簽會取消選中復(fù)選框，這會再次隱藏面板。

所以你有它 - 一個相當(dāng)聰明的JavaScript免費的方式來創(chuàng)建一個切換按鈕效果。 這將工作在IE9及以上(平滑過渡將工作在IE10及以上。)這種效果有一些關(guān)注 - 這是一個濫用的形式元素(他們不是為了這個目的)，和效果 在可訪問性方面不是很好 - 標(biāo)簽在默認(rèn)情況下不可聚焦，并且表單元素的非語義使用可能導(dǎo)致屏幕閱讀器的問題。 JavaScript和鏈接或按鈕可能更合適，但它仍然是有趣的實驗。

概要

所以，我們看看定位 - 現(xiàn)在，你應(yīng)該有一個基本的機制如何工作的想法，以及理解如何開始應(yīng)用這些來構(gòu)建一些有趣的UI功能。 不要擔(dān)心，如果你沒有立即得到這一切 - 定位是一個相當(dāng)高級的話題，你可以總是通過文章再次幫助你的理解。 接下來的主題是Flexbox。