gpt4 book ai didi

html - 在 HTML 中做旁注的可靠方法是什么?

转载 作者:太空狗 更新时间:2023-10-29 15:02:48 26 4
gpt4 key购买 nike

我在网上发表了很多文字,甚至写了一个system为我格式化 HTML。现在,我遇到了一个问题:我想像书籍一样在 HTML 页面中制作旁注。只是为了解释一下,旁注是紧邻正文的页边空白中的那些注释。

有没有人知道一种好的、可靠的方法来完成它们——最好是使用纯 CSS 而不是 JavaScript。谢谢!

最佳答案

好的,让它大大对浏览器更友好(FF3、IE7/8、Chrome):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>Layout</title>
<style type="text/css">
html, body, #wrapper { height: 100%; margin: 0; padding: 0; }
body { background-color: #666; width: 100%; text-align: center; font-family: Arial, sans-serif; }
#wrapper { width: 960px; margin: 0 auto; background: white; padding: 20px 0; }
#page { width: 660px; margin: 0 auto; text-align: justify; }
div.sidenote-left { float: left; margin-left: -150px; }
div.sidenote-right { float: right; margin-right: -150px; }
div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; }
div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="page">
<p>In the 90s we saw the rise of GUIs (yes I know Macs were around in the 80s but GUIs became the standard for everyone once Windows took hold). This transition had many casualties like Lotus 1-2-3 (which was basically killed by Excel on Windows) and Wordperfect (MS Word killed it). Now you can argue that MS had the inside track since they also produced Windows and you'd be right but beyond that I think MS adjusted to the change quicker than anyone else.</p>
<p>Borland was still an agile little company back then. It adjusted and took its highly successful Turbo Pascal and created Delphi.</p>
<div class="sidenote-left"><div>See Chapter 7 for further explanation</div></div>
<p>Now truly compiled languages ruled the roost in the 1990s with the exception of one little upstart: Java, which was something basically new. It was sorta compiled, sorta interpreted (being compiled into machine-independent bytecode that ran on a virtual machine). I personally think that the rise of both Java and Netscape scared the absolute bejesus out of Microsoft in the late 90s.</p>
<div class="sidenote-right"><div>See Chapter 9 for further explanation</div></div>
<p>Borland adjusted reasonably well producing what was really the first really successful Java IDE in JBuilder.</p>
<p>They were fending off a resurgent Microsoft who also produced successive versions of Visual Studio that (imho) were years ahead of their time in the late 90s. I can remember coding Visual C++ with MTS (microsoft Transaction Server) DCOM objects over 10 years ago and that was a precursor to the modern application server platform we have today. Remote debugging and the like were things that were (or at least seemed) light years ahead on Visual Studio.</p>
</div>
</div>
</body>
</html>

注意:针对文本选择问题,我尝试了绝对定位,您可以通过更改此CSS来实现:

div.sidenote-left { position: absolute; margin-left: -150px; }
div.sidenote-right { position: absolute; margin-left: 660px; }

但它仍然选择文本。

我看到的解决此问题的唯一方法是将您的页面更改为 2/3 列格式,其中旁注位于其他列中。唯一的问题是您无法根据文本移动注释。或者至少我想不出解决这个问题的办法。

关于html - 在 HTML 中做旁注的可靠方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/717131/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com