http://orgmode.org/worg/org-tutorials/org-beamer/tutorial.html 目录浮动是一个非常不错的功能。如何达到这个效果？顺便说一句，我也在使用 org 模式
问问题
9818 次
4 回答
9
看看 CSS
position: fixed;
right: 0em;
top: 0em;
这是一个孤立的演示，包括在悬停时扩展菜单。
HTML
<div id="toc">
hello
<div id="full">hey there<br />This is the full TOC</div>
</div>
CSS
#toc {
position: fixed;
right: 0;
top: 0;
background-color:#FFF;
}
#toc #full { display: none; } /* Hide the full TOC by default */
#toc:hover #full{
display: block; /* Show it on hover */
}
于 2012-09-02T01:15:02.250 回答
2
如果您查看教程的源代码（同时移至http://orgmode.org/worg/exporters/beamer/tutorial.html），您会发现它引用了两个 css 文件http://orgmode.org/worg/样式/worg-zenburn.css和 */worg-classic.css。在那里你可以找到相关的 CSS。
这是您需要添加到 org-mode 文件的相关部分：
#+HTML_HEAD: <style> /* TOC inspired by http://jashkenas.github.com/coffee-script */
#+HTML_HEAD_EXTRA: @media all
#+HTML_HEAD_EXTRA: {
#+HTML_HEAD_EXTRA: #table-of-contents {
#+HTML_HEAD_EXTRA: font-size: 10pt;
#+HTML_HEAD_EXTRA: position: fixed;
#+HTML_HEAD_EXTRA: right: 2em;
#+HTML_HEAD_EXTRA: top: 0em;
#+HTML_HEAD_EXTRA: background: #2b2b2b;
#+HTML_HEAD_EXTRA: color: #dcdccc;
#+HTML_HEAD_EXTRA: -webkit-box-shadow: 0 0 1em #777777;
#+HTML_HEAD_EXTRA: -moz-box-shadow: 0 0 1em #777777;
#+HTML_HEAD_EXTRA: -webkit-border-bottom-left-radius: 5px;
#+HTML_HEAD_EXTRA: -moz-border-radius-bottomleft: 5px;
#+HTML_HEAD_EXTRA: text-align: right;
#+HTML_HEAD_EXTRA: /* ensure doesn't flow off the screen when expanded */
#+HTML_HEAD_EXTRA: max-height: 80%;
#+HTML_HEAD_EXTRA: overflow: auto; }
#+HTML_HEAD_EXTRA: #table-of-contents h2 {
#+HTML_HEAD_EXTRA: font-size: 10pt;
#+HTML_HEAD_EXTRA: max-width: 8em;
#+HTML_HEAD_EXTRA: font-weight: normal;
#+HTML_HEAD_EXTRA: padding-left: 0.5em;
#+HTML_HEAD_EXTRA: padding-left: 0.5em;
#+HTML_HEAD_EXTRA: padding-top: 0.05em;
#+HTML_HEAD_EXTRA: padding-bottom: 0.05em; }
#+HTML_HEAD_EXTRA: #table-of-contents #text-table-of-contents {
#+HTML_HEAD_EXTRA: display: none;
#+HTML_HEAD_EXTRA: text-align: left; }
#+HTML_HEAD_EXTRA: #table-of-contents:hover #text-table-of-contents {
#+HTML_HEAD_EXTRA: display: block;
#+HTML_HEAD_EXTRA: padding: 0.5em;
#+HTML_HEAD_EXTRA: margin-top: -1.5em; }
#+HTML_HEAD_EXTRA: #table-of-contents {
#+HTML_HEAD_EXTRA: color: black;
#+HTML_HEAD_EXTRA: background: #FFF;
#+HTML_HEAD_EXTRA: font-size: 80%;
#+HTML_HEAD_EXTRA: padding: .5em;
#+HTML_HEAD_EXTRA: margin: 1em -2em 1em 1em;
#+HTML_HEAD_EXTRA: display: block;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: #table-of-contents a {
#+HTML_HEAD_EXTRA: color: #003333;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: #table-of-contents a:hover {
#+HTML_HEAD_EXTRA: color: #003333;
#+HTML_HEAD_EXTRA: text-decoration: underline;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: #table-of-contents li {
#+HTML_HEAD_EXTRA: margin: .2em;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: #table-of-contents h2 {
#+HTML_HEAD_EXTRA: margin-top: .2em;
#+HTML_HEAD_EXTRA: border: none;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: } /* END OF @media all */
#+HTML_HEAD_EXTRA: @media screen {
#+HTML_HEAD_EXTRA: #table-of-contents {
#+HTML_HEAD_EXTRA: float: right;
#+HTML_HEAD_EXTRA: border: 1px solid #CCC;
#+HTML_HEAD_EXTRA: max-width: 50%;
#+HTML_HEAD_EXTRA: overflow: auto;
#+HTML_HEAD_EXTRA: }
#+HTML_HEAD_EXTRA: } /* END OF @media screen */
#+HTML_HEAD_EXTRA: </style>
于 2017-08-01T16:00:18.183 回答
0
它是用position: fixedcss 属性完成的，尽管旧的 ie 版本不支持它。
就像你说的，它在创建用户友好的界面时非常有用
于 2012-09-02T01:15:54.400 回答
0
您可以使用固定定位来相对于窗口放置一些东西。
<div id="contents" style="position:fixed;width: 200px;right:0;top:0">
Floating table of contents
<div id="expanded" style="display: none">
Content details
links
more links
more links
</div>
</div>
然后你可以使用 javascript 或者 css hover 伪类来扩展内容，这样当你将鼠标悬停在浮动的东西上时，它会显示更多的细节（通过将#expanded div 设置为 display: 块）。
要让 css hover psuedo-class 工作，您可以使用以下 css：
<style>
#contents:hover div {
display: block;
}
</style>
这意味着如果有人将鼠标悬停在#contents div 上，将显示#contents div 内的任何div。
于 2012-09-02T01:16:20.720 回答