售后服务简单的html
edge现在越来越智能，
我在biying搜 html，
ai插件就给我写出来了
想要什么功能，问sider fusion 即可
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 添加视口meta标签 -->
<title>SuperSpeed风扇器 2023新品售后服务</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: black; /* 设置背景颜色为黑色 */
color: white; /* 设置文本颜色为白色 */
margin: 0;
padding: 20px;
}
.container {
max-width: 800px; /* 最大宽度设置 */
margin: 0 auto;
padding: 10px; /* 内部留白，适合小屏幕 */
}
h1, h2 {
color: #FFD700; /* 设置标题颜色为金色 */
text-align: center; /* 标题居中对齐 */
}
.logo {
text-align: center; /* 居中对齐 */
margin-bottom: 20px; /* 给 logo 增加下面的间距 */
}
.section {
margin-bottom: 20px;
border: 1px solid #444; /* 边框颜色 */
padding: 15px;
border-radius: 5px; /* 圆角边框 */
}
.section h2 {
border-bottom: 1px solid #777;
padding-bottom: 5px;
}
.contact-info {
margin-top: 20px;
}
.contact-info h3 {
margin-bottom: 5px;
color: #FFD700; /* 设置联系方式小标题颜色 */
}
/* 响应式设计 */
@media (max-width: 600px) {
body {
padding: 10px; /* 小屏幕时减少内部留白 */
}
.container {
padding: 5px; /* 确保容器宽度合适 */
}
img {
width: 100%; /* Logo 图片在小屏幕上自适应宽度 */
height: auto; /* 保持纵横比 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="logo.png" alt="SuperSpeed风扇器 Logo" width="200"> <!-- 调整宽度 -->
</div>
<header>
<h1>SuperSpeed风扇器 2023新品售后服务页面</h1>
</header>
<div class="section">
<h2>关于售后政策</h2>
<p>欢迎购买SuperSpeed风扇器 2023新品，请您在购买之日起一年内，如有任何问题，请参照以下售后政策。</p>
</div>
<div class="section">
<h2>常见问题</h2>
<ul>
<li>问：风扇器型号不符怎么办？</li>
<li>答：请提供购买凭证，我们将为您更换合适的产品。</li>
<li>问：产品出现故障怎么办？</li>
<li>答：请将产品寄回原购买店铺进行维修或更换。</li>
</ul>
</div>
<div class="section">
<h2>联系方式</h2>
<div class="contact-info">
<h3>客服热线：</h3>
<ul>
<li>021-12345678</li>
<li>工作时间：9:00-18:00（周一至周日）</li>
</ul>
<h3>电子邮箱：</h3>
<ul>
<li>service@fanshopper.com</li>
</ul>
</div>
</div>
</div>
</body>
</html>