Bing输入带提示搜索框制作 - 不同分辨率布局依然垂直居中

原创 lilinsoft 随笔 JQuery效果代码 2126阅读 2014-08-19 16:44:53 举报

代码片段 1

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bing输入带提示搜索框制作 - 不同分辨率布局依然垂直居中</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>;
<style>
*{ margin:0; padding:0;}
body,html{ background:#333; width:100%; height:100%;}
ul li{ list-style:none;}

.search{ width:1300px; height:690px; position:relative; left:50%; top:50%; margin-left:-650px; margin-top:-345px;}
.search-bg{ width:1300px; height:690px; position:absolute; background:#666; left:50%; top:50%; margin-left:-650px; margin-top:-345px; z-index:999;}
.search-box{ position:absolute; left:15%; top:26%; z-index:9999;}
.search-box form{ width:496px; height:40px; background:#fff;}
.search-input-text{ height:30px; line-height:30px; margin:5px 0 0 5px; border:none; outline:none; width:370px; font-size:16px; color:#333; display:block; float:left;}
.search-input-submit{ width:110px; height:34px; background:#444; color:#fff; font-size:14px; border:none; cursor:pointer; outline:none; display:block; float:left; margin:3px 0 0 8px;}
.search-input-submit:hover{ background:#555;}
.search-tips{ width:380px; height:245px; background:#fff; position:absolute; left:15%; top:31.8%; padding-top:5px; border-top:1px solid #eee; font-size:16px; z-index:9999;}
.search-tips ul li{ display:block; height:30px; line-height:30px; margin:0 5px;}
.search-tips ul li a{ display:block; padding-left:5px; color:#777; text-decoration:none;}
.search-tips ul li a:hover{ background:#f5f5f5; text-decoration:underline;}

</style>
</head>

<body>

<div class="search">
<div class="search-bg"></div>
<div class="search-box">
<form>
<input type="text" class="search-input-text" autofocus="autofocus" />
<input type="submit" class="search-input-submit" />
</form>
</div>
<div class="search-tips" style="display:none;">
<ul>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
<li><a href="#">是收拾收拾<strong>我不是</strong></a></li>
</ul>
</div>
</div>

<script>
$(function(){
$(".search-input-text").bind("keyup",function(){
$(".search-tips").show();
})
$("body,html").click(function(){
$(".search-tips").hide();
})
})
</script>

</body>
</html>[/code]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复