我将整个CSS样式表放在一个代码块中，并在每部分添加注释进行解释。
注意：CSS中的选择器用于指定要样式化的HTML元素。样式规则由属性和值组成。
以下是逐段解释：（可直接复制，配合HTML代码使用）
*{ padding: 0; margin: 0;}
header{ background-color: rgba(35,28,26,0.8); height:80px; width:100%; position: fixed; }
h1{ color: white; }
header ul{ position: absolute; right:5vw; top:0; line-height: 80px; }
h1{ position:absolute; left:120px; top:0; line-height: 80px; background-image: url(image/司绿.jpg); background-repeat: no-repeat; background-position: center; width: 210px; text-indent: -9999px; }
header li{ display: inline; margin-right: 4vw; }header a{ color:white; text-decoration:none; }header a:hover{ text-decoration: underline; }
.news{ background-color: antiquewhite; color: white; height: 95vh; background-image: url(image/思蓝.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }.news h2{ font-size: 60px; margin-top:60px; }.news p{ color: #fef7e6; font-size: 18px; margin:25px 0; }.news a{ color:white; text-decoration: none; border: 1px solid #acacac; padding: 10px 20px; border-radius: 5px; }
.slogan{ background-color: #485652; color: white; height: 250px; display:flex; justify-content: center; align-items: center; font-size: 20px; line-height: 1.8em; }
footer{ background-color: #000000; color: #b7b7b7; height: 60px; display:flex; justify-content: center; align-items: center; font-size: 14px; }
.shop{ display: flex; }.shop img{ width: 50%; }
.info{ width: 50%; background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; }.info h2{ font-size: 40px; margin-bottom: 30px; }.info p{ text-align: center; line-height: 2em; }
.product{ display: flex; background-color: #ede9db; justify-content: space-between; align-items: center; padding: 100px 180px 80px; }.product div{ width: 300px; text-align: center; }.product img{ width:100%; border-radius: 10px; }.product h3{ font-size: 20px; margin: 20px 0; }.product p{ font-size: 14px; line-height: 1.6em; }
.newsletter{ background-color: #485652; color: white; padding: 60px 0; display: flex; flex-direction: column; align-items: center; }.newsletter p{ margin-bottom: 20px; }
.newsletter input,.newsletter button{ background-color: transparent; color: white; border: 1px solid #949d9a; padding: 10px; border-radius: 5px; }.newsletter input{ width: 200px; margin-right: 15px; }.newsletter button{ width: 80px; cursor: pointer; }
input::placeholder{ color: #dddddd; }input:focus{ outline: none; border-color: #e0e9a3; }
.menu{ display: none; }
@media screen and (max-width: 768px) { header ul{ display: none; }
header h1 { left:50%; transform:translateX(-50%); }
.news h2{ font-size: 40px; }
.menu{ display: block; background-color: transparent; color: white; font-size: 35px; position: absolute; top:15px; left:20px; border:none; cursor:pointer; }
.shop{ flex-direction: column; } .shop img{ width: 100%; }
.info{ width: 100%; padding: 40px 0; } .info h2{ font-size: 30px; }
.product{ flex-direction: column; padding: 60px 0; } .product div{ margin-bottom: 30px; }}
样式表整体解析：
1. 设计特点：
◦ 全屏背景：.news区域使用全屏背景图
◦ 固定导航：position: fixed实现滚动时导航栏始终置顶
◦ 隐藏式文字：text-indent: -9999px隐藏h1文字（仅显示背景图）
◦ 响应式设计：@media查询实现移动端适配
2. 布局系统：
◦ 使用 Flexbox 布局（.shop, .product, .newsletter）
◦ 使用 视口单位（vh, vw）实现响应式尺寸
◦ 绝对定位用于导航菜单（position: absolute）
3. 交互效果：
◦ 链接悬停效果（text-decoration: underline）
◦ 输入框聚焦效果（border-color: #e0e9a3）
◦ 按钮悬停指示（cursor: pointer）
4. 移动端优化：
◦ 768px以下隐藏桌面导航
◦ 显示汉堡菜单按钮（☰）
◦ 垂直排列产品项
◦ 全宽图片展示
5. 视觉细节：
◦ 半透明导航栏（rgba(35,28,26,0.8)）
◦ 圆角设计（border-radius: 10px）
◦ 间距系统（使用margin和padding控制元素间距）
这个样式表与HTML配合，创建了一个具有文化氛围的响应式网站。
桌面端显示专业布局，移动端自动调整为更适合小屏幕的垂直布局。
本文由于给出了整个CSS样式表，所以此篇文章的篇幅较长，但是非常实用，结合上篇给出的HTML代码，直接复制就能上手用。千万不要被文章的篇幅所吓倒~
阅读原文：https://mp.weixin.qq.com/s/TKKHbInbtcoisivAO4tOww
该文章在 2025/7/30 9:40:49 编辑过
400 186 1886
