搜索栏制作总结

最新推荐文章于 2022-03-02 20:53:32 发布

轼同辙

最新推荐文章于 2022-03-02 20:53:32 发布

阅读量489

点赞数 1

分类专栏： Java前端

本文链接：https://blog.csdn.net/weixin_43633023/article/details/106023272

版权

Java前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.实现搜索logo和搜索框水平布局：

			div.searchDiv{
                                width:400px;
				margin:50px auto;    //使定宽块状元素水平居中
			}
			img.logo{

                            //利用绝对定位固定logo的位置（相对于已定位的父元素，这里是body元素）
				position:absolute;
				left:0px;
				top:30px;
				z-index:-1;    //使图层置于底层
			}

（注：logo为内联元素，搜索框为块状元素，一般是不能一起水平摆放）

2.设置border：1px solid transparent：可以使父元素背景完整显示，更美观

3.若搜索框中有明显的分层现象，可以考虑内联元素和块状元素交叉摆放来实现，即将需要在下一层显示的内联元素放入块状元素中（这里利用的是块状元素自占1行或多行的性质，行数由块状元素的高度决定）

以下是搜索栏的源代码和效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="file:\\D:\project\j2se\jQuery\jquery.min.js"></script>
		<link href="file:\\D:\project\j2se\bootStrap\css\bootstrap\3.3.6\bootstrap.min.css" rel="stylesheet">
		<script src="file:\\D:\project\j2se\bootStrap\js\bootstrap\3.3.6\bootstrap.min.js"></script>
		<style>
			body{
				font-size:12px;
				font-family:Arial;
			}
			a{
				color:#999;
			}
			a:hover{
				color:#C40000;
				text-decoration:none;
			}
			div.searchDiv{
				background-color: #C40000;
				width: 400px;
				height:40px;
				padding:1px;
				margin:50px auto;
			}
			img.logo{
				position:absolute;
				left:0px;
				top:30px;
				z-index:-1;
			}
			div.searchDiv input{
				width: 275px;
				border: 1px solid transparent;
				height: 36px;
				margin: 1px;
				outline:none;
			}
			div.searchDiv button{
				width: 110px;
				border: 1px solid transparent;
				background-color: #C40000;
				color: white;
				font-size: 20px;
				font-weight: bold;
			}
			div.searchBelow{
				margin-top: 1px;
				margin-left:-20px;
				background-color:white;
				padding-top:3px;
				border:none;
			}
			div.searchBelow span{
				color:#999;
			}
			div.searchBelow a{
				margin: 0px 20px 0px 20px;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div>
			<a href="#">
				<img class="logo" src="https://how2j.cn/tmall/img/site/logo.gif"/>
			</a>
			<div class="searchDiv">
				<input type="text" placeholder="时尚男鞋 太阳镜" name="keyword"/>
				<button class="searchButton" type="submit">搜索</button>
				<div class="searchBelow">
					<a href="#">平衡车</a><span>|</span>
					<a href="#">扫地机器人</a><span>|</span>
					<a href="#">原汁机</a><span>|</span>
					<a href="#">冰箱</a>
				</div>
			</div>
		</div>
	</body>
</html>

轼同辙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
搜索栏制作总结

1.实现搜索logo和搜索框水平布局： div.searchDiv{ width:400px; margin:50px auto; //使定宽块状元素水平居中 } img.logo{ //利用绝对定位固定logo的位置（相对于已定位的父元素，这里是body元素） position:absolute; left:0px; top:
复制链接

扫一扫