html – 编码一个带有图标的搜索栏
发布时间:2020-12-14 19:40:24 所属栏目:资源 来源:网络整理
导读:我正在尝试编写以下布局.我搞砸了代码,不知道最好的方法是什么. div class="search-wrapper" form action="search.php" method="get" name="search" div class="search-box"img class="search-icon" src="images/search-icon.png" width="21" height="18" al
我正在尝试编写以下布局.我搞砸了代码,不知道最好的方法是什么.
<div class="search-wrapper"> <form action="search.php" method="get" name="search"> <div class="search-box"><img class="search-icon" src="images/search-icon.png" width="21" height="18" alt="search icon" /> <input name="seach" type="text" value="Search for dishes or restaurants" /> </div> <input class="submit-button" name="Go" type="submit" /> </form> </div> #search { height:125px; overflow:hidden; } .search-wrapper { width:465px; height:45px; background-color:#f0f0f0; margin:43px auto 0; border:1px solid #e9e9e9; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5,IE 9,Saf5,Chrome */ position:relative; } .search-box { width:375px; height:32px; background-color:#fff; margin:5px 7px; border:1px solid #cfcfcf; -moz-border-radius: 5px; /* FF1+ */ -webkit-border-radius: 5px; /* Saf3-4 */ border-radius: 5px; /* Opera 10.5,Chrome */ position:relative; } .search-box img.search-icon { margin:8px 0 0 5px; } .search-box input { border:none; height:30px; width:332px; margin:0; position:absolute; font-size:16px; padding-left:5px; padding-right:5px; } input.submit-button { background:url(../images/go-button.png) no-repeat; text-indent:-9999px; border:none; height:32px; width:68px; position:absolute; top:6px; left:390px; cursor:pointer; //right:15px; } 这里是代码@贴子bin: http://pastebin.com/KQR3mPiW 图片: http://bayimg.com/IAPcpAACi http://bayimg.com/JapcBaAci 解决方法
这里你去:
http://jsfiddle.net/SjafT/
预习: 您可以更改“在jsfiddle中重新调整”的值. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |