【实战01flex布局】移动京东搜索框

程序员微木

已于 2024-05-29 15:30:33 修改

阅读量512

点赞数 2

分类专栏： HTML+CSS3 文章标签：前端 html css3

于 2022-10-17 12:21:28 首次发布

本文链接：https://blog.csdn.net/qq_67896626/article/details/127360583

版权

HTML+CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何使用Flex布局来实现移动京东搜索框的设计。首先，分析了HTML结构，采用一行三列的布局。接着，通过CSS样式分析，强调了主布局采用flex弹性布局。然后提供了HTML结构和样式代码示例，并展示了最终效果。在难点解析部分，解释了如何通过align-items使子元素居中以及利用flex属性确保主内容占据剩余空间的94%。

摘要由CSDN通过智能技术生成

一、搜索框样图

二、思路分析

1、HTML结构分析：

一行三列

2、CSS样式分析：

主布局模式使用flex弹性布局

三、代码示例

1、HTML结构部分：

<!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 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、效果图：

四、难点解析

1、主内容部分：

（1）align-items：即设置子元素在主轴上居中排列

（2）flex：设置子项目占据多少分配空间，因为#btn和超链接a占据了一定的位置，所以flex设置0.94，就导致主内容占据剩余内容的百分之九十四。

.content{
				background-color: white;
				height: 37px;
				border-radius: 15px;
				flex: 0.94;
				/*添加flex后,jd图标显示,不添加不显示，待解决*/
				display: flex;
				align-items: center;
}

如果对代码还有其余问题，欢迎评论留言