小白如何打造一个基础的留言板网站(二)

最新推荐文章于 2022-09-28 13:59:10 发布

Shriley_X

最新推荐文章于 2022-09-28 13:59:10 发布

阅读量3.8k

点赞数 6

分类专栏：谢飞飞的留言板文章标签： html css

本文链接：https://blog.csdn.net/Shriley_X/article/details/109135566

版权

谢飞飞的留言板专栏收录该内容

2 篇文章 2 订阅

订阅专栏

上文《小白如何打造一个基础的留言板网站（一）》介绍了创建一个基础的网页的方法，本文继续记录留言板网站的制作过程，（二）主要对首页进行完善，全文都是对index.html和indexStyle.css进行编辑

添加跳转按钮

为实现网站的多个网页之间的连接，我们需要在html文件上添加具有跳转功能的按钮button。

留言板网站的首页需要向登录和注册两个页面跳转，也就需要两个button，将这两个button放在同一个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>

button是一种input，将input的type属性值设置为button代表一个button元素，input用name属性对元素命名，value属性的值则为按钮显示在网页上的文字。

同样出于设置CSS样式的考虑，我们设置一个div放置所有元素

现在首页index.html文件中的代码如下

<!DOCTYPE html>
<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>开发者：shriley</small>
        </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标签下的内容进行设计

body {
    margin: 0;
    padding: 0;
    /* 设置网页背景图 */
    background-image: url(../img/bgimg.jpg);
    background-repeat: no-repeat;
}

用background-image设置背景图，url内填的是背景图片在内存中的地址。
background-repeat: no-repeat则是设置背景图片不重复出现。

最外层输入框
然后对包含所有元素的wrap最外层div块级元素进行设计

.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%);
}

设置按钮渐变可以登录https://webgradients.com/，选择和网页风格相近的按钮样式，下图为首页中选择的按钮样式
按钮渐变样式
然后点击右下角的Copy CSS，在编辑器中直接复制即可得到对应代码，如上图对应的代码为background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);

现在首页样式文件indexStyle.css中的代码如下

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%);
}

打开首页

首页的设置结束了，现在来看一下网页
打开wampserver，图标变绿即为正常运作
wampserver环境
然后在浏览器的地址栏中输入http://localhost/messageboard/即可查看messageboard文件夹下的index默认网页
首页展示
这样首页的设置就结束啦
按钮在创建登录文件login.html、注册文件register.html后即可跳转，跳转功能在代码中已经实现，不能跳转的原因是目标网页还没有存在。

以上是打造一个网站首页的方法，《小白如何打造一个基础的留言板网站（二）》到此结束，我们下篇再见吧~

Shriley_X

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
小白如何打造一个基础的留言板网站(二)

上文小白如何打造一个基础的网页留言板（一）介绍了创建一个基础的网页的方法，本文继续记录留言板网站的制作过程（三）首页的完善添加跳转按钮为实现网站的多个网页之间的连接，我们需要在html文件上添加具有跳转功能的按钮button。留言板网站的首页需要向登录和注册两个页面跳转，也就需要两个button，将这两个button放在同一个div下方便css样式的设置<div class="buttons"> <section class="login">
复制链接

扫一扫