示例成品 · 平台演示,按左边这组点选真跑出来的
这是为您活动落地页生成的一份可直接运行的HTML代码,包含移动端轮播图和按钮交互,适配主流手机屏幕。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 视口meta:适配移动端小屏,禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>限时狂欢 · 活动落地页</title>
<style>
/* ============================================================
基础重置CSS —— 清除浏览器默认样式,统一盒模型
============================================================ */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 移除列表默认样式 */
ul,
ol {
list-style: none;
}
/* 移除链接默认下划线 */
a {
text-decoration: none;
color: inherit;
}
/* 图片自适应容器宽度 */
img {
max-width: 100%;
display: block;
}
/* 按钮重置 */
button {
border: none;
background: none;
cursor: pointer;
font-family: inherit;
}
/* 输入框隐藏(轮播用) */
input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* ============================================================
全局CSS变量 —— 主色/辅助色/圆角/间距(可根据设计稿调整)
============================================================ */
:root {
--color-primary: #FF4E2C;
/* 主色:暖橙红,促销氛围 */
--color-primary-dark: #E03A1A;
/* 主色深 */
--color-accent: #FFB800;
/* 辅助金色 */
--color-bg: #F7F4F0;
/* 页面背景色 */
--color-card: #FFFFFF;
/* 卡片背景 */
--color-text: #2C2C2C;
/* 正文文字 */
--color-text-sub: #7A7A7A;
/* 次要文字 */
--color-border: #EBE5DE;
/* 边框色 */
--radius-lg: 16px;
/* 大圆角 */
--radius-md: 10px;
/* 中圆角 */
--radius-sm: 6px;
/* 小圆角 */
--gap-section: 24px;
/* 大区块间距 */
--gap-item: 12px;
/* 元素间距 */
--padding-page: 16px;
/* 页面左右内边距 */
--font-size-title: 20px;
/* 区块标题字号 */
--font-size-body: 14px;
/* 正文字号 */
--font-size-small: 12px;
/* 辅助小字号 */
}
/* ============================================================
全局基础样式
============================================================ */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
/* iOS横屏不缩放文字 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Helvetica Neue", "Microsoft YaHei", sans-serif;
background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--font-size-body);
line-height: 1.6;
min-height: 100vh;
/* 限制最大宽度,适配大屏时居中 */
max-width: 480px;
margin: 0 auto;
/* 模拟移动端卡片式布局阴影 */
box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
overflow-x: hidden;
}
点左边「开工 · 直接出成品」,出一份你自己的版本(文字免费)