一个HTML页面demo
代码：
<!-- * @Description: 一个博客页面布局，加上一些CSS和JS样式 * @Author: zhangyh * @Date: 2024-06-29 15:25:16 * @LastEditTime: 2024-06-29 23:06:12 * @LastEditors: zhangyh * Copyright (c) 2024 by zhangyinghui181217@163.com, All Rights Reserved. --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script> <style> .card { margin-top: 20px; margin-bottom: 20px; /* box-shadow: 0 .1rem 0.1rem rgba(0,0,0,.15)!important; */ box-shadow: 0 0 .6rem 0 #d0d0d0; /* 卡片阴影 */ } .navbar { box-shadow: 0 0 .6rem 0 #d0d0d0 /* 导航阴影 */ } .card .card-header { font-size: 12px; padding-left: 15px; padding-top: 5px; padding-bottom: 5px; } .card .card-body p, ul, li { font-size: 13px; } .card .card-body { padding: 15px; } .navbar .container-md .form-inline input { font-size: 15px; } .tagcloud { font-weight: 100; padding-top: 0; padding-bottom: 0; font-size: 12px; } .info_card_area { position: sticky; top: 80px; } .content-container { padding-top: 80px; } .avatar-card { padding-top: 20px; padding-bottom: 20px; } .article-card h6 { transition: transform 0.3s ease-in-out; } .article-card h6:hover { transform: translateX(10px); cursor: pointer; color: #007bff; } .card-avatar img { box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5); transition: transform 0.5s ease-in-out; } .card-avatar img:hover { transform: translateY(-10px); } .card .card-body .blockquote a { box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5); } /* .article-card-container { transition: transform 0.3s ease-in-out; } .article-card-container:hover { transform: translateY(-10px); } */ /* 搜索框样式 */ .navbar .form-control { height: 1.7rem; /* 减小高度 */ padding: 0.375rem 0.75rem; /* 根据高度调整内边距 */ font-size: 0.5rem; /* 根据需要调整字体大小 */ border-radius: 0.7rem; /* 根据高度调整圆角大小 */ flex-grow: 1; } /* 搜索按钮样式 */ .navbar .btn-primary { height: 1.7rem; /* 减小高度 */ padding: 0 1rem; /* 根据高度调整内边距，水平方向可以根据需要调整 */ font-size: 0.875rem; /* 根据需要调整字体大小 */ border-radius: 1rem; /* 根据高度调整圆角大小 */ line-height: 1; /* 确保文本在按钮内垂直居中 */ } /* 确保按钮和输入框在同一行内垂直居中 */ .navbar .form-inline { align-items: center; } /* 按钮悬停效果 */ .navbar .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } /* 加载提示样式 */ #loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10000; /* 确保层叠上下文中的最高层 */ } .loading-content { text-align: center; font-size: 16px; color: #333; } /* 回到顶部按钮样式 */ #back-to-top { position: fixed; bottom: 20px; /* 距离底部的位置 */ right: 20px; /* 距离右侧的位置 */ background-color: #007bff; /* 按钮背景色 */ color: white; /* 文字颜色 */ border: none; /* 无边框 */ cursor: pointer; border-radius: 50%; /* 圆形按钮 */ width: 50px; /* 按钮宽度 */ height: 50px; /* 按钮高度 */ display: none; /* 初始时不显示 */ z-index: 9999; /* 确保按钮在页面其他元素之上 */ } #back-to-top:hover { background-color: #0056b3; /* 鼠标悬停时的背景色 */ } /* 分页样式美化，仅保留文字 */ .pagination { display: flex; justify-content: center; /* 分页按钮水平居中 */ margin-top: 30px; /* 分页与内容之间的间距 */ list-style-type: none; /* 移除列表项的默认样式 */ } .pagination .page-item { margin: 0 5px; /* 按钮之间的间距 */ } .pagination .page-item .page-link { padding: 10px 15px; /* 按钮内边距 */ color: #007bff; /* 字体颜色 */ background: none; /* 无背景色 */ border: none; /* 无边框 */ outline: none; /* 点击时不显示轮廓 */ text-decoration: none; /* 移除下划线 */ transition: color 0.3s, transform 0.3s; /* 平滑过渡效果 */ } .pagination .page-item .page-link:hover { color: #0056b3; /* 鼠标悬停时的字体颜色 */ transform: scale(1.1); /* 鼠标悬停时放大 */ } .pagination .page-item.active .page-link { font-weight: bold; /* 加粗当前激活页的字体 */ color: #333; /* 当前激活页的字体颜色 */ } .pagination .page-item.disabled .page-link { color: #6c757d; /* 禁用状态的字体颜色 */ cursor: not-allowed; /* 禁用状态的鼠标样式 */ } /* 定义卡片加载动画 */ /* 卡片初始状态 */ .card { opacity: 0; transform: translateY(-50px); /* 初始状态稍微向上偏移 */ transition: opacity 1s ease, transform 3s ease; /* 平滑过渡效果 */ } /* 卡片动画触发后的状态 */ .card.show { opacity: 1; transform: translateY(0); /* 动画结束状态在原始位置 */ } </style> </head> <body> <!-- 导航栏 --> <div> <nav class="navbar fixed-top bg-white"> <div class="container-md"> <a class="navbar-brand" href="">MySite</a> <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="搜索..." aria-label="Search"> <button class="btn btn-primary my-2 my-sm-0" type="submit">搜索</button> </form> </div> </nav> </div> <!-- 内容 --> <div class="container-md content-container"> <div class="row"> <div class="col-sm-12"> </div> </div> <div class="row"> <!-- 左侧列 --> <div class="col-sm-2"> <div class="info_card_area"> <!-- 卡片 --> <div class="card avatar-card" style="display: inline-block;"> <div class="card-avatar" style="display: flex; justify-content: center; align-items: center;"> <img src="avator.jpg" class="rounded-circle" style="width: 80px; height: 80px; object-fit: cover;" alt="Avatar"> </div> <div class="card-body text-center"> <h5 class="card-title">悟空孙</h5> <p class="card-text">我是从东土大唐来的，是唐僧的土地之一，主要职责是打妖怪</p> </div> </div> </div> </div> <!-- 中间列 --> <div class="col-sm-7"> <!-- 卡片 --> <div class="card article-card-container"> <div class="card-body article-card"> <h6 class="card-title">Special title treatment</h6> <p class="card-text"> With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. </p> <a href="#" class="btn-sm btn-link font-weight-light">查看详情</a> </div> </div> <div class="card article-card-container"> <div class="card-body article-card"> <h6 class="card-title">Special title treatment</h6> <p class="card-text"> With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. </p> <a href="#" class="btn-sm btn-link font-weight-light">查看详情</a> </div> </div> <div class="card article-card-container"> <div class="card-body article-card"> <h6 class="card-title">Special title treatment</h6> <p class="card-text"> With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. </p> <a href="#" class="btn-sm btn-link font-weight-light">查看详情</a> </div> </div> <!-- 分页 --> <div> <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled"> <a class="page-link"> <!-- 上一页按钮图标 --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/> </svg> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#"> <!-- 下一页按钮图标 --> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </svg> </a> </li> </ul> </nav> </div> </div> <!-- 右侧列 --> <div class="col-sm-3"> <div class="info_card_area"> <!-- 卡片 --> <div class="card"> <div class="card-header bg-white"> 最新文章 </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <dl> <li>Python学习记录</li> <li>numpy的用法</li> <li>Java的用法总结</li> </dl> </blockquote> </div> </div> <div class="card"> <div class="card-header bg-white"> 最新评论 </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <dl> <li>Python学习记录</li> <li>numpy的用法</li> <li>Java的用法总结</li> </dl> </blockquote> </div> </div> <div class="card"> <div class="card-header bg-white"> 标签云 </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <a href="#" class="tagcloud btn btn-sm btn-primary">Java</a> <a href="#" class="tagcloud btn btn-sm btn-dark">python</a> <a href="#" class="tagcloud btn btn-sm btn-warning">云计算</a> <a href="#" class="tagcloud btn btn-sm btn-light">卷积神经网络</a> <a href="#" class="tagcloud btn btn-sm btn-primary">Java</a> <a href="#" class="tagcloud btn btn-sm btn-success">python</a> <a href="#" class="tagcloud btn btn-sm btn-warning">云计算</a> <a href="#" class="tagcloud btn btn-sm btn-secondary">卷积神经网络</a> <a href="#" class="tagcloud btn btn-sm btn-primary">Java</a> <a href="#" class="tagcloud btn btn-sm btn-info">python</a> <a href="#" class="tagcloud btn btn-sm btn-danger">云计算</a> </blockquote> </div> </div> <div class="card"> <div class="card-header bg-white"> 友情链接 </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <dl> <li>Python学习记录</li> <li>numpy的用法</li> <li>Java的用法总结</li> </dl> </blockquote> </div> </div> </div> </div> </div> </div> <!-- 页面加载中... --> <div id="loading-overlay"> <div class="loading-content"> <div class="d-flex justify-content-center"> <div class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="sr-only">Loading...</span> </div> <div class="spinner-border text-success" role="status"> <span class="sr-only">Loading...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="sr-only">Loading...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="sr-only">Loading...</span> </div> <div class="spinner-border text-info" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> </div> <!-- 回到顶部图标 --> <button id="back-to-top" title="回到顶部">↑</button> <!-- ================================= JavaScript ================================== --> <script> // 提示页面加载中 // 确保页面完全加载后再隐藏加载提示 window.addEventListener('load', (event) => { document.getElementById('loading-overlay').style.display = 'none'; }); // 回到顶部功能 window.addEventListener('scroll', function() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > 100) { // 当页面滚动超过100像素时显示按钮 document.getElementById('back-to-top').style.display = 'block'; } else { document.getElementById('back-to-top').style.display = 'none'; } }); // 点击按钮回到页面顶部 document.getElementById('back-to-top').addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' // 平滑滚动 }); }); // 加载动画 渐渐显示卡片 document.addEventListener('DOMContentLoaded', function() { // 获取所有卡片元素 var cards = document.querySelectorAll('.card'); // 等待页面加载完成后，同时触发所有卡片的动画 setTimeout(function() { cards.forEach(function(card) { card.classList.add('show'); // 触发动画 }); }, 100); // 可以设置一个短暂的延迟以避免闪烁 }); </script> </body> </html>
