Table of contents
1. Sample search box
2. Idea analysis
1. Structural analysis:
What is the content of each part, and what markup is used for each content.
2. Style analysis:
Focus on determining what kind of layout (this time using flex elastic layout), and then add styles to each part.
3. Code
1. Structural part:
<!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. Style part:
<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. Effect picture:
4. Analysis of Difficulties
1. Main content part:
(1) align-items: set the child elements to be centered on the main axis
(2) flex: Set how much allocated space the sub-item occupies, because #btn and hyperlink a occupy a certain position, so setting flex to 0.94 will cause the main content to occupy 94% of the remaining content.
.content{
background-color: white;
height: 37px;
border-radius: 15px;
flex: 0.94;
/*添加flex后,jd图标显示,不添加不显示，待解决*/
display: flex;
align-items: center;
}
If you have any other questions about the code, please leave a comment