知問前端——建立header區

時間 2019-11-17

標籤前端建立 header 简体版

原文原文鏈接

建立界面javascript

咱們首先要設計一個header，這個區域將要設計成永遠置頂。也就是，往下拉出滾動條也永遠在頁面最上層可視區內。在header區，目前先設計LOGO、搜索框、按鈕、註冊和登陸便可。css

項目的大體骨架以下：html

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：(還好能看懂！！！)java

body {
    margin: 40px 0 0 0;
    padding: 0;
    font-size: 12px;
    font-family: 宋體;
    background: #fff;
}
#header {
    width: 100%;
    height: 40px;
    background: url(img/header_bg.png);
    position: absolute;
    top:0;
}
#header .header_main {
    width: 800px;
    height: 40px;
    margin: 0 auto;
}
#header .header_main h1 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    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;
}

引入UIjquery

在目前的這個header區域中，有兩個地方使用了jQuery UI。一個是button按鈕，一個是dialog對話框。ui

將button按鈕設置成UI：url

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

將div設置成dialog對話框：spa

$("#reg_a").click(function() {
    $("#reg").dialog(); //初始化一個對話框
});

效果圖：設計

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。