文章/答案/技术大牛

发布

社区首页 >问答首页 >高级HTML/CSS严重缺陷

问高级HTML/CSS严重缺陷
EN

Stack Overflow用户

提问于 2018-09-20 02:07:42

回答 2查看 133关注 0票数 2

链接到所述示例：

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

我希望你能解决这个问题，因为我和我的教授都找不出答案。我正在上大学CIS122，这是我的家庭作业-2作业。我完成了作业的所有要求，现在我只需要额外的学分，我已经完成了大部分的工作，问题是我一直遇到的一个错误。让我解释一下：

当您将代码运行到浏览器中(我使用google )时，页面会弹出，在nav部分，您将看到我以前的任务以及我正在执行的当前任务的链接。显然，这只是我的其他作业的导航员，我将更新它与我的未来家庭作业。但是，当您在“客户端服务器”上悬停时，.hover不像“宿主域”那样工作。

它应该变成暗红色的象牙色字母，但它不起作用。有时，当您重新调整浏览器，它允许您单击.hover，如果您单击底部的中心甜蜜点。所以这给我带来了一个巨大的问题，所以我决定不去管它，试着做些别的事情。我开始处理我的“概要”链接，我添加了一行代码，我添加了float:对；这样我的profile选项卡就能更好地工作了。我将这一行代码添加到以下代码中：

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

所以当我添加这行代码浮动时:对；我意识到“配置文件”栏现在正拥抱着右边，这正是我想要的，但现在当我在“概要文件”上徘徊时，GitHub/Sololearn栏重叠在Profile选项卡上，这导致了更多的挫折感，但我注意到，现在当我在导航页的Client Server选项卡上徘徊时，它工作得很好，暗黑背景和象牙色字母也像正常一样工作，所以这条简单的代码行浮出水面:右修正我的导航选项卡，这个选项卡很棒，但现在重叠到了我的“配置文件”选项卡上，有人知道我如何能够解决这两个问题吗？我需要我的“客户服务器”选项卡在nav中工作，因为它是额外信贷的一部分，但我也希望我的个人资料标签工作，因为我需要一个配置文件选项卡？

(我选择了一个关于个人资料的章节)我不认为这是一个很容易解决的问题，因为我的教授也想不出答案，因为他只找了5分钟，但是不管我做了什么，这个bug让我很沮丧，我几乎什么都试过了，其他的学生都没做那么多，所以我没有其他的工作可做，我知道一个专注的程序员会想出这个问题，但是现在我是没有办法的。

 <!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;
}

更新

谢谢大家帮我解决问题，我终于得到了一个帮助我解决问题的答案。这是如此愚蠢和简单，我深深地感谢你们回答我的帖子，但也查看它，使它能够得到解决。

html

css

web

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-09-20 02:18:54

问题是您的<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>，而在<aside>中缺少关闭的</li></ul> )，尽管这并不是造成问题的原因。但是，通过像W3C这样的验证器运行代码可能会有代价:)

顺便说一句，我绝不会认为这是“先进的”--听到你的大学教授无法诊断出这个问题，我既震惊又难过。

票数 3

Stack Overflow用户

发布于 2018-09-20 02:26:17

从修复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%;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52416541

复制

相似问题

问高级HTML/CSS严重缺陷
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问高级HTML/CSS严重缺陷EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问高级HTML/CSS严重缺陷
EN