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

-1

波纹管是我的代码，它假设创建一个搜索框然后设置它的样式。出于某种原因，我尝试赋予该框的CSS属性不适用。我尝试在一个单独的文件中，并在脚本中，如下所示的CSS。这是什么问题（我使用NetBeans和该文件以.php）这是一个关于样式html元素的问题

这里是代码：

<!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>

来源

2014-10-08 user2864059

你的HTML元素实际上并没有CSS类“附加”给他们。它如何知道影响什么元素？ – patricksweeney 2014-10-08 19:00:43

我明白了，因为我在网上跟着一个例子，它是这样编写的 – user2864059 2014-10-08 19:02:37

这可能会有帮助：[CSS类选择器@ MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors） – showdev 2014-10-08 19:03:08

您正在使用CSS class selectors。给你想要的风格相应的类属性（如patricksweeney提到）的元素：

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

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

来源

2014-10-08 19:08:31 showdev

你打败了我，并清理了古怪的大写字母，所以我会删除我的答案。 :-) – 2014-10-08 19:13:27

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

回答

相关问题