Como configurar o botão buscar

31/07/2015

0

SQL

Bom dia, boa tarde, boa noite :) eu to finalizando meu primeiro site em html e css, mas ainda falta configurar o botão buscar do site para fazer as pesquisas e ainda não seu como fazer.
Se alguém souber me ajudar agradeço.
Juliana

Juliana

Responder

Posts

31/07/2015

William

Olá Juliana, por gentileza poste seu código para entendermos o que você já tem pronto!
Responder

31/07/2015

Juliana

Bom dia, boa tarde, boa noite :) eu to finalizando meu primeiro site em html e css, mas ainda falta configurar o botão buscar do site para fazer as pesquisas e ainda não seu como fazer.
Se alguém souber me ajudar agradeço.


html da home:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		 <meta charset="UTF-8">
		 <title>Storm Tech - Criação de Sites</title>
		 <link rel="stylesheet" type="text/css" href="css/estilo.css">
		 <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,100' rel='stylesheet' type='text/css'>
		 <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
		 <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
	</head>
	<body>
	    <div class="cabecalho">
		    <div class="linha">
			  <header>
				  <div class="coluna col4">
					 <img src="img/logo.png" alt="logo Storm Tech" title="logo Storm Tech">       	
				  </div>
				  <div class="coluna col4">
					 <h2 class="titulo-texto titulo-home">Criação de Sites</h2>      	
				  </div>
				  <div class="coluna col4">
					 <form action="" class="buscar">
					 	<input type="text" class="text-busca" placeholder="Buscar..."/>
                		<input type="image" class="img-busca" src="img/img.busca.png"/>
					 </form>
				  </div>
			  </header>
		    </div>
	 	</div>
	    <div class="menu">
		    <div class="linha">
		    	<nav>
		    		<div class="coluna col12">
		    			<ul>
		    				<li><a href="index.html">Home</a></li>
		    				<li><a href="como-e-feito-o-site.html">Como é feito o site</a></li>
		    				<li><a href="contato.html">Contato</a></li>
		    			</ul>
		    		</div>
		    	</nav>
		    </div>
	    </div>
	    <div id="baner">
		    <div class="linha">
		    	<div class="coluna col3" id="img1-baner">
		    		<img src="img/img1-baner.png" alt="">
		    	</div>
		    	<div class="coluna col3">
		    		<p class="texto"><h3 class="titulo-texto">Sites Para Pequenos Negócios</h3><br>Sites Para Pequenos NegóciosLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
		    	</div>
		    	<div  class="coluna col3" id="img2-baner">
		    		<img src="img/img2-baner.png" alt="">
		    	</div>
		    	<div class="coluna col3">
		    		<p class="texto"><h3 class="titulo-texto">Sites Para Divulgação</h3><br><br>Sites Para DivulgaçãoLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,massa gkhfk siutnhhdf <br><br></p>
		    	</div>
		    </div>
		</div>
		<div class="conteudo">
			<div class="linha">
			    <div class="coluna col12">
			    	<h3 class="titulo-texto">As Melhores Ferramentas Para o Seu Site</h3>
			    </div>
			</div>
		    <div class="linha">
		    	<div class="coluna col12">
		    		<img class="setas" src="img/seta1.png" alt="">
		    		<img class="setas" src="img/seta2.png" alt="">
		    		<img class="setas" src="img/seta3.png" alt="">
		    	</div>
		    </div>
			<div class="linha">
			   	<div class="coluna col4 img-html-css3-fireworks">
			    	<img src="img/box-conteudo1.png" alt="HTML5">
			    </div>
			    <div class="coluna col4 img-html-css3-fireworks">
			    	<img src="img/box-conteudo2.png" alt="CSS3">
			    </div>
			    <div class="coluna col4 img-html-css3-fireworks">
			    	<img src="img/box-conteudo3.png" alt="FireWorks">
			    </div>
			</div>
		</div>
		<div class="rodape">
		  	<footer>
			    <div class="linha">
			      <div class="coluna col12">
			    		<h6>© Storm Tech - Criação de Sites 2015</h6>	
			      </div>
			    </div>
		  	</footer>
		</div>
</body>
</html>


css do site:

/* grid de 1200px*/
*{
	margin: 0;
	padding: 0;
}
body{
	overflow-x: hidden;
}
.linha{
	width: 1200px;
	margin: 0 auto;
	overflow: auto;
	padding: 5px 0;
}
.coluna{
	padding: 0 10px;
	float: left;
}
.col1{
	width: 80px;
}
.col2{	
	width: 180px;
}
.col3{	
	width: 280px;
}
.col4{	
	width: 380px;
}
.col5{	
	width: 480px;
}
.col6{	
	width: 580px;
}
.col7{
	width: 680px;
}
.col8{
	width: 780px;
}
.col9{
	width: 880px;
}
.col10{
	width: 980px;
}
.col11{
	width: 1080px;
}
.col12{
	width: 1180px;
}
.cabecalho{
	background: #dee3e6;
	width: 100%;
}
.titulo-home{
	font-size: 30pt !important;
	margin-top: 20px;
}
.text-busca{
	background:#BBBBBB;
    font-style:italic;
    font-size:18px;
    border: 1px solid rgb(51,51,51,05);
    height:30px;
    width:210px; 
    color:#555555;
    margin-top: 15px;
    border-radius: 10px;
}
.img-busca{
	width: 38px;
	height: 30px;
}
.buscar{
	float: right;
	margin-top: 20px;
}
.menu{
	width: 870px;
	height: 50px;
	background: #CFBFFF;
	margin:-25px 230px 0 230px; 
	border-radius: 20px;
}
.menu ul{
margin: 10px 0 10px 250px;

}
.menu ul li{
	display:inline;
	padding-right: 50px;

}
.menu ul li a:link, a:active, a:visited{
	text-decoration: none;
	color: #30003F;
	font-size: 14pt;
}
.menu ul li a:hover{
	text-decoration: underline;
	color: #006CD8;
}
#baner{
	width: 100%;
	height: 260px;
	background: #dee3e6;
	margin-top: 30px;
}
#baner .linha .col3{
	margin-top: 22px;
}
#img1-baner{
	width: 312px;
	height: 205px;
}
#img2-baner{
	width: 237px;
	height: 205px;
}
#baner .col3 p{
	border: 1px dotted black;
	margin-top: 0px;
}

.conteudo{
	border-right: 1px solid rgba(0,0,0,0.5);
	border-left: 1px solid rgba(0,0,0,0.5);
	width: 1080px;
	margin: 0 auto;
}
.conteudo .col12 h3{
	margin: 30px 90px 0 0px;
}
.setas{
	padding-right: 150px;
	margin: 20px 0 0 150px;
}
.img-html-css3-fireworks{
width: 282px;
padding-right: 30px;
margin: 0 0 30px 32px;
}
.rodape{
	background: #777777;
	width: 100%;
	height: 60px;
}
.rodape .col12 h6{
	text-align: center;
	font-size: 10pt;
	color: #30003F;
	font-family: 'Cabin',arial;
	margin-top: 20px;
}
/* estilo dos textos */
.texto{
	font-size: 15pt;
}
.largura-texto{
	max-width: 1060px;
}
.img-texto-direita{
	float:right;
    margin: 20px 10px 10px 20px;
}
.titulo-texto{
	text-align: center;
	font-size: 22pt;
	font-family: 'Dancing Script', arial;
	font-weight: 700;
	text-shadow: 2px -2px 5px #9672FF;
}
.subtitulo-texto{
	font-size: 20pt;
	font-family: 'Dancing Script', arial;
	font-weight: 400;
	text-shadow: 2px -2px 5px #9672FF;
}
/* fim estilo dos textos */
Responder

31/07/2015

Randrade

Olá Juliana,
Somente com essas informações não é possível lhe ajudar. Você está usando alguma linguagem para fazer a busca no banco de dados? Se sim, qual?
Qual o banco de dados e a estrutura que você está usando?
Responder

31/07/2015

Juliana

Olá Juliana,
Somente com essas informações não é possível lhe ajudar. Você está usando alguma linguagem para fazer a busca no banco de dados? Se sim, qual?
Qual o banco de dados e a estrutura que você está usando?[/quote
Ae é que ta, eu nao to usando nenhuma limguagem de tratamento de dados e queria saber como fazer isso, como configurar o botao para exibir as pesquisas, provavelmente deve usar php né , andei vendo umas aulas ae mas nao sei ainda como tratar esses dados .
Responder

APRENDA A PROGRAMAR DO ZERO AO PROFISSIONAL

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar