模板css-如何使用ChatGPT快速搭建网站模板？

英语：

欢迎来到自然语言处理和机器学习的激动人心的世界！ 明天，我们将探讨 OpenAI 公司开发的最先进的人工智能工具 ChatGPT 的功能。 其实你也可以把它想象成一个智能机器人。 ChatGPT 最令人印象深刻的功能之一是它能够从简单的描述生成源代码。

想象一下无需自己编写一行代码就能快速构建整个网站吗？ 听起来难以置信？ 而且ChatGPT可以帮助我们实现这样的需求，现在就让我们上去见证奇迹的发生吧！

利用ChatGPT的强大功能，我们将尝试从头开始手动构建一个完整的网站模板结构，并查看结果的准确性和效率。

除了展示 ChatGPT 的功能之外，这个实验还让我们了解了未来技术如何彻底改变我们开发和构建网站的方式。 现在，我们就上去详细了解一下ChatGPT能做什么吧！

我们要建造哪一个？

我们将使用 ChatGPT 构建的网站将在主页上显示来自名为“quotes.txt”的文本文件的随机引用。

访问网站时，应用程序读取quotes.txt文件的内容，然后从报价列表中随机选择一条报价并将其传递到后端，并在后端显示在网页上。

据悉，该网页还包含一个标有“更改报价”的按钮，点击该按钮后将刷新页面并显示另一个随机报价。

为此，我们首先要求 ChatGPT 生成 Steve Jobs 名言列表：

然后我们要通过ChatGPT生成一个网站的页面描述：

根据我们的文字描述，ChatGPT 正在生成全面的响应，其中包括使用 Python 编写并使用 Flaskweb 框架的分步说明和源代码：

为了使用提供的代码，我们必须使用以下命令在这个新项目文件夹中创建一个项目文件夹和文件：

$ mkdir flask-quotes$ cd flask-quotes$ touch quotes.txt$ touch app.py

首先，我们需要将生成的 20 个冒号复制到文件quotes.txt 中。

选择它并将 ChatGPT 为文件 app.py 提供的源代码复制到其中。

此代码是 Flask 应用程序的基本示例，该应用程序在网站主页上显示名为“quotes.txt”的文件中的随机引用。

app=Flask(__name__) 创建一个新的 Flask 应用程序并将其分配给变量 app。

@app.route('/') 装饰器用于定义网站主页的路由。 当访问该路由时，将调用函数 home()。

在函数内部，脚本使用 open() 函数打开“quotes.txt”文件，并使用 .readlines() 方法将文件内容分配给变量引用。

之后，使用 random.choice(quotes) 函数，脚本从报价列表中随机选择一个报价。 选取的引用作为名为“quote”的变量传递到返回的 home.html 模板以在浏览器中呈现。

if__name__=='__main__': 行用于检测脚本是直接运行还是作为模块导出。 如果直接运行，app.run(debug=True) 行将启动开发 Web 服务器并运行应用程序。 debug=True 参数用于在开发过程中启用交互式调试器。

我们从 ChatGPT 收到的下一个命令可以在下面的屏幕截图中看到：

让我们按照 ChatGPT 建议的步骤创建一个新文件夹 templates，并在该文件夹中创建一个新文件 home.html：

$ mkdir templates$ touch templates/home.html

将 HTML 代码从 ChatGPT 复制并粘贴到 home.html 中。

这是一个 HTML 页面模板，显示一个标题为“Steve Jobs 的格言”的网页、一个同标题的标题标签、一个显示前端传递过来的格言的 div 元素以及一个标有“更多名言”按钮的 div 元素，单击时重新加载网页。 该模板还链接到用于设置页面样式的 CSS 文件。

接下来我们将收到有关将 CSS 代码包含到 Flask 项目中的说明：

输入以下命令再次按照此说明操作：

$ mkdir static$ touch static/styles.css

最后，我们将 CSS 代码从 ChatGPT 复制并粘贴到 styles.css。

就是这样，我们将测试一切是否按预期工作。 输入以下命令启动 Web 开发服务器：

$ python app.py

之后，我们应该在命令行上看到以下响应：

服务器运行在本地5000端口，然后在浏览器中输入127.0.0.1:5000即可访问网站：

现在，我们的网站页面就完成了，通过浏览器模板css，我们就会看到我们想要的页面的输出样式，完全符合我们的要求。

随机选择并显示一个报价，我们可以使用“ChangeQuote”按钮随机选择一个新的报价并更新，我们将得到以下页面效果：

总结

对于ChatGPT这个AI工具来说，它能实现的远不止是一个网站页面模板。 它可以做很多事情。 ChatGPT的出现是AI领域的重大突破。 为什么这么说呢？ 因为它的语言模型更接近人类语言，不会像机器人那样生硬，而且会灵活。 如果你也喜欢AI和机器学习，可以自己下载安装体验一下。 在使用的过程中，使用英语进行交流会比用英语更加友好。

