网页设计课设【登录注册系统及增删改查】

最新推荐文章于 2024-11-06 15:47:31 发布

囿于辰星

最新推荐文章于 2024-11-06 15:47:31 发布

阅读量5.4k

点赞数 5

文章标签： html5 css php js mysql

本文链接：https://blog.csdn.net/qq_58794223/article/details/122238930

版权

最近真的是好忙啊，刚刚做好了自己的网页设计课设，迫不及待想和大家分享一下，星辰是个小菜菜，有些地方做的不好希望大家帮我纠正一下哦~~

1、工具：VS Code，XAMPP，然后随便一款浏览器就行(星辰喜欢谷歌和火狐^_^)

2、代码总览

3、好啦，那就废话不多说，开始做啦

数据库：

公共代码段【连接数据库哒】：

conn.php：

<?php
//数据库的连接
$conn = mysqli_connect('localhost', 'root', '', 'people', 3306);
//设置数据库的编码为utf8格式，顺利写入中文和英文到数据库
mysqli_set_charset($conn, "utf8");

首页：

myindex.php ：

<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>动漫简介</title>

	<style type="text/css">
		body {
			margin: 0;
			background-image: url(images/body.jpg);
			background-repeat: repeat-x;
			background-position: center;
			background-size: contain;
		}

		marquee {
			font-size: 13px;
		}

		ul.nav,
		ul.nav ul {
			margin: 0;
			padding: 0;
			list-style-type: none;
			font: left;
		}

		ul.nav li {
			float: left;
			width: 8em;
			/* background-color: skyblue; */
		}

		ul.nav li ul {
			width: 8em;
			position: absolute;
			left: -999em;
		}

		.nav li:hover ul {
			left: auto;
		}

		ul.nav a {
			display: block;
			color: #333;
			text-decoration: none;
			padding: 0.3em 1em;
			border-right: 1px solid #486B02;
			border-left: 1px solid #E4FFD3;
		}

		ul.nav li li a {
			border-bottom: 1px solid #486B02;
			border-top: 1px solid #486B02;
			border-right: 0;
			border-left: 0;
		}

		ul.nav li:last-child a {
			border-right: 0;
			border-bottom: 0;
		}

		ul a:hover,
		ul a:focus {
			color: #ff6700;
			background-color: #55585a;
		}

		#header,
		.navigator,
		#container,
		#footer {
			margin: 0 auto;
			width: 1000px;
		}

		#header {
			height: 200px;
		}

		#logo {
			float: left;
			height: 200px;
			width: 200px;
		}

		#advertise {
			background-image: url(images/background.jpg);
			background-repeat: repeat-x;
			float: left;
			height: 200px;
			width: 800px;
		}

		#showdate {
			width: 800px;
			height: 40px;
			text-align: center;
		}

		#space {
			width: 800px;
			height: 120px;
		}

		#registerandlogin {
			width: 800px;
			height: 40px;
			text-align: center;
		}

		.navigator {
			/* background-color: lightblue; */
			height: 30px;
		}

		#container {
			height: 600px;
			background-position: center bottom;
			background-repeat: no-repeat;
		}

		#left {
			float: left;
			width: 400px;
			height: 600px;
			/* background: lightblue; */
		}

		#leftup {
			/* background-color: lightblue; */
			width: 400px;
			height: 300px;
			float: left;
		}

		#leftdown {
			/* background-color: lightblue; */
			width: 400px;
			height: 300px;
		}

		#middle {
			float: left;
			width: 300px;
			height: 600px;
		}

		#middleup {
			/* background-color: #FCC; */
			width: 300px;
			height: 300px;
			float: left;
			background-image: url(images/叶神.jpg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
		}

		#middledown {
			/* background-color: lightblue; */
			width: 300px;
			height: 300px;
			float: left;
		}

		#right {
			float: left;
			width: 260px;
			height: 600px;

		}

		#rightup {
			/* background-color: lightblue; */
			width: 300px;
			height: 200px;
			text-align: center;
			overflow: hidden;
		}

		#rightmiddle {
			/* background-color: lightblue; */
			width: 300px;
			height: 200px;
			text-align: center;
			overflow: hidden;
		}

		#rightdown {
			/* background-color: lightblue; */
			width: 300px;
			height: 200px;
			text-align: center;
			overflow: hidden;
		}

		#footer {
			/* background-color: lightblue; */
			height: 200px;
			text-align: center;
			clear: both;
		}

		h2 {
			text-align: center;
		}

		#demo1 ul li {
			list-style-type: none;
		}

		/*设置列表符号类型*/
		#demo1 ul li a {
			float: left;
			padding: 3px;
			display: block;
		}

		#demo2 ul li {
			list-style-type: none;
		}

		/*设置列表符号类型*/
		#demo2 ul li a {
			float: left;
			padding: 3px;
			display: block;
		}

		#demo {
			margin: 0 auto;
			background: lightblue;
			/*必须的*/
			overflow: hidden;
			width: 1000px;
			height: 206px;
		}

		#indemo {
			float: left;
			width: 800%;
		}

		#demo1 {
			float: left;
			height: 206px;
			width: 1278px;
		}

		#demo2 {
			height: 206px;
			float: left;
			width: 1278px;
		}

		.image {
			float: left;
			/*设置浮动属性*/
			padding: 0px 6px 6px 6px;
			/*设置内边距*/
		}

		.intro {
			font-size: 13px;
			line-height: 1.5em;
			text-indent: 2em;
		}

		.enlarge {
			padding: 5px;
			cursor: pointer;
			transition: all 0.6s;
		}

		.enlarge:hover {
			transform: scale(1.1);
		}
	</style>

	<script language="javascript" type="text/javascript">
		window.onload = setInterval(change, 2000);
		var n = 1;

		function changePic(m) {
			return n = m;
		}

		function change() {
			var myImg = document.getElementById("rotate");
			var text = document.getElementById("" + n);
			for (i = 1; i <= 5; i++) {
				if (i == n)
					text.style.color = "red";
				else {
					var tt = document.getElementById("" + i);
					tt.style.color = "blue";
				}
			}
			myImg.src = "images/海贼0" + n + ".png";
			if (n < 5) n++;
			else n = 1;
		}
	</script>

</head>

