高级HTML / CSS严重错误

时间：2018-09-20 02:07:43

标签： html css web

链接到所述示例：

https://cislinux.hfcc.edu/~jdcline/cis122/homework-2/hw2html.html

我希望您能解决这个问题，因为我的教授和我都不知道。我正在大学学习CIS122，这是我的家庭作业2作业。我完成了作业的所有要求，现在我正努力获得额外的功劳，我已经完成了大部分工作，问题是我一直遇到的错误。让我解释一下：

当您在浏览器中运行代码（我使用google chrome）时，页面会弹出，在nav部分中，您会看到我以前的作业以及我正在做的当前作业的链接。显然，这只是我其他作业的导航器，我将在以后的作业中对其进行更新。但是，当您将鼠标悬停在“客户端服务器”上时，.hover不能像使用“托管域”鼠标一样工作。

应该用象牙色的字母将其变成深红色，但是不起作用。有时，当您重新调整浏览器时，如果单击底部中间的最佳位置，则可以单击.hover。因此，这给我造成了一个巨大的问题，因此我决定不理会它，而尝试其他事情。我开始处理“个人资料”链接，并添加了一行代码，并添加了[float：right; ]，这样我的个人资料标签会更好。我将此行添加到以下代码中：

aside ul li {
display:inline-block;
background-color: grey;
float:right;
}

因此，当我添加以下代码行float：right;我意识到“配置文件”栏现在正紧贴我想要的右侧，但是现在当我将鼠标悬停在“配置文件”上时，GitHub / Sololearn栏重叠在“配置文件”选项卡上，这引起了更多的挫败感，但是我注意到现在我将鼠标悬停在导航中的“客户端服务器”选项卡上，它工作得很好，并且Darkred背景和象牙字母又像正常一样工作了，因此，这行简单的代码行float：right修复了我的导航选项卡，它很棒，但现在重叠在“配置文件”上”旁边的“标签”标签，是否有人对如何解决这两个问题有所了解，我需要在导航栏中使用“客户端服务器”标签，因为这是额外功劳的一部分，但我也希望我的“个人资料”标签可以工作，因为我也需要个人资料标签？

（我选择个人资料的“关于”部分）我不认为这像其他大多数问题一样容易解决，我的教授也无法弄清楚，因为他只看了大约5分钟但没有无论我做什么，这个错误都会使我感到沮丧，并且我已经尝试了几乎所有事情，其他学生却没有做太多，所以我没有其他工作可以以此为基础，我知道那里有专门的程序员可以出来，但现在我一无所有。

 <!DOCTYPE html>
<html>
<head>
<title>Homework #2: HTML, CSS, Semantic and Responsive Page Layout,     Domain                     Names, and Web Hosting</title>
<meta name="description" content="Homework #1: HTML and Client-Server Technology">
<meta name="keywords" content="technology, HTML, CSS, server, client">
<meta name="author" content="Joe Cline">
<link rel="stylesheet" type="text/css" href="hw2style.css"> 
</head>
<body> 
<header>
<h1 id="CIS">CIS 122 Projects</h1>
</header>

<!--
metatags-noindex robots.txt
-->

<nav id="nav" style="background:black;">
    <div class="navbase">
        <a href="https://cislinux.hfcc.edu/~jdcline/cis122/homework-1/HTML-        1.html">Client Server</a>
    </div>
    <div class="navbase1">
        <a href="https://cislinux.hfcc.edu/~jdcline/cis122/homework-    2/hw2html.html">Hosting Domain</a>
    </div>
</nav>

