创建界面

我们首先要设计一个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. android获取手机录

    在Android开发中,读取手机通讯录中的号码是一种基本操作,但是由于Android的版本众多,所以手机通讯录操作的代码比较纷杂,在本文中进行一下总结. Android1.5是现在的Android系统 ...

  2. linux安装R语言

    系统:centos 6.4  64bit 安装可以使用rpm包安装,也可以用源码安装. 但是rpm安装,各种依赖比较麻烦.所以我采用源码安装. 下载:http://www.r-project.org/ ...

  3. VS2012 常用web.config配置解析之自定义配置节点

    在web.config文件中拥有一个用户自定义配置节点configSections,这个节点可以方便用户在web.config中随意的添加配置节点,让程序更加灵活(主要用于第三方插件的配置使用) 自定 ...

  4. MongoDB学习笔记-查询

    MongoDB中使用find或findOne函数执行查询 find函数 db.c.find()--查询集合c所有 db.c.find({“name”:”zhangsan”}) 注意:查询条件的值必须是 ...

  5. 使用Npoi向Excel中插入图片

    先把数据库中的数据都导入到Excel表格中,把图片地址的路径全部转成绝对路径. 使用Npoi读取刚导出的Excle表格,把图片那个单元格的图片路径读出来,然后用文件流读取图片,然后通过Npoi把图片放 ...

  6. dblink应用

    当我们要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中就必须要创建远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据. 用法例子: (1) ...

  7. JAVA 对象数组，加载图片实例 分类： Java Game 2014-08-14 16:57 80人阅读 评论(0) 收藏

    主函数: package com.mywork; import java.awt.Color; import java.awt.Image; import javax.swing.ImageIcon; ...

  8. wifi current SSID

    1. 引入头,#import <SystemConfiguration/CaptiveNetwork.h> 2. 获取SSID info + (id)fetchSSIDInfo { NSA ...

  9. 在线编辑器 (UBB, FCK)

    这里主要说明一下:UBB UBB 使用类型HTML的语法.  UBB相对FCK的HTML方式, 安全性高. 用户不可以直接嵌入HTML代码.   UBB 在线编辑器(JS版): http://www. ...

  10. Nodejs Express 4.X 中文API 1--- Application篇

    相关阅读: Express 4.X API 翻译[一] --  Application篇 Express4.XApi 翻译[二] --  Request篇 Express4.XApi 翻译[三] -- ...