<body>

	<audio src="临安小记.mp3" width="0" height="0" loop="-1" controls></audio>

	<div id="Ad" style="position:absolute;z-index:1000;"><a href="http://www.baidu.com" target="_blank"><img src="images/floatAD.jpg" width="200" height="200"></a></div>
	<script>
		//浮动广告代码
		var x = 50,
			y = 60; //设置元素在浏览器窗口中的初始位置
		var xin = true,
			yin = true; //设置xin、yin用于判断元素是否在窗口范围内
		var step = 1; //可设置每次移动几像素
		var obj = document.getElementById("Ad"); //通过id获取div元素
		function floatAd() {
			var L = T = 0;
			var R = document.body.clientWidth - obj.offsetWidth; //浏览器的宽度减div对象占据的空间宽度就是元素可以到达的窗口最右边的位置
			var B = document.body.clientHeight - obj.offsetHeight;
			obj.style.left = x + document.documentElement.scrollLeft; //设置div对象的初始位置
			//当没有拉到滚动条时，document.body.scrollTop的值是0，当拉到滚动条时，为了让div对象在屏幕中的位置保持不变，就需要加上滚动的网页的高度
			obj.style.top = y + document.documentElement.scrollTop;
			x = x + step * (xin ? 1 : -1); //水平移动对象，每次判断左移还是右移
			if (x < L) {
				xin = true;
				x = L;
			}
			if (x > R) {
				xin = false;
				x = R;
			} //当div移动到最右边，x大于R时，设置xin = false，让x每次都减1，即向左移动，直到x< L时，再将xin的值设为true，让对象向右移动
			y = y + step * (yin ? 1 : -1)
			if (y < T) {
				yin = true;
				y = T;
			}
			if (y > B) {
				yin = false;
				y = B;
			}
		}
		var itl = setInterval("floatAd()", 10) //每隔10毫秒执行一次floatAd()
		obj.onmouseover = function() {
			clearInterval(itl)
		} //鼠标滑过时，让漂浮广告停止
		obj.onmouseout = function() {
			itl = setInterval("floatAd()", 10)
		} //鼠标离开时，继续移动

		window.onload = setInterval(datestr, 1000);

		function datestr() {
			var date = new Date();
			var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			var datestr = "当前日期：" + date.getFullYear() + "年" + ((Number(date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1))) + "月" + (Number(date.getDate()) < 10 ? "0" + date.getDate() : date.getDate()) + "日　" + weekday[date.getDay()] + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒";
			/*switch(date.getDay()){
				case 0:
					datestr += " 星期日";
					break;
				case 1:
					datestr += " 星期一";
					break;
				case 2:
					datestr += " 星期二";
					break;
				case 3:
					datestr += " 星期三";
					break;
				case 4:
					datestr += " 星期四";
					break;
				case 5:
					datestr += " 星期五";
					break;
				case 6:
					datestr += " 星期六";
					break;
			}*/
			var adv = document.getElementById("showdate");
			adv.innerHTML = datestr;
		}
	</script>
	<div id="header">
		<div id="logo"> <img src="images/logo.jpg" width="200" height="200" /></div>
		<div id="advertise">
			<div id="showdate"></div>
			<div id="space"></div>
			<div class="registerandlogin" align="right">
				<?php
				error_reporting(0);
				$fp = fopen("count.txt", "r+");
				$visitors = intval(fgets($fp));
				if (!$_SESSION['connected']) {
					$visitors++;
					$_SESSION['connected'] = true;
				}
				rewind($fp);
				fwrite($fp, $visitors);
				fclose($fp);
				?>
				您是本站第<?= $visitors ?>位访客
				&nbsp;&nbsp;
				<a href="register.html">注册</a>
				&nbsp;&nbsp;
				<a href="login.php">登录</a>
			</div>
		</div>
		<span style="position:absolute;z-index:1000;"><a href="http://www.baidu.com" target="_blank"></a></span>
	</div>
	<div class="navigator">
		<ul class="nav">
			<li><a href="https://www.iqiyi.com/">本站首页</a></li>
			<li><a href="https://www.iqiyi.com/">动漫名称</a>
				<ul>
					<li><a href="瓦尼塔斯.html">瓦尼塔斯</a></li>
					<li><a href="全职高手.html">全职高手</a></li>
				</ul>
			</li>
			<li><a href="https://baijiahao.baidu.com/s?id=1668321841711660643&wfr=spider&for=pc">CV排名</a></li>
			<li><a href="https://www.phbang.cn/pics/52774.html">动漫推荐</a></li>
			<li><a href="https://baijiahao.baidu.com/s?id=1688659910171668751&wfr=spider&for=pc">动漫排行</a></li>
		</ul>
	</div>
	<div id="container">
		<div id="left">
			<div id="leftup" align="center">
				<img id="rotate" src="images/franky.png" width="300px" height="250px">
				<div><a id="1" href="#" onClick="changePic(1)">1</a>&nbsp;&nbsp;
					<a id="2" href="#" onClick="changePic(2)">2</a>&nbsp;&nbsp;
					<a id="3" href="#" onClick="changePic(3)">3</a>&nbsp;&nbsp;
					<a id="4" href="#" onClick="changePic(4)">4</a>&nbsp;&nbsp;
					<a id="5" href="#" onClick="changePic(5)">5</a>
				</div>

			</div>
			<div id="leftdown">&nbsp;<h2>全职高手</h2>
				<div class="image"><img src="images/glory.jpg" width="146" /></div>
				<p class="intro">《全职高手》作者：蝴蝶蓝,导演：熊可,CV：阿杰 / 叶清 / 图特哈蒙 / 宝木中阳 / C小调 / 夏磊</p>
				<p class="intro">
					网游荣耀中被誉为教科书级别的顶尖高手叶修，因为种种原因遭到俱乐部的驱逐，离开职业圈的他寄身于一家网吧成了一个小小的网管，但是，拥有十年游戏经验的他，在荣耀新开的第十区重新投入了游戏，带着对往昔的回忆，和一把未完成的自制武器，开始了重返巅峰之路。勾心斗角之后，谁夺走了我的荣耀，风雨飘摇之下，希望却不曾破灭。花团锦簇之中，没有迷失方向。万众瞩目之前，我，就在这里回归！
				</p>
			</div>
		</div>
		<div id="middle">
			<div id="middleup">
				<marquee direction="up" behavior="scroll" scrollamount="5" scrolldelay="5" loop="0" align="middle" onmouseover=this.stop() onmouseout=this.start() height="120">
					<p><a href="#">将过去和羁绊全部丢弃，不要吝惜那为了梦想流下的泪水。</a></p>
					<p><a href="#">从雪夜陪你走起，到宿命中的荣光，你的坚持是我的信仰</a>
					</p>
					<p><a href="#">你所浪费的每一秒，都是他得不到的未来。</a></p>
					<p><a href="#">比赛输了也没什么。但不要连自己的信念都一并输出去啊！</a></p>
				</marquee>
			</div>
			<div id="middledown">
				<video src="cartoon.mp4" width="291" height="216" controls></video>
			</div>
		</div>
		<div id="right">
			<div id="rightup"><img src="images/镇魂街.png" alt="001" width="260" height="170">
				<div>死后的事,更不会去考虑。</div>
			</div>
			<div id="rightmiddle"><img class="enlarge" src="images/研.png" alt="002" width="260" height="170">
				<div>这世上所有的不公平都是因为当事人能力的不足。</div>
			</div>
			<div id="rightdown"><img class="enlarge" src="images/百鬼丸.png" alt="003" width="260" height="170">
				<div>你的眼睛看得见，自然会受骗。</div>
			</div>
		</div>
		<div align="center"></div>
	</div>
	<div id="demo">
		<div id="indemo">
			<div id="demo1">
				<!--你这里可以变成图片-->
				<ul>
					<li><a href="#"><img src="images/叶神.jpg" width="200" height="200" alt="111"></a></li>
					<li><a href="#"><img src="images/研.png" width="200" height="200" alt="111"></a></li>
					<li><a href="#"><img src="images/海贼01.png" width="200" height="200" alt="111"></a></li>
					<li><a href="#"><img src="images/百鬼丸.png" width="200" height="200" alt="111"></a></li>
					<li><a href="#"><img src="images/镇魂街.png" width="200" height="200" alt="111"></a></li>
					<li><a href="#"><img src="images/海贼05.png" width="200" height="200" alt="111"></a></li>
				</ul>
			</div>
			<div id="demo2"></div>
		</div>

		<script>
			var speed = 50;
			var tab = document.getElementById("demo");
			var tab1 = document.getElementById("demo1");
			var tab2 = document.getElementById("demo2");

			//用于让tab1的内容与tab2的内容一样
			tab2.innerHTML = tab1.innerHTML

			function Marquee() {
				//当元素要显示tab2的内容时，让他去显示tab1的内容，因为tab1与tab2的内容一样，就实现了滚动，因为速度太快了，所以你就堪称他是连续的了
				if (tab2.offsetWidth - tab.scrollLeft <= 0) {
					tab.scrollLeft -= tab1.offsetWidth
				} else {
					tab.scrollLeft++;
				}
			}
			var MyMar = setInterval(Marquee, speed);
			tab.onmouseover = function() {
				clearInterval(MyMar)
			};
			tab.onmouseout = function() {
				MyMar = setInterval(Marquee, speed)
			};
		</script>
	</div>
	<div id="footer">
		<h2>友情链接</h2>
		<p><a href="https://meirixianhui.kuaizhan.com/36/71/p70476070213f6a">豆瓣评分</a>
			<a href="https://www.bilibili.com/anime/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.2">bilibili播放</a>
			<a href="https://baijiahao.baidu.com/s?id=1695295548443393773&wfr=spider&for=pc">主题曲</a>
		</p>
		<p>&nbsp;</p>
		<p>版权所有 翻版必究<a href="#top">返回顶部</a></p>
		<p>Copyright&#169; 2020 Fei 保留一切权利</p>
	</div>
