- 個人網(wǎng)頁（html+css+js）——網(wǎng)頁設(shè)計(jì)作業(yè)
- 帶背景音樂（The way I still Love you）、櫻花飄落效果、粒子飄落效果
- 頁面美觀，樣式精美
- 涉及（html+css+js），下載后可以根據(jù)自己需求進(jìn)行修改
- 完整源碼在這里獲取https://download.csdn.net/download/weixin_61370021/87240400
- 主頁
- 博客頁面
- 視頻頁面
-
關(guān)于我頁面
-
相冊頁面文章來源：http://www.zghlxwxcb.cn/news/detail-778943.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-778943.html
- home_page.html
<!DOCTYPE html>
<html lang="zh-CN">
<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>歡迎來到 Lilly Yu 主頁</title>
<link rel="shortcut icon" href="favicon.ico" />
<!-- ------------------------------------------------- -->
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css">
<!-- 引入animate -->
<link rel="stylesheet" href="./css/animate.min.css" />
<link rel="stylesheet" href="./css/style-2.css" />
<link rel="stylesheet" href="./css/jaliswall.css" />
<!-- ------------------------------------------------- -->
<script src="js/jQuery.mini.js"></script>
<script src="js/fullpage.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="dowebok">
<!-- <h3>第二屏</h3> -->
<div class="section sec2" id="section2">
<!-- 背景小圓點(diǎn) -->
<div class="sec1_circle1"></div>
<div class="sec1_circle2"></div>
<div class="sec2_circle1"></div>
<div class="sec2_circle2"></div>
<div class="sec2_circle3"></div>
<!-- 主題內(nèi)容 -->
<div class="sec2_main">
<div class="sec2_main_head">
<ul>
<li class="current1">
<a href="#">個人資料</a>
</li>
<li><a href="#">個人圖片</a></li>
<li><a href="#">個人日志</a></li>
<li><a href="#">個人QQ</a></li>
<li><a href="#">個人微信</a></li>
<li><a href="#">個人收藏</a></li>
</ul>
</div>
<div class="sec2_main_body">
<div class="sec2_main_body_content hidden" style="display: block">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>姓名：Lilly Yu</p>
<p>性別：女</p>
<p>生日：2002/03/19</p>
<p>愛好：羽毛球，吃雞，聽音樂</p>
<p>星座：白羊座</p>
<p>落葉??知秋意</p>
<p>愛意??隨風(fēng)起</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/1-4.jpg" alt="" />
</div>
</div>
<div class="sec2_main_body_content hidden">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>《起風(fēng)了》</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/s-2.jpg" alt="" />
</div>
</div>
<div class="sec2_main_body_content hidden">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>這一路上走走停停</p>
<p>順著少年漂流的痕跡</p>
<p>邁出車站的前一刻</p>
<p>竟有些猶豫</p>
<p>不禁笑這近鄉(xiāng)情怯</p>
<p>仍無可避免，而長野的天</p>
<p>依舊那么暖，風(fēng)吹起了從前??</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/s-3.jpg" alt="" />
</div>
</div>
<div class="sec2_main_body_content hidden">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>QQ大號：5201314</p>
<p>QQ小號：6666</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/s-4.jpg" alt="" />
</div>
</div>
<div class="sec2_main_body_content hidden">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>落葉??知秋意</p>
<p>微信：哇哈哈</p>
<p>愛意??隨風(fēng)起</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/s-5.jpg" alt="" />
</div>
</div>
<div class="sec2_main_body_content hidden">
<div class="sec2_main_body_content_left">
<p>??</p>
<p>愛意隨風(fēng)起，自然知秋意。</p>
<p>??</p>
</div>
<div class="sec2_main_body_content_right">
<img src="./img/1-1.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js">
</script>
</html>
- blog_edit.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>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_edit.css">
<!-- 引入依賴 -->
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/editormd.js"></script>
</head>
<body>
<!-- 導(dǎo)航欄 -->
<div class="nav">
<img src="img/myphoto.jpg" alt="">
<span class="title">我的博客</span>
<!-- 使用 span 把左右兩側(cè)的元素給撐開 -->
<span class="spacer"></span>
<a href="blog_major.html">博客主頁</a>
<a href="blog_edit.html">發(fā)布博客</a>
<a href="index.html">首頁</a>
</div>
<!-- 版心 -->
<div class="blog-edit-container">
<!-- 標(biāo)題編輯區(qū) -->
<div class="title">
<input type="text" placeholder="請?jiān)谶@里寫下文章標(biāo)題" id="title">
<input type="button" value="發(fā)布文章" id="submit">
</div>
<!-- 內(nèi)容編輯區(qū) -->
<div id="editor">
</div>
</div>
<script>
// 初始化 editor.md
let editor = editormd("editor", {
// 這里的尺寸必須在這里設(shè)置，設(shè)置樣式會被 editormd 自動覆蓋
width: "100%",
// 設(shè)定編輯高度
height: "500px",
// 編輯頁中的初始化內(nèi)容
markdown: "# 請?jiān)谶@里創(chuàng)作一篇博客",
//指定 editor.md 依賴的插件路徑
path: "editor.md-master/lib/"
});
</script>
</body>
<script src="js/jquery.min.js">
</script>
</html>
到了這里，關(guān)于HTML+CSS+JS做一個好看的個人網(wǎng)頁—web網(wǎng)頁設(shè)計(jì)作業(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
