上文《小白如何打造一個基礎的留言板網站（一）》介紹了創建一個基礎的網頁的方法，本文繼續記錄留言板網站的制作過程，（二）主要對首頁進行完善，全文都是對.html和.css進行編輯

添加跳轉按鈕

留言板網站的首頁需要向登錄和注冊兩個頁面跳轉，也就需要兩個，將這兩個放在同一個div下方便css樣式的設置

<div class="buttons">
        <section class="login">
            <input type="button" name="login" value="登錄" onclick="window.location.href='login.html'"/>
        section>
        <section class="register">
            <input type="button" name="register" value="注冊" onclick="window.location.href='register.html'"/>
        section>
div>

是一種，將的type屬性值設置為代表一個元素，用name屬性對元素命名，屬性的值則為按鈕顯示在網頁上的文字。

同樣出于設置CSS樣式的考慮，我們設置一個div放置所有元素


<html lang="en">
<head>
    <meta http-equiv="X-UA-compatoble" content="IE=Edge">
    <meta charset="UTF-8">
    <meta name="keywords" content="首頁">
    <title>謝飛飛的留言板title>
    <link rel="stylesheet" href="style/indexStyle.css">
head>
<body>
    <div class="wrap">
        <div class="title">
            <h1>歡迎來到謝飛飛的留言板h1>
            <p>在這里你可以暢所欲言p>
            <small>開發者：shrileysmall>
        div>
        <div class="buttons">
            <section class="login">
                <input type="button" name="login" value="登錄" onclick="window.location.href='login.html'"/>
            section>
            <section class="register">
                <input type="button" name="register" value="注冊" onclick="window.location.href='register.html'"/>
            section>
        div>
    div>
body>
html>

CSS樣式設計

body {
    margin: 0;
    padding: 0;
    /* 設置網頁背景圖 */
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
}

用-設置背景圖，url內填的是背景圖片在內存中的地址。

-: no-則是設置背景圖片不重復出現。

.wrap{
    /* 居中 */
    margin: 0 auto;
    /* 與上一元素之間margin的距離 */
    margin-top: 50px;
    /* 框內部的距離(內部與輸入框和按鈕的距離) */
    padding: 20px 50px;
    /* 框背景顏色和透明度 */
    background-color: #00000090;
    /* 框寬的大小*/
    width: 400px;
    /* 圓角邊 */
    border-radius: 10px;
    /* 框內所有內容居中 */
    text-align: center;
}


.wrap .title{
    color: white;
}


.wrap input[type="button"]{
    border: 0;
    /* 按鈕的長、寬 */
    width: 150px;
    height: 25px;
    /* 按鈕的value屬性的值展示的顏色 */
    color: white;
    /* 按鈕元素的margin */
    margin-top: 30px;
    margin-bottom: 30px;
    /* 按鈕圓角邊 */
    border-radius: 20px;
    /* 設置按鈕漸變 */
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}

設置按鈕漸變可以登錄，選擇和網頁風格相近的按鈕樣式，下圖為首頁中選擇的按鈕樣式

然后點擊右下角的Copy CSS，在編輯器中直接復制即可得到對應代碼，如上圖對應的代碼為-: -(to , # 0%, # 0%, # 0%, # 33%, # 66%, # 100%);

body {
    margin: 0;
    padding: 0;
    /* 設置網頁背景圖 */
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
}
.wrap{
    /* 居中 */
    margin: 0 auto;
    margin-top: 50px;
    /* 登錄框內部的距離(內部與輸入框和按鈕的距離) */
    padding: 20px 50px;
    /* 登錄框背景顏色和透明度 */
    background-color: #00000090;
    width: 400px;
    /* 圓角邊 */
    border-radius: 10px;
    /* 框內所有內容劇中 */
    text-align: center;
}
/* 標題字體 */
.wrap .title{
    color: white;
}
.wrap input[type="button"]{
    border: 0;
    width: 150px;
    height: 25px;
    color: white;
    margin-top: 30px;
    margin-bottom: 30px;
    /* 按鈕圓角邊 */
    border-radius: 20px;
    /* 設置按鈕漸變 */
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
}