body {
  margin: 0;
  padding: 0;
}
ul,li {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
a{
  text-decoration: none;
  color: #000;
}
header {
  background-color: #3cae41;
  color: white;
  padding: 10px 0;
  text-align: center;
}
nav {
  background-color: #333;
}
nav ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
@media (max-width: 768px) {
  nav ul {
      grid-template-columns: repeat(2, 1fr);
  }
}

h1 {
  /* 修改字体为仿宋 */
  font-weight: normal;
  /* 去掉加粗样式 */
  font-size: 25px;
  /* 假设原来的字体大小是25px，减小5px后为20px */
  letter-spacing: 5px;
  /* 增大字体间距为10px */
}
@media (max-width: 768px) {
  h1 {
    font-size: 18px;
    /* 在小屏幕上减小字体大小 */
    letter-spacing: 3px;
    /* 根据需要调整字体间距 */
  }
}
nav ul li a,
.dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
@media (max-width: 768px) {
  .dropbtn {
    padding: 10px 12px;
    /* 减小内边距 */
    font-size: 14px;
    /* 减小字体大小 */
  }
}
nav ul li a:hover,
.dropdown:hover .dropbtn , nav ul li.hover{
  background-color: #111;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  max-width: 50%;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
main,.row {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
main{
  min-height: 75vh;
}
main img{
    max-width: 100%;
    max-width: 800px;
}
.content {
  padding: 20px;
  text-align: center;
  line-height: 2;
  /* 增加行距 */
  letter-spacing: 1px;
  /* 增加字距 */
}
.content ul {
  list-style-type: none;
}
/* 删掉文章笔记中的无序圆点 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* 图片之间的间距 */
  margin: 20px auto;
  max-width: 1200px;
  width: 98%;
}
.image-gallery li {
  width: calc(33.333% - 20px);
}
.image-gallery img {
  width: 100%;
  /* 每行显示3个图片，减去间距 */
  border: 2px solid #ddd;
  /* 图片的边框 */
  border-radius: 4px;
  /* 图片的边框圆角 */
  transition: border-color 0.3s;
  /* 边框颜色过渡效果 */
}
.image-gallery img:hover {
  border-color: #5dc45f;
  /* 悬停时的边框颜色 */
}
.text-list {
  width: 1200px;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 4px;
  padding: 20px;
  box-sizing: border-box;
  transition: box-shadow 0.3s;
  /* 添加过渡效果 */
}
.text-list h2 {
  text-align: center;
  /* 居中对齐 */
}
.text-list .text {
  display: flex;
  flex-direction: column;
  /* 垂直排列每个帖子 */
  gap: 10px;
  /* 每个帖子之间的间距 */
}
.text-list .travel-post {
  border: 2px solid #ddd;
  /* 添加边框 */
  border-radius: 4px;
  /* 边框圆角 */
  margin-bottom: 10px;
  /* 底部间距 */
  transition: background-color 0.3s;
  /* 添加背景颜色过渡效果 */
}
.text-list .travel-post .post-a {
  padding: 20px;
  /* 内边距 */
  display: block;
  /*新增将超链接内边距扩大至一整个区域（display: block;此代码作用为将html中的任意元素设置为块级元素），点击此区域的空白处和点击文本出现同样的跳转效果*/
}
.text-list .travel-post:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 浅灰色投影效果 */
}
.text-list .travel-post:active {
  background-color: #929292;
  /* 点击时背景改为浅灰色 */
}
.text-list .travel-post .info {
  display: flex;
  /* 使用Flexbox布局 */
  justify-content: space-between;
  /* 摘要和时间之间的间距 */
  align-items: center;
  /* 垂直居中对齐 */
}
@media (max-width: 768px) {
  .text-list .travel-post .info {
    display: block;
  }
}
.text-list .travel-post .info p {
  margin: 0;
  /* 去除段落的默认外边距 */
  color: #666;
  text-align: left;
  /* 左对齐 */
}
.text-list .travel-post .info p.time {
  margin: 0;
  /* 去除段落的默认外边距 */
  color: #666;
  text-align: right;
  /* 右对齐 */
}
.text-list .travel-post a {
  color: #000;
  /* 原本的颜色改为黑色 */
  text-decoration: none;
  transition: color 0.2s linear;
}
.text-list .travel-post .info span {
  font-weight: bold;
  /* 字体加粗 */
  font-size: 1.05em;
  /* 字体放大0.5px */
}
.text-list .travel-post .info a:hover {
  color: #add8e6;
  /* 悬停时改为淡蓝色 */
}
.post-list {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto;
  max-width: 1200px;
  width: 98%;
  margin-bottom: 60px;
  /* 增加底部外边距，确保内容不会被页脚遮挡 */
}
.post-list .post-list-box-content {
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  width: 33.33%;
  position: relative;
  /* 添加相对定位 */
  overflow: hidden;
  /* 隐藏超出部分 */
  transition: box-shadow 0.3s;
  /* 添加过渡效果 */
}
.post-list .post-list-box-content:active {
  border-color: #55ba3e;
  /* 点击时的边框颜色 */
}
.post-list .post-list-box-content-article {
  border: 2px solid #ddd;
  border-radius: 6px 6px 8px 8px;
  box-sizing: border-box;
  transition: border-color 0.3s;
  overflow: hidden;
  /* 隐藏超出部分 */
}
.post-list .post-list-box-content-article .post-img {
  overflow: hidden;
  /* 此处代码不能删除，否则图片超出部分会显示在超链接下方 */
  padding-bottom: 100%;
  position: relative;
}
.post-list .post-list-box-content-article .post-box {
  padding: 10px;
}
.post-list .post-list-box-content-article .post-box .post-title{
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.post-list .post-list-box-content-article .post-box p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 20px;
}
.post-list .post-list-box-content-article .post-intro{
  min-height: 40px;
}
.post-list .post-list-box-content-article:active {
  border-color: #55ba3e;
  /* 点击时的边框颜色 */
}
.post-list .post-list-box-content-article a {
  display: block;

  text-decoration: none;
  color: #333;
  z-index: 2;
  /* 确保链接在图片上方 */
  position: relative;
  /* 添加相对定位 */
  /*（此处删除，在首页并不会有影响）z-inde和position: relative; 为组合代码，在这里，position: relative;确保 z-index属性能够正常工作（共生关系），若两者一同删除或者删除一方导致失效，都会导致图片超出部分在超链接上方显示，即遮盖超链接，前提是删掉上方的隐藏代码overflow: hidden;，这个效果才会显现*/
}
.post-list .post-list-box-content-article img + a {
  margin-top: 30px;
  /* 在图片底部和下方的a之间添加30px边距 */
}
.post-list .post-list-box-content-article img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in;
  /* 此处为调整动画的缓入缓出平滑效果参数函数，即为贝塞尔曲线 */
  transform-origin: center;
  /* 从中心放大 */
  position: relative;
  /* 添加相对定位 */
  z-index: 1;
  /* 确保图片在文本下方 */
  /*（此处删除，在首页并不会有影响，归功于overflow: hidden;这个代码）此处z-index和position: relative;用法和上方解释一致，不过此处删除后影响并不显著 */
  display: block;
  /* 此处用法和超链接处的解释类似，将html元素设置为块级元素显示，具体效果借鉴较为常用的块级元素<p>， <div>来进行理解*/
  position: absolute;
}
.post-list .post-list-box-content-article:hover img {
  transform: scale(1.1);
  /* 图片放大效果 */
}
@media (max-width: 960px) {
  .post-list .post {
    flex: 0 0 calc(100% - 20px);
  }
}
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}
footer a{
  color: white;
}
.pagebar {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  padding: 20px 0;
  /* 上下间距 */
}
.pagebar a {
  display: inline-block;
  padding: 10px 15px;
  /* 内边距 */
  margin: 0 5px;
  /* 按钮之间的间距 */
  color: #333;
  /* 文字颜色 */
  text-decoration: none;
  /* 去掉下划线 */
  border: 1px solid #ddd;
  /* 边框 */
  border-radius: 4px;
  /* 圆角 */
  transition: background-color 0.3s, color 0.3s;
  /* 过渡效果 */
}
.pagebar a:hover {
  background-color: #007bff;
  /* 悬停时的背景颜色 */
  color: white;
  /* 悬停时的文字颜色 */
}
.pagebar .current-page {
  padding: 10px 15px;
  /* 内边距 */
  margin: 0 5px;
  /* 按钮之间的间距 */
  color: #333;
  /* 文字颜色 */
  background-color: #f8f9fa;
  /* 背景颜色 */
  border: 1px solid #ddd;
  /* 边框 */
  border-radius: 4px;
  /* 圆角 */
  transition: background-color 0.3s, color 0.3s;
  /* 过渡效果 */
}
/*# sourceMappingURL=./style.css.map */
.post-content{
  padding: 20px;
  line-height: 2;
  letter-spacing: 1px;
}
.post-content h2{
  text-align: center;
}
.post-content h6{
  text-align: center;
}
.post-content img{
    max-width:100%;
}

