代码：
<!--* @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>