其实并不是说英语不能用，英语也是可以的。 它做了很多训练，支持很多国家的语言​​​​。

嗯，明天的内容我就分享到这里。 我希望你会喜欢。 如果您觉得有用模板css，请记得点赞我，关注我，并把这篇文章分享给您的同事。 这实际上可以帮助他。

ChatGPT 英文网站

可以和国外的ChatGPT直接对话，而且还支持AI绘图，简直太方便了！

-EOF-

— 完 —
关注公众号后，回复下面关键词获取
回复 加群，加入前端程序员技术交流群


回复 面试，获取最新大厂面试资料
回复 简历，获取 3200 套 简历模板
回复 TypeScript，获取 TypeScript 精讲课程
回复 uniapp，获取 uniapp 精讲课程
回复 Node，获取 Nodejs+koa2 实战教程
回复 架构师，获取 架构师学习资源教程

更多教程资源应用尽有，欢迎 关注获取

原著：珍·西蒙斯
翻译：Erichain_Zain
链接：segmentfault.com/a/1190000006734430
在 CSS 中css中，有一个你可能没有听说过的工具，它已经存在了一段时间，但它非常强大。 事实上，它将成为 CSS 中你最喜欢的东西之一。
那么，它们是什么？ 就是@support，也就是函数查询。
通过@support，你可以在CSS中使用一个简短的测试来查看浏览器是否支持特定的CSS功能（这个功能可以是CSS的某个属性或者某个属性的某个值），然后根据测试结果来确定是否应用某种风格。 例如：
@支持（显示：网格）{
//如果浏览器支持Grid，则只能执行里面的代码
如果浏览器可以理解display:grid，那么将使用大括号中的代码，否则，将跳过此样式。
如今，您可能仍然对什么是函数式查询有点困惑。 它不是某种额外的验证来剖析浏览器是否正确实现了某个 CSS 属性。 如果您需要查看其他验证，请查看 TesttheWebForward。
功能查询让浏览器本身显示是否支持 CSS 属性或 CSS 属性值。 然后根据这个结果来判断是否应用某个CSS。 如果浏览器没有正确（或完全）实现 CSS 属性，那么 @supports 就没用了。 它并不是消除浏览器错误的魔杖。
然而，我长期以来发现@supports 非常有帮助。  @supports 允许我在没有此属性的情况下一遍又一遍地使用新的 CSS 功能。
多年来，开发人员一直使用 Modernizr 来实现功能查询，而 Modernizr 需要 JavaScript。 事实上，这部分 JavaScript 很小，如果将 Modernizr 添加到 CSS 结构中，则需要下载 JavaScript 并等待执行完成才能应用 CSS。 添加 JavaScript 总是比使用 CSS 慢。 而且，如果 JavaScript 执行失败怎么办？ 此外，Modernizr 需要额外的复杂性，这对许多项目来说很难理解。 相比之下，函数查询更快、更强大、更易于使用。
您似乎已经注意到@supports的编写方式与媒体查询类似，我认为它们可能是表兄弟。
@支持（显示：网格）{
主要的{
显示：网格；
网格模板列：重复（自动调整，minmax（280px，1fr））；
大多数时候，您可能不需要这样的测试。 例如可以直接写：
在旁边 {
边框：1pxsolidblack；
边界半径：1em；
如果浏览器可以理解border-radius，那么圆角样式就会应用到相应的容器上。 如果它不能理解这个属性，那么它会直接跳过并继续执行下面的语句。 容器的边缘保持直角。 完全不需要使用功能查询或测试，这就是 CSS 的工作原理。 这是CSS扎实设计和逐步改进的基本原则。 浏览器只是跳过它们无法解析的句子，而不会抛出任何错误。
大多数浏览器也应用 border-radius: 1em;  ，然后在左侧显示效果。 而且在IE6、7、8上是看不到圆角的，看到的就是右边的效果。 您可以看一下这个示例：ARoundedCornerBox。
对于这个反例，没有必要使用函数查询。
那么，什么时候需要使用@supports？ 函数查询是一种将 CSS 声明绑定在一起的工具，以便 CSS 规则可以在某些条件下作为组合运行。 当您需要将新的 CSS 规则与旧的规则混合时，但仅当支持新的 CSS 功能时，才使用功能查询。
译者注：并非所有现代浏览器都支持以下示例中的initial-letter 属性，因此以下示例中的代码可能是无效代码。 如果下面提到浏览器支持该属性，请忽略它。 关于initial-letter的详细描述，请参考initial-letter|MDN。
让我们看一个关于使用首字母的反例。 该属性告诉浏览器使指定的元素显得更大，就像段落大写一样。 在这里，我们要做的就是将段落的第一个字母设置为四行文本的大小。 同时，我们将其再次加粗，在其左侧设置一些边距，并为其设置突出显示的蓝色。 好的，棒极了。
p::第一个字母{
右边距：0.5em；
颜色：#FE742F；
字体粗细：粗体；
-webkit首字母：4；
首字母：4；
这是在Safari上的疗效
让我们看看它在其他浏览器上的工作原理。
嗯，简直令人无法接受。 除了使用首字母来达到我们想要的效果之外，我们不想改变字体的颜色、边距和字体粗细。 因此，我们需要一种方法来测试浏览器是否支持首字母属性，然后在浏览器支持该属性时应用相关样式。 因此，使用函数查询：
@supports(首字母:4)或(-webkit-首字母:4){
p::第一个字母{
-webkit首字母：4；
首字母：4；
颜色：#FE742F；
字体粗细：粗体；
右边距：0.5em；
注意，测试的时候，需要完整的测试，CSS属性和值都得写。 一开始我也很怀疑，为什么一定要测试initial-letter:4呢？  4 这个值重要吗？ 如果我写17呢？ 它需要与我将要使用的 CSS 中的样式相匹配吗？
原因是这样的：@supports测试时需要提供属性和值css中，因为有时测试属性，有时测试值。 对于首字母，输入多少个值并不重要。 而且，如果是@suports(dislay: grid)，那就不同了，所有浏览器都识别display，但是，并不是所有浏览器都识别display: grid。
回到我们的例子，当前的首字母仅在 Safari9 上受支持，并且需要添加前缀。 因此，我添加了前缀，同时保留了无前缀规则，但我还编写了测试来测试附加属性。 没错，and、or、not 语句也可以用在函数查询中。
以下是新结果。 理解首字母的浏览器将显示一个大的、粗体的、突出显示的段落标题。 其他浏览器的行为就像段落标题不存在一样。 事实上，如果更多的浏览器支持这个属性，那么它们的行为也可能是拥有段落标题。
组织你的代码
现在，恐怕您迫不及待地想使用这个工具将您的代码拆分为两个分支并使其看起来更干净。  “嘿，浏览器，如果您识别视口单位，请执行此操作，否则，请执行其他操作”。 感觉很好而且很有条理。
@支持（高度：100vh）{
//支持viewportheight样式
@supportsnot（高度：100vh）{
// 旧浏览器的替换样式

//我们希望它是好的，但这是糟糕的代码
这段代码并不好，至少目前是这样。 发现问题了吗？
问题在于，并非所有浏览器都支持功能查询，不理解@supports的浏览器只会跳过两块代码，这可能太糟糕了。
这意味着，除非浏览器 100% 支持功能查询，否则我们就不能使用它们？ 其实不是，我们可以使用函数查询，但是我们应该使用函数查询，只要我们不要像以前那样写代码。
那么，怎样做才是正确的呢？ 虽然与使用媒体查询类似，但我们在浏览器完全支持媒体查询之前就开始使用媒体查询了，不是吗？ 事实上，特征查询比媒体查询更容易使用，只是因为它很聪明。
您想让您的代码知道浏览器是否支持功能查询或正在测试的功能，我将向您展示如何做到这一点。
事实上，将来当浏览器100%支持函数查询时，我们可以广泛使用@supportsnot来组织我们的代码。
支持特征查询
那么，@supports 今天怎么样？
自 2013 年中期以来，@supports 已在 Firefox、Chrome 和 Opera 中提供。 各个版本的 Edge 也都支持。  Safari 在 2015 年夏天才实现了该功能，具体支持请看下图：
您可能认为 IE 不支持此功能将是一个大问题，但事实并非如此。 我马上告诉你原因。 我认为最大的障碍之一是 Safari 8，我们需要关注该浏览器上发生的情况。
我们再看一个反例。 假设我们有一些布局代码需要使用 object-fit:cover; 为了正常运作。 对于不支持此属性的浏览器，我们希望使用不同的样式。
所以，我们可以写：
@supports(首字母:4)或(-webkit-首字母:4){
p::第一个字母{
-webkit首字母：4；
首字母：4；

颜色：#FE742F；
字体粗细：粗体；
右边距：0.5em；
div {
宽度：300px；
背景：黄色；
@supports（对象适合：覆盖）{
图像{
对象适配：覆盖；
div {
宽度：自动；
背景：绿色；
会发生什么？  @supports 可能受支持，也可能不支持，object-fit 可能受支持，也可能不支持。 因此，有四种可能：
函数查询支持属性（或值）支持将发生我们想要的
支持
不支持
将应用 CSS
是的
支持

不支持
CSS 将不会被应用
是的
不支持
支持
CSS 将不会被应用
是的
不支持
不支持
CSS 将不会被应用
不
最佳实践
那么，函数查询的代码应该怎么写呢？ 就像下面这样：
//旧版浏览器的后备代码
@支持（显示：网格）{
//新浏览器的代码
//如果需要的话，包括覆盖上面的代码
译者注：本文主要内容是介绍函数查询和@supports的用法，因此个别代码可能难以运行，敬请读者注意。 同时，由于原文中有些内容变得多余，有些内容没有翻译。 如需了解详情，请查看原文。
【今日陌陌公众号推荐↓】