上文《小白如何打造一个基础的留言板网站（一）》介绍了创建一个基础的网页的方法，本文继续记录留言板网站的制作过程，（二）主要对首页进行完善，全文都是对.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%);
}