添加搜索栏后我不知道它来自哪里
[英]grey line I don't know where it come from after adding search bar
问题描述
我是编码的初学者，我必须为学校项目创建一个网站。 我试图自己解决问题，但是那根本行不通。
我想将搜索栏添加到我的网站，所以我遵循了一个教程，它可以在空白的新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>
4 个解决方案
解决方案1
1 2017-03-08 13:38:09
您的表单在此设置了以下属性：
form{
border: 3px solid #f1f1f1;
}
要修复它，请将其更改为：
form{
border: 0;
}
或尝试使用parent element ，这是更好的选择，
nav form{
border: 0;
}
解决方案2
0 2017-03-08 14:03:48
感谢您的回答，它有效:)我试图修改不同的边框，但实际上我还没有看到那个边框：/
现在我尝试添加图片，但是浏览器没有显示该怎么办？
我将此放在段落之前：
<img src="images/model1.jpg" alt="model women 1">
<img src="images/model2.jpg" alt="model women 2">
<img src="images/model3.jpg" alt="model women 3">
解决方案3
-1 已采纳 2017-03-08 13:37:37
您甚至看过CSS吗？ 相当评论
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
解决方案4
-2 2017-03-08 13:35:41
它似乎是nav的边界。 尝试以下CSS：
nav {
border-bottom: none;
}
我已经从 Godaddy 购买了域名，但我不知道从那里到 go [暂停]
[英]I have bought the domain off of Godaddy but I don't know where to go from there [on hold]
随机字符显示在我的WordPress网站上，我不知道它来自哪里
[英]Random character showing up on my WordPress site and I don't know where it is coming from
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.