在头部添加 css 文件后，某些锚标记不起作用

Question

我正在开发一个电子商务网站，但自从过去 4 天以来我一直被这个错误困扰。我不知道为什么在 head 标签中添加 css 文件后，我的一些锚标签不起作用并且表现得像一个静态元素。请解释一下为什么会这样？它是一种编程错误还是我的系统中的任何缺陷？我在下面链接了我的代码，我正在使用语言 HTML、CSS 和 PHP。 `

* {
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
}

#head {
    background-color: black;
    height: 80px;
    width: 100%;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 1400px;
    padding: 20px;
    margin: 50px;
}

#name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: 20px;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-right: 50px;
}

.profile img {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

#name div h2 {
    height: 20px;
    padding: 10px;
    width: 350px;
    background-image: linear-gradient(black, grey, white, white, grey, black);
    border: 1px solid black;
}

#name div h3 {
    margin-top: 6px;
}

#about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    border: 2px solid yellow;
    margin-left: 20px;
    margin-top: 30px;
    background-image: linear-gradient(yellow, rgb(238, 238, 155), white, white, rgb(238, 238, 155), yellow)
}

#about h2 {
    margin-bottom: 10px;
}

#products {
    width: 100%;
    height: 1500px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#heading {
    padding: 10px;
    background-image: linear-gradient(red, pink, white, white, pink, red);
    border: 2px solid red;
    margin: 20px;
}

#heading a {
    text-decoration: none;
}

#heading a:hover {
    color: red;
}

.productcontainer {
    height: 500px;
    width: 260px;
    padding: 20px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    border-radius: 3px;
    transition: 0.2s;
}

.productcontainer:hover {
    box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5), -2px -2px 5px rgb(0, 0, 0, 0.5), 2px -2px 5px rgb(0, 0, 0, 0.5), -2px 2px 5px rgb(0, 0, 0, 0.5);
}

.productcontainer div {
    margin-top: 15px;
}

.imagecontainer {
    height: 200px;
    width: 260px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
}

.imagecontainer img {
    height: 200px;
    width: 260px;
}

.pricebox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.pricebox a {
    font-size: 18px;
    text-decoration: none;
}

.pricebox a:hover {
    font-weight: bold;
    color: red;
}

.pricebox h4 {
    margin-bottom: 10px;
}

.clickbtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.submit {
    outline-style: none;
    height: 25px;
    padding: 5px;
    background-color: rgb(236, 164, 68);
    border: 1px solid black;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.submit:hover {
    background-image: linear-gradient(white, rgb(236, 164, 68), rgb(236, 164, 68), white);
    border: 1px solid rgb(236, 164, 68);
}

.seller {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.seller img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.readmore {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.readmore a {
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
}

.readmore a:hover {
    font-weight: bold;
    color: red;
}

#logout a h3 {
    padding: 10px;
    border: 3px solid black;
    margin: 100px;
    width: 150px;
    display: flex;
    justify-content: center;
}

#logout a {
    text-decoration: none;
}

#logout a h3:hover {
    color: red;
    border: 3px solid red;
    text-decoration: underline 2px red;
}

<?php
session_start();
if(!isset($_SESSION["id"])){
    header("Location:http://localhost/petanimals/login.php");

};
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="user_personal_page.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;1,100;1,400;1,500;1,600;1,700&family=Pattaya&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous">
</head>
<body>
    <div id="head">
         <?php include 'head.php' ?>
    </div>
    <?php  
    
    $id=$_SESSION["id"];
     $conn=mysqli_connect("localhost","root","","pet_animals") or die("connect failed");
     $sql="SELECT * FROM user_profile WHERE id=$id ";
     $result=mysqli_query($conn,$sql)  ;
     if(mysqli_num_rows($result)>0){

    while($row=mysqli_fetch_assoc($result)){

 

    ?>
    <div id="container">
        <div id="name">
        <div class="profile">
      
        
        <img src="user_images\<?php echo $row['profile_pic'];?>" alt="">
        </div>
            <div>
                <h2><?php echo $row['fname'] ." ". $row['lname'] ?></h2>
                <h3>Full Name</h3>
                <h3><?php echo $row['city']  ?></h3>
                <a href="edit_profile_page.php"><h3>Edit profile</h3></a>
            </div>
        </div>
        <div id="about">
            <h2>About info</h2>
            <p>
            <?php echo $row['info'] ?>
            </p>
        </div>
       <?php 
     };  };
       ?> 


     <div id="heading">
        <a href="./add_product_page.php">
              <h3>Add Products</h3> </a>
          </div>
        <div id="products">
        <div class="productcontainer">
        <div class="productbox">
          <div class="imagebox">
          <div class="imagecontainer">
             <a href="IMAGES\fish.jpg"> <img src="IMAGES\fish.jpg" alt="" id="img"></a>
             <a href=""><img src="IMAGES/petaccess4.jpg" alt=""></a>
             <a href=""><img src="IMAGES/rabbithead.webp" alt=""></a>
             <a href=""><img src="IMAGES/petaccess3.png" alt=""></a>
             <a href=""><img src="IMAGES/fishhead.jpg" alt=""></a>
           </div>
          </div>
         
        
           <div class="detailscontainer">
               <div class="pricebox">
                   <h4>Rabbit</h4>
                   <h4>PRICE-2730Rs</h4>
                   <a href="product_detail_page.php"><h4>Rabbit</h4></a>
               </div>
               <div class="clickbtn">
                   <input type="submit" value="ADD TO THE CART" class="submit">
                   <input type="submit" value="ADD TO THE WISHLIST" class="submit">
               </div>
               <div class="sellerdetails">
                   <div class="seller">
                       <img src="IMAGES\fb icon.png" alt="">
                       <h4>Nandini Srivastava</h4>
                   </div>
                   <div class="readmore">
                      
                   <a href="">Edit</a>
                   <a href="">Delete</a>
                   </div>

               </div>
           </div>
           </div>
        </div>
       
    </div>
    
  
    <?php include 'footer.php' ?>
</body>
</html>

Answer 1

因为你不重视href

在第一个锚href有一个值，另一个href没有值。

a href=ValueHere