css实战案例1：顶部搜索

时间：2024-07-18 21:06:27

代码样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<div class="search_box">
			<!-- 搜索框-->
			<div class="search">搜索：目的地/酒店/航班</div>

			<a class="user">我的</a>
		</div>

	</body>
</html>


<style>
	a{
		text-decoration: none;
	}
	dic {
		box-sizing: border-box;
	}
	.search_box {
		position: fixed;
		top: 0;
		/*居中*/
		left: 50%;
		transform: translateX(-50%);
		/*transform 属性允许你旋转、缩放、倾斜或平移给定元素*/
		-webkit-transform: translateX(-50%);/*向左平移当前元素长度的一半*/
		/*兼容老浏览器写法*/
		width: 100%;
		min-width: 320px;
		max-width: 540px;
		height: 44px;
		display: flex;
	}

	.search {
		flex: 1; /*左边占一份*/
		height: 26px;
		line-height: 26px;
		border: 1px solid #ccc;
		margin: 7px 10px;
		border-radius: 5px;
		position: relative;
		padding-left: 25px;
		color: #707070;
		font-size: 13px;
		/*下边框阴影：x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色*/
		box-shadow: 0px 2px 4px rgba(0, 0, 0,.4);
	}
	.search::before {
		content: "";
		background: url(img/search.png) no-repeat center;
		width: 20px;
		height: 20px;
		background-size:20px;
		
		/*使用绝对定位，让他浮出来，不占一行，因为后面还有文字*/
		top: 3px;
		left: 3px;
		position: absolute; /*默认是相对整个body的位置进行绝对定位，如果父级元素加了position: relative，就是相对于父级的位置进行绝对定位*/
	}
	
	
	/* CSS 伪元素 :before 和 :after 是两个强大的工具，它们允许我们在选定元素的前后插入内容，而无需修改HTML结构。这些伪元素通常与 content 属性一起使用，可以插入文本或图像。*/
	.user::before {
		content:"";
		background: url(img/my.png) no-repeat center;
		width: 17px;
		height: 17px;
		background-size:17px;
		display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
		margin: 0 auto; /*水平居中*/
	}
	.user {
		width: 44px;
		height: 44px;
		text-align: center;/*里面的文字水平居中*/
		font-size: 10px;
		padding-top: 8px;
		color: #1296db;
	}

</style>

相关文章