Question

我的网页加载时输入没有样式。当我将样式放在HTML文件中时，它可以正确显示。我尝试在脚本之前和之后添加它，但是没有任何效果。我不想将样式放在同一文件中。

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Article Review</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="home.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="background-image"></div>
    <div id="container">
        <form method="POST" id="form">
            <input type="text" autocomplete="First" id="firstname" placeholder="First Name: " />
            <input type="text" id="lastname" autocomplete="Last" placeholder="Last Name: " />
            <input type="text" id="user" autocomplete="User" placeholder="Username: " />
            <input type="password" id="pass" placeholder="Password: " />
            <input type="email" autocomplete="Email" id="email" placeholder="Email: " />
            <button type="submit" name="submit" id="submit">Submit</button>
        </form>
    </div>
</body>
</html>

接下来这是我的CSS：

#background-image {
background-image: url("images/bg.jpg");
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

Answer 1

这可能是由于CSS在服务器上相对于HTML文档的位置。

尝试将index.css文件重新定位到Web服务器的根目录，然后对HTML进行以下更改：

<!-- Add / infront of index.css, and close your link tag with />  -->
<link href="/index.css" rel="stylesheet" type="text/css" />

Answer 2

使用chrome可以为我工作。

确保index.css与html文件位于同一文件夹中

您也可以尝试：

<link href="./index.css" rel="stylesheet" type="text/css">

Answer 3

index.css ， index.html 必须在同一目录中。如果您仍然有相同的问题。我建议您硬重新加载页面（Ctrl + Shift + R）。

我的表单样式无法加载

3 个答案: