<html>
<head>
<meta charset="utf8">
<title>google</title>
<style>
.div1{
padding-top: 8px;
text-align: right;
}
.textos-top{
text-decoration: none;
font-family: arial, sans-serif;
font-size: 13px;
padding-left: 15px;
color: black;
vertical-align: middle;
}
.img_top{
display: inline-block;
text-align: right;
padding-left: 15px;
vertical-align: middle;
margin-right: 12px;
}
.fazer_login{
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
color: white ;
text-align: center;
background-color: #4387fd;
border-radius: 2px;
line-height: 30px;
padding-left: 13px;
padding-right: 13px;
margin-right: 20px;
}
.logo{
text-align: center;
vertical-align: middle;
margin-top: 145px;
}
.barra_de_pesquisa{
display:inline-block;
margin-top: 42px;
width: 25%;
border: 1px solid #e6e6e6;
border-right: none;
line-height : 20px;
height : 20px ;
padding : 7.5px
}
.div_barra_pesquisa{
display: inline-block;
background-color: black;
border-left: none;
}
</style>
</head>
<body>
<div class="div1">
<a href="" class="textos-top"> Gmail </a>
<a href="" class="textos-top"> Imagens </a>
<a href=""><img src="botao_google.png" class="img_top"></a>
<a href="" class="fazer_login" >Fazer login</a>
<center>
<img src="logo_google.png" class="logo">
<br>
<input type="" name="" class="barra_de_pesquisa";>
<div class="div_barra_pesquisa">
</div>
<br>
</center>
</body>
</html>
-
3Recomendo que faça o tour para aprender o básico do site e leia o guia de Como perguntar para verificar como pode melhorar sua pergunta.– Woss7/03/2018 às 22:42
-
Se queria um fundo preto, tá funcionando. Qual seria o problema?– Meu ovo7/03/2018 às 22:48
2 Respostas
Cor ele está recebendo, porém ele não tem conteúdo dentro dela, por isso não expande, você pode definir o tamanho pelo CSS como no exemplo abaixo:
.div_barra_pesquisa{
display: inline-block;
width:100px; //Largura
height:100px; //altura
background-color: #000;
border-left: none;
}
Coloquei esses tamanhos de exemplo, altere conforme sua necessidade.
-
mas a div n teria que receber a cor mesmo sem elementos dentro dela??? eu estou tentando copiar a tela inicial do google para treinar mas to com dificuldade de fazer aquela input de pesquisa(pois vc tem dois botoes "dentro da input" ai o jeito que eu achei para imitar isso foi tirar a cor da margin right da input e colocar uma div ao lado sem a margin left, so que a div n recebe nem margin, esse background color foi so um teste) 10/03/2018 às 3:06
-
Não, já que ela por padrão não tem tamanho. A explicação do @cleiton abaixo deixa mais claro.– RpgBoss10/03/2018 às 3:08
-
Quando se cria uma div, e ela não contem nenhum elemento dentro dela, o height é zero, por isso nao esta exibindo a cor preta de fundo...
para exibir e você poder enchergar esse fundo preto, tem 2 modo: colocar no CSS:
.div_barra_pesquisa{
height:100px; //altura
}
ou ir no HTML e escrever qualquer coisa dentro da div, e ja sera mostrado um fundo preto..