<section>
    <h2 id="DN">Domain Names and Web Hosting</h2>
    <h3 id="WDN"></h3>
    <table align="center" border="3">
        <tr>
            <th><a href="https://www.godaddy.com/" id="GD">GoDaddy</a></th>
            <th><a href="https://www.hostgator.com/" id="HG">HostGator</a>    </th>
            <th><a href="https://www.namecheap.com/" id="NC">NameCheap</a>    </th>
        </tr>
        <tr>
            <td id="GDtd">GoDaddy is a domain registrar and web hosting service, known for their cheap domain names and their web hosting service that they offer.</td>
            <td id="HGtd">HostGator is a web hosting service and provider of shared, reseller, vps. They include all of the following: Cloud Hosting/WordPress Hosting/VPS Hosting/Dedicated Hosting.</td>
            <td id="NCtd">NameCheap is an ICANN-accredited registrar, they provide domain name registration and web hosting.</td>
        </tr>
    </table>
    <p id="price">If your interested in buying a .com web domain from GoDaddy, the prices are the following: For 5 years it would cost you $62.95, the price is $2.99 for the first year and $14.99 for every year after that.</p>
    <p id="musicsale">The domain name musicsales.com was bought using the service: Network Solutions, LLC. The domain name expires on 2021-08-24 </p>
    <p id="musicsaleinfo">If you want to buy the domain name musicsales.info it could cost you around $4.88, some websites like GoDaddy/NameCheap charges cheaper but they force you to get a plan </p>

    <table align="center" border="3" id="TLD">
        <caption class="title" id="title1"> <b>Newer TLDs of 2018</b>
        <tr>
            <td>.basketball</td>
            <td>.book</td>
            <td>.luxe</td>
        </tr>
        <tr>
            <td>.fan</td>
            <td>.arab</td>
            <td>.broker</td>
        </tr>
        <tr>
            <td>.hotel</td>
            <td>.phd</td>
            <td>.scholarships</td>
        </tr>
    </table>
    <p id="bluehost">Webhosting at Bluehost.com will cost around $2.95/month*, this could vary though. The orginal starting price was $7.99, this changed to $3.95 and then changed again to it's final price of $2.95/month* </p>

    <ol id="list-1"> 
        <li><p id="list1">Test </p></li>
        <li><p id="list2">Test </p></li>
        <li><p id="list3">Test </p></li>
    </ol>
    <ul id="list-2">
        <li><p id="list4">Test </p></li>
        <li><p id="list5">Test </p></li>
        <li><p id="list6">Test </p></li>
    </ul>
    <ol id="list-3">
        <li><p id="list7">Test </p></li>
        <li><p id="list8">Test </p></li>
        <li><p id="list9">Test </p></li>
    </ol>
    <ol id="list-4">
        <li><p id="list10">Test </p></li>
        <li><p id="list11">Test </p></li>
        <li><p id="list12">Test </p></li>
    </ol> 

</section>

<aside>
    <ul>
        <li><a href="#">Profiles</a>
        <ul>
            <li><a href="https://www.sololearn.com/Profile/2260402#_=_">Sololearn</a></li>
            <li><a href="https://github.com/JosephCline">GitHub</a></li>
        </ul>
</aside>

<footer>
    <sub id="sub">CIS 122 Web Internet Technologies </sub>
    <br />
    <sub id="sub3">Copyright &copy; 2018 Joe Cline </sub>
</footer>


body {
margin: 0;
color: #000;
background: Ivory;
font-family:Andale Mono, monospace;
}
#CIS {
margin:0;
font-weight:500;
border:darkred solid;
border-radius: 25px;
font-family:Andale Mono,monospace;
}
header {
background-color: black;
color: white;
text-align: center;
padding: 16px;
}
footer {
clear: both;
padding: 16px;
background-color: #000;
color: white;
text-align: center;
font-size: 12px;
font-family:"Arial Black", Gadget, 
}
@media only screen 
and (min-device-width: 480px)
and (min-width: 700px)    
{
section {
    float: left;
    width: 70%;
}
nav {
    float: left;
    width: 15%;
}
}


.navbase1 {
overflow: hidden;
background-color: grey;
}
.navbase1 a  {
float: left;
display:block;
color: black;
text-align:center;
padding: 15px 15px;
text-decoration: none;
font-size: 20px;
}
.navbase1 a:hover {
background-color: darkred;
color:Ivory;
}    

.navbase {
overflow: hidden;
background-color: grey;
}
.navbase a {
float: left;
display:block;
color: black;
text-align:center;
padding: 15px 15px;
text-decoration: none;
font-size: 20px;
}
.navbase a:hover {
background-color: darkred;
color:Ivory;
}

#sub {
color:Ivory;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
#sub3 {
color:Ivory;
font-weight:900;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
#DN {
text-align:center;
}
#PDN {
text-align:center;
}
tr, td, th { 
padding: 20px; 
border: solid 5px black;
text-align: center;
background:Ivory;
font-family:Andale Mono, monospace;
}
table {
border:none;
}
#GD {
color:darkred;
text-decoration: none;
font-size:20px;
}
#HG {
color:darkred;
text-decoration: none;
font-size:20px;
}
#NC {
color:darkred;
text-decoration: none;
font-size:20px;
}
#price {
border-radius: 25px;
border: 4px solid black;
padding: 20px; 
}
#TLD {
padding: 20px; 
text-align: center;
background:Ivory;
font-family:Andale Mono, monospace;
}
h3 {
text-align:center;
}
#musicsale {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#musicsaleinfo {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#bluehost {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#list-1 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;
display:block;
}
#list-2 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px;
color:darkred;
display:block;
}
#list-3 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;
display:block;
}
#list-4 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;  
display:block;
}
ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
#list1{
font-size:15px;
border-left: 1px solid darkred;
display:block;
padding:8px;
}
#list2{
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list3{
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list4 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list5 { 
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list6 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list7 { 
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list8 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list9 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list10 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list11 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list12 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}

aside ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
aside ul li {
display:inline-block;
background-color: grey;    
}
aside a {
display:block;
padding:0 80;
color:Black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}

aside a:hover {
background-color:darkred;
color:Ivory;
}
aside ul ul {
display: none;
position: absolute;
top: 100%;
}
aside ul li:hover > ul {
display:inherit;
}
aside ul ul li {
min-width:170px;
display:list-item;
position: relative;
}
#title1 {
height:1px;
}
#GDtd {
color:darkred;
font-size:16px;
font-weight:bold;
}
#HGtd {
color:darkred;
font-weight:bold;
font-size:16px;
}
#NCtd {
color:darkred;
font-weight:bold;
font-size:16px;
}
#WDN {
height:2px;
font-size:20px;
}

更新

谢谢大家，帮助我解决了我的问题，我终于得到了一个答案，可以帮助我解决我的问题。它是如此愚蠢和简单，我非常感谢大家回答我的帖子，并且也查看了它，以便能够解决。

2 个答案:

答案 0 :(得分：3)

问题在于，您的<ul>元素位于Client Server标签的顶部，而不是您的Hosting Domain标签的。这就是为什么后者可以悬停，而前者则不能悬停（而是将鼠标悬停在<ul>上。您会注意到，当您将鼠标悬停在Client Server的底部时，效果会得到应用-这是因为<ul>没有完全重叠。

要解决此问题，只需从您的position: relative中删除aside ul：

body {
  margin: 0;
  color: #000;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

#CIS {
  margin: 0;
  font-weight: 500;
  border: darkred solid;
  border-radius: 25px;
  font-family: Andale Mono, monospace;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 16px;
}

footer {
  clear: both;
  padding: 16px;
  background-color: #000;
  color: white;
  text-align: center;
  font-size: 12px;
  font-family: "Arial Black", Gadget,
}

@media only screen and (min-device-width: 480px) and (min-width: 700px) {
  section {
    float: left;
    width: 70%;
  }
  nav {
    float: left;
    width: 15%;
  }
}

.navbase1 {
  overflow: hidden;
  background-color: grey;
}

.navbase1 a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 20px;
}

.navbase1 a:hover {
  background-color: darkred;
  color: Ivory;
}

.navbase {
  overflow: hidden;
  background-color: grey;
}

.navbase a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 20px;
}

.navbase a:hover {
  background-color: darkred;
  color: Ivory;
}

#sub {
  color: Ivory;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

#sub3 {
  color: Ivory;
  font-weight: 900;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

#DN {
  text-align: center;
}

#PDN {
  text-align: center;
}

tr,
td,
th {
  padding: 20px;
  border: solid 5px black;
  text-align: center;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

table {
  border: none;
}

#GD {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#HG {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#NC {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#price {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#TLD {
  padding: 20px;
  text-align: center;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

h3 {
  text-align: center;
}

#musicsale {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#musicsaleinfo {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#bluehost {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#list-1 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-2 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-3 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-4 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}

#list1 {
  font-size: 15px;
  border-left: 1px solid darkred;
  display: block;
  padding: 8px;
}

#list2 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list3 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list4 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list5 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list6 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list7 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list8 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list9 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list10 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list11 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list12 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

aside ul {
  padding: 0;
  margin: 0;
  list-style: none;
  /*position: relative;*/
}

aside ul li {
  display: inline-block;
  background-color: grey;
}

aside a {
  display: block;
  padding: 0 80;
  color: Black;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

aside a:hover {
  background-color: darkred;
  color: Ivory;
}

aside ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

aside ul li:hover>ul {
  display: inherit;
}

aside ul ul li {
  min-width: 170px;
  display: list-item;
  position: relative;
}

#title1 {
  height: 1px;
}

#GDtd {
  color: darkred;
  font-size: 16px;
  font-weight: bold;
}

#HGtd {
  color: darkred;
  font-weight: bold;
  font-size: 16px;
}

#NCtd {
  color: darkred;
  font-weight: bold;
  font-size: 16px;
}

#WDN {
  height: 2px;
  font-size: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <title>Homework #2: HTML, CSS, Semantic and Responsive Page Layout, Domain Names, and Web Hosting</title>
  <meta name="description" content="Homework #1: HTML and Client-Server Technology">
  <meta name="keywords" content="technology, HTML, CSS, server, client">
  <meta name="author" content="Joe Cline">
  <link rel="stylesheet" type="text/css" href="hw2style.css">
</head>

<body>
  <header>
    <h1 id="CIS">CIS 122 Projects</h1>
  </header>

  <!--
metatags-noindex robots.txt
-->

  <nav id="nav" style="background:black;">
    <div class="navbase">
      <a href="https://cislinux.hfcc.edu/~jdcline/cis122/homework-1/HTML-        1.html">Client Server</a>
    </div>
    <div class="navbase1">
      <a href="https://cislinux.hfcc.edu/~jdcline/cis122/homework-    2/hw2html.html">Hosting Domain</a>
    </div>
  </nav>

  <section>
    <h2 id="DN">Domain Names and Web Hosting</h2>
    <h3 id="WDN"></h3>
    <table align="center" border="3">
      <tr>
        <th><a href="https://www.godaddy.com/" id="GD">GoDaddy</a></th>
        <th><a href="https://www.hostgator.com/" id="HG">HostGator</a> </th>
        <th><a href="https://www.namecheap.com/" id="NC">NameCheap</a> </th>
      </tr>
      <tr>
        <td id="GDtd">GoDaddy is a domain registrar and web hosting service, known for their cheap domain names and their web hosting service that they offer.</td>
        <td id="HGtd">HostGator is a web hosting service and provider of shared, reseller, vps. They include all of the following: Cloud Hosting/WordPress Hosting/VPS Hosting/Dedicated Hosting.</td>
        <td id="NCtd">NameCheap is an ICANN-accredited registrar, they provide domain name registration and web hosting.</td>
      </tr>
    </table>
    <p id="price">If your interested in buying a .com web domain from GoDaddy, the prices are the following: For 5 years it would cost you $62.95, the price is $2.99 for the first year and $14.99 for every year after that.</p>
    <p id="musicsale">The domain name musicsales.com was bought using the service: Network Solutions, LLC. The domain name expires on 2021-08-24 </p>
    <p id="musicsaleinfo">If you want to buy the domain name musicsales.info it could cost you around $4.88, some websites like GoDaddy/NameCheap charges cheaper but they force you to get a plan </p>

    <table align="center" border="3" id="TLD">
      <caption class="title" id="title1"> <b>Newer TLDs of 2018</b>
        <tr>
          <td>.basketball</td>
          <td>.book</td>
          <td>.luxe</td>
        </tr>
        <tr>
          <td>.fan</td>
          <td>.arab</td>
          <td>.broker</td>
        </tr>
        <tr>
          <td>.hotel</td>
          <td>.phd</td>
          <td>.scholarships</td>
        </tr>
    </table>
    <p id="bluehost">Webhosting at Bluehost.com will cost around $2.95/month*, this could vary though. The orginal starting price was $7.99, this changed to $3.95 and then changed again to it's final price of $2.95/month* </p>

    <ol id="list-1">
      <li>
        <p id="list1">Test </p>
      </li>
      <li>
        <p id="list2">Test </p>
      </li>
      <li>
        <p id="list3">Test </p>
      </li>
    </ol>
    <ul id="list-2">
      <li>
        <p id="list4">Test </p>
      </li>
      <li>
        <p id="list5">Test </p>
      </li>
      <li>
        <p id="list6">Test </p>
      </li>
    </ul>
    <ol id="list-3">
      <li>
        <p id="list7">Test </p>
      </li>
      <li>
        <p id="list8">Test </p>
      </li>
      <li>
        <p id="list9">Test </p>
      </li>
    </ol>
    <ol id="list-4">
      <li>
        <p id="list10">Test </p>
      </li>
      <li>
        <p id="list11">Test </p>
      </li>
      <li>
        <p id="list12">Test </p>
      </li>
    </ol>

  </section>

  <aside>
    <ul>
      <li><a href="#">Profiles</a>
        <ul>
          <li><a href="https://www.sololearn.com/Profile/2260402#_=_">Sololearn</a></li>
          <li><a href="https://github.com/JosephCline">GitHub</a></li>
        </ul>
  </aside>

  <footer>
    <sub id="sub">CIS 122 Web Internet Technologies </sub>
    <br />
    <sub id="sub3">Copyright &copy; 2018 Joe Cline </sub>
  </footer>

您还具有无效的标记（您在表中缺少结尾</caption>，而在</li></ul>中缺少结尾<aside>），尽管这不负责您的问题。可能需要通过 W3C 之类的验证程序来运行代码：）

顺便说一句，我不会以任何方式认为这是“先进的”-听到你的大学教授无法诊断这个问题，这让我感到震惊和悲伤。

答案 1 :(得分：1)

首先修复HTML

看看这个：

<aside>
  <ul>
    <li><a href="#">Profiles</a>
      <ul>
        <li><a href="https://www.sololearn.com/Profile/2260402#_=_">Sololearn</a></li>
        <li><a href="https://github.com/JosephCline">GitHub</a></li>
      </ul>
    </li><!-- MISSING -->
  </ul><!-- MISSING -->
</aside>

...

这是解决方案：

aside {
  float: left;
  width:15%;
}
相关问题
最新问题