weixin_38422826
weixin_38422826
2017-10-30 09:41

搜索栏的搜索标 应该如何实现实际效果。

  • bootstrap

写的代码如下:
<!DOCTYPE html>



菜鸟教程(runoob.com)



div{ border:2px solid white; height: 50px; border-radius:20px; background:rgb(75,75,75); } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border-radius:3px; } li { margin-top:9px; float: left; border-right: 1px solid white; height:35px; } li a { display: inline-block; color: white; text-align: center; padding: 14px 9px; line-height:3px; text-decoration: none; } li a:hover { background-color:rgba(255,255,255,0.5); }



制作的搜索框效果如下:
图片说明

而我想要的搜索框应该是这样子的:
图片说明

求大牛指点 应该怎样修改代码达到想要的搜索框效果?

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

2条回答

为你推荐

换一换