HTML5+CSS 学习示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>带详细CSS注释的网页导航栏</title> <style> /* 通用重置样式 - 重置浏览器默认样式，确保跨浏览器一致性 */ * { margin: 0; /* 清除所有元素的外边距 */ padding: 0; /* 清除所有元素的内边距 */ box-sizing: border-box; /* 设置盒模型为border-box，使宽度包含padding和border */ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 设置字体栈，优先使用Segoe UI，备用微软雅黑 */ } /* 页面主体样式 */ body { background-color: #f5f7fa; /* 设置页面背景颜色为浅灰色 */ color: #333; /* 设置默认文本颜色为深灰色 */ padding: 20px; /* 为页面添加内边距 */ min-height: 100vh; /* 确保body至少占满整个视口高度 */ display: flex; /* 使用flex布局 */ flex-direction: column; /* 垂直方向排列子元素 */ align-items: center; /* 水平居中子元素 */ } /* 主容器样式 - 限制内容最大宽度并居中 */ .container { width: 100%; /* 宽度占满父元素 */ max-width: 1200px; /* 设置最大宽度，在大屏幕上不会过宽 */ } /* 头部区域样式 */ header { background: linear-gradient(135deg, #2c3e50 0%, #1a2530 100%); /* 设置135度渐变背景，从深蓝色到更深蓝色 */ border-radius: 12px; /* 添加圆角边框 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 添加阴影效果，增强立体感 */ padding: 0 30px; /* 左右内边距30px，上下为0 */ margin-bottom: 40px; /* 底部外边距，与下方内容分开 */ } /* 导航栏容器样式 - 使用Flexbox布局实现三栏布局 */ .navbar { display: flex; /* 使用flex布局 */ justify-content: space-between; /* 子元素在主轴上均匀分布，首尾贴边 */ align-items: center; /* 子元素在交叉轴上居中对齐 */ height: 80px; /* 设置导航栏固定高度 */ } /* 左侧LOGO容器样式 */ .logo-container { display: flex; /* 使用flex布局，使LOGO和文字水平排列 */ align-items: center; /* 垂直居中对齐 */ flex: 0 0 auto; /* flex属性：不放大、不缩小、自动基准大小 */ } /* LOGO样式 */ .logo { width: 50px; /* 固定宽度 */ height: 50px; /* 固定高度，形成正方形 */ border-radius: 10px; /* 圆角，使正方形变圆润 */ background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%); /* 蓝色到紫色的渐变背景 */ display: flex; /* 使用flex布局，使内部文字居中 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ color: white; /* 文字颜色为白色 */ font-weight: bold; /* 文字加粗 */ font-size: 20px; /* 文字大小 */ box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* 添加蓝色阴影，增强立体感 */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加transform和box-shadow属性的过渡动画 */ } /* LOGO悬停效果 */ .logo:hover { transform: translateY(-3px); /* 悬停时向上移动3像素，产生上浮效果 */ box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); /* 悬停时阴影变大变深，增强立体感 */ } /* LOGO旁边文字样式 */ .logo-text { margin-left: 15px; /* 左外边距，与LOGO保持距离 */ color: white; /* 文字颜色为白色 */ font-weight: 600; /* 文字加粗程度 */ font-size: 22px; /* 文字大小 */ letter-spacing: 0.5px; /* 字母间距，增加可读性 */ } /* 中间菜单容器样式 */ .menu-container { display: flex; /* 使用flex布局 */ justify-content: center; /* 水平居中子元素 */ flex: 1 1 auto; /* flex属性：可放大、可缩小、自动基准大小，占据剩余空间 */ } /* 菜单列表样式 */ .menu { display: flex; /* 使用flex布局，使菜单项水平排列 */ list-style: none; /* 移除列表默认样式（圆点等） */ gap: 20px; /* 设置菜单项之间的间距，gap是flex布局的简写属性 */ } /* 单个菜单项样式 */ .menu-item { position: relative; /* 设置为相对定位，为子元素的绝对定位提供参考 */ } /* 菜单链接样式 */ .menu-link { color: #ecf0f1; /* 链接文字颜色为浅灰色 */ text-decoration: none; /* 移除链接默认的下划线 */ font-weight: 500; /* 文字加粗程度 */ padding: 12px 20px; /* 内边距：上下12px，左右20px */ border-radius: 8px; /* 圆角边框 */ transition: all 0.3s ease; /* 为所有CSS属性添加0.3秒的过渡动画，ease是缓动函数 */ display: inline-block; /* 设置为行内块元素，可以设置宽高和内边距 */ } /* 菜单链接悬停效果 */ .menu-link:hover { background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */ color: white; /* 文字颜色变为纯白色 */ transform: translateY(-2px); /* 向上移动2像素，产生上浮效果 */ } /* 激活状态的菜单链接样式 */ .menu-link.active { background-color: rgba(52, 152, 219, 0.2); /* 半透明蓝色背景 */ color: #3498db; /* 文字颜色变为蓝色 */ } /* 右侧语言选择容器样式 */ .language-container { display: flex; /* 使用flex布局 */ align-items: center; /* 垂直居中对齐 */ flex: 0 0 auto; /* flex属性：不放大、不缩小、自动基准大小 */ } /* 语言切换器样式 */ .language-switcher { display: flex; /* 使用flex布局，使语言选项水平排列 */ background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */ border-radius: 20px; /* 圆角边框，设置为20px形成胶囊形状 */ padding: 5px; /* 内边距，使内部元素与边框有间距 */ } /* 语言选项样式 */ .language-option { padding: 8px 18px; /* 内边距：上下8px，左右18px */ color: #bdc3c7; /* 默认文字颜色为浅灰色 */ cursor: pointer; /* 鼠标悬停时变为手型指针，表示可点击 */ border-radius: 16px; /* 圆角边框，小于父容器的20px，形成内嵌效果 */ transition: all 0.3s ease; /* 为所有CSS属性添加0.3秒的过渡动画 */ font-weight: 500; /* 文字加粗程度 */ } /* 语言选项悬停效果 */ .language-option:hover { color: white; /* 文字颜色变为白色 */ background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */ } /* 激活状态的语言选项样式 */ .language-option.active { color: white; /* 文字颜色变为白色 */ background-color: #3498db; /* 背景颜色变为蓝色 */ } /* 主要内容区域样式 */ .content { background-color: white; /* 白色背景 */ border-radius: 12px; /* 圆角边框 */ padding: 40px; /* 内边距，使内容与边框有间距 */ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); /* 浅色阴影，增强层次感 */ line-height: 1.6; /* 行高，提高文本可读性 */ } /* 主要内容标题样式 */ h1 { color: #2c3e50; /* 标题文字颜色为深蓝色 */ margin-bottom: 20px; /* 底部外边距，与下方内容分开 */ padding-bottom: 15px; /* 底部内边距，为下边框留出空间 */ border-bottom: 2px solid #f1f2f6; /* 底部边框，用于分隔标题和内容 */ } /* 段落文本样式 */ p { margin-bottom: 20px; /* 底部外边距，段落之间保持距离 */ color: #555; /* 段落文字颜色为中灰色 */ font-size: 16px; /* 段落文字大小 */ } /* 高亮文本样式 */ .highlight { color: #3498db; /* 高亮文字颜色为蓝色 */ font-weight: 600; /* 文字加粗 */ } /* 特性展示容器样式 */ .features { display: flex; /* 使用flex布局，使特性卡片水平排列 */ gap: 20px; /* 卡片之间的间距 */ margin-top: 30px; /* 顶部外边距，与上方内容分开 */ flex-wrap: wrap; /* 允许换行，在小屏幕上自动换行 */ } /* 单个特性卡片样式 */ .feature { flex: 1; /* flex属性：可放大、可缩小，均分剩余空间 */ min-width: 250px; /* 最小宽度，确保在小屏幕上不会过窄 */ background: #f8f9fa; /* 浅灰色背景 */ padding: 20px; /* 内边距 */ border-radius: 10px; /* 圆角边框 */ border-left: 4px solid #3498db; /* 左侧蓝色边框，作为装饰和强调 */ } /* 特性卡片标题样式 */ .feature h3 { color: #2c3e50; /* 标题文字颜色为深蓝色 */ margin-bottom: 10px; /* 底部外边距，与下方内容分开 */ } /* 响应式设计 - 在屏幕宽度小于768px时应用以下样式 */ @media (max-width: 768px) { /* 在小屏幕上，导航栏改为垂直布局 */ .navbar { flex-direction: column; /* flex方向改为垂直排列 */ height: auto; /* 高度自动，根据内容调整 */ padding: 20px 0; /* 上下内边距20px，左右为0 */ } /* 调整LOGO、菜单和语言选择容器的样式 */ .logo-container, .menu-container, .language-container { margin-bottom: 20px; /* 底部外边距，使各模块之间有间距 */ width: 100%; /* 宽度占满父容器 */ justify-content: center; /* 水平居中对齐 */ } /* 调整菜单样式 */ .menu { flex-wrap: wrap; /* 允许菜单项换行 */ justify-content: center; /* 水平居中对齐 */ } /* 调整内容区域内边距 */ .content { padding: 25px; /* 减少内边距，适应小屏幕 */ } } /* 页脚样式 */ footer { margin-top: 40px; /* 顶部外边距，与上方内容分开 */ text-align: center; /* 文本居中对齐 */ color: #7f8c8d; /* 文字颜色为浅灰色 */ font-size: 14px; /* 文字大小较小 */ padding: 20px 0; /* 上下内边距20px，左右为0 */ width: 100%; /* 宽度占满父容器 */ border-top: 1px solid #eee; /* 顶部边框，用于分隔内容和页脚 */ } </style> </head> <body> <div class="container"> <header> <nav class="navbar"> <!-- 左侧LOGO区域 --> <div class="logo-container"> <div class="logo">LOGO</div> <div class="logo-text">品牌名称</div> </div> <!-- 中间菜单区域 --> <div class="menu-container"> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link active">首页</a> </li> <li class="menu-item"> <a href="#" class="menu-link">关于我们</a> </li> <li class="menu-item"> <a href="#" class="menu-link">客户服务</a> </li> <li class="menu-item"> <a href="#" class="menu-link">联系方式</a> </li> </ul> </div> <!-- 右侧语言选择区域 --> <div class="language-container"> <div class="language-switcher"> <div class="language-option active">中文</div> <div class="language-option">English</div> </div> </div> </nav> </header> <main class="content"> <h1>带详细CSS注释的导航栏</h1> <p>这个示例包含了详细的CSS注释，解释了每个样式规则的作用和实现原理。</p> <p>通过阅读这些注释，您可以更好地理解如何：</p> <ul style="margin-left: 20px; margin-bottom: 20px;"> <li>使用Flexbox创建响应式布局</li> <li>实现渐变背景和阴影效果</li> <li>创建悬停和点击交互效果</li> <li>编写响应式设计适配不同屏幕</li> </ul> <div class="features"> <div class="feature"> <h3>CSS注释的重要性</h3> <p>详细的CSS注释有助于团队协作、代码维护和后续修改，特别是对于复杂项目。</p> </div> <div class="feature"> <h3>响应式设计原理</h3> <p>通过媒体查询(@media)和flex-wrap属性，实现在不同屏幕尺寸下的最佳显示效果。</p> </div> <div class="feature"> <h3>Flexbox布局</h3> <p>使用Flexbox实现了导航栏的三栏布局，代码简洁且具有很好的浏览器兼容性。</p> </div> </div> </main> <footer> <p>© 2023 公司名称 版权所有 | 这是一个带详细CSS注释的导航栏示例</p> </footer> </div> <script> // 为菜单项添加点击事件 document.querySelectorAll('.menu-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // 阻止链接默认行为 // 移除所有菜单项的active类 document.querySelectorAll('.menu-link').forEach(item => { item.classList.remove('active'); }); // 为当前点击的菜单项添加active类 this.classList.add('active'); // 更新内容区域标题 const contentTitle = document.querySelector('.content h1'); const menuText = this.textContent; contentTitle.textContent = `${menuText}页面 - CSS注释示例`; // 更新内容区域文本 const contentText = document.querySelector('.content p'); if(menuText === "首页") { contentText.innerHTML = `这是<span class="highlight">${menuText}</span>页面内容。这是一个带有详细CSS注释的导航栏实现，包含了左侧LOGO区域、中间菜单区域和右侧语言选择区域。`; } else { contentText.innerHTML = `这是<span class="highlight">${menuText}</span>页面内容。您可以在这里查看与${menuText}相关的信息和内容。CSS详细注释有助于理解样式实现原理。`; } }); }); // 为语言选项添加点击事件 document.querySelectorAll('.language-option').forEach(option => { option.addEventListener('click', function() { // 移除所有语言选项的active类 document.querySelectorAll('.language-option').forEach(item => { item.classList.remove('active'); }); // 为当前点击的语言选项添加active类 this.classList.add('active'); // 根据选择的语言更新页面文本 const isEnglish = this.textContent === 'English'; const menuItems = document.querySelectorAll('.menu-link'); const menuTexts = isEnglish ? ['Home', 'About Us', 'Customer Service', 'Contact'] : ['首页', '关于我们', '客户服务', '联系方式']; menuItems.forEach((item, index) => { item.textContent = menuTexts[index]; }); // 更新LOGO文本 const logoText = document.querySelector('.logo-text'); logoText.textContent = isEnglish ? 'Brand Name' : '品牌名称'; // 更新页面标题 document.title = isEnglish ? 'Web Navigation Bar with CSS Comments' : '带详细CSS注释的网页导航栏'; // 更新内容区域 const contentTitle = document.querySelector('.content h1'); const contentText = document.querySelector('.content p'); const footerText = document.querySelector('footer p'); if(isEnglish) { contentTitle.textContent = 'Navigation Bar with CSS Comments'; contentText.innerHTML = 'This is a navigation bar implementation with detailed CSS comments, explaining the purpose of each style rule.'; footerText.innerHTML = '© 2023 Company Name All Rights Reserved | Navigation bar example with CSS comments'; } else { contentTitle.textContent = '带详细CSS注释的导航栏'; contentText.innerHTML = '这是一个带有详细CSS注释的导航栏实现，解释了每个样式规则的作用和实现原理。'; footerText.innerHTML = '© 2023 公司名称 版权所有 | 这是一个带详细CSS注释的导航栏示例'; } }); }); </script> </body> </html>
活到老，学到老。
浙公网安备 33010602011771号