我现在正在学习HTML，为我开发的数据库开发一个帮助系统。我正处于尝试找到完成我需要的代码片段并复制和粘贴该代码的阶段。我两周前才开始做这件事，所以请放轻松 - 我知道代码可能很困惑，我也愿意接受任何帮助。
我遇到了一些功能方面的问题:
- 我在 div 标签前遇到不需要的换行符。
- 如果我将其余文本包含在 div 标记内，文本看起来会有所不同。
- 我希望弹出窗口将文本向下滑动，然后再向上滑动。 (这可能吗？)
这是 HTML Help Workshop 的全部内容，因此似乎存在一些限制。
预先感谢您的帮助。
这是我的 HTML:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="GENERATOR" content="Microsoft® HTML Help Workshop 4.1">
<Title>Property Detail Report</Title>
</HEAD>
<BODY>
<h1>Property Detail Report</h1>
<p>The Property Detail Report displays all data for a given property in one report. This combines key code information, lock inventory information and key inventory information in one concise report.</p>
<p>This report is access three ways with three different results from the Property Report with three different results:</p>
<a name="Show All Records"></a>
<p><img src="showallbtn.png" alt="Show All Records" Title="Show All Records" border="0"></p>
<p>The "Show All Records" button will display all records for the current property in one report.</p>
<a name="Search By Core"></a>
<p><img src="searchbycorebtn.png" alt="Search by Core" Title="Search by Core" border="0"></p>
<p> The "Search by Core" button allows you to narrow the scope of the records displayed to one core series or one core mark. This button will bring up a <a href="#"> <div class="hover-img">dialog <span> <img src="coresearchparameter.png" alt="parameter" /> </span> </a> asking for the core mark that you wish to search for. More information can be found in the <a href="propertyrpt.htm"> Property Report Help Topic, </p> </div>
<OBJECT id=hhctrl type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=6,1,7600,16385"
width=100
height=100
>
<PARAM name="Command" value="Related Topics">
<PARAM name="Button" value="Text:Related Topics">
<PARAM name="Item1" value="Property Form Help;propertyfrm.htm">
<PARAM name="Item2" value="Key Code Report Help;keycoderpt.htm">
<PARAM name="Item3" value="Property Detail Report Help;propdetailrpt.htm">
<PARAM name="Item4" value="Search by Core Detail Report Help;#search by core">
<PARAM name="Item5" value="Search by Building/Structure Detail Report Help;buildingdetailrpt.htm">
<PARAM name="Item6" value="Key Inventory Report Help;keyinventoryrpt.htm">
</OBJECT>
<OBJECT
id=sample
type="application/x-oleobject"
classid="clsid:52a2aaae-085d-4187-97ea-8c30db990436"
>
<PARAM name="Command" value="HH Version">
</OBJECT>
</BODY>
</HTML>
这是我的 CSS:
body {
font-family: "arial",arial, sans-serif;
}
p {
font-family: "arial",arial, sans-serif;
}
div {
font-family: "arial",arial, sans-serif;
}
a .hover-img {
position:relative;
white-space: nowrap;
}
a .hover-img span {
white-space: nowrap;
position:absolute; left:-9999px;
top:-9999px;
z-index:9999;
}
a:hover .hover-img span {
white-space: nowrap;
top: 20px;
left:0;
}
这是我目前的输出:
最佳答案
div标签应该很容易修复，添加display: inline;到它在 CSS 中的部分。在这里学习的一个很好的教训是如何 display标签有效，你可以在这里找到很多很好的例子:https://www.w3schools.com/cssref/pr_class_display.asp
据我所知，如果将它包含在一个 div 中，任何东西看起来都会有所不同的原因是因为 HTML 中的所有 div 都包含在 <a> </a> 中。标签。这使它们成为链接，链接下划线并使它们变成蓝色。
如果您想将文本向上滑动，我会研究 CSS 过渡和关键帧。也许此线程中的某些内容对您有用:How to play CSS3 transitions in a loop?
关于html - 如何抑制 div 悬停弹出窗口中的换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47399835/