超好用【ChatGPT + Visual Studio Code】完美整合,變身超強程式設計高手!
Summary
TLDR在这段视频中,主讲人介绍了如何将ChatGPT直接整合到Visual Studio Code中,从而提高网页设计的效率。通过安装ChatGPT4扩展,用户可以直接在Visual Studio Code中询问编程问题,获取快速回答和编程指导。视频演示了创建一个响应式网站的全过程,包括如何添加背景图片、调整图片大小、增加透明度和下拉式菜单等功能。此外,还展示了如何通过ChatGPT进行问题解决和功能添加,无需频繁切换至官方网站。最终,观众可以学习到如何有效利用ChatGPT在Visual Studio Code中开发和优化网页设计。
Takeaways
- 😀 整合ChatGPT到VS Code,实现代码辅助
- 👍 设置context,联动当前项目代码
- 📝 ChatGPT能快速生成完整前端代码
- 🔧 按需获取所需新增代码段
- 🖥 生成响应式网站代码
- 🌈 增加页面交互和动画
- 🎨 调整样式美化网站
- ⬇️ 添加下拉菜单实现功能
- ➕ 不断追问完善网站功能
- ✅ 最终实现功能完整的响应式网站
Q & A
设置ChatGPT整合有什么好处?
-整合ChatGPT到VS Code可以更快速方便地使用,无需在网页版本间切换。直接在编写代码时提问,ChatGPT可以提供代码建议和修正,大大提高编程效率。
如何让ChatGPT理解当前的代码环境?
-可以在VS Code里启用Ask codebase功能,让ChatGPT连接并理解你当前的代码,这样提问时就有context,它就明白你在问什么和要做什么,可以给出更好的回答。
设计响应式网站需要注意什么?
-需要设置media queries,当屏幕大小改变时自动调整布局样式,使内容能正常展示。此外,图片、视频等资源也要考虑响应式设计,确保不同设备都能良好显示。
Column类设置了鼠标hover时如何避免格式错乱?
-需要额外设置column内文字和图片的位置为absolute,防止hover后位置发生变化导致错乱。或者也可以设置flex布局来固定位置。
下拉菜单如何美化?
-可以设置下拉菜单的大小、字体、颜色、hover效果等。比如设置宽度、圆角、背景颜色、文字颜色、阴影效果等来美化外观。
全屏背景图如何设置?
-可以通过设置body和html的高度为100%没有margin和padding,再给它们设置背景图来实现全屏背景效果。背景图设置为no-repeat和fixed也很重要。
透明背景如何实现?
-主要是利用CSS的opacity和RGBA来调整元素的透明度实现的。将opacity设置为0.5即是50%透明度。RGBA可以设置颜色的alpha通道来调整透明效果。
响应式网站测试方法?
-可以通过浏览器自带的开发者工具来模拟不同设备的展示效果,如设置为手机模式Preview Devices。也可以在不同设备上都测试查看一次,确保效果正常。
如何快速插入网络图片?
-可以在网页上右键复制图片地址,然后在代码的img src属性里直接粘贴该链接即可快速插入网络图片。需要确保权限允许跨域使用。
响应式效果测试不通过如何修改?
-可以在ChatGPT详细描述问题症状并询问修正方法。逐步调试,多次提问和答复,直到问题得到解决。也可以查阅其他教程或社区讨论。
Outlines
😀 集成ChatGPT到Visual Studio Code的介绍
视频开始介绍了C w C频道,旨在提升网页设计能力,并引入了如何使用Visual Studio Code集成ChatGPT来提高编程效率。通过直接在Visual Studio Code中查询ChatGPT来检查错误和新增功能,避免了频繁的网页跳转和复制粘贴操作,大大提升了工作流的效率。介绍了安装ChatGPT4插件的步骤,以及如何通过连接code base简化查询过程,使得持续的问题解决变得更为方便和安全。
😊 使用ChatGPT创建网页的实战演示
通过创建一个名为“news”的新文件夹,并在Visual Studio Code中打开,视频演示了如何实际使用ChatGPT来设计一个网页。介绍了向ChatGPT查询创建具有标题、图片和文本内容的三栏式网页的过程,包括HTML、CSS和JavaScript代码的生成。强调了如果遇到没有任何程序输出的情况,应如何重新启动Visual Studio Code或重新查询的解决方案。
😃 增强网页设计的ChatGPT应用示例
本段展示了如何利用ChatGPT进一步增强网页设计,例如通过添加响应式网页功能,使网页能够适应不同屏幕尺寸。还介绍了如何添加鼠标悬停在特定栏位时背景颜色变化的交互效果,并演示了如何通过ChatGPT查询来实现这些功能,提供了一个简洁有效的方法来丰富网页的互动性和视觉吸引力。
😄 通过ChatGPT提升网页视觉效果
介绍了使用ChatGPT为网页添加背景图片,包括如何使背景图片覆盖整个网页并固定位置,以及如何快速搜索并应用网络图片作为背景的技巧。还展示了如何调整图片大小和添加透明度,使网页设计更加精美和个性化。此外,还介绍了如何利用ChatGPT创建下拉式菜单并实现特定栏位的显示隐藏,进一步增加网页的交互性。
😁 利用ChatGPT进行网页设计优化
最后,视频展示了如何通过ChatGPT继续优化网页设计,包括调整下拉式菜单的宽度和美化样式,以及解决下拉式菜单选择后格式错乱的问题。通过持续询问ChatGPT来达到精确的设计需求,视频强调了ChatGPT在解决网页设计中遇到的具体问题上的实用性和便利性,最终实现了一个既美观又功能齐全的网页。
Mindmap
Keywords
💡網頁設計
💡ChatGPT
💡響應式網站
💡Visual Studio Code
💡HTML
💡CSS
💡JavaScript
💡程式碼生成
💡網頁功能
💡網頁美化
Highlights
使用visual studio code整合ChatGPT, 避免反覆複製粘貼
ChatGPT4擴充功能可直接在編碼器中使用, 速度較快
啟用ChatGPT編碼上下文, 讓其自動理解目前開發內容
可提問程式碼實作細節, 如響應式、互動效果等
每次只需顯示新增程式更便於使用
背景圖片選址大多需要手動設定
體驗過程需具備基本網頁開發知識
可指定只顯示新增程式代碼, 明確知悉更動
ChatGPT整合方便快速完成複雜功能
詳細持續提問達成理想效果
版面亂跳常需手動修正格式問題
登入與升級可解除詢問次數限制
整合成功創建響應式新聞網站樣式
ChatGPT具體代碼可直接複製使用
須具基本概念瞭解如何運用代碼
Transcripts
哈囉!大家好
歡迎來到C w C channel
一個希望的網頁設計能力變強的頻道
這個影片我要來說明如何
使用visual studio code
整合chatGPT
過去以往我們在使用chatGPT
我們會到chatGPT的官方網站來搜尋
但這個使用過程有時候
並不是很有效率
有時候chatGPT
所生成的程式檔案會出來的很慢
同時我們要一直不斷的跳轉
這裏複製這裏貼上這裏貼上這裏複製
所以有沒有一個辦法可以將
ChatGPT直接整合到visual studio code
我們直接問我們的程式裏頭的內容
那ChatGPT直接幫我們檢查
是否有錯誤的程式
同時當我們想要新增什麽功能
我們直接在video studio code裏頭詢問ChatGPT
讓他來提供我們程式來新增
不一樣的功能
那這個影片呢
我就要來教各位如何整合ChatGPT
例如在這邊我可以直接問
什麽是響應式網站
他就很快速的說明什麽是響應式網站
我不用特地的在跑到
這個網頁的版本
然後問問題
然後等他的回答
而且你看他所生成的內容
出現的速度比較慢
我們必須要等一直等等到他全部打完
那在這邊呢
他產生的速度會相對的較快
有了這個ChatGPT的幫忙
讓你瞬間變成程式設計高手
好現在這個影片馬上開始
好首先你先開啟你的visual studio code
在visual studio code的左邊
有一個extension的功能
在這邊點選這裏你可以安裝一
些額外的衍生的程式
到你的visual studio code那
我個人試用後的結果推薦這一個版本
這個是ChatGPT4
所以當你來到了extention之後
點選這個按鈕之後呢
接下來你在上面的搜尋的地方
麻煩你尋找ChatGPT4
這個是我試用之後呢
覺得是最好使用的
所以呢推薦給大家來
那在我錄製這個影片的時候呢
它有資源ChatGPT4跟3.5的版本
同時你可以連接你的code base
有些我們必須要提供程式現在不用了
只要你連接你的code base
你可直接詢問
同時你可以很簡單的follow up
就是持續的詢問相關的問題
那它是比較相對的安全然後很好使用
所以呢這個我試用之後的結果
我覺得這個是最好使用的
那也是最強大的
在這裏分享給大家
那現在呢如果你還沒下載的話
在這邊你可以點選下載
那下載完之後你在你的左邊
的功能欄裏頭就會多出了一個叫做
4GPT的這個圖示
當你點選下去
你就可以直接的在你的video studio Code
詢問任何你想要問的問題
這裏我就問一個問題
前端的網頁程式設計要學什麽語言好
我就詢問
那他直接的就會答案
顯示在這Visual Studio Code
所以非常的快速簡單
你不用特地的在跑到網頁的版本
有時候還出現問題
他這裏就會直接的回答
接下來呢
我們還是要一個資料夾才可以做網頁
所以麻煩你建立一個資料夾
在我的桌面上
我建立一個新的資料夾叫做news
這個資料夾在這邊
這個news資料夾目前空無一物
OK空無一物
然後然後接下來呢
我就要來開啟我的資料夾
所以我按下了左上方的explorer
這一個按鈕
好再按下open folder之後
我就要去連接我的資料夾
那這個資料夾
我選擇的就是news這個資料夾
好
就是我桌面上也就是這一個資料夾
好我現在就把它做連結
接下來呢我就要來開啟一個新的網頁
好點選這一個加的按鈕
那這個新的網頁
我就把它取名叫做index好了
只是一個名稱啊
你可以取名任何你想要的
那現在這一個檔案index點HTNL
空無一物
我現在要靠ChatGPT
來幫我設計出我所想要的網頁
好我現在就來詢問了
假設說我想要設計一個新聞發布
資訊分享的一個網站
好了那在我詢問之前
你看到這裏有個東西叫做ask cold based
這個就是連結
你的目前在寫的程式內容
也就是換句話說
我根本不用問他現在我的程式是什麽
你看這裏no context
如果我連結的話呢
就有context
context就是一種你目前的一個情境
那目前我在
我在做這一個程式的設計
他就知道說我要問的就是相關的
所以當我要問我程式相關的
我只要把它點選就可以開啟
那這個開啟的方法你必須要做連結
所以呢現在當你開啟這個ChatGPT4之後
點選這個ask cold base OK
然後他問說哎
你必須要先做index
也就是要做連結
好按下OK
接下來呢
我要連結的資料夾
就是我的news資料夾
當我選擇下去之後你看他現在開啟了
他就有context specific
就是說你現在所有打的程式
他都知道你要問這些了
如果我不要我就取消就好了
no context我要的話我就點選
他就知道我要問的是程式
那這個好處就是
我不用再剖我的程式給他了
他已經知道我要做什麽了
OK所以呢請做這個連結
他會省去你非常多的時間
好那這個影片呢
就以設計這一個網頁當做目標
總共有3個藍位
當然之後可以更多
現在就以3個欄位為做示範
每個欄位有圖片有標題
也也有這個文字的內容
那在背景也有圖片
同時這個網頁是一個響應式的網頁
也就是當我的一幕
變成像是手機的一幕的時候
他就會以上下的方式來排列
好那就以這一個網頁的
的一個設計當做目標
來做示範
好那你現在回到了visual studio coat
那在使用之前跟各位說明一下
你這邊可以登錄
如果你有check GPT的賬號密碼的話
你可以在這邊登錄
如果你不要登錄也沒有關系
例如這邊我就不登錄
另外呢在上面這邊你可以try
without account這一個
你就可以不用登錄啊
另外呢當你點選下去之後
如果你不登錄的話這裏可以設定
那在設定裏頭
你可以設定說你要使用的
的chat GBT的版本
你可以選擇chat
GBT4 或者是3.5
那或者是你也可以升級
如果你按下這個features這個功能的話
你可他就會說明
說他你可以怎麽樣去使用
這個ChatGPT
在video studio code裏頭
OK然後如果你有discord的的賬號的話
你也可以用discord來登錄
如果你要升級
OK譬如說在這邊他就說明升級的內容
不過這個升級是需要付費的
譬如說我這裏點寫下去
然後如果你升級成Pro的版本的話
可以無限的使用
那如果你沒有升級
你可以詢問一定的量
之後呢他就會叫你說你問太多
然後請等20分鐘之後才能再問
所以在這邊如果你沒有升級
那在使用這個功能的時候會有
執行次數的限製
那除非你升級OK
那你如果真的升級的話
那請你要到這個sign up這邊來登錄
那這樣他就知道你是升級後的使用者
那你就可以使用多次的
chat GPT的詢問
好那這邊我的示範我就使用try without
account這一個
好那我現在回到了這一個check GPT的
詢問的頁面
OK那現在呢
我就啊來詢問
說我想要建立一個三欄頁的網頁
那每個欄位有顯示標題
圖片以及文字內容
嗯然後請提供完整的程式內容
在這邊呢我再加上幾句好了
包括HTNL CSS還有Java script
好這樣子的描述完之後呢按下執行
他就會開始跑裏頭的資訊
有時候你在執行的時候
他會出現沒有任何程式的現象
如果這種情況
產生的話請麻煩啊重新的開啟OK
可能重新開啟你的be your studio coat
或者是重新的點選啊features這些
上面的藍位
有時候會出現這種現象
那要解決的話呢就是重新的輸入OK
跟各位說明一下
好那我現在先回到我的網頁
目前我沒有任何東西
那由於我說起提供完整的程式內容
所以他現在提供了完整程式內容
所以我要做的事情非常簡單
我只要按一下
他就會完整的復製下來
我來到了這個空白的網頁
那我就把它貼上
那我就有這個程式的內容
接下來下面這邊是CSS
所以我一樣的復製
我復製完之後呢
為了能夠輕松方便的顯示
我這裏我就不使用外部連結的方式
我就直接在這裏打上style
我就直接把CSS打在這邊了
因為我要展示使用所以我就方便為主
OK所復製貼上這一段CSS到這邊
好那現在完成了之後呢
啊我把它儲存起來
我來開啟這個網頁
好我按兩下打開
那現在這個網頁確實是有三個欄位
那這三個欄位啊有圖片
那現在圖片沒有任何的東西
我來看為什麽沒有任何東西
因為我想他應該是使用OK
它是使用內部的連接的方式
OK顯示的圖片
好那接下來我再來詢問
因為目前的網頁
並沒有我來看看他們響應式的網頁
我現在把這個網頁調整了之後呢
他並不是響應式的
所以呢我這裏在接下來的詢問
好接下來我在
詢問請加入響應式網頁的功能
因為這個並沒有響應式
當熒幕較小的時候變成上下排列
也就是這個欄位會變成上下排列
好那這裏呢
我就說僅顯示要加入的程式即可
因為我已經有程式在這邊呢
我只是要把它變成響應式
我只要知道要加入哪些就好
好現在按下直行
結果他還是給我診斷的程式
OK雖然我這裏有強調
只要顯示加入的程式
但是他還是給我全部
那沒有關系啊
我知道說這一段其實就是新加入的
這個就是響應式網站的
這個程式的內容
at media那我現在把它復製下來
這個是CSS
所以我在CS這邊就直接加入這一個
好那現在呢我再來測試看看
好儲存起來重新整理
那我現在把我的網頁變小
現在變小了之後
各位可以看到
它變成是上下排列的方式
幫我增加了這個新功能
接下來我想要新增的功能是
當我的滑鼠移過去某一個圖
藍位的時候
它的背景顏色會改變
雖然我可以用CSS直接改了
但是我就直接用問的好了
好當我的1啊
滑鼠呢移到特定的藍位的時候
背景的顏色會變成灰色
文字變成白色
那另外呢
我又加了一句話
請顯示新增的程式即可
因為我不需要整個程式的哦
重新的復製貼上我這只要新增就好
好
所以我這裏再加一句話不用給完整的
因為給完整的反而
會讓我覺得比較難以去
抓到我要新增哪些東西
好那我現在就說不
用給完整的
他現在就給我這一段而已
OK那這樣子就更清楚了
我現在知道說這一段呢
是一個column的這一個
所以在這邊
他現在要我新增一個這一個東西
在這邊
所以我現在就跑到我的程式裏頭
復製貼上
這一段就是他給我的
OK那這樣子的話呢
簡單易懂
好現在我把它儲存起來
看看有沒有成功啊
重新整理
滑我的滑鼠過去
所以現在就成功的出現了這個顏色
背景改變的
的一個一個設計
接下來呢我要加背景
這個背景啊
假設說我不知道怎麽用
我就可以詢問他
好這裏我就說請新增背景
圖片至終不重復
那請顯示新增的程式就好
不用給完整的
這樣子可能比較簡單的
知道說要增加哪些程式
好那這邊呢
他就快速的產生了這一段的程式
那我知道說這個是CSS程式
這個c s s
我就把它加到我的c s style裏頭
那我加到最上面好了
因為它是個巴黎的這個標簽
好復製貼上
那現在我復製貼上這段程式之後呢
我來看看我的背景有沒有改變
不過它的背景它的照片呢
它是使用這個名稱
我並沒有背景的照片
所以呢我還是要去尋找
那在這邊呢
我就隨便的搜尋一些背景的照片
例如說這張照片
那我就按下右鍵之後
然後復製它的連結copy image link
回來之後呢我在這裏OK
這裏有URL
就是我剛才復製貼上這邊
由於我沒有這個圖片所以
我必須要在這裏新增
我就把這一個移除掉
好 接下來我就貼上了我剛才復製的連結
好了之後呢儲存起來
重新整理我的網頁
在這裏重新整理好
那現在背景圖片就有了哎
不過我的背景圖片
我希望是整個覆蓋的整個網頁
所以呢我再來詢問
好這邊呢我就說啊
請將背景圖片覆蓋整個網頁
把它固定住不留空白
那只要顯示新增的程式即可
那按下執行
接下來他就會產生了這個網頁的資訊
的程式好
這邊呢他說了OK
他希望我新增這一個程式的內容
那這個程式的內容
其實跟剛才的非常的相似
除了下面這三個新的東西以外
布置下來
然後呢貼上去
他希望把我的這個高度變成百分之百
然後沒有留空隙
好
另外呢他希望h t m l也把它加入進去
好我就根據他的這個
說明我來加入HTML
他這邊說的HTML加入body
那似乎他是想要涵蓋整個網頁
好那我們把它儲存起來
回到這邊重新整理好
我現在圖片就涵蓋了整
個的網頁的內容
那接下來呢
我就是簡單的快速加入這些圖片啊
因為他目前他給我的圖片
是這一種的圖片
但我並沒有圖片答案
所以他沒辦法顯示
所以我快速的搜尋3個圖片
把它加進來
好這邊呢
我就在網頁上面呢找了三個圖片
分別為HTNL CSS以及Javascript
所以這邊呢我不
我就復製貼上他們的連結
那同時我就把這些title把它改掉
HTML OK CSS以及Javascript okay
就簡單的做一些修改
好那接下來呢
我要做的事情就是
我來看看長什麽樣子
因為他原本給的程式啊
並沒有這個圖片
所以我現在加入進去
好有了這些
現在我有三張圖片
那這三張圖片的大小不一樣
所以呢我用check GPT來幫我修改一下
幫我把這3張圖片的大小變小一點
好按下執行
那現在他就新增程式
他說呢這個寬度請改成80%
所以在我的CSS裏頭
我這裏有一個程式的內容
他目前是百分之百啊
改成80儲存重新整理好
他就變小一點了
那所以呢我可以在這邊自行的修改
譬如說改成50%
它就變成50%了
好
那現在這三張圖片就已經出現在這邊
好接下來呢
我覺得這三個欄位
我想要有一點點透明度
想要看到後面的風景
所以在ChatGPT這邊
我就可以說
把這三個欄位及圖片加入透明度啊
好執行
那執行下去之後
他就跟你說哪裏可以新增這個透明度
那他跟我說希望你來加入這一段程式
那這裏呢
我就把他所提供的所有的程式
我就直接復製下來
接下來
我把這些全部置換成他所提供的
好復製貼上
儲存起來重新整理
哎有了現在有背景的圖片了
就在這邊
首先背景你看有點透明度
我可以看到後面的這這個風景
但問題是這個圖片怎麽又變大了
所以呢我還是可以把它調回來
在這個圖片這邊剛
才我知道我可以在這裏調整這個大小
首先把它變啊變小
儲存起來重新整理好
這樣就可以了
所以現在你看後面的背景
OK變得比較啊透明的
那這個透明度的調整
可以針對這個opacity來做調整
如果你覺得透明度不好
你可以自行再調整更高
更透明一點像0.5
這裏我也改成0.5
那這樣子會變得更透明
儲存起來重新整理
OK變得更透明了
好那現在越來啊
越來越達成我想要的樣子
那我再來啊
加入一個下拉式選單
好了 這個下拉式選單當我選擇的時候
它會顯示某一個特定的藍位
好我現在就來詢問看看
好這裏我詢問的內容就是
請加入一個下拉式選單
然後當選擇全部的時候顯示全部欄位
當選擇某一個特定欄位的時候
只顯示那個欄位
那新增程式即可
那這個請加入這個下拉式選單
我再加入一下啊
放置在上方
好這裏我就加入放置在最上方
來讓我來選擇
好那我現在就按下直行
當我按下咨詢之後呢
他就顯示了這一段程式
雖然我說不用給我完整的
但是他好像還是給我完整的內容
但沒有關系
那我這看的這個程式之後
我大概知道是這個
drop down是新的下拉式選單
我就先把它復製下來
那當我復製下來之後呢
我就來到我的程式最上方
OK container
之前在這邊我就加入下拉式選單
同時我看看Javascrit
OK這段程式也是需要的
我把它復製下來
那由於是Javascrit
所以在這邊我在斜線8裏之前
我打上scrit的標簽
好在Scrip標簽裏頭
我現在把這個Java script內容
把它復製貼上上去
OK所以我現在把這一段貼到這裏來
好復製完之後呢
這個程式的內容
應該是要去連接每一個
欄位
所以應該還有一些程式必須要復製的
OK在這邊在他的程式提供
這邊他有說color one color two color three
那也就是這裏的123
OK它透過這個loop的方式呢
把這個color one two three把它找出來
所以呢這邊呢我們必須要有
我來看一下OK class這邊我必須要color one
所以在這邊我就加入程式的內容
所以雖然這個chargept可以提供很多
方便的資訊給你
但是呢其實你也是要必須要一些
程式的基本的概念
要不然他即使給你
有時候你也不知道該怎麽使用
那也是沒辦法的
所以呢也要有一些基礎的概念
好現在呢我就把它加進來了
加進來了之後我這個color one two three
我要把它改掉
我把改成HTNL
因為它是它是選項
這個這個下拉式選項
選單它是這個選項
所以這選項的資訊我把它改掉
好最後一個是javascreet
好這樣就是可以了
我先把它儲存起來
回到我的網頁重新整理好
你現在看到的上方
這邊就有下拉式選單
那我先來選擇h t n l
哎它只剩下h t n l
那我選擇CSS
它剩下CSS然
後Javascript它只剩下Javascript
所以是成功
那所有的藍位它是所有的藍位
不過呢
它的這個版面似乎是有點詭異啊
就是它在選完之後呢
啊出現了這個版面出啊出現問題啊
我待會再處理
我先把這個下拉式選單
我跟這個ChatGPT說我要移到字中
同時稍微的把它做CSS美化一下
所以這裏我就來詢問
好我就說請把下拉式選單至中
同時加入CSS美化這個下拉式選單
好我來執行
好執行了之後呢他就說OK
就是這一段的內容你可以加入CSS
好
我還蠻長的哦他加入的東西蠻多的
好的那javascree它還提供給我
其實我已經有了
所以這一個應該是可以不用
好那在這邊呢
我就把它復製這個CSS這一段程式
他希望我加入這段程式來美化
我的下拉式選單
所以我復製完之後呢我來到了我的CSS
我在這個at media之前呢
我把它複製貼上
通常都是要放在最後面的
好那我現在複製貼上之後
OK這一段程式的內容
這一整段
我現在就把它復製貼上過來了
那儲存起來
把它儲存
之後呢重新整理
有了下拉式選單變成質中了
同時呢有一點美化的效果存在
OK所以是成功
那其實我想要再把它變寬一點
好我就說請把下拉式選單變寬一點
然後我執行了之後呢他就說啊OK
可以變寬
那變寬的方式就是這一段
他還很貼心的註解了
請新增這一段程式
嘛OK
非常的好
所以呢到了select這邊
我最後呢就加上這一段程式
這樣就可以了
好現在儲存起來重新整理好
他果然變寬了
那我當然還可以變更寬呢
啊在這邊我還可以變成啊400
變得更寬一點
儲存起來重新整理他就變400了
所以呢
現在透過了這樣的方式就完成了
那現在呢
最後一個東西我要修改的就是
當我選擇之後
他的格式是否跑掉了
所以我請Chat GPT幫我修改一下
好那這邊我就來詢問
當選擇下拉式選單之後
啊這個欄位會出現格式亂掉
請修正讓他不會亂掉
也就是標題還是在上方
接下來圖片在中間
文字在排列在最後面
這個詢問的方式
你可以不斷的詢問來達到你所想要
問的東西
好那我接下來就啊按下執行
執行了之後
他就出現了這一段CSS的內容
他非常的貼心的
註解了說哪些是新增的程式
那我就把新增的程式複製下來
就是這三段
我先把它複製下來
複製完之後
這個是column所以我把它放到這邊
好我就複製貼上
然後他還說
這個image這一個也請新增這一行
好沒問題我把新增的這一段複製下來
來到了image這邊複製貼上
OK
所以呢在這個他新增的資訊之後呢
我就把它儲存起來
這裏我再次強調哈
如果你沒辦法達成你的目標
你就繼續的問
越詳細越好
他就會讓你他就知道你的意思
好在這邊我就重新整理
好現在
這3張圖片
我現在選擇CSS
它就剩下CSS而且格式沒有跑掉
非常好我跳到JavaScript
沒有跑掉
然後HTML沒有跑掉
所以這一段程式全部成功
好 這個就是所有的這個這個影片的內容
所以透過了這個ChatGPT
我可以不斷的詢問我想要呈現的內容
以及功能
讓我達成我想要設計的這個網頁的
的這個
結果
那希望呢這個影片對你有所幫助
如果你覺得不錯
可否請你按贊分享訂閱本頻道
非常感謝
我們下一集再見拜拜
関連する他のビデオを見る
![](https://i.ytimg.com/vi/ljRXA0Eg4kE/hq720.jpg)
New apk without Activation for play games with keyboard and mouse in mobile like Computer |free fire
![](https://i.ytimg.com/vi/1Zq4e57TgSc/hq720.jpg)
【WordPress零基础建站】第一节:Wordpress建站教程,挑战20分钟快速搭建独立站商城,服务器购买,域名连接,主题安装……
![](https://i.ytimg.com/vi/3CasiUiJPVo/hq720.jpg)
Adding an App Icon and Launch Screen to SwiftUI | Todo List #7
![](https://i.ytimg.com/vi/X05ORyy7ZW4/hq720.jpg)
GPT-4o AI Agents: Easily Create Medical Research Agents (Praison AI)
![](https://i.ytimg.com/vi/nwpmWu1SP1k/hq720.jpg)
Add a ViewModel with @EnvironmentObject in SwiftUI | Todo List #3
![](https://i.ytimg.com/vi/w_YRnA8RdnU/hq720.jpg)
Build Anything with Perplexity, Here’s How
5.0 / 5 (0 votes)