.crumb{
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(221, 221, 221, 0.28);
    padding: 10px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px -2px rgba(158, 158, 158, 0.2);
    box-shadow: 0px 0px 10px -2px rgba(158, 158, 158, 0.2);
}
.crumb a{
  color: #000;
}


/************评论发表用的样式*************/
#divCommentPost{
    width:96%;
    margin:0 0 0 0;
    padding:1em 2% 1.5em 2%;
}

#divCommentPost p{margin-top:10px;}
#divCommentPost label{margin-top:5px;}

#divCommentPost p.posttop{
color:#3c6da7;
}

#divCommentPost img{margin-bottom:-0.5em;}
#cancel-reply{float:right;margin-right: 2em;}
div.reply-frm{
    background:#f0f0f0;
    box-shadow: 0 0 15px #333;
    margin:1em 1% !important;
    padding:.3em .8em !important;
    min-width:330px;
}

input.text{
border:1px solid #d7d7d7;
line-height:20px;
height:24px;
padding:2px 5px 2px 5px;
}
#txaArticle{padding:0.5em;width:98%;height:150px;border:1px solid #d7d7d7;}
input.button {color:#FFFFFF; font-size:14px; width:100px; height:32px; background:#3a6ea5; border:1px solid #3399CC;cursor: pointer;}

ul.msg{
    width:98%;
    margin:10px 0 20px 0;
    padding:5px 1% 5px 1%;
    text-align:left;
    list-style-position : outside;
    table-layout: fixed;
    word-wrap:break-word;
}

li.msgname{
    padding:0 0 0.8em 0.5em;
    margin:0px;   
    font-weight: bold;
    font-size:1em;
    border-bottom:1px dotted #eaeaea;
}

li.msgname *{

}

li.msgurl{
    text-align:right;
    padding:2px 10px 2px 10px;
    margin:0;
    font-size:1em;
}


li.msggravatar{
    display:block;
    float:left;
    margin-right:5px;
}

li.msgarticle{
    list-style-position : outside;
    padding:10px;
    margin:0;
    line-height:160%; 
    background:#FFF;
    padding-left:55px;
}
li.msgtime{
    padding:5px 0 0 0;
    font-weight: normal; 
    font-size:0.8em;
}
img.avatar{
    width:40px;
    height:40px;
    float:left;
    padding:0px 4px 4px 0px;
    border:0px solid #eaeaea;
}
ul.msg ul.msg{
    padding:10px 0 0 0;
    margin:20px 0 0 0;
    border-bottom:none;
}
ul.msg ul.msg li.msgarticle{
}   
    
    
    
.post single .post-footer{
text-align: center;
}

ul.msg ul.msg li.msgname{

}