创建界面

我们首先要设计一个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. OC开发中运用到的枚举

      一  常见枚举的定义: typedef enum { LOGIN_SUCCESS, USER_NAME, USER_PASSWORD, OLD_LAT, OLD_LNG }FIELD_SAVED; ...

  2. 66.为什么有时候在ISE软件中，顶层文件不能置顶？

    什么时候回出现顶层文件不能置顶呢?嘿嘿,肯定是工程中有错误啦. 如果你的顶层文件包含了include文件,这个时候就会出现这种情况了.但好像出现在刚新建工程的时候,因为当顶层文件不包括Include文 ...

  3. 11.Warning (332060): Node: pi_fck3p was determined to be a clock but was found without an associated clock assignment.

    解释及措施:(1):这个信号是不是你期望的时钟信号?还是被综合器误将普通信号综合成了时钟信号?有没有在代码中用过这个信号的上升沿/下降沿? (2):如果是期望的时钟信号,那么是否有可能调整管脚位置约束 ...

  4. HTML/CSS的学习过程一览

    HTML/CSS的学习过程一览 说明 调试工具使用的是Google Chrome浏览器,其余浏览器出现的问题,这锅我不背[傲娇脸 可以使用浏览器查看源代码 网页列表 HTML_CSS_1 HTML基本 ...

  5. Ant学习---第五节：Ant_Junit介绍(基于3的版本)

    Junit3 和 Junit4 有本质上的区别 1.普通java类,代码如下: package learn.junit; public class HelloWorld { public String ...

  6. Teamwork——Week 4 Daily Scrum Meeting#1 2013.10.23

    一.会议议题 1)根据确立的项目题目,进一步明确PM,DEV,TEST的工作. 2)确定团队分工和预估项目时间. 3)完成项目架构NABC模型. 4)确定第一轮开发团队分工 二.会议时间 2013年1 ...

  7. 针对《来用》的NABC分析

    项目名:<来用> 特点:拥有以往win7在内的众多小游戏 NABC分析 N(need需求): 之所以有这个想法是因为,在WIN7,XP系统中往往有很多众所周知的小游戏(比如扫雷),但是在w ...

  8. 初学MFC

    学习使用MFC搭建界面.尝试使用MFC搭建了一个简单的基于对话框的计算器界面,包括模态对话框.非模态对话框.向导对话框等. // MFCApplicationAddDlg.h : 头文件 // #pr ...

  9. html5之canvas练习

    代码地址:github.com/peng666/blogs 在线地址:http://peng666.github.io/blogs/

  10. 使用javac命令编译java文件。

    今天想学习一下web services的知识,在网上找了一个教程,里面写了一个web services客户端调用,在cmd下执行的,但是没有给出用javac编译的细节.所以自己就借着这个机会学了一下: ...