CSS学习摘要-定位实例

(

元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。) 元素，构成对应于每个选项卡的内容面板。每个面板包含一些示例内容。

这里的思路是我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。我们也给你一点JavaScript包含到你的页面上，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。你不需要在这个阶段了解JavaScript本身，但是你应该尽快学习一些基本的 JavaScript——你的用户界面越复杂，越需要一些JavaScript来实现你渴望的功能。

一般设置

开始前，在?


    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.)

这个例子并没有用先前的例子，所以我们需要一个新的开始文件。让我们来仔细观察一下这个HTML文件：

❔



  ...

//label的 for属性规定label属性绑定到哪个表单元素。

开始，我们看到了一个label 元素和input元素——元素普遍用来联系文字标签和表单，目的是能更好的理解表单（允许用户查看表单元素的描述）。这里通过for属性绑定id到了标签的checkbox元素。

提示：我们已经设置了一个特殊的问题标记特性到我们的HTML中，来当作我们的信息图标——这代表着这个按钮将可以按下显示或隐藏面板。

现在我们使用这些元素稍稍不同的目的——另一个标签有副作用使你能通过点击checkbox的label标签来选择这个checkbox，就好像点击了这个checkbox自己一样。这就会实现有名的checkbox hack 技术，可以提供无JS的方法来控制一个元素，通过一个按钮的联系。我们将控制的元素使aside元素，通过其他两个（为了简洁起见，我们已将其内容从上述代码列表中删除）。

在下面的部分我们将解释这一切如何运作。

设置表单元素样式

首先让我们处理表单元素 - 在style标签之间添加以下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样式的规则，我们有：
- 设置字体大小使图标更美观。
- 设置为绝对定位，使用top属性和right属性来让他能很合适的位于右上角。
- 设置z-index属性为1——因此当信息面板被赋予样式和显示的时候，不会覆盖我们的图标；相反图标依然会位于最上层能够再次被按下来隐藏信息平板。
- 使用cursor属性来说改变鼠标的指针，当鼠标悬浮在图标上面的时候变成一个手形指针（就像你看到的当悬浮在链接上一样），作为一个额外的可视化线索告诉用户这个图标可以做一些有趣的事情。
第二条规则是在实际的checkbox元素上设置绝对定位属性，并隐藏在顶部的上面，我们并不希望在我们的用户界面里看到她。

设置面板的样式

现在是时候为实际的滑动面板设计风格了。在你的css底部添加下列规则：

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

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

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

  transition: 0.6s all;
}

这里有很多项——让我们一点一点讨论：

首先，我们在信息盒子中设置了一些简单的背景颜色和颜色。
然后，我们在面板上设置一个固定的宽度，让她的高度充满整个浏览器窗口的高度。
我们同样包括一些内边距来组成我们小于那个要的高度和宽度总体的值（如果我们没有设置box-sizing：border-box来说的话是很必要的，正如这个例子）
然后，我们设置面板的定位为fixed，即使页面的内容在滚动，也总是显示在同一个位置。我们把设置top属性让窗口粘在顶部，然后设置默认情况下远离屏幕，设置right属性使其位于屏幕的右边。
最后我们设置transition属性，Transitions是一个有意思的特性，允许你在状态改变的时候平滑的过渡，而不是粗暴的“变”或“还原”。在这个例子中我们尝试在checkbox被选中时让面板平滑的滑动到屏幕上。（或者换句话说，当问题标记图标被点击以后——记住，点击标签也会选择相对应的checkbox！我们已经告诉你这是一种hack了）你将会学到更多。。。

设置选择后的状态

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

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

这里的选择器是复杂的——我们选择元素邻接的

元素，但是仅仅在他被选择（请注意使用checked伪类来实现此目的），在这种情况下，我们将right属性设置为0px，会造成面板再次出现在屏幕上（由于过渡属性会平滑的出现）。再一次点击这个标签会取消选中checkbox，面板将会跟着再一次消失。

所以你有它 ——一个相当巧妙的避免使用JavaScript来创建一个切换按钮效果方式。这将在IE9及以上版本中起作用（平滑过渡将在IE10及更高版本中起作用）。这种效果确实有一些问题 ——这是有点滥用表单元素（它们不是为了这个目的），并且在可访问性方面效果不是很好 - 标签在默认情况下不可聚焦，并且表单元素的非语义使用可能会导致屏幕朗读器出现问题。 JavaScript和链接或按钮可能更合适，但这样的实验仍然很有趣。

最后完成的代码如下：
（另外这里我使用了?来取代那个问号的图标，效果是一样的。）




    
    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效果图：

总结

这样完成了我们对定位的关注——现在，你应该理解基本机制的工作原理，同样理解了怎样应用这些知识去构建一些有趣的用户界面功能，不要由于你还未完全理解所有的知识而担心——定位是一个相当高级的话题，你可以随时读这篇文章来帮助你的理解。下一个主题我们将转向Flexbox。

【end】

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

CSS学习摘要-定位实例

CSS学习摘要-定位实例

列表消息盒子

The first tab

The second tab

The third tab

一般设置

设置表单元素样式

设置面板的样式

设置选择后的状态

相关文章

CSS学习摘要-定位

CSS学习摘要-布局

CSS学习摘要-浮动与清除浮动

CSS学习摘要-数值和单位及颜色

css 定位及属性命名规范

发表评论

0条评论

kuangcaibao

男|高级讲师

TA的文章

jupyter安装tensorflow

SpringBoot集成Redis

Facebook宣布“元宇宙”相关部门负责人晋升首席技术官

浮动布局错误

一次完整的react hooks实践

React Router4.0

也来探讨一下Object.assign

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

最新活动