ChatGPT-3.5 代码网站
使用 ChatGPT-3.5 创建网站
使用 ChatGPT-3.5 创建网站就像有一位网站开发人员在你身边帮助你。
ChatGPT 可以帮助您入门！
写下你的想法
在使用生成式人工智能提供帮助之前，您必须弄清楚您希望网站包含什么。
需要考虑的一些步骤：
- 这个网站是关于什么的？
- 您想要图片吗？
- 您需要联系方式吗？
您提供的细节越多，ChatGPT 的性能就越好。
生成网站代码
为了举例，我们将要求 ChatGPT 创建一个简单的网页：
例子
出现以下提示：
创建一个简单的网页，其中包含我的纸杯蛋糕公司名称“Magically Delicious”、简短的描述、一些图片以及我的联系方式（Genevieve Lavorre，电子邮件：lavorre@tmn.com）
ChatGPT-3.5 的响应可能是：
让我们测试一下代码：（我们使用 Midjourney 生成了 3 幅图像）
例子
<!DOCTYPE html>
<html>
<head>
<title>神奇美味的纸杯蛋糕</title>
<style>
身体 {
字体系列：Arial，sans-serif；
边距：0；
填充：20px；
}
h1 {
文本对齐：居中；
}
。描述 {
文本对齐：居中；
下边距：30px；
}
。联系方式 {
文本对齐：居中；
上边距：30px；
}
.联系方式 p {
边距：10px 0；
}
.图片库 {
显示：弹性；
弹性包裹：包裹；
对齐内容：居中；
}
.图片库 img {
宽度：250px；
边距：10px；
}
</style>
</head>
<body>
<h1>欢迎来到神奇美味的纸杯蛋糕！</h1>
<div class="description">
<p>尽情享受我们美味纸杯蛋糕的魅力。</p>
<p>我们提供各种口味和设计来满足您的甜食需求并为您的味蕾带来魔力。</p>
</div>
<div class="image-gallery">
<img src="img_cupcake1.png" alt="纸杯蛋糕 1">
<img src="img_cupcake2.png" alt="纸杯蛋糕 2">
<img src="img_cupcake3.png" alt="纸杯蛋糕 3">
</div>
<div class="contact-details">
<p>如需订购或咨询，请联系我们：</p>
<p>姓名： Genevieve Lavorre</p>
<p>电子邮件: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</body>
</html>
亲自尝试 »
看起来不错！
审查代码并进行迭代
通过 ChatGPT 的回应，这是一个很好的起点。
让我们请求更多帮助：
例子
出现以下提示：
让页面看起来更好
ChatGPT-3.5 的响应可能是：
让我们测试一下代码：
例子
<!DOCTYPE html>
<html>
<head>
<title>神奇美味的纸杯蛋糕</title>
<style>
身体 {
字体系列：Arial，sans-serif；
边距：0；
填充：20px；
背景颜色：#f7f7f7；
}
h1 {
文本对齐：居中；
颜色：#442d6c；
字体大小：36px；
下边距：30px；
}
。描述 {
文本对齐：居中；
下边距：30px；
}
.描述 p {
字体大小：18px；
颜色：#555555；
行高：1.5；
下边距：10px；
}
。联系方式 {
文本对齐：居中；
上边距：30px；
}
.联系方式 p {
字体大小：16px；
颜色：#555555；
边距：5px 0；
}
.图片库 {
显示：弹性；
弹性包裹：包裹；
对齐内容：居中；
}
.图片库 img {
宽度：300px；
边距：10px；
边框半径：5px；
盒子阴影：0 2px 5px rgba（0，0，0，0.1）；
}
A {
颜色：#442d6c；
}
悬停{
颜色：#800080；
}
</style>
</head>
<body>
<h1>欢迎来到神奇美味的纸杯蛋糕！</h1>
<div class="description">
<p>尽情享受我们美味纸杯蛋糕的魅力。</p>
<p>我们提供各种口味和设计来满足您的甜食需求并为您的味蕾带来魔力。</p>
</div>
<div class="image-gallery">
<img src="img_cupcake1.png" alt="纸杯蛋糕 1">
<img src="img_cupcake2.png" alt="纸杯蛋糕 2">
<img src="img_cupcake3.png" alt="纸杯蛋糕 3">
</div>
<div class="contact-details">
<p>如需订购或咨询，请联系我们：</p>
<p>姓名： Genevieve Lavorre</p>
<p>电子邮件: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</body>
</html>
亲自尝试 »
这是一个非常简单的页面，但像这样快速开始可以节省大量时间。
