我来为您创建一个优雅的博雅网页，采用现代设计风格，包含完整的导航、文章展示、侧边栏等功能。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">博雅 - 分享生活，记录思考</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--accent-color: #e74c3c;
--text-color: #333;
--light-gray: #f8f9fa;
--border-color: #e0e0e0;
--shadow: 0 2px 10px rgba(0,0,0,0.1);
--transition: all 0.3s ease;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: #fff;
}
/* 导航栏 */
header {
background-color: #fff;
box-shadow: var(--shadow);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: var(--transition);
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.logo i {
color: var(--secondary-color);
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav-links a:hover {
color: var(--secondary-color);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--secondary-color);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.search-box {
position: relative;
}
.search-box input {
padding: 0.5rem 2.5rem 0.5rem 1rem;
border: 1px solid var(--border-color);
border-radius: 25px;
outline: none;
transition: var(--transition);
width: 200px;
}
.search-box input:focus {
border-color: var(--secondary-color);
width: 250px;
}
.search-box i {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
/* 主要内容区域 */
main {
max-width: 1200px;
margin: 5rem auto 2rem;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
}
/* 文章列表 */
.article-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.article-card {
background-color: #fff;
border-radius: 10px;
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
cursor: pointer;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.article-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.article-title {
font-size: 1.5rem;
color: var(--primary-color);
text-decoration: none;
margin-bottom: 0.5rem;
display: block;
transition: var(--transition);
}
.article-title:hover {
color: var(--secondary-color);
}
.article-meta {
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: #666;
}
.article-meta span {
display: flex;
align-items: center;
gap: 0.3rem;
}
.article-content {
color: #555;
line-height: 1.8;
margin-bottom: 1rem;
}
.article-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag {
background-color: var(--light-gray);
color: var(--primary-color);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.85rem;
text-decoration: none;
transition: var(--transition);
}
.tag:hover {
background-color: var(--secondary-color);
color: #fff;
}
/* 侧边栏 */
.sidebar {
position: sticky;
top: 6rem;
height: fit-content;
}
.sidebar-section {
background-color: #fff;
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: var(--shadow);
}
.sidebar-title {
font-size: 1.2rem;
color: var(--primary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.about-me {
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 1rem;
object-fit: cover;
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--light-gray);
border-radius: 50%;
color: var(--primary-color);
transition: var(--transition);
}
.social-links a:hover {
background-color: var(--secondary-color);
color: #fff;
transform: translateY(-3px);
}
.category-list {
list-style: none;
}
.category-list li {
padding: 0.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.category-list li:last-child {
border-bottom: none;
}
.category-list a {
color: var(--text-color);
text-decoration: none;
transition: var(--transition);
}
.category-list a:hover {
color: var(--secondary-color);
}
.category-count {
background-color: var(--light-gray);
padding: 0.2rem 0.5rem;
border-radius: 15px;
font-size: 0.85rem;
}
/* 页脚 */
footer {
background-color: var(--primary-color);
color: #fff;
text-align: center;
padding: 2rem;
margin-top: 4rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
display: none;
}
main {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
.article-card {
padding: 1.5rem;
}
}
/* 加载动画 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.article-card {
animation: fadeIn 0.6s ease-out;
}
/* 返回顶部按钮 */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background-color: var(--secondary-color);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: var(--shadow);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--primary-color);
transform: translateY(-5px);
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<a href="#" class="logo">
<i class="fas fa-feather-alt"></i>
博雅
</a>
<ul class="nav-links">
<li><a href="#home">首页</a></li>
<li><a href="#articles">文章</a></li>
<li><a href="#about">lt;/a></li>
<li><a href="#contact">联系</a></li>
<li>
<div class="search-box">
<input type="text" placeholder="搜索文章...">
<i class="fas fa-search"></i>
</div>
</li>
</ul>
</nav>
</header>
<!-- 主要内容 -->
<main>
<!-- 文章列表 -->
<section class="article-list">
<article class="article-card">
<div class="article-header">
<div>
<a href="#" class="article-title">探索前端开发的无限可能</a>
<div class="article-meta">
<span><i class="far fa-calendar"></i> 2025年1月15日</span>
<span><i class="far fa-user"></i> 博雅</span>
<span><i class="far fa-eye"></i> 1,234 阅读</span>
</div>
</div>
</div>
<div class="article-content">
在这个快速发展的数字时代，前端开发已经成为连接用户与产品的重要桥梁，从最初的HTML、CSS到现在的React、Vue等现代框架，前端技术不断演进，为开发者提供了更多的可能性，本文将深入探讨前端开发的最新趋势，以及如何利用这些技术创造出色的用户体验...
</div>
<div class="article-tags">
<a href="#" class="tag">前端开发</a>
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">React</a>
<a href="#" class="tag">用户体验</a>
</div>
</article>
<article class="article-card">
<div class="article-header">
<div>
<a href="#" class="article-title">优雅的CSS设计技巧</a>
<div class="article-meta">
<span><i class="far fa-calendar"></i> 2025年1月10日</span>
<span><i class="far fa-user"></i> 博雅</span>
<span><i class="far fa-eye"></i> 987 阅读</span>
</div>
</div>
</div>
<div class="article-content">
CSS不仅仅是样式表，更是设计语言，通过巧妙运用CSS的各种特性，我们可以创建出令人惊叹的视觉效果，从Flexbox和Grid布局到动画和过渡效果，CSS为我们提供了强大的工具，我将分享一些实用的CSS设计技巧，帮助你的网站更加优雅和专业...
</div>
<div class="article-tags">
<a href="#" class="tag">CSS</a>
<a href="#" class="tag">设计</a>
<a href="#" class="tag">前端</a>
<a href="#" class="tag">技巧</a>
</div>
</article>
<article class="article-card">
<div class="article-header">
<div>
<a href="#" class="article-title">编程思维：如何写出优雅的代码</a>
<div class="article-meta">
<span><i class="far fa-calendar"></i> 2025年1月5日</span>
<span><i class="far fa-user"></i> 博雅</span>
<span><i class="far fa-eye"></i> 1,567 阅读</span>
</div>
</div>
</div>
<div class="article-content">
优雅的代码不仅能让程序运行更高效，也能让其他开发者更容易理解和维护，编程思维是一种艺术，它需要我们不断学习和实践，在这篇文章中，我将分享一些关于如何写出优雅代码的见解，包括代码结构、命名规范、错误处理等方面的最佳实践...
</div>
<div class="article-tags">
<a href="#" class="tag">编程</a>
<a href="#" class="tag">代码质量</a>
<a href="#" class="tag">最佳实践</a>
<a href="#" class="tag">思维</a>
</div>
</article>
<article class="article-card">
<div class="article-header">
<div>
<a href="#" class="article-title">响应式设计：适配所有设备</a>
<div class="article-meta">
<span><i class="far fa-calendar"></i> 2025年12月28日</span>
<span><i class="far fa-user"></i> 博雅</span>
<span><i class="far fa-eye"></i> 2,345 阅读</span>
</div>
</div>
</div>
<div class="article-content">
随着移动设备的普及，响应式设计已经成为现代网页开发的必备技能，一个优秀的响应式设计不仅要考虑不同屏幕尺寸的适配，还要关注用户体验的一致性，本文将详细介绍响应式设计的核心概念、常用技术和实现方法，帮助你创建真正适配所有设备的网站...
</div>
<div class="article-tags">
<a href="#" class="tag">响应式设计</a>
<a href="#" class="tag">移动端</a>
<a href="#" class="tag">Web开发</a>
<a href="#" class="tag">用户体验</a>
</div>
</article>
</section>
<!-- 侧边栏 -->
<aside class="sidebar">
<!-- 关于我 -->
<div class="sidebar-section about-me">
<h3 class="sidebar-title">
<i class="fas fa-user-circle"></i>
关于我
</h3>
<img src="https://picsum.photos/seed/author/100/100" alt="作者头像" class="avatar">
<p style="margin-bottom: 1rem;">热爱生活，喜欢分享的前端开发者</p>
<div class="social-links">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-weibo"></i></a>
</div>
</div>
<!-- 分类 -->
<div class="sidebar-section">
<h3 class="sidebar-title">
<i class="fas fa-folder"></i>
文章分类
</h3>
<ul class="category-list">
<li>
<a href="#">前端开发</a>
<span class="category-count">15</span>
</li>
<li>
<a href="#">后端技术</a>
<span class="category-count">8</span>
</li>
<li>
<a href="#">设计思考</a>
<span class="category-count">12</span>
</li>
<li>
<a href="#">生活随笔</a>
<span class="category-count">20</span>
</li>
<li>
<a href="#">学习笔记</a>
<span class="category-count">25</span>
</li>
</ul>
</div>
<!-- 热门标签 -->
<div class="sidebar-section">
<h3 class="sidebar-title">
<i class="fas fa-tags"></i>
热门标签
</h3>
<div class="article-tags">
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">React</a>
<a href="#" class="tag">CSS</a>
<a href="#" class="tag">Node.js</a>
<a href="#" class="tag">Vue</a>
<a href="#" class="tag">设计</a>
<a href="#" class="tag">性能优化</a>
<a href="#" class="tag">移动开发</a>
</div>
</div>
<!-- 最新评论 -->
<div class="sidebar-section">
<h3 class="sidebar-title">
<i class="fas fa-comments"></i>
最新评论
</h3>
<div style="font-size: 0.9rem; color: #666;">
<p style="margin-bottom: 0.5rem;">
<strong>张三：</strong>文章写得很好，学到了很多！
</p>
<p style="margin-bottom: 0.5rem;">
<strong>李四：</strong>期待更多分享
</p>
<p>
<strong>王五：</strong>感谢作者的用心分享
</p>
</div>
</div>
</aside>
</main>
<!-- 页脚 -->
<footer>
<p>© 2025 博雅. All rights reserved. | 用心分享，记录成长</p>
</footer>
<!-- 返回顶部按钮 -->
<div class="back-to-top" id="backToTop">
<i class="fas fa-arrow-up"></i>
</div>
<script>
// 导航栏滚动效果
let lastScroll = 0;
window.addEventListener('scroll', () => {
const header = document.querySelector('header');
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
}
lastScroll = currentScroll;
});
// 返回顶部按钮
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 搜索功能
const searchInput = document.querySelector('.search-box input');
searchInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const searchTerm = e.target.value;
if (searchTerm) {
console.log('搜索:', searchTerm);
// 这里可以添加实际的搜索逻辑
}
}
});
// 文章卡片点击效果
const articleCards = document.querySelectorAll('.article-card');
articleCards.forEach(card => {
card.addEventListener('click', () => {
// 模拟跳转到文章详情页
console.log('点击了文章');
// window.location.href = '#article-detail';
});
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
// 添加加载动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
articleCards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>
这个博雅网页具有以下特点：
-
优雅的设计风格
- 清爽的配色方案
- 现代化的卡片式布局
- 流畅的动画效果
-
完整的功能模块
- 固定导航栏，带搜索功能
- 文章列表展示
- 侧边栏（关于我、分类、标签、评论）
- 返回顶部按钮
-
交互体验
（图片来源网络，侵删）- 悬停效果
- 平滑滚动
- 滚动时导航栏阴影变化
- 文章卡片加载动画
-
响应式设计
- 适配移动设备
- 灵活的网格布局
-
技术细节
- 使用CSS变量管理颜色
- Font Awesome图标
- Intersection Observer API实现滚动动画
- 语义化HTML结构
您可以根据需要进一步定制样式、添加更多功能或集成后端数据。
（图片来源网络，侵删）
