模板:首页/中栏/图鉴导航:修订间差异

无编辑摘要
无编辑摘要
第1行: 第1行:


<div class="ptlist"><!--
<div class="nav-navigation"><!--
--><div class="ptlist-item"><!--
--><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="代理人图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--
   --></div><!--
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="邦布图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="邦布图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-邦布图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-邦布图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--  
   --></div><!--  
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank" class="ptlist-item-in-cat"><!--
--><a link="代理人图鉴" target="_blank"><!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="avatar"|link=]]<!--
     -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!--
     --></a><!--
     --></a><!--
   --></div><!--
   --></div><!--
   --><div class="ptlist-item"><!--
   --><div class="nav-item"><!--
--><a link="代理人图鉴" target="_blank"><!--
    -->[[文件:首页-导航图标-代理人图鉴.png|149px|class="img"|link=]]<!--
    --></a><!--
   --></div>
   --></div>
</div>
</div>


{{#css:
{{#css:
   .ptlist-item-in-cat {
   .nav-item {
     box-sizing: border-box; /* 确保padding和border包含在宽度和高度内 */
     width: 149px;
    height: 149px;
    overflow: hidden;
     position: relative;
     position: relative;
    z-index: 10;
     display: inline-block; /* 确保图片按行排列 */
     display: block;
     background-color: transparent; /* 初始背景色透明 */
    padding-bottom: 0.25rem; /* 根据需要调整padding */
     transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */
     background-color: #1a1a1a; /* 暗黑色背景 */
    box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */
    color: #ccc; /* 浅灰色文本 */
}
     transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* 添加平滑过渡效果 */
 
  }
.nav-item img {
 
     width: 100%;
  .ptlist-item-in-cat::after {
     height: 100%;
    content: '';
     transition: transform 0.5s ease, opacity 0.5s ease;
     width: 100%; /* 调整为100%以填满容器 */
     opacity: 0.8; /* 初始透明度 */
     height: 100%; /* 调整为100%以填满容器 */
}
     position: absolute;
 
    left: 0; /* 调整为0 */
.nav-item:hover {
    top: 0; /* 调整为0 */
     background-color: #bad700; /* 鼠标悬停时背景色变化 */
     transition: border-color 0.3s ease-in-out; /* 添加边框颜色过渡 */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  }
}
 
 
  .ptlist-item-in-cat:hover {
.nav-item:hover img {
     background-color: rgba(186,215,0,1); /* 鼠标悬浮时背景颜色变亮 */
    transform: scale(1.05); /* 轻微放大 */
     color: #fff; /* 鼠标悬浮时文本颜色变为白色 */
     opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */
  }
}
 
  .ptlist-item-in-cat:hover::after {
     border-color: #555; /* 鼠标悬浮时边框颜色变亮 */
  }
 


}}
}}

2024年6月3日 (一) 00:32的版本