修改了导航样式

最新推荐文章于 2024-07-21 12:40:56 发布
最新推荐文章于 2024-07-21 12:40:56 发布
阅读量207 收藏
点赞数 2
文章标签： tensorflow 人工智能 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/138934667
版权

首页html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="beiwanglu" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\index.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_logo.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_time.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_right.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_content.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\input_checkbox.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_left.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_menu.css">

  <title>与妖为邻备忘录</title>
</head>
<body>
  <!--  -->
  <div id="div" style="width:100vw;height:100vh;">
    <div id="div_top" style="width:100vw;height:8vh;">
      <!--  -->
      <div id="div_top_logo" style="width:8vw;height:8vh;float:left">
        <div>
          <img src="file:///D:\My homepage\beiwanglu\img\kong.jpg" alt="与妖为邻">
          <h2 class="my_name">与妖为邻</h2>
          <h2 class="memo">备忘录</h2>
        </div>
      </div>
      <!--  -->
      <div id="div_top_menu" style="width:41.9vw;height:8vh;float:left">
        <label class="switch">
          <input type="checkbox" checked="checked">
          <div class="button">
            <div class="light">首页</div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
          <a href="D:\My homepage\beiwanglu\html\网站.html">网站</a>
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
          <a href="D:\My homepage\beiwanglu\html\学习.html">学习</a>
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
          <a href="D:\My homepage\beiwanglu\html\关于.html">关于</a>
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
      </div>
      <!--  -->
      <div id="div_top_time" style="width:42vw;height:8vh;float:left">
        <div id="current_time">当前时间</div>
      </div>
      <!--  -->
      <div id="div_top_right" style="width:8vw;height:8vh;float:right">
        <span class="update_summary">第25次（0.5.0）更新</span>
        <div class="css_summary_collapse">
          <div class="update_notes">
            <p>第25次（0.5.0）更新：重新布局，样式和脚本分开</p>
          </div>
        </div>
      </div>
      <!--  -->
    </div>
    <!--  -->
    <div id="div_left" style="width:8vw;height:89.5vh;float:left;">
      <div>
        <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown"
          class="background3D" />
        <button id="delete">对选择进行删除</button>
      </div>
    </div>
    <div id="div_content" style="width:84vw;float:left;">
      <sub style="background-color:#67C23A;color:#FFFFFF;">首页页面 <form id="myForm">
          <textarea class="up-textarea" name="uptextarea" placeholder="选择本地txt、js、css或html文件，文件内容会被自动读取"></textarea>
          <button type="text" class="abb-text">添加</button>
          <input type="reset" value="重置">
        </form></sub>
      <div class="memo_content_area" id="memo">
      </div>
    </div>
    <div id="div_right" style="color:#FFFFFF;width:8vw;height:89vh;float:right;">
      首页页面
    </div>
    <div id="div_both"
      style="background-color:#a93712;color:#FFFFFF;width:100vw;height:2vh;clear:both;text-align:center;">
      作者：与妖为邻
    </div>
  </div>
</body>
<script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\time.js"></script>
<script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\div_content_todotext.js"></script>
</html>

 导航样式：div_top_menu.css

#div_top_menu {
  display: flex;
  transform: translate(20%, 20%);
  gap: 20px;
}
.switch {
  width: 90px;
  height: 45px;
  perspective: 700px;
  a {
    position: absolute;
    display: block;
    transform: translate(15%, 0%);
    z-index: 10;
    /* 文本居中 */
    text-align: center;
    font-size: 33px;
    color: #ffffff71;
    /* 字体模糊 */
    filter: blur(1px);
  }
}
.switch input {
  display: none;
}
.switch input:checked + .button {
  box-shadow: 0 0px 20px #ff1818;
}
.switch input:checked + .button .light {
  animation: flicker 0.2s infinite 0.3s;
}
.switch input:checked + .button .shine {
  opacity: 1;
}
.switch input:checked + .button .shadow {
  opacity: 0;
}
.switch .button {
  display: block;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);

  border-radius: 10px;
  transform-style: preserve-3d;
  background-color: #9b0621;
  height: 100%;
  position: relative;
  cursor: pointer;
  background-repeat: no-repeat;
}
.switch .light {
  border-radius: 10px;
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#e6fa00, #ff1818 40%, transparent 70%);
  color: #ffffff;
  text-shadow: 1px 1px 1px #ff0000;
  text-align: center;
  font-size: 33px;
  /* 粗体字; */
  font-weight: bold;
}
.switch .dots {
  border-radius: 10px;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 50%, rgba(100, 0, 0, 0.7) 70%);
  background-size: 5px 5px;
}
.switch .shine {
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
    linear-gradient(
        rgba(255, 255, 255, 0.5),
        transparent 50%,
        transparent 80%,
        rgba(255, 255, 255, 0.5)
      )
      50% 50%/97% 97%;
  background-repeat: no-repeat;
}
@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

