代码拉取完成，页面将自动刷新
<!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">
<!--网站logo-->
<link rel="icon" href="./images/picture_logo.png" />
<link rel="stylesheet" href="./css/wordpicture_beautify.css">
<title>小染_美好 月下的花香</title>
<style>
* {
margin: 0;
padding: 0;
}
/*背景图*/
body {
background: url(./images/picture_body.jpg) no-repeat fixed;
background-size: 100% 100%;
}
/* body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}*/
body {
margin: 0;
padding: 0;
font-size: 1rem;
color: #3d3737;
font-weight: 400;
font-family: 'Noto Sans SC', "SF Pro SC", "SF Pro Text", "SF Pro Icons", PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
overflow-x: hidden;
}
/*内容盒子*/
.content {
width: 800px;
height: auto;
margin: 3.75rem auto;
background: linear-gradient(200deg, #fff, rgba(255, 255, 255, 0.2));
backdrop-filter: blur(0.5px);
box-shadow: 0 0 6px 4px rgb(0 0 0 / 5%);
}
/*顶部导航*/
header {
display: block;
}
.match .match_bg {
background-color: var(--white);
}
.header_bg {
position: relative;
}
#header .header_bg_img {
width: 100%;
height: 130px;
}
#header .header_bg_img img {
width: 100%;
height: 100%;
object-fit: cover;
}
img {
display: block;
}
.header_bg_filter {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.header_bg_filter::before {
display: block;
content: "";
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
background: -webkit-linear-gradient(bottom, #fff, rgba(255, 255, 255, 0) 100%);
}
.header_bg_filter .header_frame {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
padding: 1.6rem 1.4rem;
}
.header_frame {
display: flex;
}
.header_avatar {
width: 50px;
height: 50px;
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.header_info {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding-left: 0.8rem;
}
#header .header_bg_filter .header_info_name {
color: #FFF;
}
#header .webname_show {
text-shadow: 0 0 5px #888;
}
#header .header_info_name {
flex: 1 1 auto;
font-size: 1.125rem;
}
#header .header_bg_filter .header_info_qm {
color: #7a8b9a;
}
#header .header_info_qm {
font-size: .75rem;
}
#header .navbar {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 0 1.4rem;
border-bottom: 1px solid #dee2e6;
}
#header .meun_list {
width: 90%;
white-space: nowrap;
overflow-y: hidden;
}
#header .meun_ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 14px;
line-height: 3;
}
#header .meun_li {
margin-right: 0.937rem;
font-size: 0.875rem;
display: inline-block;
letter-spacing: 1px;
}
/*下拉菜单*/
/* #heafer .level {
}*/
.level .level_ul {
display: none;
position: absolute;
min-width: 5.62rem;
background-color: #fff;
padding: 0;
margin: 0;
list-style: none;
transform: translateX(-35%) translateY(0px);
transition: all .25s;
box-shadow: 0px 0px 20px -5px rgb(158 158 158 /22%);
border-radius: 4px;
/*visibility: hidden;*/
/* opacity: 0;*/
z-index: 8;
overflow: hidden;
}
.level_ul .level_li {
padding: 0.1rem .625rem;
font-size: 13px;
text-align: center;
border-bottom: 1px solid rgba(238, 238, 238, 0.33);
}
.level_ul .level_li:hover {
background-color: rgb(248, 248, 248);
border-bottom: 1px solid rgba(238, 238, 238, 0.33);
}
.level:hover .level_ul {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #77aaad;
}
*,
::after,
::before {
box-sizing: border-box;
}
.glorious_02box {
height: 200px;
margin-top: 50px;
margin-bottom: 50px;
padding: 0 50px;
}
.glorious_02box img {
border-radius: 5px;
width: 200px;
height: 200px;
float: left;
}
.glorious_02box .glorious_02box_center {
margin: 0 50px;
}
.black_overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 100;
}
.enlargeContainer {
display: none;
}
.enlargePreviewImg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
z-index: 200;
}
.close {
border-radius: 100%;
position: fixed;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
cursor: pointer;
z-index: 200;
}
/*底部样式*/
.font {
width: 100%;
margin-top: 20px;
padding: 30px;
height: 100px;
}
.font .tip {
text-align: center;
}
.font .tip span {
color: #d9694c;
}
/*右下角动图*/
.gif {
position: fixed;
bottom: 0;
right: 0;
}
.gif .word {
font-family: '华文行楷';
display: none;
height: 40px;
width: 220px;
padding: 10px;
background: rgba(190, 82, 42, 0.43);
border-radius: 10px;
border: 2px soid rgba(228, 68, 15, 0.712);
box-shadow: 0 0 40px rgba(219, 78, 26, 0.7);
}
.gif:hover .word {
display: block;
}
.gif .leaf1 {
position: absolute;
z-index: 3;
bottom: 14px;
right: 160px;
}
.gif .leaf2 {
position: absolute;
z-index: 3;
transform: translateX(121px) translateY(50px) rotate(38deg);
}
</style>
</head>
<!-- 顶部：导航背景和导航栏-->
<body class="match">
<!--主体内容-->
<div class="content">
<header id="header" class="match_bg">
<!--导航背景：背景图片、个人头像、导语-->
<div class="header_bg">
<div class="header_bg_img">
<img src="./images/picture_nav.jpg">
</div>
<div class="header_bg_filter">
<div class="header_frame">
<div class="header_avatar">
<img src="./images/avatar.jpg" width='50' height="50">
</div>
<div class="header_info">
<div class="header_info_name webname_show">
<a href="./login.html" target="_parent">小染</a>
</div>
<div class="header_info_qm">
亲爱的远方,月下的花香,向着星辰与深渊
</div>
</div>
</div>
</div>
</div>
<!--导航栏：八个链接，伪类选择器改变链接颜色-->
<div class="navbar">
<div class="meun_list">
<ul class="meun_ul">
<li class="meun_li">
<a href="./index.html">首页</a>
</li>
<li class="meun_li">
<a href="./article.html">文章</a>
</li>
<li class="meun_li">
<a href="./album.html">相册</a>
</li>
<li class="meun_li">
<a href="./essay.html">随笔</a>
</li>
<li class="meun_li level">
<a href="javascript:;">美好</a>
<ul class="level_ul">
<li class="level_li">
<a href="./glorious_01.html">亲爱的远方</a>
</li>
<li class="level_li">
<a href="./glorious_02.html">月下的花香</a>
</li>
<li class="level_li">
<a href="./glorious_03.html">星辰与深渊</a>
</li>
</ul>
</li>
<li class="meun_li">
<a href="./say.html">说说</a>
</li>
<li class="meun_li level">
<a href="javascript:;">原世界</a>
<ul class="level_ul">
<li class="level_li">
<a href="./yuanWorld_01.html">🍂 手书</a>
</li>
<li class="level_li">
<a href="./yuanworld_02.html">🍁 观测</a>
</li>
<li class="level_li">
<a href="./yuanworld_03.html">🌸 锦集</a>
</li>
</ul>
</li>
<li class="meun_li">
<a href="./aboutMe.html">关于我</a>
</li>
</ul>
</div>
</div>
</header>
<div class="picture_box">
<div class="picture_img">
<img src="./images/picture_glorious02.jpg" alt="">
</div>
<div class="picture_float"></div>
<div class="picture_box_word">
<h1 class="picture_box_word_son">
<span>月下的花香</span><br>
<div class="picture_box_word_english">fragrance of flowers under the moon</div>
</h1>
</div>
</div>
<div class="glorious_02box">
<img src="./images/picture_glorious02_03.jpg" id="toEnlargeImg01">
<img class="glorious_02box_center" src="./images/picture_glorious02_01.jpg" id="toEnlargeImg02">
<img src="./images/picture_glorious02_02.jpg" id="toEnlargeImg03">
</div>
<div class="glorious_02box">
<img src="./images/picture_glorious02_04.jpg" id="toEnlargeImg04">
<img class="glorious_02box_center" src="./images/picture_glorious02_09.jpg" id="toEnlargeImg05">
<img src="./images/picture_glorious02_05.jpg" id="toEnlargeImg06">
</div>
<div class="glorious_02box">
<img src="./images/picture_glorious02_08.jpg" id="toEnlargeImg07">
<img class="glorious_02box_center" src="./images/picture_glorious02_07.jpg" id="toEnlargeImg08">
<img src="./images/picture_glorious02_06.jpg" id="toEnlargeImg09">
</div>
<!--底部-->
<div class="font">
<div class="tip">
<span>🍁</span> <a href="#">@亦小染.</a>
<span>可叹叶飘零，归期未有期🍂</span>
</div>
</div>
</div>
<!--黑色遮罩-->
<div class="black_overlay" id="black_overlay"></div>
<!--预览容器，存放点击放大后的图片-->
<div class="enlargeContainer" id="enlargeContainer">
<!-- 关闭按钮，一个叉号图片 -->
<img src="./images/button.png" class="close" id="close">
</div>
<script>
let black_overlay = document.getElementById('black_overlay');
let enlargeContainer = document.getElementById('enlargeContainer');
let closeBtn = document.getElementById('close');
let toEnlargeImg = document.getElementById('toEnlargeImg01');
toEnlargeImg.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg02 = document.getElementById('toEnlargeImg02');
toEnlargeImg02.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg03 = document.getElementById('toEnlargeImg03');
toEnlargeImg03.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg04 = document.getElementById('toEnlargeImg04');
toEnlargeImg04.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg05 = document.getElementById('toEnlargeImg05');
toEnlargeImg05.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg06 = document.getElementById('toEnlargeImg06');
toEnlargeImg06.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg07 = document.getElementById('toEnlargeImg07');
toEnlargeImg07.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg08 = document.getElementById('toEnlargeImg08');
toEnlargeImg08.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
let toEnlargeImg09 = document.getElementById('toEnlargeImg09');
toEnlargeImg09.addEventListener('click', function () {
let imgUrl = this.src;
black_overlay.style.display = 'block';
enlargeContainer.style.display = 'block';
let img = new Image();
img.src = imgUrl;
img.classList.add('enlargePreviewImg');
if (closeBtn.nextElementSibling) {
enlargeContainer.removeChild(closeBtn.nextElementSibling);
}
enlargeContainer.appendChild(img);
});
// 关闭预览
closeBtn.addEventListener('click', function () {
black_overlay.style.display = 'none';
enlargeContainer.style.display = 'none';
});
</script>
<!--右下角动图-->
<div class="gif">
<div class="word">深山踏红叶，耳畔闻鹿鸣🍁</div>
<span class="leaf2">🍁</span>
<span class="leaf1">🍂<br> 🍂</span>
<img src="./images/picture_gif_wangye.gif" width="300" height="300">
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
