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

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

然后在浏览器的地址栏中输入http://localhost/messageboard/即可查看messageboard文件夹下的index默认网页

这样首页的设置就结束啦
按钮在创建登录文件login.html、注册文件register.html后即可跳转，跳转功能在代码中已经实现，不能跳转的原因是目标网页还没有存在。

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