关于页面：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="beiwanglu" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\index.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_logo.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_menu.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_time.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_top_right.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_content.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\input_checkbox.css">
  <link rel="stylesheet" type="text/css" href="file:///D:\My homepage\beiwanglu\style\div_left.css">


  <title>与妖为邻备忘录</title>
  <style>
    body {
      color: #FFFFFF;
    }

    span {
      color: #8ab2efef;
      text-shadow: 1px 1px 2px #000000;
    }

    span {
      font-weight: bold;
    }

    a {
      text-decoration: none;
      color: hsla(160, 100%, 37%, 1);
      transition: 0.4s;
      padding: 3px;

      a:hover {
        background-color: hsla(160, 100%, 37%, 0.2);
      }
    }
  </style>
</head>

<body>
  <div id="div" style="width:100vw;height:100vh;">
    <div id="div_top" style="width:100vw;height:8vh;">
      <div id="div_top_logo" style="width:8vw;height:8vh;float:left">
        <div>
          <img src="file:///D:\My homepage\beiwanglu\img\kong.jpg" alt="与妖为邻">
          <h2 class="my_name">与妖为邻</h2>
          <h2 class="memo">备忘录</h2>
        </div>
      </div>
   
       <!--  -->
       <div id="div_top_menu" style="width:41.9vw;height:8vh;float:left">
        <label class="switch">
          <a href="C:\Users\90917\Desktop\备忘录.html">首页</a>
         
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
          <a href="D:\My homepage\beiwanglu\html\网站.html">网站</a>
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
          <a href="D:\My homepage\beiwanglu\html\学习.html">学习</a>
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
        <label class="switch">
        
          <input type="checkbox" checked="checked">
          <div class="button">
            <div class="light">关于</div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></a></div>
            <div class="shadow"></div>
          </div>
        </label>
      </div>
      <!--  -->

      <div id="div_top_time" style="width:42vw;height:8vh;float:left">
        <div id="current_time">当前时间</div>
      </div>
      <div id="div_top_right" style="width:8vw;height:8vh;float:right">
        <span class="update_summary">第25次（0.5.0）更新</span>
        <div class="css_summary_collapse">
          <div class="update_notes">
            <p>第25次（0.5.0）更新：重新布局，样式和脚本分开</p>
          </div>
        </div>
      </div>
    </div>
    <div id="div_left" style="width:8vw;height:89.5vh;float:left;">
      <div>

       
      </div>

    </div>
    <div id="div_content" style="width:84vw;float:left;">
      <sub style="background-color:#67C23A;color:#FFFFFF;">关于页面 
      </sub>
      <h1>这是一个关于页面</h1>
      <hr><span>文档</span><br>
      Vue 的
      <a href="https://vuejs.org/" target="_blank" rel="noopener">官方文档</a>
      为我提供了入门所需的所有信息。



      <hr><span>工具</span><br>

      此项目由
      <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>提供并捆绑。
      建议的 IDE 设置是
      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>。
      如果我需要测试我的组件和网页，就查看
      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> 和
      <a href="https://on.cypress.io/component" target="_blank" rel="noopener">Cypress 组件测试</a>。

      <br />

      更多说明可在<code>README.md</code> 中找到 。



      <hr><span>生态系统</span><br>

      获取项目的官方工具和库：
      <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
      <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, 和
      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>。
      如果我需要更多资源，他们建议我访问
      <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
      。
      <hr><span>社区</span><br>

      卡住了？在他们的官方 Discord 服务器
      <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>或
      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener">StackOverflow</a>.
      上提出我的问题。我还应该订阅
      <a href="https://news.vuejs.org" target="_blank" rel="noopener">他们的邮件列表</a> and
      并关注官方
      <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
      twitter帐户，了解 Vue 世界的最新消息。


      <hr><span>支持 Vue</span><br>
      作为一个独立项目，Vue 的可持续性依赖于社区的支持。我可以通过


      <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">成为赞助商</a>来帮助他们。

    </div>
 
  <div id="div_right" style="color:#FFFFFF;width:8vw;height:89vh;float:right;">
    关于页面
  </div>
  <div id="div_both"
    style="background-color:#a93712;color:#FFFFFF;width:100vw;height:2vh;clear:both;text-align:center;">
    作者：与妖为邻
  </div>
  </div>
</body>

<script type="text/javascript" src="file:///D:\My homepage\beiwanglu\stores\time.js"></script>


