主题为“我的大一一年生活”，网站内容
内容方面：可从个人信息、兴趣爱好、学习情况、生活情况、感悟心得等方面展开，要求图文并茂、健康向上、支持原创、切勿偏题，能将大学期间你的学习、生活状态较好的展现在网页中；
技术方面：能把网页内容和课堂所讲网页制作技术充分结合，网站结构合理、网页布局清晰、页面导航明确，
这种一般静态网页，简单的话就找个Bootstrap模板，然后处理一下
大致操作：
1、找个Bootstrap模板
2、替换文字信息和图片信息，没用的html代码段落删除
3、需要修改布局的话，自己修改css文件,或者自己感兴趣自己照着模板再做个新页面，html,css自己修改
4、最后，找台云服务器，安装个nginx部署上去，修改nginx.conf到自己的index.html目录， 端口开放，公网IP:端口 即可公网访问。
有问题及时沟通或者私信我
HTML 是素颜 css 是p图
看菜鸟教程，你很快就会理论实践相结合，因为这个可以直接看到，相对于底层来说很好了
有内容素材嘛
跳转页面：页面切换/跳转随机页面/自动翻页/定时翻页
http://support.epub360.com/hc/kb/article/1520752/
<!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>Document</title>
<!-- <link rel="stylesheet" href="css/jquery.fullPage.css"> -->
<link href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.6/fullpage.css" rel="stylesheet">
<!-- <script src="js/jquery.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<!-- <script src="js/jquery.easings.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.6/vendors/easings.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<!-- <script src="js/jquery.slimscroll.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.js"></script>
<!-- <script src="js/jquery.fullPage.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/4.0.6/fullpage.js"></script>
<style>
#menu {
position: fixed;
right: 20px;
top: 180px;
z-index: 999;
}
#menu li {
list-style: none;
}
/* #menu li.active {
background-color: #f00
} */
/* li::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f0f
} */
.oli::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff0;
box-sizing: border-box;
}
.active::after {
border: 2px solid #0f0;
}
</style>
</head>
<body>
<!-- /*加导航的可点击*/ -->
<ul id="menu">
<li data-menuanchor="page1" class="oli active">
<a href="#page1">第一屏</a>
</li>
<li data-menuanchor="page2" class="oli">
<a href="#page2">第二屏</a>
</li>
<li data-menuanchor="page3" class="oli">
<a href="#page3">第三屏</a>
</li>
<li data-menuanchor="page4" class="oli">
<a href="#page4">第四屏</a>
</li>
</ul>
<!-- /*鼠标滚动换/* -->
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 绑定菜单演示</p>
</div>
<div class="section active">
<h3>第二屏</h3>
<p>请查看左上角，点击可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>绑定的菜单没有默认的样式，你需要自行编写</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
<script>
$(function () {
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
//设置颜色参数
anchors: ['page1', 'page2', 'page3', 'page4'],
//定义锚链接
menu: '#menu'
//绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
});
});
</script>
</body>
</html>