基于HTML+CSS+JavaScript制作简单的大学生网页设计——个人空间博客

逸听风吟

已于 2024-06-08 22:30:20 修改

阅读量799

点赞数 20

分类专栏：前端网页设计文章标签： html css javascript

于 2024-06-07 11:13:04 首次发布

本文链接：https://blog.csdn.net/m0_74283598/article/details/139515093

版权

前端网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网页介绍

1 网页简介：此作品为学生个人空间网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等。

二、网页效果

三、部分功能代码展示

1.登录、注册

html代码示例：

        <div class="background"></div>
        <div class="form">
            <h2>欢迎登录</h2>

                <input type="text" id="username" placeholder="User" required>

                <input type="password" id="password" placeholder="Password" required>
                <p>没有账号？<a href="./register.html">点击注册</a></p>
                <button onclick="login()">登录</button>
        </div>

        <div class="background"></div>
        <div class="form">
            <h2>欢迎注册</h2>

                <input type="text" id="username" placeholder="User" required>

                <input type="password" id="password" placeholder="Password" required>

                <input type="password" id="confirm-password" placeholder="ConfirmPassword" required>

                <p>已有账号？<a href="./login.html">返回登陆</a></p>

                <button type="submit">注册</button>

        </div>

css代码示例：

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  overflow: hidden;/* 禁止滚动条 */
}

/* 背景图 */
.background {
  position: fixed;/* 固定位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/静态图片/signBackground.jpg");
  background-size: cover;/* 图片填充整个页面 */
  background-position: bottom;
  z-index: -1;/* 页面底层 */

}

.form {
  width: 350px;
  padding: 20px;
  border: 1px solid #000;
  /*圆角*/
  border-radius: 20px;
  background-color: #000000a0;
  /*阴影*/
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 4px #00ffff;
}

p, a {
  color: #fff;
  text-shadow: 2px 2px 4px #00ffff;
  text-decoration: none;
  margin: 0;
}

label {
  color: #fff;
  text-shadow: 2px 2px 4px #00ffff;/* 设计荧光阴影 */
}

.form input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #000;
  border-radius: 3px;
  box-sizing: border-box;
}

.form button {
  width: 100%;
  padding: 10px;
  margin: 20px 0;
  border: none;
  border-radius: 3px;
  background-color: #00ffff;
  color: #000;
  cursor: pointer;
}

1.页面导航栏代码示例

html代码示例：

        <div class="navbar">
            <a href="./index.html" class="active">首页</a>
            <a href="./personage.html">个人简介</a>
            <a href="./hometown.html">我的家乡</a>
            <a href="./diary.html">时光相册</a>

            <button onclick="exit()">退出</button>
        </div>

css代码示例

body {
    padding: 0;
    margin: 0;
}

.navbar {
    background-color: #333;
    position: fixed; /* 固定位置 */
    z-index: 1;/* 设置层级 */
    width: 100%;
    display: flex;
    justify-content: center;
    top:0px;
    left: 0px;;
}

.navbar a {
    display: block; /* 定义为块元素 */
    color: white;
    text-align: center; /* 文字居中 */
    padding: 24px 46px; /* 内边距，调整按钮大小 */
    text-decoration: none; /* 去除下划线 */
    transition: .3s ease-in-out;
}

/* 悬停样式 */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

 /* 当前选中页面的样式 */
.active {
    background-color: #4CAF50;
    color: white;
}

/* 退出按钮 */
.navbar button {
    color: white;
    text-decoration: none;
    padding: 14px 16px;
    font-size: 18px;
    background-color: #333;
    border: none;
    cursor: pointer;/*鼠标悬停时显示手势，a标签默认有手势*/
    margin-left: auto;
    margin-right: 80px;
}

.navbar button:hover {
    background-color: #555;
    color: black;
}