Índice
1. Exemplo de caixa de pesquisa
1. Exemplo de caixa de pesquisa
2. Análise de ideias
1. Análise estrutural:
Qual é o conteúdo de cada parte e qual marcação é usada para cada conteúdo.
2. Análise de estilo:
Concentre-se em determinar que tipo de layout (desta vez usando layout elástico flexível) e, em seguida, adicione estilos a cada peça.
3. Código
1. Parte estrutural:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="header">
<span id="btn"></span>
<div class="content">
<span id="jdlogo"></span>
<span id="fdj"></span>
<input type="text" />
</div>
<a href="">登录</a>
</div>
</body>
</html>
2. Parte de estilo:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
height: 50px;
background-color: #e43130;
display: flex;
justify-content: space-around;
align-items: center;
}
#btn{
width: 24px;
height: 24px;
background:url(img/下载.png) no-repeat ;
background-size: 24px;
}
.content{
background-color: white;
height: 37px;
border-radius: 15px;
flex: 0.94;
/*添加flex后,jd图标显示,不添加不显示，待解决*/
display: flex;
align-items: center;
}
#jdlogo{
width: 37px;
height: 21px;
/*遮挡问题待解决*/
background: url(img/jd-sprites.png) no-repeat 13px 3px;
background-size: 200px;
border-right: solid 2px #CCCCCC;
}
#fdj{
width: 23px;
height: 30px;
background: url(img/jd-sprites.png) no-repeat -79px 8px ;
background-size:200px ;
}
a{
color: white;
text-decoration: none;
}
input{
outline: none;
border: none;
}
</style>
3. Imagem do efeito:
4. Análise de Dificuldades
1. Parte do conteúdo principal:
(1) alinhar itens: define os elementos filhos para serem centralizados no eixo principal
(2) flex: Defina quanto espaço alocado o subitem ocupa, pois #btn e o hiperlink a ocupam uma determinada posição, portanto, definir flex como 0,94 fará com que o conteúdo principal ocupe 94% do conteúdo restante.
.content{
background-color: white;
height: 37px;
border-radius: 15px;
flex: 0.94;
/*添加flex后,jd图标显示,不添加不显示，待解决*/
display: flex;
align-items: center;
}
Se você tiver alguma outra dúvida sobre o código, deixe um comentário