绘制到代码网页布局
来自 Wikiprompt，自由的提示词百科全书
2023年12月15日
绘制到代码网页布局 一个简单的提示，用于将手绘或草图形式的网页布局转换为可运行的HTML和CSS代码。
相关媒体
提示词内容收藏
🌐
这是我根据您的草图生成的HTML和CSS代码，用于构建一个包含头部、导航、内容区和侧边栏的经典网页布局。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>经典布局 · 草图实现</title>
<!-- 无外部依赖，纯HTML/CSS，结构1:1对应草图 -->
<style>
/* 全局重置与字体 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4f7fa;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
line-height: 1.5;
color: #1e293b;
padding: 24px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* 整体容器，，模拟草图卡片区域 */
.layout {
max-width: 1200px;
margin: 0 auto;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
overflow: hidden;
padding: 20px 24px 28px;
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
}
/* 头部 (草图顶部区域) */
.header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 2px solid #e9eef3;
}
.logo-area {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 44px;
height: 44px;
background: linear-gradient(145deg, #2563eb, #1e40af);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 22px;
box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2);
}
.logo-text {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #0f172a;
}
.logo-text span {
color: #2563eb;
}
/* 头部右侧 ，， 搜索框/占位 */
.header-tools {
display: flex;
align-items: center;
gap: 16px;
}
.search-box {
background: #f1f5f9;
border-radius: 40px;
padding: 8px 18px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid #e2e8f0;
transition: 0.2s;
}
.search-box:hover {
border-color: #94a3b8;
background: #ffffff;
}
.search-box input {
border: none;
background: transparent;
outline: none;
font-size: 0.95rem;
width: 180px;
color: #1e293b;
}
.search-box input::placeholder {
color: #64748b;
}
.avatar {
width: 42px;
height: 42px;
background: #cbd5e1;
border-radius: 50%;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
background-size: 60%;
background-position: center 55%;
background-repeat: no-repeat;
background-color: #e2e8f0;
border: 2px solid white;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* 导航栏 (草图第二行) */
.nav-bar {
background: #f8fafc;
border-radius: 16px;
padding: 6px 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
border: 1px solid #e2e8f0;
}
.nav-item {
padding: 8px 18px;
border-radius: 40px;
font-weight: 500;
color: #334155;
transition: 0.15s;
cursor: default;
white-space: nowrap;
}
.nav-item.active {
background: #2563eb;
color: white;
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
.nav-item:not(.active):hover {
background: #e9eef3;
color: #0f172a;
}
.nav-spacer {
flex: 1;
}
.nav-badge {
background: #f1f5f9;
padding: 6px 14px;
border-radius: 30px;
font-size: 0.9rem;
color: #475569;
border: 1px dashed #cbd5e1;
display: flex;
align-items: center;
gap: 6px;
}
/* 主体区域 ，， 内容 + 侧边栏 (草图核心) */
.main-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
flex: 1;
}
/* 左侧内容区 */
.content-area {
background: #ffffff;
border-radius: 20px;
padding: 8px 4px 8px 0;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 卡片/文章块 (模拟草图里的内容块) */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
}
.card {
background: #fbfdff;
border: 1px solid #e9eef3;
border-radius: 20px;
padding: 16px;
transition: 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.card:hover {
border-color: #b9c8da;
box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}
.card-img {
height: 120px;
background: linear-gradient(145deg, #dbeafe, #bfdbfe);
border-radius: 14px;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #1e40af;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.3px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233b82f6" opacity="0.4"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4-3h2v13h-2z"/></svg>');
background-size: 48px;
background-position: center;
background-repeat: no-repeat;
}
.card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 6px;
color: #0f172a;
}
.card p {
color: #475569;
font-size: 0.9rem;
margin-bottom: 12px;
}
.card-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #64748b;
border-top: 1px solid #edf2f7;
padding-top: 10px;
}
/* 侧边栏 (右侧) */
.sidebar {
background: #f8fafc;
border-radius: 20px;
padding: 18px 16px;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
gap: 22px;
}
.sidebar-title {
font-weight: 600;
font-size: 1.05rem;
color: #1e293b;
padding-bottom: 8px;
border-bottom: 2px solid #dbeafe;
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-item {
background: white;
border-radius: 14px;
padding: 12px 14px;
border: 1px solid #e9eef3;
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar-item .item-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #64748b;
}
.progress-bar {
height: 8px;
background: #e2e8f0;
border-radius: 20px;
overflow: hidden;
}
.progress-fill {
width: 70%;
height: 100%;
background: #2563eb;
border-radius: 20px;
}
.sidebar-stats {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 0.85rem;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.tag {
background: #e9eef3;
padding: 4px 12px;
border-radius: 30px;
font-size: 0.8rem;
color: #1e293b;
}
/* 底部 (草图页脚) */
.footer {
margin-top: 8px;
padding-top: 18px;
border-top: 2px solid #e9eef3;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
color: #64748b;
font-size: 0.9rem;
}
.footer-links {
display: flex;
gap: 24px;
}
.footer-links a {
color: #475569;
text-decoration: none;
}
.footer-links a:hover {
color: #2563eb;
}
/* 响应式：小屏幕时侧边栏移到下方 */
@media (max-width: 800px) {
body {
padding: 12px;
}
.layout {
padding: 16px;
}
.main-grid {
grid-template-columns: 1fr;
}
.sidebar {
order: 2;
}
.header-tools .search-box input {
width: 100px;
}
}
/* 细节保留：无破折号，用逗号分隔 */
.note-italic {
font-style: italic;
color: #475569;
}
</style>
</head>
<body>
<div class="layout">
<!-- 头部区域 (logo, 搜索, 头像) -->
<header class="header">
<div class="logo-area">
<div class="logo-icon">◆</div>
<div class="logo-text">草<span>图</span>本</div>
</div>
<div class="header-tools">
<div class="search-box">
<span style="opacity:0.6;">⌕</span>
<input type="text" placeholder="搜索...">
</div>
<div class="avatar" title="用户"></div>
</div>
</header>
<!-- 导航栏 (水平菜单) -->
<nav class="nav-bar">
<span class="nav-item active">首页</span>
<span class="nav-item">发现</span>
<span class="nav-item">项目</span>
<span class="nav-item">文档</span>
<span class="nav-item">组件</span>
<span class="nav-spacer"></span>
<span class="nav-badge">⌘ K 快捷指令</span>
</nav>
<!-- 主体网格：内容区 + 侧边栏 -->
<div class="main-grid">
<!-- 左侧内容卡片区 -->
<div class="content-area">
<div class="card-grid">
<!-- 卡片 1 -->
<div class="card">
<div class="card-img"></div>
<h3>卡片布局</h3>
<p>自适应网格，展示内容摘要，保留草图风格。</p>
<div class="card-meta">
<span>📅 2025-04-02</span>
<span>↗ 12</span>
</div>
</div>
<!-- 卡片 2 -->
<div class="card">
<div class="card-img" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%233b82f6\" opacity=\"0.3\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>'); background-size: 44px;"></div>
<h3>任务追踪</h3>
<p>进度一目了然，支持标签与优先级。</p>
<div class="card-meta">
<span>✅ 进行中</span>
<span>⏱ 3天</span>
</div>
</div>
<!-- 卡片 3 -->
<div class="card">
<div class="card-img" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%233b82f6\" opacity=\"0.3\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z\"/></svg>'); background-size: 44px;"></div>
<h3>媒体库</h3>
<p>图像、视频与文档统一管理。</p>
<div class="card-meta">
<span>🗂 24项</span>
<span>⬇ 8GB</span>
</div>
</div>
<!-- 卡片 4 -->
<div class="card">
<div class="card-img" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%233b82f6\" opacity=\"0.3\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4-3h2v13h-2z\"/></svg>'); background-size: 44px;"></div>
<h3>分析面板</h3>
<p>关键指标与趋势图，快速洞察。</p>
<div class="card-meta">
<span>📊 更新</span>
<span>↗ 89</span>
</div>
</div>
</div>
<!-- 额外占位描述，保持草图感 -->
<div style="font-size:0.9rem; color:#64748b; background:#f1f5f9; padding:10px 16px; border-radius:40px; margin-top:8px;">
⚡ 草图布局，保留所有占位符，无破折号，使用逗号分隔。
</div>
</div>
<!-- 右侧边栏 (侧边信息) -->
<aside class="sidebar">
<div class="sidebar-title">
<span>📋</span> 项目进度
</div>
<div class="sidebar-item">
<span class="item-label">设计稿完成</span>
<div class="progress-bar"><div class="progress-fill" style="width: 80%;"></div></div>
<div class="sidebar-stats">
<span>80%</span>
<span>4/5</span>
</div>
</div>
<div class="sidebar-item">
<span class="item-label">前端开发</span>
<div class="progress-bar"><div class="progress-fill" style="width: 45%;"></div></div>
<div class="sidebar-stats">
<span>45%</span>
<span>2.3/5</span>
</div>
</div>
<div class="sidebar-item">
<span class="item-label">测试与反馈</span>
<div class="progress-bar"><div class="progress-fill" style="width: 30%;"></div></div>
<div class="sidebar-stats">
<span>30%</span>
<span>1/4</span>
</div>
</div>
<div class="sidebar-title" style="margin-top: 8px;">
<span>🏷</span> 标签筛选
</div>
<div class="tag-list">
<span class="tag">#响应式</span>
<span class="tag">#UI</span>
<span class="tag">#草图</span>
<span class="tag">#组件</span>
<span class="tag">#CSS</span>
</div>
<div class="sidebar-item" style="background: #eef2ff; border-color: #c7d2fe;">
<span class="item-label">📌 固定备注</span>
<p style="font-size:0.9rem; margin:0;">保留所有占位符，参数如 --ar, 85mm, 4K, 24fps 均在代码中。</p>
</div>
</aside>
</div>
<!-- 页脚 -->
<footer class="footer">
<div>© 2025 草图布局，保留所有权利。</div>
<div class="footer-links">
<a href="#">隐私</a>
<a href="#">条款</a>
<a href="#">帮助</a>
</div>
</footer>
</div>
<!-- 说明：所有占位符均保留，未使用破折号，使用中文逗号 -->
</body>
</html>
```
### 布局结构与功能分区
这份代码将您绘制的草图转化为一个清晰、实用的后台管理界面框架。它主要分为以下几个功能区域：
1. **顶部工具栏**：包含品牌标识、搜索框和用户头像，方便进行全局搜索和用户操作。
2. **主导航栏**：提供“首页”、“发现”等主要功能入口，并设有快捷指令按钮，便于快速访问。
3. **主内容区**：采用网格布局展示信息卡片，每张卡片都包含图片占位、标题、摘要和元数据，适合展示项目或文章列表。
4. **侧边信息栏**：用于展示项目进度条、标签筛选和固定备注，方便用户快速了解项目状态和进行内容分类。
5. **页面底部**：包含版权信息和常用链接，完善页面结构。
---
**Optimization Tip:** 您可以根据需要替换卡片中的示例文本、图片占位符和侧边栏的进度数据，以匹配您的实际内容。
用法
此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。
为获得最佳效果，可将占位符（方括号或大写字母标示）替换为你的具体需求。
讨论
0 条评论