第16章 知问前端--创建header区

第16章 知问前端--创建header区
学习要点：
1.创建界面
2.引入 UI

一．创建界面
我们首先要设计一个 header，这个区域将要设计成永远置顶。也就是，往下拉出滚动条也永远在页面最上层可视区内。在 header，目前先设计 LOGO、搜索框、按钮、注册和登录即可。

//JS 引入和 CSS 引入
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

 

//HTML
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<input type="button" value="查询" id="search_button" />
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> |
<a href="javascript:void(0)" id="login_a">登录</a>
</div>
</div>
</div>
<div id="reg" title="会员注册">
表单区
</div>

 

//CSS
body {
margin:0;
padding:0;
font-size:12px;
margin:40px 0 0 0;
background:#fff;
}
#header {
height:40px;
width:100%;
background:url(../img/header_bg.png);
position:absolute;
top:0;
}
#header .header_main {
width:800px;
height:40px;
margin:0 auto;
}
#header .header_main h1 {
height:40px;
line-height:40px;
font-size:20px;
color:#666;
margin:0;
padding:0 10px;
float:left;
}
#header .header_search {
float:left;
padding:6px 0 0 0;
}
#header .header_search .search {
width:300px;
height:24px;
border:1px solid #ccc;
background:#fff;
font-size:14px;
color:#666;
text-indent:5px;
}
#header .header_button {
float:left;
padding:5px;
}
#header .header_member {
float:right;
height:40px;
line-height:40px;
}
#header .header_member a {
font-size:14px;
text-decoration:none;
color:#555555;
}

 

二．引入 UI
在目前的这个 header 区域中，有两个地方使用了 jQuery UI。一个是 button 按钮，一个是 dialog 对话框。

//将 button 按钮设置成 UI
$('#search_button').button();

 

//将 div 设置成 dialog 对话框
$('#reg_a').click(function () {
$("#reg").dialog();
});