创建界面

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

项目的大致骨架如下：

index.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>知问前端</title>

    <script type="text/javascript" src="jquery-1.12.3.js"></script>

    <script type="text/javascript" src="jquery-ui.js"></script>

    <script type="text/javascript" src="index.js"></script>

    <!-- 引入icon图标 -->

    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />

    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />

    <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

    <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="###" id="login_a">登录</a>

            </div>

        </div>

    </div>

    <div id="reg" title="会员注册">

        表单区--会员注册

    </div>

</body>

</html>

style.css：(还好能看懂！！！)

body {

    margin: 40px 0 0 0;

    padding:;

    font-size: 12px;

    font-family: 宋体;

    background: #fff;

}

#header {

    width: 100%;

    height: 40px;

    background: url(img/header_bg.png);

    position: absolute;

    top:;

}

#header .header_main {

    width: 800px;

    height: 40px;

    margin: 0 auto;

}

#header .header_main h1 {

    font-size: 20px;

    margin:;

    padding:;

    color: #666;

    line-height: 40px;

    float: left;

    padding: 0 10px;

}

#header .header_search {

    padding: 6px 0 0 0;

    float: left;

}

#header .header_search .search {

    width: 300px;

    height: 24px;

    border: 1px solid #ccc;

    background: #fff;

    color: #666;

    font-size: 14px;

    text-indent: 5px;

}

#header .header_button {

    padding: 5px;

    float: left;

}

#header .header_member {

    float: right;

    line-height: 40px;

    color: #555;

    font-size: 14px;

}

#header .header_member a {

    text-decoration: none;

    font-size: 14px;

    color: #555;

}

引入UI

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

将button按钮设置成UI：

$("#search_button").button();

将div设置成dialog对话框：

$("#reg_a").click(function() {

    $("#reg").dialog(); //初始化一个对话框

});

效果图：

知问前端——创建header区的更多相关文章

  1. 知问前端——对话框UI(一)

    对话框(dialog),是jQuery UI非常重要的一个功能.它彻底的代替了JavaScript的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 开启多个dialog 我们 ...

  2. 第一百七十八节，jQuery-UI，知问前端--对话框 UI

    jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...

  3. 知问前端——对话框UI(二)

    dialog()方法的事件 除了属性设置外,dialog()方法也提供了大量的事件,这些事件可以给各种不同状态时的对话框提供回调函数,这些回调函数中的this值等于对话框内容的div对象,不是整个对话 ...

  4. 知问前端——Ajax提交表单

    本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...

  5. 知问前端——自动补全UI

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var hos ...

  6. 知问前端——工具提示UI

    工具提示(tooltip),是一个非常实用的UI.它彻底扩展了HTML中的title属性,让提示更加丰富,更加可控制,全面提升了用户体验. 调用tooltip()方法 在调用tooltip()方法之前 ...

  7. 知问前端——按钮UI

    按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单可以设置按钮或文本,还可以设置单选按钮和多选按钮. 使用button按钮 使用button按钮UI的时候,不一定必须是 ...

  8. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  9. 知问前端——cookie插件

    Cookie是网站用来在客户端保存识别用户的一种小文件.一般可以保存用户登录信息.购物数据信息等一系列微小信息. 一.使用cookie插件 官方网站:http://plugins.jquery.com ...

随机推荐

  1. 在WIN7下安装运行mongodb 1)、下载MongoDB

    1).下载MongoDB http://downloads.mongodb.org/win32/mongodb-win32-i386-2.4.5.zip 下载Windows 32-bit版本并解压缩, ...

  2. Tornado服务器的学习

    Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的框架)有着明显的区别:它是非阻塞 ...

  3. 条款20：以const-reference传递替换by-value传递

    缺省情况下,C++中函数参数的传递方式为by-value.即函数都是以实际参数的副本进行传递,而函数返回的也是一个副本.考虑如下实例程序: #include <iostream> clas ...

  4. 使用VBA实现Excel自杀功能

    曾经看到过一个“Excel-Home”出品的“关于Excel自杀功能”的视频教程,经认真学习后,我写下了自己的代码,分享于此. 实现思路: 使用VBA创建一个隐藏的名称,记录当前工作簿打开的次数,如果 ...

  5. 从一个Activity返回上一个Activity

    从一个Activity返回上一个Activity 要求:保留上一个Activity的数据 方法: 第一步:从Activity1转向Activity2时,用startActivityForResult而 ...

  6. The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit

    如果你是通过搜索来到本文的,相信你应该是遇到了如下的错误 The code of method _jspService(HttpServletRequest, HttpServletResponse) ...

  7. 工作点滴积累（1）---MD5和编码

    今天同事忽然问了一个问题,他发现同一个字符,比如"电影",用项目中的md5工具类生成的hash值和网上提供的在线MD5生成的hash值有时不一样,在只包含了字母字符串中,生成的ha ...

  8. MySQL用程序代码建表（1）

    一.创建表格代码格式 create table <表名>( <列名> <数据类型及长度> [not null], <列名> <数据类型及长度> ...

  9. ZeroMQ 在 centos 6.5_x86_64 下的安装

    ZeroMQ 在 centos 6.5_x86_64 下的安装 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.ZeroMQ介绍 ZeroMQ是一个开 ...

  10. FastDFS配置文件(tracker.conf)

    # ===========================基本配置==================================== # 该配置文件是否生效 # false:生效 # true: ...