</body>

</html>

嘻嘻，星辰喜欢瓦尼塔斯，之后的背景图片用的都是这张，不要怪星辰花痴哦~

注册界面：

register.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <script type="text/javascript">
        //表单验证
        function checkform() {
            var username = document.form1.username;
            var password = document.form1.password;
            if (username.value == "") {
                alert("用户名不能为空！");
                username.focus();
                return false;
            }
            if (username.value.length < 6 || username.value.length > 15) {
                alert("用户名的长度不能少于6个字符或大于15个字符！");
                username.value = "";
                username.focus();
                return false;
            }
            if (password.value == "") {
                alert("密码不能为空！");
                password.focus();
                return false;
            }
            if (password.value.length < 6 || password.value.length > 15) {
                alert("密码的长度不能少于6个字符或大于15个字符！");
                password.value = "";
                password.focus();
                return false;
            }
            return true;
        }
    </script>
    <style>
        body {
            background-image: url(images/瓦尼塔斯9.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <form name="form1" method="get" action="regisucc.php" onsubmit='return checkform();'>

        <table width="400" border="0" align="center">
            <h2 align="center">用户注册表</h2>
            <tr>
                <td width="100">用户名：</td>
                <td width="400"><input type="text" name="username"></td>
            </tr>
            <tr>
                <td width="100">密码：</td>
                <td width="400"><input type="password" name="password"></td>
            </tr>
            <tr>
                <td width="100">性别：</td>
                <td width="400">
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>
            <tr>
                <td width="100">学历：</td>
                <td width="400"><select name="degree" id="select">
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大学">大学</option>
                    </select></td>
            </tr>
            <tr>
                <td width="100">爱好：</td>
                <td width="400">
                    游戏<input type="checkbox" name="hobby[]" value="游戏">
                    动漫<input type="checkbox" name="hobby[]" value="动漫">
                    运动<input type="checkbox" name="hobby[]" value="运动">
                </td>
            </tr>
            <tr>
                <td>用户类型:</td>
                <td>
                    <input type="radio" name="administrator" value="0" />管理员
                    <input type="radio" name="administrator" value="1" />非管理员
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="注册按钮" id="button" value="注册">
                    <input type="reset" name="reset" value="重写">
                </td>
            </tr>
        </table>
    </form>

</body>

</html>

注册成功：

regisucc.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册成功信息</title>
    <style>
        body {
            background-image: url(images/瓦尼塔斯9.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <?php
    require('conn.php');
    $username = $_GET["username"];
    $password = $_GET["password"];
    $sex = $_GET["sex"];
    $degree = $_GET["degree"];
    $hobby_arr = array();
    $hobby_arr = $_GET["hobby"];
    $hobby = implode('、', $hobby_arr);
    $administrator = $_GET["administrator"];
    $sql = "select * from sheet1 where username='" . $username . "'";
    $result = mysqli_query($conn, $sql);
    $row = mysqli_num_rows($result);
    if ($row != 0) {
    ?>
        <script language=javascript>
            alert("该帐号已存在，请重新输入！");
            window.history.go(-1);
        </script>
    <?php
    } else {
        $sql = "insert into sheet1(username,password,sex,degree,hobby,administrator) values('$username','$password','$sex','$degree','$hobby','$administrator')";
        mysqli_query($conn, $sql) or die('执行失败！');
        mysqli_free_result($result);
        mysqli_close($conn);
    }

    echo '<p>尊敬的' . $username . ',祝贺您注册成功！</p>';
    echo '<p>您的注册信息为：</p>';
    echo '帐&nbsp;&nbsp;&nbsp;&nbsp;号：' . $username . '</br>';
    echo '密&nbsp;&nbsp;&nbsp;&nbsp;码：' . $password . '</br>';
    echo '性&nbsp;&nbsp;&nbsp;&nbsp;别：' . $sex . '</br>';
    echo '学&nbsp;&nbsp;&nbsp;&nbsp;历：' . $degree . '</br>';
    echo '爱&nbsp;&nbsp;&nbsp;&nbsp;好：' . $hobby . '</br>';
    echo '用户&nbsp;&nbsp;&nbsp;&nbsp;类型：' . $administrator . '</br>';
    echo "<a href='myindex.php'>返回首页</a>";

    ?>
</body>

</html>

登录：

login.php：

<?php
session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>登录网页</title>
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>


<body>
	<?php
	if (isset($_POST["submit"])) {		//判断是否单击了登录按钮
		require('conn.php');
		$username = $_POST["username"];
		$password = $_POST["password"];
		$save = $_POST["save"];
		$sql = "select * from sheet1 where username='" . $username . "'";
		$result = mysqli_query($conn, $sql);
		$row = mysqli_num_rows($result);
		if ($row <> 0) {
			$result = mysqli_query($conn, $sql);
			$content = mysqli_fetch_assoc($result);
			if ($content) {
				$user = trim($content["username"]);
				$ps = trim($content["password"]);
			}
		}

		if ($username == $user && $password == $ps) { //判断用户名密码是否正确
			$_SESSION['username'] = $username; //将用户名存入$_SESSION['username']，这是关键
			echo "<script>location.href='loginsucc.php?save=" . $save . "'</script>";
		} else {
			echo "<script>alert('用户名或密码错！');location.href='login.php'</script>";
		}
	} else  echo '<html><body>
<div style="color:white">
  <form method="post" action="" style="margin:4px;">
    <p>帐号: <input name="username" type="text" size="12"></p>
    <p>密码: <input name="password" type="password" size="12"></p>
    <p>保存: <select name="save">
        <option value="-1">不保存</option>
        <option value="7">保存1周</option>
        <option value="30">保存1月</option></select> 
		<input type="submit" name="submit" value="登 录"></p>
  </form></div></body></html>'; ?>
</body>

</html>

登录成功：

loginsucc.php：

<?php //目前该程序可支持一个用户在同一台电脑上正常操作。如果有不同用户在同一台电脑上操作，语法上不会出错，逻辑上将出现异常。
session_start();
ob_start();
error_reporting(0);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>登录成功</title>
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>


<body>

	<?php
	$save = $_GET["save"]; //得到从注册网页传递过来的保存时间的值
	if (isset($_SESSION['username'])) { //如果$_SESSION['username']不为空,表明已经登录成功
		if ($_COOKIE["user"]["username"] <> "") { //尝试获取指定的Cookie变量，如果有，表明不是该用户不是第一次访问本网站
			$visnum = intval($_COOKIE["user"]["num"]) + 1; //将原来的访问次数加1
			$expire = intval($_COOKIE["user"]["expire"]); //获取有效期
			//将本次访问时间写入Cookie
			date_default_timezone_set("Asia/Shanghai"); //设置中国时区
			$dt = $_COOKIE["user"]["dt"]; //把上次登录时间保存起来
			setcookie("user[dt]", date("Y-m-d h:i:s"), time() + 3600 * $expire); //设置本次登录时间
			setcookie("user[num]", $visnum, time() + 3600 * $expire); //将本次访问次数写入Cookie
			echo "欢迎您，" . $_SESSION["username"]; //输出Cookie变量的值
			echo "<br/>这是您第" . $visnum . "次访问本网站";
			echo "<br/>您上次访问是在" . $dt; //显示上次保存时间   
			ob_end_flush();
		} else {
			setcookie("user[username]", $_SESSION["username"], time() + 3600 * intval($save));
			setcookie("user[dt]", date("Y-m-d h:i:s"), time() + 3600 * $expire); //写入Cookie
			setcookie("user[num]", 1, time() + 3600 * intval($save));
			//保存有效期到Cookie
			setcookie("user[expire]", $save, time() + 3600 * intval($save));
			echo "欢迎您，" . $_SESSION["username"] . "：首次光临";
		}
		echo "</br><a href='logout.php?action=logout'>注销</a>";
		echo "</br><a href='myindex.php?action=logout'>返回首页</a>";
	} else
		echo "未登录用户不允许访问"; ?>
</body>

</html>

退出登录(上面所写的注销(^_−)~)【我的课设中对这个要求不多，我就随便写了写，就随意看看就好啦，我也没有截这里的图】：

logout.php：

<?php
session_start();

$_SESSION = array();
session_destroy();

sleep(2);
//跳转到登录界面
header('Location:myindex.php');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退出登录</title>
</head>

<body>

</body>

</html>

下面开始做后台管理的事情啦！

注册信息管理界面：

admin.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>注册信息管理界面</title>
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>

<body>
	<h2 align='center'>注册信息管理</h2>
	<?php
	require('conn.php');
	require('pageshow.php');
	if (isset($_GET['Page']) && (int)$_GET['Page'] > 0)
		$Page = $_GET['Page'];
	else
		$Page = 1;
	if (isset($_GET['sel']))
		$sel = $_GET['sel'];
	//设置每页显示记录数，并将记录数保存到session变量中
	if (isset($_GET['pagesize']))
		$PageSize = $_GET['pagesize'];
	else
		$PageSize = 10;
	$sql = "select * from sheet1";
	$result = mysqli_query($conn, $sql);
	$RecordCount = mysqli_num_rows($result);
	$result = mysqli_query($conn, $sql);
	?>
	<a href='add_form.php'>添加新用户</a>
	<div style="border:1px solid gray;background:#eee;padding:4px;">
		<form method="get" action="searchresult.php">
			请输入关键词：<input type="text" name="keyword">
			<select name="sel">
				<option value="username">用户名</option>
				<option value="password">密码</option>
				<option value="sex">性别</option>
				<option value="degree">学历</option>
				<option value="hobby">爱好</option>
				<option value="administrator">用户类型</option>
			</select>
			<input type="submit" value="查找">
		</form>
		<form method="get" action="">每页显示<input type="text" name="pagesize" value="<?= $PageSize ?>">条记录
			<input type="submit" value="保存">
		</form>

	</div>
	<center>
		<table border="1" width="100%">
			<tr bgcolor="#E0E0E0">
				<th>用户名</th>
				<th>密码</th>
				<th>性别</th>
				<th>学历</th>
				<th>爱好</th>
				<th>用户类型<br>(0表示管理员，1表示非管理员)</th>
				<th>删除</th>
				<th>修改</th>
			</tr>
			<?php
			$count = 0;
			mysqli_data_seek($result, ($Page - 1) * $PageSize);
			for ($i = 0; $i < $PageSize; $i++) {
				$row = mysqli_fetch_assoc($result);
				if ($row) {
					$count = $count + 1;
			?>
					<tr bgcolor=<?php
								if (($count % 2) == 0)
									echo "#99CC45";
								else
									echo "#99CC99";
								?>>
						<?php
						$username = $row["username"];
						$password = $row["password"];
						$sex = $row["sex"];
						$degree = $row["degree"];
						$hobby = $row["hobby"];
						$administrator = $row["administrator"];
						?>
						<td><?= $username ?></td>
						<td><?= $password ?></td>
						<td><?= $sex ?></td>
						<td><?= $degree ?></td>
						<td><?= $hobby ?></td>
						<td><?= $administrator ?></td>
						<td><a href="delete.php?username=<?= $username; ?>" onclick="return confirm('确定要删除该条记录吗？')">删除</a></td>
						<td><a href="update_form.php?username=<?= $username; ?>">修改</a></td>
					</tr>
			<?php }
			} ?>
		</table>
		<?php error_reporting(0);
		$url = $_SERVER["PHP_SELF"];
		page($RecordCount, $PageSize, $Page, $url, $keyword, $sel);
		?>
	</center>
</body>

</html>

实现页码显示pageshow.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
	<?php
	//分页函数
	//$RecordCount记录总数
	//$PageSize每页显示的记录数
	//$Page当前显示哪一页
	//$Url当前页的Url
	//$keyword查询关键词
	function page($RecordCount, $PageSize, $Page, $url, $keyword)
	{
		$PageCount = ceil($RecordCount / $PageSize); //计算总页数
		$page_previous = ($Page <= 1) ? 1 : $Page - 1; //计算上一页的页数
		$page_next = ($Page >= $PageCount) ? $PageCount : $Page + 1; //计算下一页的页数
		$page_start = ($Page - 5 > 0) ? $Page - 5 : 0; //只显示本页前5页的页码链接
		$page_end = ($page_start + 10 < $PageCount) ? $page_start + 10 : $PageCount;
		//若超过10页，只显示本页前后5页的页码链接
		$page_start = $page_end - 10;
		if ($page_start < 0) $page_start = 0; //若当前页不合法，更正
		$parse_url = parse_url($url);
		if (empty($parse_url["query"]))
			$url = $url . '?'; //若不存在，在$url后添加?
		else $url = $url . '&'; //若存在，在$url后添加&
		if (empty($keyword)) {
			if ($Page == 1) $navigator = "[首页]&nbsp;[上一页]&nbsp;";
			else
				$navigator = "<a href='?Page=1'>[首页]</a>&nbsp;<a href=" . $url . "Page=$page_previous>[上一页]</a>&nbsp;";
			for ($i = $page_start; $i < $page_end; $i++) { //输出页码链接
				$j = $i + 1;
				if ($j == $Page) $navigator = $navigator . "$j&nbsp;";
				else $navigator = $navigator . "<a href='" . $url . "Page=$j'>$j</a>&nbsp;";
			}
			if ($Page == $PageCount)
				$navigator = $navigator . "[下一页]&nbsp;[末页]";
			else $navigator = $navigator . "<a href=" . $url . "Page=$page_next>[下一页]</a>&nbsp;<a href=" . $url . "Page=$PageCount>[末页]</a>";
			$navigator .= "&nbsp;共" . $RecordCount . "条记录&nbsp;{$Page}/{$PageCount}页";
		} else {
			$keyword = $_GET["keyword"];
			$navigator = "<a href=" . $url . "keyword=$keyword&Page=$page_previous>上一页</a>";
			for ($i = $page_start; $i < $page_end; $i++) {
				$j = $i + 1;
				$navigator = $navigator . "<a href='" . $url . "keyword=$keyword&Page=$j'>$j</a>&nbsp;";
			}
			$navigator = $navigator . "<a href=" . $url . "keyword=$keyword&Page=$page_next>下一页</a>";
			$navigator .= "&nbsp;共" . $RecordCount . "条记录&nbsp;{$Page}/{$PageCount}页";
		}
		echo $navigator;
	}
	?>
</body>

</html>

添加新用户【增】：

add_form.php：

<html>

<head>
	<title>添加用户注册信息</title>
	<script type="text/javascript">
		//用于验证表单
		function checkform() {
			var username = document.form1.username;
			var password = document.form1.password;
			if (username.value == "") {
				alert("用户名不能为空！");
				username.focus();
				return false;
			}
			if (username.value.length < 6 || username.value.length > 15) {
				alert("用户名的长度不能少于6个字符或大于15个字符！");
				username.value = "";
				username.focus();
				return false;
			}
			if (password.value == "") {
				alert("密码不能为空！");
				password.focus();
				return false;
			}
			if (password.value.length < 6 || password.value.length > 15) {
				alert("密码的长度不能少于6个字符或大于15个字符！");
				password.value = "";
				password.focus();
				return false;
			}
			return true;
		}
	</script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>

<body>
	<center>
		<form align="center" name="form1" method="post" action="add.php" onsubmit='return checkform();'>
			<h2 align="center">添加新用户</h2>
			<table align="center" border="0" width="440">
				<tr>
					<td align="right" width="100">用户名</td>
					<td align="left" width="400"><input type="text" name="username" size="20" /></td>
				</tr>
				<tr>
					<td align="right" width="100">密码</td>
					<td align="left" width="400"><input type="password" name="password" size="20" /></td>
				</tr>
				<tr>
					<td align="right" width="100">性别</td>
					<td align="left" width="400">
						<input type="radio" name="sex" size="20" value="男" />男
						<input type="radio" name="sex" size="20" value="女">女
					</td>
				</tr>
				<tr>
					<td align="right" width="100">学历：</td>
					<td align="left" width="400"><select name="degree" id="select">
							<option value="初中">初中</option>
							<option value="高中">高中</option>
							<option value="大学">大学</option>
						</select></td>
				</tr>
				<tr>
					<td align="right" width="100">爱好：</td>
					<td align="left" width="400">
						游戏<input type="checkbox" name="hobby[]" value="游戏">
						动漫<input type="checkbox" name="hobby[]" value="动漫">
						运动<input type="checkbox" name="hobby[]" value="运动">
					</td>
				</tr>
				<tr>
					<td align="right" width="100">用户类型</td>
					<td align="left" width="400">
						<input type="radio" name="administrator" size="20" value="0" />管理员
						<input type="radio" name="administrator" size="20" value="1" />非管理员
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2">
						<p>
							<input type="submit" name="submit" value="提交" />
							&nbsp; &nbsp;
							<input type="reset" name="reset" value="重写" />
						</p>
						<p align="center"><a href="admin.php">返回首页</a></p>
					</td>
				</tr>
			</table>
		</form>
	</center>
</body>

</html>

add.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>注册成功信息</title>
  <style>
    body {
      background-image: url(images/瓦尼塔斯9.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>

<body>
  <?

  require('conn.php');
  $username = $_POST["username"];
  $password = $_POST["password"];
  $sex = $_POST["sex"];
  $degree = $_POST["degree"];
  $hobby_arr = array();
  $hobby_arr = $_POST["hobby"];
  $hobby = implode('、', $hobby_arr);
  $administrator = $_POST["administrator"];
  $sql = "select * from sheet1 where username='" . $username . "'";
  $result = mysqli_query($conn, $sql);
  $row = mysqli_num_rows($result);
  if ($row <> 0) {
  ?>
    <script language=javascript>
      alert("该帐号已存在，请重新输入！");
      window.history.go(-1);
    </script>
  <?
  } else {
    $sql = "insert into sheet1(username,password,sex,degree,hobby,administrator) values('$username','$password','$sex','$degree','$hobby','$administrator')";
    mysqli_query($conn, $sql) or die('执行失败！');
    mysqli_free_result($result);
    mysqli_close($conn);

    echo '<p>' . $username . '已经注册成功！</p>';
    echo '<p>其注册信息为：</p>';
    echo '帐&nbsp;&nbsp;&nbsp;&nbsp;号：' . $username . '</br>';
    echo '密&nbsp;&nbsp;&nbsp;&nbsp;码：' . $password . '</br>';
    echo '性&nbsp;&nbsp;&nbsp;&nbsp;别：' . $sex . '</br>';
    echo '学&nbsp;&nbsp;&nbsp;&nbsp;历：' . $degree . '</br>';
    echo '爱&nbsp;&nbsp;&nbsp;&nbsp;好：' . $hobby . '</br>';
    echo '用户&nbsp;&nbsp;&nbsp;&nbsp;类型：' . $administrator . '</br>';
    echo "<a href='admin.php'>返回首页</a>";
  }
  ?>
</body>

</html>

删除：

delete.php：

<?php

require('conn.php');

$username = $_GET["username"];
//删除数据
$sql = "delete from sheet1 where username='" . $username . "'";
//查询数据并且 返回受影响的行数
if (mysqli_query($conn, $sql) && mysqli_affected_rows($conn) == 1)
	echo "<script>alert('删除成功！');location.href='admin.php';</script>";
else
	echo "<script>alert('删除失败！');location.href='admin.php';</script>";

修改：

update_form.php：

<html>

<head>
	<title>修改用户注册信息表</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script>
		//表单验证
		function checkform() {
			var username = document.form1.username;
			var password = document.form1.password;
			if (username.value == "") {
				alert("用户名不能为空！");
				username.focus();
				return false;
			}
			if (username.value.length < 6 || username.value.length > 15) {
				alert("用户名的长度不能少于6个字符或大于15个字符！");
				username.value = "";
				username.focus();
				return false;
			}
			if (password.value == "") {
				alert("密码不能为空！");
				password.focus();
				return false;
			}
			if (password.value.length < 6 || password.value.length > 15) {
				alert("密码的长度不能少于6个字符或大于15个字符！");
				password.value = "";
				password.focus();
				return false;
			}
			return true;
		}
	</script>
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>

<body>
	<h2 align="center">用户注册信息修改</h2>
	<?
	require('conn.php');
	$username = $_GET["username"]; //获取要展开的记录的用户帐号

	//以下打开记录集
	$sql = "select * from sheet1 where  username='" . $username . "'";
	$result = mysqli_query($conn, $sql);
	$row = mysqli_fetch_assoc($result);
	?>
	<center>
		<form name="form1" method="post" action="update.php" onsubmit='javascript:return checkform();'>

			<table border="0" width="440">
				<tr>
					<td align="right" width="100">帐&nbsp;&nbsp;&nbsp;&nbsp;号</td>
					<td align="left" width="400"><input type="text" name="username" value="<?= $row['username'] ?>" size="20" /></td>
				</tr>
				<tr>
					<td align="right" width="100">密&nbsp;&nbsp;&nbsp;&nbsp;码</td>
					<td align="left" width="400"><input type="text" name="password" value="<?= $row['password'] ?>" size="20" /></td>
				</tr>
				<tr>
					<td align="right" width="100">性&nbsp;&nbsp;&nbsp;&nbsp;别</td>
					<td align="left" width="400">
						<input type="radio" name="sex" <? if (trim($row['sex']) == '男') echo 'checked'; ?> value="男" />男
						<input type="radio" name="sex" <? if (trim($row['sex']) == '女') echo 'checked'; ?> value="女" />女
					</td>
				</tr>
				<tr>
					<td align="right" width="100">学&nbsp;&nbsp;&nbsp;&nbsp;历</td>
					<td align="left" width="400"><select name="degree" id="select">
							<option <? if (trim($row['degree']) == '初中') echo 'selected'; ?> value="初中">初中</option>
							<option <? if (trim($row['degree']) == '高中') echo 'selected'; ?> value="高中">高中</option>
							<option <? if (trim($row['degree']) == '大学') echo 'selected'; ?> value="大学">大学</option>
						</select></td>
				</tr>
				<tr>
					<td align="right" width="100">爱&nbsp;&nbsp;&nbsp;&nbsp;好</td>
					<td align="left" width="400">
						<input name="hobby[]" type="checkbox" <? if (strpos($row['hobby'], '游戏') !== false) echo 'checked'; ?> value="游戏 " />游戏
						<input name="hobby[]" type="checkbox" <? if (strpos($row['hobby'], '动漫') !== false) echo 'checked'; ?> value="动漫" />动漫
						<input name="hobby[]" type="checkbox" <? if (strpos($row['hobby'], '运动') !== false) echo 'checked'; ?> value="运动" /> 运动
					</td>
				</tr>
				<tr>
					<td align="right" width="100">用户类型</td>
					<td align="left" width="400">
						<input type="radio" name="administrator" <? if (trim($row['administrator']) == '0') echo 'checked'; ?> value="0" />管理员
						<input type="radio" name="administrator" <? if (trim($row['administrator']) == '1') echo 'checked'; ?> value="1" />非管理员
					</td>
				</tr>
				<td align="center" colspan="2"><input type="submit" name="submit" value="保存" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="取消" />
				</td>
				</tr>
				<input type="hidden" name="preusername" value="<?= $row['username'] ?>" />
			</table>
		</form>
		<a href="admin.php">返回后台管理主界面</a>
	</center>
</body>

</html>

update.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>注册信息修改</title>
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>

<body>
	<?
	require('conn.php');
	//查找用户名是否为已经注册的用户名，如果是，提示该用户名已经注册，请重新选择用户名，否则，将注册信息保存到数据库中。
	$preusername = $_POST["preusername"];
	$username = $_POST["username"];
	$password = $_POST["password"];
	$sex = $_POST["sex"];
	$degree = $_POST["degree"];
	$hobby_arr = array();
	$hobby_arr = $_POST["hobby"];
	$hobby = implode('、', $hobby_arr);
	$administrator = $_POST["administrator"];
	if (trim($username) <> trim($preusername)) { //用户名已变更！
		$sql = "select username from sheet1 where username='" . $username . "'";
		$result = mysqli_query($conn, $sql);
		$rownum = mysqli_num_rows($result);
		if ($rownum <> 0) { //该用户帐号已经存在
	?>
			<script language=javascript>
				alert("该用户帐号已存在！请重新输入用户帐号！");
				window.history.go(-1);
			</script>
	<?
			die('该用户帐号已经存在！');
		} else { //该用户帐号不存在
			$sql = "update sheet1 set username='$username',password='$password',sex='$sex',degree='$degree',hobby='$hobby',administrator='$administrator' where username='" . $preusername . "'";
			mysqli_query($conn, $sql) or die('执行失败');
			echo "<script>alert('记录修改成功！');location.href='admin.php';</script>";
		}
	} else { //该用户帐号未变更
		$sql = "update sheet1 set password='$password',sex='$sex',degree='$degree',hobby='$hobby',administrator='$administrator' where username='" . $username . "'";
		mysqli_query($conn, $sql) or die('执行失败');
		echo "<script>alert('记录修改成功！');location.href='admin.php';</script>";
	}
	?>

</html>

查询：

searchresult.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		body {
			background-image: url(images/瓦尼塔斯9.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	</style>
</head>


<body>
	<h3 align="center">查询结果</h3>
	<?php
	error_reporting(0);
	require('conn.php');
	require('pageshow.php');
	if (isset($_GET['Page']) && (int)$_GET['Page'] > 0)
		$Page = $_GET['Page'];
	else
		$Page = 1;
	$PageSize = 4;
	$keyword = trim($_GET['keyword']);
	$sel = $_GET['sel'];
	$sql = "select * from sheet1";
	if ($keyword <> "")
		$sql = $sql . " where $sel like '%$keyword%'";
	$rs = mysqli_query($conn, $sql) or die("执行失败");
	$RecordCount = mysqli_num_rows($rs);
	$rs = mysqli_query($conn, $sql);

	?>
	<center>
		<table border="1" width="100%">
			<tr bgcolor="#E0E0E0">
				<th>用户名</th>
				<th>密码</th>
				<th>性别</th>
				<th>学历</th>
				<th>爱好</th>
				<th>用户类型<br>(0表示管理员，1表示非管理员)</th>
				<th>删除</th>
				<th>修改</th>
			</tr>
			<?php
			error_reporting(0);
			$count = 0;
			mysqli_data_seek($rs, ($Page - 1) * $PageSize);
			for ($i = 0; $i < $PageSize; $i++) {
				$row = mysqli_fetch_assoc($rs);
				if ($row) {
					$count = $count + 1
			?>
					<tr bgcolor=<? if (($count % 2) == 0)
									echo "#99CC45";
								else
									echo  "#99CC99";
								?>>
						<?php $username = $row["username"];
						$password = $row["password"];
						$sex = $row["sex"];
						$degree = $row["degree"];
						$hobby = $row["hobby"];
						$administrator = $row["administrator"] ?>
						<td><?= $username ?></td>
						<td><?= $password ?></td>
						<td><?= $sex ?></td>
						<td><?= $degree ?></td>
						<td><?= $hobby ?></td>
						<td><?= $administrator ?></td>

						<td><a href="delete.php?username=<?= $username ?>" onclick="return confirm('确认要删除吗？')">删除</a></td>
						<td><a href="update_form.php?username=<?= $username ?>">修改</a></td>
					</tr>
			<? }
			}
			mysqli_free_result($rs); ?>
		</table>
		<a href="admin.php">返回首页</a>
		<? $url = $_SERVER["PHP_SELF"]; //获得当前面的url
		page($RecordCount, $PageSize, $Page, $url, $keyword); ?>
	</center>
</body>
<html>

二级网页[从动漫名称下拉菜单中点击瓦尼塔斯、全职高手得以下页面]

星辰的二级网页和三级网页做的比较简陋(๑＞ڡ＜)

瓦尼塔斯.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瓦尼塔斯的手记</title>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
            background-image: url(images/瓦尼塔斯12.png);
            background-repeat: no-repeat;
            background-size: cover;
        }

        h1 {
            font-weight: 400;
            text-align: center;
            color: white;
        }

        h3 {
            font-weight: 400;
            color: white;
        }

        .gray {
            font-size: 12px;
            color: gray;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: skyblue;
        }

        .search {
            color: #666;
        }

        .btn {
            font-weight: 700;
        }

        /* 想要图片居中对齐，必须要修改父类标签，修改img标签无法实现
        .img {
            text-align: center;
        } */

        p {
            /* 首行缩进2个字的距离 */
            text-indent: 2em;
            color: white;
        }
    </style>
</head>

<body>
    <h1>瓦尼塔斯的手记</h1>
    <!-- <div style="text-align: right; color: gray;">19世纪巴黎×吸血鬼×蒸汽朋克</div> -->
    <div class="gray">19世纪<a href="分集剧情.html">巴黎</a>×吸血鬼×蒸汽朋克 <input type="text" value="请输入" class="search"> <button
            class="btn">搜索</button></div>

    <hr>
    <p>您不曾听说过吗?</p>
    <p>
        关于将诅咒散播于吸血鬼的那本、机械驱动的魔导书的故事。现在被"瓦尼塔斯之书"所引导、演员们集结于巴黎。蓝色的皮革封面下是漆黑的纸张，用银之锁捆绑住的机械传动的魔法书，那就是瓦尼塔斯之书!
    </p>
    <p>
        从吸血鬼瓦尼塔斯手上继承了瓦尼塔斯之书和他的名号的普通人类瓦尼塔斯，与在"吸血鬼的不祥之月"蓝色月光的庇护下出生的吸血鬼诺相遇、同行、最终相杀的故事。
    </p>
    <p class="img">
        <img src="images/瓦尼塔斯4.png" alt="瓦尼塔斯" width="400">
        <img src="images/瓦尼塔斯9.png" alt="瓦尼塔斯" width="400">
    </p>
    <p>Pandora Hearts」的望月淳所带来的吸血鬼谭--开幕。</p>
    <h3>瓦尼塔斯之书</h3>
    <p>
        苍蓝色的皮革封面，漆黑的纸张，缠绕着银色锁链的，机械驱动的魔导书。那是瓦尼塔斯所制作的，寄宿着能够干涉「吸血鬼真正的名字」的力量的一本特别的书。
    </p>
    <h3>真名</h3>
    <p>
        每个吸血鬼都拥有的、真正的名字。构成各自存在的构成式、也就是性命本身。对吸血鬼而言，诅咒就是真名遭到了篡改。
    </p>
    <h3>祸名</h3>
    <p>
        因诅咒而被扭曲的真名的末路。被认为用普通方法是无法被治疗的，真名被感染的吸血鬼身体会变得异常。
    </p>
</body>

</html>

全职高手.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全职高手</title>
    <style>
        body {
            font: 16px/28px 'Microsoft YaHei';
            background-image: url(images/全职.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        h1 {
            /* 文字不加粗 */
            font-weight: 400;
            /* 让h1里面的文字水平居中对齐 */
            text-align: center;
        }

        .gray {
            font-size: 12px;
            color: gray;
            text-align: center;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: skyblue;
        }

        .search {
            color: #666;
        }

        .btn {
            font-weight: 700;
        }

        p {
            /* 首行缩进2个字的距离 */
            text-indent: 2em;
            color: white;
        }

        tr {
            color: white;
        }
    </style>
</head>

<body>
    <h1>全职高手</h1>
    <div class="gray">荣耀&nbsp;&nbsp;<a href="兴欣.html">兴欣网络会所&nbsp;&nbsp;</a>叶修<input type="text" value="请输入"
            class="search">
        <button class="btn">搜索</button>
    </div>

    <hr>
    <p class="para" label-module="para">《全职高手》是连载于起点中文网的网游小说。</p>
    <p class="para" label-module="para">书名取自主角叶修是荣耀网游全职业精通的“全职高手”。</p>
    <p class="para" label-module="para">2017年7月12日，《2017猫片 胡润原创文学IP价值榜》发布，《全职高手》排名第13位。</p>
    <p class="para" label-module="para">2018年12月20日，《2018猫片 胡润原创文学IP价值榜》发布，《全职高手》排名第4位。</p>

    <table align="left" width="400" class="table">
        <tr>
            <td class="concent">书&nbsp;&nbsp;&nbsp;&nbsp;名</td>
            <td class="basic">全职高手</td>
        </tr>
        <tr>
            <td class="concent">别&nbsp;&nbsp;&nbsp;&nbsp;名</td>
            <td class="basic">The King's Avatar</td>
        </tr>
        <tr>
            <td class="concent">作&nbsp;&nbsp;&nbsp;&nbsp;者</td>
            <td class="basic">蝴蝶蓝</td>
        </tr>
        <tr>
            <td class="concent">类&nbsp;&nbsp;&nbsp;&nbsp;别</td>
            <td class="basic">游戏竞技</td>
        </tr>
        <tr>
            <td class="concent">出版社</td>
            <td class="basic">湖北少年儿童出版社</td>
        </tr>
        <tr>
            <td class="concent">出版时间</td>
            <td class="basic">2012年4月1日</td>
        </tr>
        <tr>
            <td class="concent">页&nbsp;&nbsp;&nbsp;&nbsp;数</td>
            <td class="basic">283 页</td>
        </tr>
        <tr>
            <td class="concent">定&nbsp;&nbsp;&nbsp;&nbsp;价</td>
            <td class="basic">25 元</td>
        </tr>
        <tr>
            <td class="concent">开&nbsp;&nbsp;&nbsp;&nbsp;本</td>
            <td class="basic">16开纸</td>
        </tr>
    </table>
    <table align="left" width="500">
        <tr>
            <td class="concent">装&nbsp;&nbsp;&nbsp;&nbsp;帧</td>
            <td class="basic">平装</td>
        </tr>
        <tr>
            <td class="concent">ISBN</td>
            <td class="basic">9787535362872</td>
        </tr>
        <tr>
            <td class="concent">首发网站</td>
            <td class="basic">起点中文网</td>
        </tr>
        <tr>
            <td class="concent">首发时间</td>
            <td class="basic">2011年2月28日</td>
        </tr>
        <tr>
            <td class="concent">完结时间</td>
            <td class="basic">2014年4月28日</td>
        </tr>
        <tr>
            <td class="concent">荣&nbsp;&nbsp;&nbsp;&nbsp;誉</td>
            <td class="basic"> 网络文学史上第一部千盟书；2013游戏竞技之王勋章等</td>
        </tr>
        <tr>
            <td class="concent">字&nbsp;&nbsp;&nbsp;&nbsp;数</td>
            <td class="basic">534.97万字</td>
        </tr>
        <tr>
            <td class="concent">游戏原型</td>
            <td class="basic">>地下城与勇士</td>
        </tr>
        <tr>
            <td class="concent">总推荐</td>
            <td class="basic">586.2万</td>
        </tr>
    </table>

</body>

</html>

三级网页[点击瓦尼塔斯的顶部“巴黎”、全职高手的顶部“兴欣网络会所”得以下页面]

分集剧情.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分集剧情</title>
</head>
<style>
    body {
        background-image: url(images/瓦尼塔斯13.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    img {
        width: 200px;
    }

    td {
        color: white;
    }
</style>

<body>
    <table align="center">
        <tr>
            <td width="600">
                <h3>第1集 Vanitas―如果是拉斯提·霍布斯</h3><br>
                <p>吸血鬼青年诺亚受老师所托，前往巴黎去寻找能对吸血鬼施以诅咒的魔导书“瓦尼塔斯之书”。在前往巴黎的飞船上，被卷入某个事件的诺亚，与自称吸血鬼医生的人类、有着蓝色双眼的青年瓦尼塔斯相遇了。</p>
            </td>
            <td>
                <img name="img" src="images/第一集.jpg">
            </td>
        </tr>
        <tr>
            <td>
                <h3>第2集 Noe―在花都</h3><br>
                <p>离开奥乐的住处，目标一致的瓦尼塔斯和诺亚为了抓住吸血鬼事件的犯人而一起行动。他们迅速获得了情报，并找到了被视为犯人的托玛‧凡尔纳。就在他们追着托玛的时候，两人的面前出现了希望得到瓦尼塔斯之书的吸血鬼少年‧路卡和他的骑士·贞德。
                </p>
            </td>
            <td><img name="img" src="images/第二集.jpg"></td>
        </tr>
        <tr>
            <td>
                <h3>第3集 Archiviste―读血之牙</h3>
                <p>瓦尼塔斯以狡猾的手段遏止了与贞德的战斗。诺亚在埃米莉雅的记忆中目击了扭曲真名的元凶“沙路拉丹”。而在面露愠色的他面前，他的儿时玩伴多米妮克‧都‧萨德出现。受多米妮克之托陪同参加假面舞会的诺亚，为了寻找戴着面具的神秘团体“沙路拉丹”以及黑影的线索，于是前往吸血鬼居住的异界。
                </p>
            </td>
            <td><img name="img" src="images/第三集.jpg"></td>
        </tr>
        <tr>
            <td>
                <h3>第4集 Bal masque―假面嘲笑的夜晚</h3><br>
                <p>瓦尼塔斯及诺亚跟着多米妮克一起参加了假面舞会。舞会上同时有多名持咒者发病，会场陷入一片恐慌。混乱之中，诺亚在寻找瓦尼塔斯时偶然再次遇见路卡，两人被“带着蜘蛛面具的神秘男子”攻击。另一方面，突如其来的吸血冲动袭向与路卡失散的贞德，甚至让她站不起身。
                </p>
            </td>
            <td><img name="img" src="images/第四集.jpg"></td>
        </tr>
        <tr>
            <td>
                <h3>第5集 Reminiscence―朋友</h3>
                <p>在埃米莉雅记忆中看见的黑影“沙路拉丹”，出现在与蜘蛛面具男子对峙的诺亚面前。诺亚的创伤、与儿时玩伴路易有关的过去被唤起，使他动弹不得。就在他快被谜样的黑影“内尼亚”给吞噬时，瓦尼塔斯在千钧一发之际出现。
                </p>
            </td>
            <td><img name="img" src="images/第五集.jpg"></td>
        </tr>
    </table>
</body>

</html>

兴欣.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴欣战队</title>
</head>
<style>
    body {
        background-image: url(images/兴欣.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    tr {
        color: white;
    }
</style>

<body>
    <table>
        <tr>
            <td align="center" width="200">人物</td>
            <td align="center" width="200">角色</td>
            <td align="center" width="600">简介</td>
            <td align="center" width="200">称号</td>
            <td align="center" width="400">奖项</td>
        </tr>
        <tr>
            <td>叶修(原队长)<br>曾用名：叶秋</td>
            <td>一叶之秋(战斗法师)→<br>君莫笑(散人)</td>
            <td>
                <p>本书主角，对荣耀全职业精通。荣耀第一批玩家，职业联赛初代选手。第一赛季至第八赛季中途任嘉世战队队长，后暂时退役。组建兴欣战队，任兴欣队长，赢得第9赛季挑战赛，获取第10赛季正式进入职业联赛的资格，最终在第十赛季与轮回的决赛中，超神补刀，以一敌三，拿下冠军。
                    首届荣耀世界邀请赛中国国家队领队。</p>
            </td>
            <td>全职高手、荣耀第一人、荣耀教科书、荣耀之神、开荒一代、四大战术大师之一、斗神</td>
            <td>总冠军(第1、2、3、10赛季)<br>
                亚军(第4赛季)<br>
                最有价值选手(第1、2、3、10赛季)<br>
                输出之星(两次)<br>
                一击必杀(一次)<br>
                单挑之王(第10赛季)<br>
                最佳搭档(&苏沐橙)（第4~7赛季）
            </td>
        </tr>
        <tr>
            <td>苏沐橙(队长)</td>
            <td>沐雨橙风(枪炮师)</td>
            <td>
                <p>联盟首席枪炮师，相貌出众，被称作联盟第一美女。与叶修配合默契。第4~9赛季效力嘉世战队。第10赛季起效力兴欣。第11赛季起任兴欣队长。
                    首届荣耀世界邀请赛中国队队员。</p>
            </td>
            <td>联盟首席枪炮师、第一策应高手、黄金一代</td>
            <td>总冠军(第10赛季)<br>
                亚军(第4赛季)<br>
                最佳搭档(&叶修)（第4~7赛季）
            </td>
        </tr>
        <tr>
            <td>方锐(副队长)</td>
            <td>鬼迷神疑(盗贼)→<br>海无量(气功师)</td>
            <td>
                <p>原呼啸战队副队长，被誉为猥琐流大师。曾用角色鬼迷神疑被誉为第一盗贼，和林敬言的流氓唐三打组成的犯罪组合是呼啸的标志。后转型气功师，将猥琐流运用到气功师身上。第十赛季决赛赛点一拖二为兴欣争取了获胜的希望。
                    首届荣耀世界邀请赛中国队队员。</p>
            </td>
            <td>原联盟首席盗贼、黄金右手、猥琐大师、犯罪组合(&林敬言)</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>唐柔</td>
            <td>寒烟柔(战斗法师)</td>
            <td>
                <p>全方位无死角气质美女，个性好胜，天赋极高。有一双漂亮的手，手速很快（练过钢琴）。大企业家唐书森之女。
                    第十赛季半决赛打出龙抬头，是继叶修孙翔之后第三个打出的选手。决赛对阵轮回，实现一挑三的誓言。</p>
            </td>
            <td>-</td>
            <td>
                总冠军(第10赛季)<br>
                最佳新人(第10赛季)
            </td>
        </tr>
        <tr>
            <td>包荣兴</td>
            <td>包子入侵(流氓)</td>
            <td>
                <p>性格单纯，大脑时常脱线说出莫名其妙的话。战斗风格天马行空，完全无法用经验预料，有时打法高明，有时打法二缺，叶修也无法解读</p>
            </td>
            <td>-</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>乔一帆</td>
            <td>灰月(刺客)→<br>一寸灰(鬼剑士)</td>
            <td>
                <p>原微草战队队员。在网游第十区受叶修指点转职为鬼剑士中的阵鬼。后加入兴欣战队。大局观很强，战斗风格较谨慎小心。</p>
            </td>
            <td>-</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>罗辑</td>
            <td>昧光(召唤师)</td>
            <td>
                <p>知名学府T大的少年大学生，数学天才，师从世界级数学家张以川。最开始操作一塌糊涂，但有强大的理论知识。</p>
            </td>
            <td>-</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>莫凡</td>
            <td>毁人不倦(忍者)</td>
            <td>
                <p>技术高超，但独来独往。通常沉默寡言，面无表情，开始团队意识不强，后来在叶修的刻意引导下渐渐改变。战斗风格隐忍耐心。</p>
            </td>
            <td>大神杀手</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>安文逸</td>
            <td>小手冰凉(牧师)</td>
            <td>
                <p>十分冷静、理智，很会把握时机，站桩式治疗的精神力确堪比大神，但是团队混战中反应和手速都是软肋，容易手忙脚乱。</p>
            </td>
            <td>-</td>
            <td>总冠军(第10赛季)</td>
        </tr>
        <tr>
            <td>魏琛</td>
            <td>索克萨尔(术士)→<br>迎风布阵(术士)</td>
            <td>
                <p>蓝雨战队首任队长，术士索克萨尔的首任操作者。发掘了黄少天，发现战队不需要自己后果断退役。被叶修看出心中的不甘，说服其重新复出加入了兴欣战队。</p>
            </td>
            <td>开荒一代</td>
            <td>总冠军(第10赛季)</td>
        </tr>
    </table>
</body>

</html>

那我就分享到这里啦~，希望大家帮我纠纠错啦(๑＞ڡ＜)

星辰个人很喜欢动漫，就做了这个主题的，希望你也喜欢哦~~