欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

简单搜索框的制作

发布时间：2024/1/8 编程问答 33 豆豆
生活随笔 收集整理的这篇文章主要介绍了 简单搜索框的制作 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

最近刚刚学了CSS，一直没怎么实践，今天就随手写一个比较好看的搜索框，通过Css来实现。虽然前端的工作大多是由前端设计师来完成的。但是这个也还是不错的，和大家分享一下。

<head><title>search</title><style>body{background:#333;margin:0;height:auto;width:auto}.search-form{background:#fff;float:left;margin-left:300px;margin-top:200px;}.search-text{float:left;width:300px;outline:none;border:0}.search-button{float:left;width:60px;font-size:14px;color:#fff;background:green;outline:noneborder:0px;padding:0;}.top-div{background:#aad;height:50px;} </style> </head> <body><div class="top-div"></div><form class="search-form"><input type="text" class="search-text"/><input type="submit" value="搜索" class="search-button"/></form> </body>实现的效果：



就是这样啦！

总结

以上是生活随笔为你收集整理的简单搜索框的制作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。