Question

我正在制作一个外部样式表和html页面。正确链接的CSS文件和页面正在进行样式设置，除了我为搜索框添加的表单。这是HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>ASA Databse</title>
</head>
<body>
    <h1 align="center">Autism Resources</h1>
    <form align="center">
        <input type="text" placeholder="Enter Query..." required>
        <input type="button" value="Search Database">
    </form>
    <table align="center">
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Item Number</th>
            <th>Status</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="even">
            <td>Charles d'Orleans</td>
            <td>Poemes</td>
            <td class="money"></td>
            <td class="money">$5,866.00</td>
        </tr>
        <tr>
            <td>T.S. Eliot</td>
            <td>Poems 1909 - 1925</td>
            <td class="money">$1,250.00</td>
            <td class="money">$8,499.35</td>
        </tr>
        <tr class="even">
            <td>Sylvia Plath</td>
            <td>The Colossus</td>
            <td class="money"></td>
            <td class="money">$1031.72</td>
        </tr>
    </table>
</body>

这是CSS：

 body {
            font-family: Arial, Verdana, sans-serif;
            color: #111111;}
        table {
            width: 1000px;}
        th, td {
            padding: 7px 10px 10px 10px;}
        th {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 90%;
            border-bottom: 2px solid #111111;
            border-top: 1px solid #999;
            text-align: left;}
        tr.even {
            background-color: #efefef;}
        tr:hover {
            background-color: #207cca;}
        .money {
            text-align: right;}
        form {
            width: 500px;
            margin: 50px auto;}
        .search {
            padding: 8px 15px;
            background: rgba(50, 50, 50, 0.2);
            border: 0px solid #dbdbdb;}
        .button {
            position: relative;
            padding: 6px, 15px;
            left:-8px;
            border: 2px solid #207cca;
            background-color: #207cca;
            color: #fafafa;}
        .button:hover {
            background-color:#fafafa;
            color:#207cca;}

在表单的宽度和边距之后，搜索栏中没有实现任何样式...提前感谢您的帮助！

Answer 1

您的样式表中有.search，但没有class="search"的元素。

尝试：

<input type="text" placeholder="Enter Query..." id="search" class="search" name="search" required>

Answer 2

Dot表示CSS中的类，而您的元素没有类。

搜索框表单不从外部样式表中采用CSS样式

2 个答案: