2017-03-08 44 views
0

我是一个初学者编码,我必须创建一个学校项目的网站。我试图自己解决问题,但它不起作用。灰线我不知道它来自哪里后添加搜索栏

我想添加一个搜索栏到我的网站,所以我跟着一个教程,它在一个空白的新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>

+0

尝试使用父元素,'导航形式{ 边界:0; }' – Sravan

回答

-1

你甚至看过你的CSS?这是相当评论

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

他已经提到他只是一个初学者 - 给他一些时间,他会成为一个伟大的开发者:) –

+0

作为一个初学者并不意味着你盲目阅读或调查一件非常明显的事情。另外,就像我说的,CSS是评论。 –

-2

这似乎是nav边界。试试下面的CSS:

nav { 
border-bottom: none; 
} 
1

形式有这个属性设置有:

form{ 
    border: 3px solid #f1f1f1; 
} 

要修复它改变为:

form{ 
    border: 0; 
} 

,或者尝试使用parent element这是更好要走的路,

nav form{ 
    border: 0; 
} 
+1

编辑了你的答案,并增加了一点点。 – Sravan

+0

很酷,在那里好主意! :) –

0

感谢你的答案工程:) 我试图修改不同国界,但其实我也没有看到一个:/

,现在我尝试添加图片,但浏览器不显示他们又该我做 ?

我把这个段前:

<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"> 
+0

没有它确定我解决它,我真的不知道如何,但很棒:) – jonathan

相关问题