html – 编码一个带有图标的搜索栏

前端之家收集整理的这篇文章主要介绍了html – 编码一个带有图标的搜索栏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试编写以下布局.我搞砸了代码,不知道最好的方法是什么.
  1. <div class="search-wrapper">
  2. <form action="search.PHP" method="get" name="search">
  3. <div class="search-Box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" />
  4. <input name="seach" type="text" value="Search for dishes or restaurants" />
  5. </div>
  6. <input class="submit-button" name="Go" type="submit" />
  7. </form>
  8. </div>
  9.  
  10.  
  11.  
  12. #search {
  13. height:125px;
  14. overflow:hidden;
  15. }
  16. .search-wrapper {
  17. width:465px;
  18. height:45px;
  19. background-color:#f0f0f0;
  20. margin:43px auto 0;
  21. border:1px solid #e9e9e9;
  22. -moz-border-radius: 5px; /* FF1+ */
  23. -webkit-border-radius: 5px; /* Saf3-4 */
  24. border-radius: 5px; /* Opera 10.5,IE 9,Saf5,Chrome */
  25. position:relative;
  26. }
  27. .search-Box {
  28. width:375px;
  29. height:32px;
  30. background-color:#fff;
  31. margin:5px 7px;
  32. border:1px solid #cfcfcf;
  33. -moz-border-radius: 5px; /* FF1+ */
  34. -webkit-border-radius: 5px; /* Saf3-4 */
  35. border-radius: 5px; /* Opera 10.5,Chrome */
  36. position:relative;
  37. }
  38. .search-Box img.search-icon {
  39. margin:8px 0 0 5px;
  40. }
  41. .search-Box input {
  42. border:none;
  43. height:30px;
  44. width:332px;
  45. margin:0;
  46. position:absolute;
  47. font-size:16px;
  48. padding-left:5px;
  49. padding-right:5px;
  50. }
  51. input.submit-button {
  52. background:url(../images/go-button.png) no-repeat;
  53. text-indent:-9999px;
  54. border:none;
  55. height:32px;
  56. width:68px;
  57. position:absolute;
  58. top:6px;
  59. left:390px;
  60. cursor:pointer;
  61. //right:15px;
  62. }

这里是代码@贴子bin:

http://pastebin.com/KQR3mPiW

图片

http://bayimg.com/IAPcpAACi

http://bayimg.com/JapcBaAci

解决方法

这里你去: http://jsfiddle.net/SjafT/

预习:

您可以更改“在jsfiddle中重新调整”的值.

猜你在找的HTML相关文章