Question

bellow是我的代码，假设创建一个搜索框然后设置它的样式。由于某种原因，我尝试给该框提供的css属性不适用。我尝试将css放在一个单独的文件中，也在脚本中，如下所示。有什么问题（我使用的是netbeans，文件是.php）

这是代码：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>

        <meta charset="UTF-8">
        <title>cats</title>

    </head>
    <body>
        <form>
            <input type="text" placeholder="Search me..." required>
            <input type="button" value="Search">
        </form>

        <style type="text/css" media="screen">
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;



        </style>

        <?php

        // put your code here
        ?>
    </body>
</html>

Answer 1

您正在使用CSS class selectors。给你想要设置相应类属性的元素（如patricksweeney所暗示）：

＆＃13;

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;
}

＆＃13;

<form>
    <input type="text" class="search" placeholder="Search me..." required>
    <input type="button" class="button" value="Search">
</form>

＆＃13;

这是关于样式化html元素的问题

1 个答案: