把设计稿转成HTML页面
手动写HTML/CSS耗时易错，尤其媒体查询和语义标签常漏写或写错
有人这样说「这UI稿明天要交，得赶紧转成HTML，可别再手写一套了。」
能替你选的都选好了。不想动，直接点下面「交给 AI 办」，点一下就开始做；想改，就点一下要的那个。
已替你选好想改就点一下
更多选项（一般不用动）
只有你知道的不填就先空着，成品里留【待填】
还想怎么改可以不选
开工前请确认
高级选项一般不用动 · 这件事通常 1 分钟左右做好
示例成品全文按上面这组示例选项真跑出来的
这是为您活动落地页生成的一份可直接运行的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;
}