创建界面

我们首先要设计一个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. golang的goroutine与channel

    Golang的goroutine是非抢占式的, 令人相当蛋疼! 有痛不能呻吟...只能配合channel在各goroutine之间传递信号来实现抢占式, 而这形成了golang最灵活与最具性能的核心. ...

  2. UIButton之Block回调

    本文主要介绍了两种改写UIButton的点击事件方法——继承UIButton跟给UIButton添加一个分类.附代码 方法一:继承UIButton UIButtonBlock.h文件 如下 #impo ...

  3. generate the next AttestationNumber, 格式是ICD-EPRG-DEV-0000000001,ICD-EPRG-DEV-0000000002

    private static int GetNextAttestationNumber(string maxAttestationNumber) { //generate the next Attes ...

  4. 元音字母A的发音规则

    摘抄自百度文库 A/a的发音比较复杂,归纳起来有10种情况: 一．在重读开音节中读[ei]. 例如: plane [plein]  radio [ˈreidiəu] wake [weik]  pape ...

  5. APM飞控修改数传模块方法

    APM飞控修改数传模块方法 硬件 ARDUCOPTER第二代 数传模块(USB接口) 数传模块(telem接口) usb-ttl模块 修改方法 注意:APM固件版本和数传模块估计版本是分开的,但有一定 ...

  6. 使用C语言在Win控制台中输出带颜色的文字

    学了这么久的C语言,一直停留在编写“控制台”程序的水平.黑色窗口,白色的文字,看多了着实让人感到枯燥无味.但是作为业余爱好者,我既没有那么多时间和精力去学习如何编写窗口程序,也没有那个必要一定用C去调 ...

  7. 用MSBuild和Jenkins搭建持续集成环境（1）

     http://www.infoq.com/cn/articles/MSBuild-1 你或其他人刚刚写完了一段代码,提交到项目的版本仓库里面.但等一下,如果新提交的代码把构建搞坏了怎么办?万一出现编 ...

  8. DES，3DES,AES这三种对称密钥的区别与联系

    DES:Data Encryption Standard(数据加密标准,又美国国密局,选中的IBM的方案,密钥长度为56,标准提出是要使用64位长的密钥,但是实际中DES算法只用了64位中的56位密钥 ...

  9. c++ _beginthread

    c++多线程编程 #include <windows.h> #include <process.h> /* _beginthread, _endthread */ #inclu ...

  10. c语言编程之双向循环链表

    双向循环链表就是形成两个环,注意每个环的首尾相连基本就可以了. 程序中采用尾插法进行添加节点. #include<stdio.h> #include<stdlib.h> #de ...