<style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        #chart-container {
            width: 1024px;
            height: 580px;
            margin-top: 20px;
        }
        .percentiles {
            margin-bottom: 20px;
            color: red;
        }





/* 购物车开始 OK*/ 
/* 购物车图标容器  */
.cart-container {
  position: relative;
  display: inline-block;
  margin-bottom: 0px; /* 与链接之间的间距 */
}

/* 购物车计数 */
.cart-count {
  position: absolute;
  top: 2px; /* 调整顶部偏移量 */
  left: -3px; /* 调整左侧偏移量 */
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 0px 5px; /* 调整圆的大小 */
  font-size: 12px;

  z-index: 1;
}
/* 购物车结束 */ 





        /* 留言红色字体 OK*/  
     .reply { color: red; }
        /* 留言红色字体 */  


        hr {  
           border: none; /* 移除默认的边框 */
           border-top: 5px solid #FF7F00; /* 设置顶部边框的颜色和粗细 */  
           height: 5px; /* 设置高度 */  
           background-color: #FF8000; /* 设置颜色 */  
           margin: 20px 0; /* 设置上下边距 */  
        }

        /* 所有<div class="url">类下的"a"标签 */
        .url a {
           color: #000095; /* 这里设置颜色为蓝色 */
           text-decoration: none; /* 去掉下划线 */
        }

        /* 鼠标悬停时改变颜色 */
        .url a:hover {
           color: #FE0000; /* 悬停时颜色变为红色 */
        }

        /* 鼠标点击时改变颜色 */
        .url a:active {
           color: #FF8000; /* 激活时颜色变为橙色 */
        }

        /* 已访问过的链接颜色 */
        .url a:visited {
           color: #800080; /* 访问后颜色变为紫色 */
        }
        /* 所有<div class="url">类下的"a"标签 */


        /* 增加外框，左对齐 无右侧广告与有右侧广告*/
        .zhuti-wgg {  
            background-color: white; /* 背景颜色，可根据需要调整 */  
            padding: 15px; /* 内边距 */  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */  
            border-radius: 8px; /* 圆角 */  
            text-align: left; /* 文字居中 */ 
            margin-left: 7px; /* 增加左外边距 */  
            margin-right: 7px;  /* 增加右边距离 */  
        } 
        .zhuti-ygg {  
            margin: 10px; /* 每列之间的间隙 */  
            background-color: white; /* 背景颜色，可根据需要调整 */  
            padding: 15px; /* 内边距 */  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */  
            border-radius: 8px; /* 圆角 */  
            text-align: left; /* 文字居中 */ 
            margin-left: 30px; /* 增加左外边距 */  

            margin-right: 315px;  /* 增加右边距离 */  
        }
        /* 增加外框，左对齐 无右侧广告与有右侧广告*/


        /* 分页样式 */     
        .pagination a, .pagination span {
        /* 基本的样式设置，如内边距、外边距等 */
             padding: 5px 1px;  
             margin: 0 2px;  
             text-decoration: none;  
             color: #da251c; /* 文字颜色 */
             border: 1px solid #FF9933; /* 边框 */
        /* 以下样式用于创建正方形效果，具体大小可以根据需要调整 */
             display: inline-block;  
             min-width: 35px; /* 最小宽度，确保是正方形 */
             text-align: center;  
             line-height: 25px; /* 调整行高以匹配高度 */
             height: 35px; /* 高度 */  
             border-radius: 8px; /* 添加圆角，与.question-cell保持一致 */
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */
        }  
        /* 选中页码的样式，可以添加一些区分 */  
        .pagination span {  
             background-color: #FF9933; /* 背景色 */
             cursor: default; /* 禁用鼠标悬停效果 */
        }  
        /* 分页样式 */ 


        /* 右侧浮动广告*/
        .floating-ad {
             position: fixed;
             top: 50%;
             transform: translateY(-50%);
             right: 10px;
             margin-left: 20px; /* 增加左外边距 */
             margin-right: 20px;  /* 增加右边距离 */
             background-color: #f9f9f9;
             padding: 10px;
             border: 1px solid #ccc;
             border-radius: 5px;
             box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
             z-index: 1000;
             
        }
        .floating-ad img {
             display: block;
             margin-bottom: 10px;
             max-width: 100%;
             height: auto;
         }
        /* 右侧浮动广告*/


        /* 返回顶部按钮*/
        .back-to-top {
            display: none;
            position: fixed;
            bottom: 10px;
            right: 10px;
            background-color: #FFFFFF; /* 设置按钮背景颜色 */
            color: #333; /* 设置按钮文字颜色 */
            border: 2px solid #FF9933; /* 设置按钮边框颜色和宽度 */
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease; /* 添加过渡效果 */
        }

        .back-to-top:hover {
            background-color: #FF9933; /* 鼠标悬停时改变背景颜色 */
            color: #FFFFFF; /* 鼠标悬停时改变文字颜色 */
        }
        /* 返回顶部按钮*/


/* 首页产品推荐开始 */
.product-grid {
    margin-left: 0px; /* 固定的左边距 */ 
    width: calc(100% - 0px); /* width: calc(100% - 10px);将使表格的宽度总是比其容器窄15px，这样就可以得到一个固定的右边距。 方法二：width: 94%; 增加右外边距 */
    border-collapse: collapse;
    box-sizing: border-box; 
}

.product-grid th, .product-grid td {
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
}

.product-grid img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product-grid h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.product-grid p {
    margin-bottom: 10px;
}

.product-grid .price {
    font-weight: bold;
    color: red;
}

/* 添加标题样式 */
.product-grid thead th {
    background-color: #f2f2f2;
    border-bottom: 2px solid #ddd;
    text-align: center;
}
/* 首页产品推荐结束 */


/* 底部版权信息开始 */
        .footer-content {
            text-align: center;
            background-color: #f8f8f8;
            padding: 10px 20px;
            border-top: 1px solid #ddd;
        }

        .footer-nav {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            padding: 10px 0;
            border-top: 1px solid #ddd;
        }

        .nav-item {
            color: #333;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .nav-item:hover {
            background-color: #ddd;
        }
/* 底部版权信息结束 */


/* 底部导航开始 */
.footer {    
    background-color: #f2f2f2;    
    color: white;    
    padding: 15px 0 1px; /* 增加底部内边距 */  
    text-align: center;    
    position: fixed;    
    bottom: 0;    
    width: 100%;    
    /* 添加一些外边距，以防止内容被footer覆盖 */  
    margin-top: 15px; /* 根据需要调整 */  

}

/* 底部导航链接样式 */  
.footer-links {  
    display: flex; /* 使用 Flexbox 布局 */  
    justify-content: space-around; /* 平均分配空间 */  
    list-style-type: none; /* 移除默认项目符号 */  
    padding: 0; /* 移除默认内边距 */  
}

/* 底部导航项样式 */  
.footer-item {  
    position: relative; /* 相对定位 */  
}

/* 底部链接 */  
.footer-item a {  
    color: #000000; /* 链接颜色 */  
    text-decoration: none; /* 移除下划线 */  
    transition: color 0.3s ease; /* 添加过渡效果 */  
    display: block; /* 占据块级元素的空间 */  
    text-align: center; /* 文本居中 */  
}

/* 鼠标悬停时的链接样式 */  
.footer-item a:hover {  
    color: #EA4335; /* 悬停时的颜色 */  
}

/* 底部emoji样式 */  
.footer-icon {  
    font-size: 20px; /* emoji大小 */  
    color: #EA4335; /* emoji颜色 */  
    display: block; /* 占据块级元素的空间 */  
    text-align: center; /* 文本居中 */  
    margin-bottom: 2px; /* 与链接之间的间距 */  
}
/* 底部导航结束 */
</style>