如何在网页中添加固定边栏？

Question

我使用Visual Studio和Web Matrix在ASP.NET中创建了simple web site。它非常基本，是一个单一的小马＃34;你可能会说 - 它允许你阅读马克吐温的各种作品，其中文字根据谁是＆＃34;谈话而着色。＆＃34;

因为在某些情况下可能会有数十种声音＆＃34;因此使用了许多颜色，这对于读者来说可能是一个挑战，要记住哪种颜色与哪个角色有关（尽管有一个弹出/悬停提示告诉你）。我有一个＆＃34; Dialog Colorization Table＆＃34;在每件作品开始时（Huck Finn，Tom Sawyer，Roughing It和Innocents Abroad都是目前正在完成的作品）。

然而，如果一个人忘记/不知道悬停提示告诉他们说话者是谁，他们可能会感到不得不一直滚动到顶部以提醒自己谁是＆＃34;天蓝色＆＃34;等。显然是一种令人不快的努力。

一位朋友（实际上是几本关于吐温的书籍的作者，与我相对应）建议粘贴＃34;语音表＆＃34;到页面的一边，如下：

我认为这是一个好主意，但不知道这将付诸实践是多么困难。目前，＆＃34;免费区＆＃34;在边缘只是 - 宽边缘。我不太了解HTML和CSS（和jQuery？），知道如何转换这个＆＃34;空白区域＆＃34;到＃34;对话框着色表＆＃34;。

的固定区域

是否可以毫不费力地进行此更改/添加？如果是这样，怎么样？

更新

当然，这意味着必须更换特定的＆＃34;固定表＆＃34;每次用户更改文档时（Huck Finn的列表与Tom Sawyer的列表不同，等等）

也许要做的就是弹出整个语音表＆＃34;在＆＃34; OnHover＆＃34;事件，以某种方式突出当前的一个。例如，如果汤姆正在说话，那就做出＃34;这就是汤姆索亚说话＆＃34;表中的行加粗，或者某些这样的行）

Answer 1

在更改任何内容之前，请确保您已获得备份。

在小提琴中做出的简单结果（仅限演示）：http://jsfiddle.net/marc_g/6y10v1fj/

目前，您的网站内容宽度为960px。您正在使用的样式表包含以下代码：

.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
}

如果您想添加侧边栏，您首先必须扩展内容包装器类的宽度。在样式表中用以下内容替换上面提到的行：

.content-wrapper {
   margin: 0 auto;
   max-width: 1180px;
}

您现在可以为侧边栏添加220个额外像素。

然后，您必须为侧边栏创建额外的样式表分区。您可以通过将以下代码添加到样式表来完成此操作：

#sidebar_right {
   background: #000;
   width: 200px;
   height: auto;
   top: 20%;
   position: fixed;
   display: inline-block;
   margin-left: 20px;
}

同时添加＆＃39;标签＆＃39;样式表的样式表分区，因为我已经注意到这个div还没有被声明。我们必须将内容浮动到左侧。您可以通过将以下代码添加到样式表来完成此操作：

#tabs{
   width: 960px;
   height: auto;
   float: left;
}

然后，您必须将侧边栏div类添加到.html页面。关闭div ＆＃39;标签＆＃39; 后，请使用以下代码，可能在HTML文件的第113行：

<div id="sidebar_right">&nbsp;</div>

之后，将nbsp替换为ul元素及其元素，如：

<ul>
    <li><a href="joanna.html" title="Description">Joanna</a></li>
    <li><a href="joanna2.html" title="Description">Joanna2</a></li>
</ul>

如果您想设置此样式，可以通过将以下代码添加到样式表来完成此操作：

#sidebar_right ul{
   padding:20px;
   float: left;
}

#sidebar_right ul li{
   list-style: none;
}

#sidebar_right ul li a{
   height: 25px;
   width: 160px;
   color: #FFF;
   text-decoration: none;
   font-weight: bold;
}

另请参阅http://www.w3schools.com/tags/tag_ul.asp以获取有关ul和li元素的更多信息。

Answer 2

.mydiv {
position:fixed;
top: 50px;
right: 50px;
}

根据需要更改顶部和右侧。或者如果你喜欢左下角。