</html>

与妖为邻
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css修改导航条样式
different9102的博客
10-12 933
css修改导航条样式 近期由于工作需要要修改table表格导航条样式。 本人特整理出相关代码，以及最后效果，供各位小伙伴参考。 具体代码如下： .xp-table-content ::-webkit-scrollbar { width:8px; height: 8px; } .xp-table-content ::-webkit-scrollbar-thumb:horizontal { border-radius:10px; background:rgba(0,0,0,0.
wordpress自定义菜单导航样式
程序员
08-19 1265
wp虽然已经给我们提供了菜单调用的方法，但是这种方法太过死板，ul li 都是写死的，没有办法如自己定义样式。在我们做主题开发或者仿站的时候，菜单样式不一定是ul li层级，也有可能是div层级或者的tr td层级，网上找了很久，都没有找到wordpress自定义菜单导航样式的方法，打大部分都讲的是默认的方法，哪怎么办呢？经过了我的一番摸索办法总算是想出来了，那就是分类与单页组合成菜单导航，具体代码如下。 1、顶级分类栏目与顶级单页组合-自定义菜单导航样式 获取顶级分类目录 <?php $te
Android 修改导航栏样式
qq_27494201的博客
08-24 1413
为true会有灰色阴影，若为false才能完全透明。
修改了vue3导航样式
lulei5153的博客
05-11 204
【代码】修改了vue3导航样式。
Elementui 左侧导航栏样式修改
Qi96224的博客
12-12 776
【代码实现】Elementui 左侧导航栏样式修改。
TensorFlow 1.12函数和注释
kinkinhe的博客
07-19 337
TensorFlow 1.12常用函数和注释，发出来方便检索学习
【眼疾病识别】图像识别+深度学习技术+人工智能+卷积神经网络算法+计算机课设+Python+TensorFlow
子午的博客
07-13 656
眼疾识别系统，使用Python作为主要编程语言进行开发，基于深度学习等技术使用TensorFlow搭建ResNet50卷积神经网络算法，通过对眼疾图片4种数据集进行训练（‘白内障’, ‘糖尿病性视网膜病变’, ‘青光眼’, ‘正常’），最终得到一个识别精确度较高的模型。然后使用Django框架开发Web网页端可视化操作界面，实现用户上传一张眼疾图片识别其名称。
昇思25天学习打卡营第14天|LLM-文本解码原理--以MindNLP为例
wwt72的博客
07-17 825
限制输出序列的最大长度为50个token。top-p=0.95，top-p采样表示在每一步生成token时，只从概率分布中累计概率达到95%的token中进行采样，有助于保持生成文本的流畅性和质量，同时允许一些低概率的token被选中，从而增加多样性。表示禁用了top-k采样，因为在top-k采样中，通常是从概率最高的k个token中随机选择一个token作为下一个输出，而这里设置为0表示不限制token的选择，实际上这将等同于使用 softmax 概率分布直接进行采样。这有助于提高生成文本的多样性。
python训练模型报错：BrokenPipeError: [Errno 32] Broken pipe
Dxy1239310216的博客
07-18 435
如果问题持续存在，并且你的项目不是必须在 Windows 上运行，考虑在 Unix/Linux 系统上运行你的代码。确保在数据加载器中使用的任何自定义函数或类都是可序列化的，因为多进程需要能够在不同进程间传递它们。进行多进程数据加载时尤其常见，尤其是在 Windows 系统上，因为 Windows 对多进程的支持与 Unix/Linux 系统有所不同。有时候，错误可能是由其他部分的代码引起的，而不是直接由数据加载器引起。如果问题依然存在，你可能需要更详细地检查你的代码或寻求更专业的帮助。
ChaosMeta for AI：混沌工程让AI稳定性更上一层楼
samson
07-18 595
混沌工程的核心思想是“通过在真实环境中引入故障，评估和提升系统的稳定性”。在实际应用中，这意味着通过故意制造各种错误和故障，观察系统的表现，从而找出和修复系统的脆弱点。随着AI系统逐渐成为现代技术的支柱，混沌工程的应用范围也在不断扩展。输出内容：模拟历史已发生的故障，如输出乱码，通过注入代码篡改故障，检验系统的容错能力，确保终端用户看到的是稳定可用的内容。任意代码篡改：模拟意外代码修改对输出的影响。输入内容：通过对抗性样本测试，确保模型的合规合法，符合伦理道德标准。
自动驾驶系列—智能巡航辅助功能中的车道变换功能介绍
u013889591的专栏
07-17 1106
在现代智能驾驶技术中，智能巡航辅助的车道变换功能是提高驾驶安全性和便利性的关键特性。该功能通过摄像头、传感器和高级算法，使车辆能够在驾驶员的指令下安全地进行车道变换。本文将详细介绍车道变换功能，从背景、功能定义、原理、传感器架构、实际应用案例以及总结与展望几个方面进行阐述。智能巡航辅助功能介绍。随着自动驾驶技术的快速发展，车道变换功能已成为智能驾驶系统中的重要组成部分。
大模型日报 2024-07-20
最新发布
weixin_40262196的博客
07-21 412
OpenAI发布了针对应用开发者的GPT-4o mini模型，取代了旧版的GPT-3.5模型。: 研究开发了一个基于游戏Baba Is You的新基准，测试了三种多模态大型语言模型，发现它们在需要操控和组合游戏规则时表现不佳。: 谷歌AI发布了一篇关于FLAMe的论文，这是一种基础大型自动评估模型，旨在为复杂多样的大型语言模型提供可靠且高效的评估方法。: 研究表明，通过Prover-Verifier游戏训练算法，提升了大语言模型在解决数学问题时的输出可读性和人类验证准确率。
基于深度学习的故障检测
weixin_42605076的博客
07-20 651
基于深度学习的故障检测是一项利用深度学习技术对设备、系统和结构的运行数据进行分析，以检测、识别和预测潜在故障的技术。其应用范围广泛，包括工业设备监控、制造系统故障检测、交通系统安全监测等。
机器学习数据集的一致性表现在哪些方面-九五小庞
qq_37241964的博客
07-19 344
总结而言，确保数据集的一致性是提高模型效果和泛化能力的关键。通过综合检查特征分布、数据规律、时间因素、分布式环境和神经网络特征表达的一致性，可以全面评估和保障数据集的一致性。这不仅有助于提升模型的性能，也为后续的特征工程和模型优化提供了坚实的基础。
YoloV8改进策略：卷积篇|Kan行天下之ReluKan
m0_47867638的博客
07-20 346
本文介绍了一种名为ReLU-KAN的新型架构，该架构使用新型基础函数替换了KAN中的B样条。此外，ReLU-KAN实现了全矩阵运算，显著提高了训练速度。实验结果表明，ReLU-KAN在训练速度、拟合能力和稳定性方面均优于KAN。在未来的工作中，我们计划将ReLU-KAN应用于卷积和Transformer架构中，以研究其在不牺牲模型性能的情况下减少参数的潜力。
上海昇腾AI训练营笔记
嵌入式点灯砖家的博客
07-18 989
Ascend C系列AI处理器适用于计算力需求较低的场景，如智能监控、边缘计算等。提供多种精简模式和高性能模式，满足不同应用场景下的性能要求。支持全场景覆盖，既可以部署在云端也可以部署在端侧。
数据挖掘与分析部分实验内容
m0_74972727的博客
07-18 1051
通过对样本数据的离散图可以判断，呈线性规律变化，因此可以建立一个线性模型，即 ，把该线性模型定义为一个简单的类，里面封装了变量和计算，变量设置用tf.Variable()。#定义模型class LineModel(object): # 定义一个LineModel的类# 初始化变量def __call__(self, x): #定义返回值def train(self, x, y, learning_rate): #定义训练函数。
《电脑知识与技术》是什么级别的期刊？是正规期刊？能评职称吗？
2301_81053900的博客
07-18 586
是一本面向计算机全行业的综合性学术刊物。编委委员均来自国内各著名高校的教授和博士生导师，他们是我国计算机科学领域方面的专家、学者和权威人士；主要面向高等院校、各公共图书馆、情报所（室）、研究所以及厂矿的科技工作者、科学研究人员、广大教师、研究生、博士生。7、来稿请注明姓名、性别、籍贯、出生年月、学历、职称、工作单位、联系电话、详细邮寄地址。10、若不能被录用，恕不退稿，请作者自留底稿，不同意上述稿件处理方式的作者请转投他刊。3、题目下面均应写作者姓名、单位名称、所在城市、邮编，多位作者分别列出上述信息。
【附源码】Python ：人脸实时检测与抓捕
脱发快乐中
07-17 237
使用Python和OpenCV检测人脸是一个常见的计算机视觉任务。本文代码将打开你的摄像头，并在窗口中显示实时视频流，同时在检测到的人脸上绘制矩形框。按’q’键可以退出程序。
uniapp 底部导航样式
09-15
uniapp底部导航样式可以通过CSS来定义。根据你提供的引用内容，你可以使用以下样式来定义uniapp底部导航： 1. 首先，在`<style scoped>`标签中定义`.TabBar`类，这个类是用来设置整个底部导航的样式。可以使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值