Question

我是编码的初学者，我必须为学校项目创建一个网站。我试图自己解决这个问题，但它只是不起作用。

我想在我的网站上添加一个搜索栏，所以我按照了一个教程，它在一个空白的新html页面上工作，但当我在我的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.
*/
/* 
    Created on : 01-mars-2017, 14:52:23
    Author     : jonathan
*/
/* syling my paragraphs */
div {
    font-family:Times New Roman;
    
}

  

body {
    
    font-family: Arial;
    background-color:  white;

}
p {
    color: darkgreen;
    font-size:30px;
    font-family:Arial;
    }
    
    .highlight {
        
        color:darkgray;
    }
    
    /* styling navigation */
    #search {
        width: 200px;
        padding: 7px;
        
        
    }
    #submit {
        padding: 7px;
        background: #669999;
        
        color: white;
        margin-letf: -5px;
        cursor: pointer
    }
    #submit:hover {
        background:#333;
        transition: all 0.40s;
    }
    
    
    
    
    .header-logo {
        display:block;
        height:240px;
        width:240px;
        background:url(images/wolf.png) no-repeat;
        text-indent:50%;
        white-space: nowrap;
        overflow: hidden;
        margin: 0 auto;
        
   
    }
   
    nav {
        
        border-bottom:2px solid black;
        border-bottom-color: #669999;
        
    }
    li{
        display:inline-block;
        text-align: center;
        margin-right:20px;
       
    }
    
   
    
    nav a:link, nav a:visited {
        color:gray;
        font-size:15px;
        text-decoration: none;
    }
    nav a:hover {
        background-color: #99ddff;
    }
    
    nav a:active {
        background-color: yellow
    }
    
   
    
    
    
    /* Bordered form */
form {
    border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
    width: 40%;
    border-radius: 50%;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}

<!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>
        
        <title> HTML by Jo</title>
        <meta charset="UTF-8">
        <meta name="description" content="I by mistake deleted all the files 
              so i'm starting all over again">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="wolf.css">
    
    </head>
    
    <body>
        <!-- navigation -->
         
        <header>
        <h1>
            <a class="header-logo" href="http://localhost:8383/Grey%20wolf/index.html"></a>
            
            
        </h1>
             
        </header>
      
        <nav>
            <div style="text-align:center">
            <ul> 
                 <li><a href="login.html">Login</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="contact.html">CONTACT</a></li> 
               
                
                
            </ul></div>
              <form action="https://google.com">
            <input type="text" placeholder="Search..." maxlength="20" id="search">
            <input type="submit" value="Go!" id="submit">
            
        </form>
        </nav>
        
        <!-- the content -->
        <div>TODO write content</div>
        
        
        <p>Here is a paragraph.</p>
     
        <p class="highlight">Another paragraph.</p>
        
        <h3 class="highlight">this is a heading h3</h3>
            
        <a href="https://www.codecademy.com/" target="_blank">link to codeacademy</a>
        
             
    </body>
    
     
</html>

Answer 1

您的表单在此处设置了此属性：

form{
    border: 3px solid #f1f1f1;
}

要修复它，请将其更改为：

form{
    border: 0;
}

或尝试使用parent element，这是更好的方法，

nav form{
    border: 0;
}

Answer 2

感谢你的答案，它的工作原理:) 我试图修改不同的边框但我实际上没有看到那个：/

现在我尝试添加图片，但浏览器没有显示它们应该怎么做？

我把它放在一个段落之前：

{{1}}

Answer 3

你有没看过你的CSS？它得到了相当评论

/* Bordered form */
form {
    border: 3px solid #f1f1f1;
}

Answer 4

它似乎是nav的边界。尝试以下CSS：

nav {
 border-bottom: none;
}

灰线我不知道它添加搜索栏后来自哪里

4 个答案: