话接上文,灵光一闪,想到了还原搜索栏的方法
1.加置一个盒子(青色区域)
![](https://i-blog.csdnimg.cn/blog_migrate/3879b1196e18dc66f6bd23adb54f6f77.png)
2.插入图片(snipaste的功能)
![](https://i-blog.csdnimg.cn/blog_migrate/02f3e12dae9c7d27e54bb3d1df43af4a.png)
(看看hover效果吧!)
![](https://i-blog.csdnimg.cn/blog_migrate/344e6e34154f6026a07e215e4248fb26.png)
ps:有两个不完善的地方(以后再改)
由于对盒子整体进行hover设定,在点击单行文本框时搜索按钮也会变色
单行文本框与搜索按钮之间存在间隙
第三个区域
首先还原左侧
要点:超链接行内块化
![](https://i-blog.csdnimg.cn/blog_migrate/4f335400bad041e151483bcb08cc1221.png)
设置好了超链接,但此时它们是行内元素,需要转换类型(display :block)
![](https://i-blog.csdnimg.cn/blog_migrate/d563069f29f77f684695bd1c0a1b2f3e.png)
注意:末尾的“>”的独立的,因为点击时会变色 所以需要在a内添加span
![](https://i-blog.csdnimg.cn/blog_migrate/f30349005e16eaece3a37313c55d7d40.png)
一系列初始样式的代码如下
.left a {
color: white;
font-size: 17px;
text-indent: 34px;
line-height: 51px;
text-decoration: none;
width: 231px;
height: 51px;
background-color: #894645;
display: inline-block;
}
![](https://i-blog.csdnimg.cn/blog_migrate/92ad37435c1ae1a20bec21a3ae5cc472.png)
设定好末尾的箭头,并将上下间距空出(颜色不一便于观察,无误后改变)
(没有小图标的用大于符号表示(bushi))
接来下的重点:
改变span的位置
代码问题:无法直接一致改变右间距(知识储备不够,唉,清除浮动也不行)
于是我。。。分类改变了左间距
.left .two {
margin-left: 125px;
}
.left .four {
margin-left: 86px;
}
.left .six {
margin-left: 69px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/a7f21b44648320b3fecbbe41f3ae84ba.png)
完成啦~~~~
还原右侧:(直接插入图片)
![](https://i-blog.csdnimg.cn/blog_migrate/14c8ad178f8fde42fb43e4e23c895863.png)
row1-area1竣工!