Question

我现在正在学习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&reg; 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;
}

这是我目前的输出：

Answer 1

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?

如何在div hover弹出窗口中抑制换行符

1 个答案: