Question

好的，所以我刚刚为一个网站制作了一个登陆页面，它的工作非常好。但唯一的问题是某个元素[button：p]的css不起作用。我检查了所有括号和分号但没有发现任何错误。任何帮助将不胜感激。

的index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
           window.location.hash = hash;
      });
    } 
  });
});
</script>
    <title>Versatile | Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div id ="navbar">
        <h3>Versatile</h3>
        <a href="#home">Home</a>
        <a href="#About">About</a>
        <a href="#Products">Our Alliances and Products</a>
        <a href="#Registered">Get Registered</a>
        <a href="#Contact">Contact</a>
    </div>
    <div id="home">
        <h3>Versatile Infosecurity Pvt. Ltd.</h3>
        <button href="#About">Explore</button>
    </div>
    <div id="About">
        <h3>About</h3>
        <p>Versatile Infosecurity Pvt., Ltd. has tied up with some of the worldwide leaders in network security to occupy a
leading position in offering customers end-to- end solutions in enterprise-wide security. We have been dedicated
to serving the needs of the antivirus and security community. Through constant innovations and strategic tie-
ups, Versatile Infosecurity offers many services and solutions, sourced from the Leading Manufacturers the
world over that address key areas in the deployment of software based security and management systems. We
offer specialized services in Antivirus, Network Management and Network security area.</p>
    </div>
    <div id="Products">
        <h3>Our Alliances and Products</h3>
        <div class="card-conatiner">
<div class="card">
    <img src="images/a10networks.jpg" style="width: 100%;">
    <hr>
<div class="container">
    <center>
    <h4>A10 Networks</h4>
    <br><br>
    <button class="btn" href="a10networks.com">Visit Website</button>
</center>
</div>
</div>
</div>
    </div>
    </div>
</body>
</html>

的main.css

body {
    background-image: url('images/bodybackground.jpg');
    background-size: cover;
    background-attachment: fixed;
}
#navbar {
    background: transparent;
    height: 50px;
    box-shadow: 10px;
}
#navbar h3 {
    color: white;
    float: left;
    font-size: 20px;
    font-family: Arial;
    margin-left: 10px;
    transition-duration: 0.5s;
}
#navbar h3:hover {
    margin-left: 30px;
}
#navbar a {
    color: white;
    float: right;
    text-decoration: none;
    padding: 10px;
    padding-top: 15px;
    font-family: Arial;
    margin-top: 0px;
    background: transparent;
    transition-duration: 0.7s;
}
#navbar a:hover {
    margin-top: 10px;
    background: white;
    opacity: 0.9;
    color: orange;
}
#home {
    margin-top: 300px;
    height: 500px;
    text-align: center;
}
#home button{
    padding: 10px 40px;
    border: 2px solid white;
    background: transparent;
    text-align: center;
    color: white;
    border-radius: 3px;
    transition-duration: 0.7s;
}
#home button:hover {
    background: white;
    color: black;
    padding: 10px 60px;
}
#home h3 {
    text-align: center;
    color: white;
    font-family: Arial;
    font-size: 60px;
    margin-bottom: 50px;
}
#About {
    height: 500px;
    background: white;
}
#About h3 {
    text-align: center;
    font-family: Arial;
    font-size: 50px;
    padding: 10px;
    padding-top: 30px;
}
#About p {
    font-size: 25px;
    font-family: Arial;
    padding: 20px;
}
#Products {
    height: 1000px;
    background: lightgrey;
    padding: 10px;
}
#Products h3 {
    text-align: center;
    font-size: 60px;
    font-family: Arial;
}
#Products .a10 {
    margin: 30px;
    box-sizing: border-box;
    background-image: url('images/a10networks.jpg');
}
.btn {
    background: transparent;
    border: 2px solid black;
    color: black;
    transition-duration: 0.7s;
}
.btn:hover {
    background: black;
    border: 2px solid black;
    color: white;
    transition-duration: 0.7s;
}
.card {
        box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
        transition-duration: 0.3s;
        width: 300px;
        height: 300px;
        margin-left: : 50px;
        background: white;
    }
    .card:hover {
        box-shadow: 0 8px 8px 0 rgba(0,0,0,0.7);
        transition-duration: 0.3s;
    }
    .card-container {
        height: 100px;
        width: 100px;
        margin-top: 40px;
    }
    .card-container h4 {
        text-align: center;
    }

PS 请快点帮忙并告诉我该网站是如何看的。这是我的第一个正式项目。

