Web全栈~15.购物车案例(Logo和搜索框)

时间:2021-1-18 作者:admin

Web基本笔记~15.购物车案例(Logo和搜索框)

上一期

       制作搜索框之前,先来了解一下图标。在上一期导航栏的首页其实是可以再添加一个小房子的图标实现更加美观。而阿里巴巴则有一个网站是提供了各种各样图标下载的。这里先随便搜索一个图标示范。找到自己喜欢的图标后,就可以开始制作了~

图标下载

点击进入该网站

Web全栈~15.购物车案例(Logo和搜索框)

Web全栈~15.购物车案例(Logo和搜索框)

Web全栈~15.购物车案例(Logo和搜索框)

图标引入

Web全栈~15.购物车案例(Logo和搜索框)
Web全栈~15.购物车案例(Logo和搜索框)

然后就可以直接引入了 < i class=”iconfont”>& #xe6d3;< /i >

       其他的图标也是一样的道理

<link href="./icon/iconfont.css" type="text/css" rel="stylesheet"/>
<li><a href=""><i class="iconfont">&#xe6d3;</i>商城首页</a></li>

Web全栈~15.购物车案例(Logo和搜索框)

logo和搜索框

<!--	  搜索框	  	-->
<div class="search">
	<div class="warp">
		<img src="./img/logo.jpg"/>
		<div class="search_input">
			<input type="text" class="search_text"/>
			<input type="button" value="搜索" class="search_but"/>
		</div>
	</div>
</div>
/*搜索框*/
.search{
	/*和上面拉开一点距离*/
	margin-top: 20px;
}
/*设置logo*/
.search img{
	/*清除之前的所有样式
		之所以这样做是防止现在的样式和之前的样式有所冲突
	*/
	clear: both;
	/*左浮动*/
	float: left;
}
/*搜索框和按钮*/
.search_input{
	/*设置右浮*/
	float: right;
	/*拉开距离*/
	margin-top: 20px;
}
/*设置框的长度和高度*/
.search_text{
	width: 260px;
	height: 20px;
	/*文本框加颜色*/
	border: 3px solid #c91623;
	/*相对定位 让按钮和框尽量靠拢一点*/
	position: relative;
	left: 3px;
}
/*设置按钮*/
.search_but{
	width: 50px;
	height: 25px;
	/*背景颜色设置红色*/
	background-color: #c91623;
	/*边框去掉 设置0*/
	border: 0px;
	/*字体颜色设置白色*/
	color: #FFFFFF;
}

       当前样式(这里图标借用了京东的~)

Web全栈~15.购物车案例(Logo和搜索框)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。