141 lines
4.4 KiB
HTML
141 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>样式测试页</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { background: #f5f5f5; font-family: sans-serif; padding: 40px; }
|
||
h2 { margin: 30px 0 15px; color: #333; }
|
||
.row { display: flex; gap: 20px; margin: 15px 0; flex-wrap: wrap; align-items: flex-start; }
|
||
.card {
|
||
background: white;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
width: 250px;
|
||
}
|
||
.label { font-size: 12px; color: #999; margin-bottom: 5px; }
|
||
|
||
/* 四圆角测试 */
|
||
.rounded-1 { border-radius: 12px; }
|
||
.rounded-2 { border-radius: 0 20px 0 20px; }
|
||
.rounded-3 { border-radius: 50px 10px 50px 10px; }
|
||
.rounded-4 { border-radius: 50%; width: 120px; height: 120px; }
|
||
|
||
/* 旋转测试 */
|
||
.rotate-1 { transform: rotate(5deg); }
|
||
.rotate-2 { transform: rotate(-8deg); }
|
||
.rotate-3 { transform: rotate(15deg); }
|
||
|
||
/* 组合 */
|
||
.combo-1 { border-radius: 15px; transform: rotate(3deg); background: #e8f4fd; }
|
||
.combo-2 { border-radius: 0 0 20px 20px; transform: rotate(-2deg); background: #fde8e8; }
|
||
|
||
/* 透明度 */
|
||
.opacity-1 { opacity: 0.7; background: #d4edda; }
|
||
.opacity-2 { opacity: 0.4; background: #fff3cd; }
|
||
|
||
/* 字间距 */
|
||
.ls-wide { letter-spacing: 3px; }
|
||
.ls-narrow { letter-spacing: -0.5px; }
|
||
|
||
/* 行高 */
|
||
.lh-tight { line-height: 1.2; }
|
||
.lh-loose { line-height: 2.0; }
|
||
|
||
/* 文字装饰 */
|
||
.td-underline { text-decoration: underline; }
|
||
.td-strike { text-decoration: line-through; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>样式映射测试页</h1>
|
||
<p>用于验证 html2pptx 的样式转化能力</p>
|
||
|
||
<h2>一、四圆角</h2>
|
||
<div class="row">
|
||
<div>
|
||
<div class="label">统一圆角 12px</div>
|
||
<div class="card rounded-1">border-radius: 12px</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">对角圆角</div>
|
||
<div class="card rounded-2">border-radius: 0 20px 0 20px</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">交替圆角</div>
|
||
<div class="card rounded-3">border-radius: 50px 10px 50px 10px</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">正圆 50%</div>
|
||
<div class="card rounded-4" style="display:flex;align-items:center;justify-content:center;">圆形</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>二、旋转</h2>
|
||
<div class="row">
|
||
<div>
|
||
<div class="label">rotate(5deg)</div>
|
||
<div class="card rotate-1">轻微右倾</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">rotate(-8deg)</div>
|
||
<div class="card rotate-2">左倾</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">rotate(15deg)</div>
|
||
<div class="card rotate-3">明显右倾</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>三、圆角 + 旋转组合</h2>
|
||
<div class="row">
|
||
<div>
|
||
<div class="label">圆角 + 轻微旋转</div>
|
||
<div class="card combo-1">border-radius: 15px + rotate(3deg)</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">底圆角 + 左倾</div>
|
||
<div class="card combo-2">底部圆角 + rotate(-2deg)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>四、透明度</h2>
|
||
<div class="row">
|
||
<div>
|
||
<div class="label">opacity: 0.7</div>
|
||
<div class="card opacity-1">70% 不透明</div>
|
||
</div>
|
||
<div>
|
||
<div class="label">opacity: 0.4</div>
|
||
<div class="card opacity-2">40% 不透明</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>五、字间距</h2>
|
||
<div style="background:white;padding:20px;margin:15px 0;">
|
||
<div class="label">letter-spacing: 3px</div>
|
||
<p class="ls-wide">这是加宽字间距的文字，每个字之间有明显间隔</p>
|
||
<div class="label" style="margin-top:15px;">letter-spacing: -0.5px</div>
|
||
<p class="ls-narrow">这是收紧字间距的文字，字符排列更紧密</p>
|
||
</div>
|
||
|
||
<h2>六、行高</h2>
|
||
<div style="background:white;padding:20px;margin:15px 0;">
|
||
<div class="label">line-height: 1.2（紧凑）</div>
|
||
<p class="lh-tight">这是紧凑行高的段落。文字之间的垂直距离很小，适合标题或短文本展示。行高1.2意味着行间距是字号的1.2倍。</p>
|
||
<div class="label" style="margin-top:15px;">line-height: 2.0（宽松）</div>
|
||
<p class="lh-loose">这是宽松行高的段落。文字之间的垂直距离很大，适合长文本阅读。行高2.0意味着行间距是字号的2倍。</p>
|
||
</div>
|
||
|
||
<h2>七、文字装饰</h2>
|
||
<div style="background:white;padding:20px;margin:15px 0;">
|
||
<p class="td-underline">这段文字有下划线（text-decoration: underline）</p>
|
||
<p class="td-strike" style="margin-top:10px;">这段文字有删除线（text-decoration: line-through）</p>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|