狸柚子代码实例一
一个简单的名片页面：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人名片</title> </head> <body> <div style="margin:0;font-family:Arial,sans-serif;background:#f0f2f5;display:flex;justify-content:center;align-items:center;min-height:100vh;"> <div style="width:300px;background:white;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1);overflow:hidden;text-align:center;padding:20px;"> <h2 style="margin:0 0 10px;color:#333;">我的名片</h2> <p style="margin:0 0 20px;color:#666;font-size:14px;">我的职业</p> <div style="border-top:1px solid #eee;padding:15px 0;"> <p style="margin:8px 0;color:#555;"><span style="color:#4a6bdf;margin-right:8px;"></span>我的联系方式</p> <p style="margin:8px 0;color:#555;"><span style="color:#4a6bdf;margin-right:8px;"></span>我的联系地址</p> </div> </div> </div> </body> </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> </head> <body> <div style="margin:0;font-family:'Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;display:flex;justify-content:center;align-items:center;"> <div style="background:white;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.1);padding:40px;max-width:600px;text-align:center;"> <h1 style="color:#3a7bd5;font-size:2.2rem;margin-bottom:20px;">创新科技 智领未来</h1> <p style="color:#555;font-size:1.1rem;line-height:1.6;margin-bottom:30px;"> 我们致力于用前沿技术改变世界，为您提供智能化的解决方案。<br> 从人工智能到大数据分析，从云计算到物联网，我们引领数字化转型浪潮。 </p> </div> </div> </body> </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>
</head>
<body>
<div style="margin:0;font-family:'Microsoft YaHei',sans-serif;background:#f9f9f9;color:#333;">
<div style="max-width:800px;margin:0 auto;padding:20px;">
<h1 style="color:#2c3e50;border-bottom:2px solid #3498db;padding-bottom:10px;">提高工作效率</h1>
<div style="background:white;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.05);margin-top:20px;">
<p style="line-height:1.6;margin-bottom:15px;">如何提高工作效率？</p>
<h2 style="color:#2980b9;margin-top:25px;"> 制定明确计划</h2>
<p style="line-height:1.6;margin-bottom:15px;">每天开始工作前，花10分钟列出当天要完成的任务，这能帮助你保持专注。</p>
<div style="background:#f8f9fa;padding:15px;border-radius:5px;margin-top:30px;">
<p style="margin:0;font-style:italic;color:#555;">"效率不是做得更多，而是做得更好。" — 彼得·德鲁克</p>
</div>
</div>
</div>
</div>
</body>
</html>
一个简单的阳光页面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阳光页面</title> </head> <body> <div style="margin:0;height:130vh;overflow:hidden;background:linear-gradient(0deg,#5cb85c 30%,#87CEEB 100%)"> <div style="position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,#FFD700 30%,#FFA500 100%);box-shadow:0 0 50px #FFD700;top:15%;left:15%"></div> </div> </body> </html>