/* 通用样式 */  
body {  
    font-family: Arial, sans-serif;  
    color: #333;  
    background-color: #f0f0f0; /* 浅灰色背景 */  
}  
  




        /* 导航栏样式 */  
        header {  
            background-color: #008000; /* 绿色背景 */  
            color: white; /* 文字颜色为白色 */  
            padding: 10px 0; /* 内边距 */  
        }  
  
        nav ul {  
            list-style-type: none; /* 移除列表样式 */  
            margin: 0;  
            padding: 0;  
            display: flex; /* 使用弹性布局使列表项水平排列 */  
            justify-content: space-around; /* 列表项之间均匀分布 */  
        }  
  
        nav ul li {  
            position: relative; /* 为下拉菜单设置定位基准 */  
        }  
  
        nav ul li a {  
            color: white; /* 链接文字颜色为白色 */  
            text-decoration: none; /* 移除下划线 */  
            display: block; /* 转换为块级元素以填充整个列表项 */  
            padding: 10px 20px; /* 内边距 */  
            transition: all 0.3s ease; /* 过渡效果 */  
        }  
  
        nav ul li a:hover {  
            background-color: #006600; /* 鼠标悬停时背景色变深 */  
        }  
  
        /* 如果有下拉菜单，可以在这里添加相关样式 */  







  
  
/* 绿色主题样式 */  
.green-theme {  
    background-color: #e0f2e1; /* 绿色背景 */  
    padding: 20px;  
    border-radius: 10px;  
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
}  
  
/* 产品列表 */  
.product-list {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
  
.product-item {  
    flex: 0 0 calc(33.33% - 20px); /* 每个产品占一行宽度的三分之一减去间隔 */  
    margin-bottom: 20px;  
}  
  
/* 新闻列表 */  
.news-list {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
}  
  
.news-item {  
    flex: 0 0 calc(33.33% - 20px); /* 每个新闻占一行宽度的三分之一减去间隔 */  
    margin-bottom: 20px;  
}  
  
/* 其他样式 */  
img {  
    max-width: 100%;  
    height: auto;  
}  
  
/* ... 其他你需要的样式 ... */