添加HTML模板文件
This commit is contained in:
焦帅浩
puke
128
templates/1080x1080/magazine_cover.html
Normal file
128
templates/1080x1080/magazine_cover.html
Normal file
@@ -0,0 +1,128 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>杂志封面风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #ffffff;
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 50px 50px 40px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 顶部标题区 - 超大字号 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 88px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -1px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 装饰线条 */
|
||||
.header::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 5px;
|
||||
background: linear-gradient(90deg, transparent, #e63946, transparent);
|
||||
margin: 15px auto 0;
|
||||
}
|
||||
|
||||
/* 图片区域 - 占据大部分空间 */
|
||||
.image-section {
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
border: 8px solid #000;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字区 - 小字号，杂志风格 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
border-top: 3px solid #000;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #2d3436;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 78px; }
|
||||
.text { font-size: 28px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
100
templates/1080x1080/minimal_framed_1080x1080.html
Normal file
100
templates/1080x1080/minimal_framed_1080x1080.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>极简边框风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #fafafa;
|
||||
color: #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 100px 80px;
|
||||
}
|
||||
|
||||
/* 顶部标题 - 极简风格 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 56px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
color: #2d3436;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
/* 图片区域 - 细边框，大留白 */
|
||||
.image-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
border: 2px solid #2d3436;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部文字 - 极简 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
color: #636e72;
|
||||
letter-spacing: 1px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 50px; }
|
||||
.text { font-size: 26px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
151
templates/1080x1080/vibrant_circle_1080x1080.html
Normal file
151
templates/1080x1080/vibrant_circle_1080x1080.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>活力圆形风格 - 1080x1080</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { width: 1080px; height: 1080px; overflow: hidden; }
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 60px;
|
||||
}
|
||||
|
||||
/* 装饰圆形 */
|
||||
.deco-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.deco-circle-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #ff6b6b;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.deco-circle-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: #4ecdc4;
|
||||
top: 15%;
|
||||
right: 15%;
|
||||
}
|
||||
|
||||
.deco-circle-3 {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: #ffe66d;
|
||||
bottom: 15%;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.deco-circle-4 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #a8e6cf;
|
||||
bottom: 10%;
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 50px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 68px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* 圆形图片容器 */
|
||||
.image-section {
|
||||
width: 580px;
|
||||
height: 580px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 12px solid #ffffff;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0,0,0,0.3),
|
||||
0 0 0 8px rgba(255,255,255,0.5);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 文字 */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 38px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.title { font-size: 60px; }
|
||||
.text { font-size: 34px; }
|
||||
.image-section { width: 520px; height: 520px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="deco-circle deco-circle-1"></div>
|
||||
<div class="deco-circle deco-circle-2"></div>
|
||||
<div class="deco-circle deco-circle-3"></div>
|
||||
<div class="deco-circle deco-circle-4"></div>
|
||||
|
||||
<div class="header">
|
||||
<div class="title">{{title}}</div>
|
||||
</div>
|
||||
|
||||
<div class="image-section">
|
||||
<div class="image-container">
|
||||
<img src="{{image}}" alt="内容图片">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="text">{{text}}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user