1.没有css修饰的搜索框，真是没法看，预习了一下css下面来做一下搜索框：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ssk</title> <style type="text/css"> .classB{ position: absolute; margin: 0 auto; width: 460px; height: 36px; top: 100px; left: 400px; margin: 0 auto; } .classA{ position: absolute; width: 538px; height: 36px; overflow:hidden; border: 2px solid #BD1D17; align-content: center; /*margin-left: auto; margin-right: auto;*/ top: 140px; left: 400px; margin: 0 auto; } .classA input{ width: 456PX; height: 24PX; float: left; padding: 6px 2px; /*对input内补白,使其字体不紧贴border边框,增加美感.*/ background-color: transparent; /*让input标签的颜色为透明色*/ border: none; /* 去input标签原来的边框属性*/ outline: none; font-size: 16px; } .classA button{ width: 76px; height: 36px; float: right; background-color: #BD1D17; } </style> </head> <body"> <div class="classB"><span style="color: #ff00fff; font-size: 18pt;"><strong>HTML标签:</strong></span></div> <div class="classA" styl"> <form > <input type="text" name="search" placeholder=" search练习" /> <button>搜索</button> </form> </div> </body> </html>
小伙伴们可以自己去敲下试试效果。