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

╰半夏微凉° 2023-01-07 07:16 86阅读 0赞

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

## [上一期][Link 1] ##

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

## 图标下载 ##

[点击进入该网站][Link 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]

## 图标引入 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]

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

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

![在这里插入图片描述][20210117061238643.png]

## 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;
    }

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112660430
[Link 2]: https://www.iconfont.cn/search/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/cbbc8bc4bd42484d9c98997108d1a128.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]: /images/20221119/e0422c5033004c5d83e9893a04072162.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210117055815847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210117061031703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210117061105165.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[20210117061238643.png]: https://img-blog.csdnimg.cn/20210117061238643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210117064007978.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70