Heim >Web-Frontend >HTML-Tutorial >Suchfeld in HTML/CSS implementiert
Suchfeld in HTML/CSS implementiert
- 大家讲道理Original
- 2016-11-09 17:22:051852Durchsuche
<html>
<head>
<title>掬一捧|搜索框的实现</title>
<meta charset="UTF-8">
<style type="text/css">
<!--
body {
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size:14px;
}
h1 {
margin-top:0px;
margin-bottom:8px;
}
/* 链接 */
a {
text-decoration:none;
color:#1c00ff;
}
a:hover {
color:#5f00e4;
}
fieldset.search {
padding: 0px;
border: none;
width: 232px;
background:#e0e0e0;
}
fieldset.search:hover {
background: #a8a8a8;
}
.search input, .search button {
border: none;
float: left;
}
.search input.box {
height: 28px;
width: 200;
margin-right: 0px;
padding-right: 0px;
background: #e0e0e0;
margin: 1px;
}
.search input.box:focus {
background: #e8e8e8 ;
outline: none;
}
.search button.btn {
border: none;
width: 28px;
height: 28px;
margin: 0px auto;
margin: 1px;
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_blue.png) no-repeat top right;
}
.search button.btn:hover {
background: url(http://sandbox.runjs.cn/uploads/rs/339/livk7pl5/search_black.png) no-repeat bottom right;
}
/* 文章样式 */
.article {
}
-->
</style>
</head>
<body>
<div>
<h2>搜索框</h2>
<form method="get" id="searchform" action="http://php.cn/">
<fieldset class="search">
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="掬一捧" x-webkit-speech>
<button class="btn" title="SEARCH"> </button>
</fieldset>
</form>
</div>
<article class="article">
</article>
</body>
</html>Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Häufig verwendete Anti-Kopier-Codes auf WebseitenNächster Artikel：Häufig verwendete Anti-Kopier-Codes auf Webseiten