论不会写代码的小白如何用文心快码 Baidu Comate学会网页制作
yund56 2025-05-12 16:41 8 浏览
课程目标:
动手实验用文心快码 Baidu Comate编码,使用 html/css/js 代码还原 文心快码 Baidu Comate在IDE对话区的欢迎页,排版如下图所示。
新建一个空文件夹,命名为Comate-playground,把它拖拽到 VS Code 中打开,或者在vscode中打开,新建一个名为 index.html 文件
等待 Comate 帮你初始化这个文件
你可以自己写一遍,这个结构:
此时我们有了一个最基本的 html 结构,这个结构让浏览器知道这是一个 html 的页面
(+简单介绍下html页面的代码结构,很简单,两个<head>中间需要写的define这个head的内容,)
为了方便我们快速预览页面的效果,建议另外安装 ms-vscode.live-server 插件,你就可以边改代码,边预览对应的效果了
想简单了解下 html?在对话中提问 Comate:“我正在学习 html,请在一个 html body 中列举一些常见的标签的例子”
一个页面主要由:内容 + 样式 + 交互组成,接下来我们引导 Comate 一起完成开发
内容:
5.1.1 如何添加图片
5.1.2 如何制作一个输入框并添加输入框内容
- 我们可以写注释来提示 Comate 写代码。在 html 中,<!-- xxx --> 这样的标记代表注释。我们可以把光标放在一个空行区域,用快捷键 command + / 快速打出这样的标记。如下图所示:
样式:
5.2.1 如何修改背景颜色,渐变等
5.2.2 如何将标题区域居中
5.2.3 如何让输入框驻在底部
- 在添加样式前,我们可以听取 Comate 的建议:“如何给 html 元素添加样式”。
第二课时:
交互:点赞点踩(点击后填充、点赞与点踩互斥)
图片资源 | 地址 |
Comate logo | https://comate.now.baidu-int.com/download/resources/misc/comate-logo.png |
点赞 icon | https://comate.now.baidu-int.com/download/resources/misc/like.svg |
已点赞 icon | https://comate.now.baidu-int.com/download/resources/misc/filledLike.svg |
点踩 icon | https://comate.now.baidu-int.com/download/resources/misc/dislike.svg |
已点踩 icon | https://comate.now.baidu-int.com/download/resources/misc/filledDislike.svg |
结构优化,提问 Comate:“如何把 script 和 css 放到单独文件中”
使用 Comate 调优 js 函数,并添加函数注释
恭喜,你和 Comate 一起实现了一个不简单的编码任务!
进入文心快码 Baidu Comate 官网,体验智能编码之旅,还有超多福利!
相关推荐
- 今日起,办理游戏版号这么做就行了!真的太方便了
-
在“大众创业,万众创新”的浪潮下,我国很多创业者也看到了游戏的前景,准备在游戏行业分一杯羹。 但根据国家新闻出版广电总局颁布的《关于移动游戏出版服务管理的通知》,游戏需要通过国家新闻出版广电总局...
- 给大家推荐些好的c语言代码的网站
-
C语言,那就来推荐几个吧,部分含有C++:1、TheLinuxKernelArchives(kernel.org)Linux内核源码,仅限于C,但内核庞大,不太适合新手;2、redis(redi...
- 手游平台没有源码的三大危害
-
搭建一款属于自己的手游平台可以直接和游戏研发商对接游戏,既减少中介的差价,还能根据自己需求去选择游戏。对于玩家而言,手游平台给予了玩家更多的选择机会,对于运营者而言,借助平台可以更好地服务玩家,通过对...
- 游戏源代码开发时需要什么,需要哪些团队成员?
-
游戏由于她轻松娱乐,对战刺激,寓教于乐等特点,吸引住了一大批不一样年龄阶段的用户,例如喜爱竞技游戏的年轻群体,需要益智游戏的儿童等。游戏源代码是游戏构建的基础,尽管将开发时分成开发软件和游戏开发2个概...
- 育碧经典游戏《孤岛惊魂1》源代码遭泄露,玩家表示可以运行
-
IT之家7月3日消息,一份名为“FarCry1.34Complete”的游戏源代码已经出现在了互联网档案网站“Archive.org”上,并且在Reddit论坛和各种社交媒体上得到...
- 神秘网站倒数结束 令人一头雾水
-
还记得那个疑似小岛秀夫作品的《黑色猎犬》倒计时网站吗?现在该网站已经停止倒计时,仅剩一段话“这里原来有一个倒计时,现在没了”……点击这句话会跳转到国外网站Funhaus的一个莫名其妙的视频,然而评论的...
- LOL源代码娜美免费领取地址 LOL源代码娜美领取活动网址分享
-
[海峡网]在英雄联盟中近日国服的服务器一直不稳定,繁出现卡顿和功能错误等问题,官方现在正在努力维护,为表歉意将免费赠送给玩家一款“源代码·娜美”的皮肤,那么这个皮肤要怎么领取呢,小编相信小伙伴们一定都...
- 个人网站集成js小游戏《圈小猫》教程及源码
-
今天在某网站浏览帖子的时候,发现帖子被删除了,然后弹出了404页面,页面上集成了一个小游戏,小游戏长什么样子呢?看下面这个图!第一步查看小游戏源码,发现这个小游戏完全是由JavaScript编写的,因...
- Scratch创意编程-数学问答游戏
-
项目名称:数学问答游戏目标年龄群体:8-12岁项目简介:在这个Scratch创意编程项目中,学生们将扮演数学家,通过解答数学题目来挑战自己的数学技能。游戏中包含了加法、减法、乘法和除法等基本算术题,以...
- 少时不努力长大程序猿 酷比魔方AI百变编程套件体验测评
-
本文产品为厂家送测,坚持独立的评价观点是笔者创作的基本底线,绝不会因商品来源不同而有所偏颇,请各位放心。写在开始讲讲今天男主的故事这篇体验到的目标群体是跟我一样,家中有个在上小学二年级的小学生。首先...
- 孩子的scratch作品只能演示?教你把它三步变为电脑软件
-
随着少儿编程的发展,越来越多的家长和孩子开始投身其中。对于初学者来说,最好的编程工具就是Scratch,它是麻省理工学院的“终身幼儿园团队”开发的图形化编程工具,主要面对青少年开放。这是对孩子最好的编...
- 打地鼠小游戏制作教程
-
打地鼠这个小游戏貌似比我的年龄都要大,这次我们使用scratch3.0图形化编程软件来制作一款我们自己的“打地鼠”。我们先准备4样角色,分别是:地鼠角色、锤子角色、地洞角色、草地角色。地鼠→使用猫...
- Scratch2.0接苹果小游戏讲义整理
-
Scratch2.0接苹果小游戏概貌见动图:这又是一款经典的Scratch小游戏,是孩子们学习Scratch编程软件的良好载体,不容错过。(一)玩法说明接到慢速的红苹果一个加1分;接到中速的红苹果一个...
- 少儿编程太难?原来可以闯关玩游戏啊
-
随着编程学习全球化的趋势,国内编程学习热潮日盛,越来越多的家长开始让孩子接触学习编程。然而我们都不了解这个少儿编程是到底是什么,近年来,许多家长开始给小孩报编程学习班。最小的从幼儿园开始就在学习...
- 如何在Scratch中创建一个两人赛艇游戏
-
本分步指南将教您如何使用Scratch程序创建划船游戏。完成对这个简单游戏的编程后,两条船将使用按键命令一起竞赛。步骤1.打开Scratch。2.删除名为“Sprite1”的猫。您可以通过右键单击它...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)