Answer 1

您正在使用一个额外的结束标记，margin-left: : 50px;不正确且您的代码格式错误。使用TAB按钮对齐代码。

<强> HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 800, function(){
                window.location.hash = hash;
            });
        } 
    });
});
</script>
    <title>Versatile | Home</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div id ="navbar">
        <h3>Versatile</h3>
        <a href="#home">Home</a>
        <a href="#About">About</a>
        <a href="#Products">Our Alliances and Products</a>
        <a href="#Registered">Get Registered</a>
        <a href="#Contact">Contact</a>
    </div>
    <div id="home">
        <h3>Versatile Infosecurity Pvt. Ltd.</h3>
        <button href="#About">Explore</button>
    </div>
    <div id="About">
        <h3>About</h3>
        <p>Versatile Infosecurity Pvt., Ltd. has tied up with some of the worldwide leaders in network security to occupy a
leading position in offering customers end-to- end solutions in enterprise-wide security. We have been dedicated
to serving the needs of the antivirus and security community. Through constant innovations and strategic tie-
ups, Versatile Infosecurity offers many services and solutions, sourced from the Leading Manufacturers the
world over that address key areas in the deployment of software based security and management systems. We
offer specialized services in Antivirus, Network Management and Network security area.</p>
    </div>
    <div id="Products">
        <h3>Our Alliances and Products</h3>
        <div class="card-conatiner">
    <div class="card">
        <img src="images/a10networks.jpg" style="width: 100%;">
        <hr>
    <div class="container">
    <center>
        <h4>A10 Networks</h4>
        <br><br>
        <button class="btn" href="a10networks.com">Visit Website</button>
    </center>
    </div></div></div></div>
</body>
</html>

<强> CSS

body {
    background-image: url('images/bodybackground.jpg');
    background-size: cover;
    background-attachment: fixed;
}
#navbar {
    background: transparent;
    height: 50px;
    box-shadow: 10px;
}
#navbar h3 {
    color: white;
    float: left;
    font-size: 20px;
    font-family: Arial;
    margin-left: 10px;
    transition-duration: 0.5s;
}
#navbar h3:hover {
    margin-left: 30px;
}
#navbar a {
    color: white;
    float: right;
    text-decoration: none;
    padding: 10px;
    padding-top: 15px;
    font-family: Arial;
    margin-top: 0px;
    background: transparent;
    transition-duration: 0.7s;
}
#navbar a:hover {
    margin-top: 10px;
    background: white;
    opacity: 0.9;
    color: orange;
}
#home {
    margin-top: 300px;
    height: 500px;
    text-align: center;
}
#home button {
    padding: 10px 40px;
    border: 2px solid white;
    background: transparent;
    text-align: center;
    color: white;
    border-radius: 3px;
    transition-duration: 0.7s;
}
#home button:hover {
    background: white;
    color: black;
    padding: 10px 60px;
}
#home h3 {
    text-align: center;
    color: white;
    font-family: Arial;
    font-size: 60px;
    margin-bottom: 50px;
}
#About {
    height: 500px;
    background: white;
}
#About h3 {
    text-align: center;
    font-family: Arial;
    font-size: 50px;
    padding: 10px;
    padding-top: 30px;
}
#About p {
    font-size: 25px;
    font-family: Arial;
    padding: 20px;
}
#Products {
    height: 1000px;
    background: lightgrey;
    padding: 10px;
}
#Products h3 {
    text-align: center;
    font-size: 60px;
    font-family: Arial;
}
#Products .a10 {
    margin: 30px;
    box-sizing: border-box;
    background-image: url('images/a10networks.jpg');
}
.btn {
    background: transparent;
    border: 2px solid black;
    color: black;
    transition-duration: 0.7s;
}
.btn:hover {
    background: black;
    border: 2px solid black;
    color: white;
    transition-duration: 0.7s;
}
.card {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2);
    transition-duration: 0.3s;
    width: 300px;
    height: 300px;
    margin-left: 50px;
    background: white;
}
.card:hover {
    box-shadow: 0 8px 8px 0 rgba(0,0,0,0.7);
    transition-duration: 0.3s;
}
.card-container {
    height: 100px;
    width: 100px;
    margin-top: 40px;
}
.card-container h4 {
     text-align: center;
}

看看它现在是否有效。如果没有，请提供所用图像的直接链接。您可能还想解释这个按钮应该如何表现或解释它有什么问题。

HTML文件未链接到css文件

1 个答案: