Question

我绝对是HTML和CSS的初学者。我想做的是在网页的左侧创建一个条带，类似于： https://www.inside.com/all

条带有许多可点击的图标，当一个向下滑动页面时，条带和徽标将保留在同一位置。

有没有办法查看页面源并了解它是如何实现的？如果没有，我感谢任何有关如何解决这个问题的帮助。

Answer 1

关键是使用position: fixed;和height: 100%;。

CSS代码

.verticalStrip {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  background-color: grey;
  height:100%;
}

.content {
  padding-left: 250px;
}

HTML代码

<div class="content"> content of the page....</div>

工作演示：http://jsfiddle.net/h85er/

Answer 2

如果您使用的是现代浏览器，例如Chrome，Firefox甚至更新版本的IE，那么您可以使用检查工具。在chrome中，只需右键单击要查看源的页面的任何部分，然后单击Inspect Element。

否则，大多数浏览器都允许您查看页面源。通常，这是一个简单的右键单击，或工具栏中的某个选项。

可以使用屏幕左侧position:fixed;left:0;top:0;左侧固定位置的div元素轻松重新创建导航栏。然后，列表（ul）可用于各个导航元素。当然，您需要使用list-style: none;删除那些难看的子弹点。

编辑：JSfiddle可用here

在HTML或CSS中创建垂直条带

2 个答案: