时间戳

首页 > 解决方案 > 你好，我的链接失效了。每次我尝试点击它们时，它都会提示一个错误，除了主页（索引）链接

html - 你好，我的链接失效了。每次我尝试点击它们时，它都会提示一个错误，除了主页（索引）链接

问题描述

我试图编辑 CSS 没有结果。我检查了文件夹的位置，一切正常（大文件夹项目，里面有其他文件夹（主页，产品......）。他们每个人都有自己的 CSS，类似于你在这里看到的那个。更多细节：链接昨天工作，所以错误必须在 CSS 内部！但同时索引链接有效，而其他链接无效，所以这对我来说毫无意义。

这是 HTML：

<html>
<头部>
</head>
<正文>

<div class="container-fluid">
      <div class="行">
    <div class="菜单栏">
        <ul id="菜单">
                <div class="col-3">
                  <li>
                  <a href="index.html" target="_blank"> <img src="img/apewhite.png" width="200%" height="200%"> </a>
                  </li>
                </div>
                <div class="col-1 主页">
                  <li>
                  <a class="menu" href="index.html"target="_blank"> 主页
                  </a>
                  </li>
                </div>
                <div class="col-1 a​​bt">
                  <li>
                  <a class="menu" href="../AboutUs/AboutUs.html"target="_blank"> 关于我们
                  </a>
                  </li>
                </div>
                <div class="col-1 prd">
                  <li>
                  <a class="menu" href="../products/products.html"target="_blank"> 产品
                  </a>
                  </li>
                </div>
                <div class="col-2 研究">
                  <li>
                  <a class="menu" href="../R&D/R&D.html"target="_blank"> 研发
                  </a>
                  </li>
                </div>
                <div class="col-2 新闻">
                  <li>
                  <a class="menu" href="../News_Events/News_&_Events.html" target="_blank"> 新闻和事件
                  </a>
                  </li>
                </div>
                <div class="col-2 联系人">
                  <li>
                  <a class="menu" href="../Contacts/contacts.html"target="_blank"> 联系人
                  </a>
                  </li>
                </div>
          </ul>
         
         </div>
         </div>
         </div>

</正文>
</html>

/*THIS IS CSS*/

body {
 background-image: url(../img/nanotech.jpg);
  background-size: 105%;
  background-repeat: no-repeat;
  max-width: 105%;
 
  }

.container-fluid
{
width: 105%;
overflow: hidden;
}
.home, .abt, .prd, .research, .news, .contacts {
  margin-top: 12px;

}

.home {
margin-left:1.5%;
  margin-right: 3%;

}

.abt {
  margin-right: 5%;
}

.prd {
margin-right: 4.5%;

}

.research {
  margin-right: 5%;

}  

.news {
  
  margin-right: -1.5%;


}
.contacts {


}

.menu-bar{
opacity: 0.9;
width: 105%;
float: left;
margin: 0;
padding: 0;
background: #B22222;

}

#menu {
 position:relative; /* <- thing I've tried to add */
    z-index:1; /* <- thing I've tried to add */
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin-top: 6px;
margin-right: 0;
margin-left:0;
    padding: 0;
    list-style: none;
    height: 60px;
}

#menu li {

 position:relative; /* <- thing I've tried to add*/
    z-index:1; /* <- thing I've tried to add */
    display: block;
    width: 150px;
    height: 30px;
    margin: 2px;
    float: left;/* <- I've tried to get rid of it but the error persists*/
}


ul
{
margin: 0;
padding: 0;
list-style-type: none;
display:inline-flex;

}

a
{
padding: 5px;
color: white;
text-decoration: none;
}

a.menu:link {text-decoration: none} 
a.menu:visited {color : white}
a.menu:active {color : white}
a.menu:hover {color: white}

li ul
{
display: none
}

li:hover ul
{
opacity: 90%;
display: block;
position: absolute;
z-index:1;
height:110px;
width:220px;
padding: 5px;
margin-top: 3%;
background: #B22222;

}
#sub {
margin-top:1%;

  }


li li { border:none; width:150px; }
li li a { padding:2px 2px 2px 10px; }

标签： htmlcss

解决方案

如果您的 index.html 与其他文件夹位于同一目录中，则无需在路径开头添加..双点甚至斜线。/我正在考虑你有以下目录树

index.html
     |-Aboutus
        |-aboutus.html
     |-products
        |-products.html



 
        body {
 background-image: url(../img/nanotech.jpg);
  background-size: 105%;
  background-repeat: no-repeat;
  max-width: 105%;
 
  }

.container-fluid
{
width: 105%;
overflow: hidden;
}
.home, .abt, .prd, .research, .news, .contacts {
  margin-top: 12px;

}

.home {
margin-left:1.5%;
  margin-right: 3%;

}

.abt {
  margin-right: 5%;
}

.prd {
margin-right: 4.5%;

}

.research {
  margin-right: 5%;

}  

.news {
  
  margin-right: -1.5%;


}
.contacts {


}

.menu-bar{
opacity: 0.9;
width: 105%;
float: left;
margin: 0;
padding: 0;
background: #B22222;

}

#menu {
 position:relative; /* <- thing I've tried to add */
    z-index:1; /* <- thing I've tried to add */
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin-top: 6px;
margin-right: 0;
margin-left:0;
    padding: 0;
    list-style: none;
    height: 60px;
}

#menu li {

 position:relative; /* <- thing I've tried to add*/
    z-index:1; /* <- thing I've tried to add */
    display: block;
    width: 150px;
    height: 30px;
    margin: 2px;
    float: left;/* <- I've tried to get rid of it but the error persists*/
}


ul
{
margin: 0;
padding: 0;
list-style-type: none;
display:inline-flex;

}

a
{
padding: 5px;
color: white;
text-decoration: none;
}

a.menu:link {text-decoration: none} 
a.menu:visited {color : white}
a.menu:active {color : white}
a.menu:hover {color: white}

li ul
{
display: none
}

li:hover ul
{
opacity: 90%;
display: block;
position: absolute;
z-index:1;
height:110px;
width:220px;
padding: 5px;
margin-top: 3%;
background: #B22222;

}
#sub {
margin-top:1%;

  }


li li { border:none; width:150px; }
li li a { padding:2px 2px 2px 10px; }
<html>
<head>

</head>

<body>

<div class="container-fluid">

    <div class="row">
        <div class="menu-bar">
            <ul id="menu">
                <div class="col-3">
                    <li>
                        <a href="index.html" target="_blank"> <img src="img/apewhite.png" width="200%" height="200%"> </a>
                    </li>
                </div>
                <div class="col-1 home">
                    <li>
                        <a class= "menu" href="index.html"target="_blank"> Home </a>
                    </li> 
                </div>
                <div class="col-1 abt">
                    <li>
                        <a class= "menu" href="AboutUs/AboutUs.html"target="_blank"> About us </a>
                    </li> 
                </div>
                <div class="col-1 prd">
                    <li>
                        <a class= "menu" href="products/products.html"target="_blank"> Products </a>
                    </li>
                </div>
                <div class="col-2 research">
                    <li>
                        <a class= "menu" href="R&D/R&D.html"target="_blank"> Research&Development</a>
                    </li>
                </div>
                <div class="col-2 news">
                    <li>
                        <a class= "menu" href="News_Events/News_&_Events.html" target="_blank"> News&Events </a>
                    </li>
                </div>
                <div class="col-2 contacts">
                    <li>
                        <a class= "menu" href="Contacts/contacts.html"target="_blank"> Contacts </a>
                    </li> 
                </div>
            </ul>

        </div>
    </div>

</div>

</body>
</html>

推荐阅读