AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單-3.1 了解CSS選擇器 -3.5 網(wǎng)頁背景設(shè)計制作_第1頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單-3.1 了解CSS選擇器 -3.5 網(wǎng)頁背景設(shè)計制作_第2頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單-3.1 了解CSS選擇器 -3.5 網(wǎng)頁背景設(shè)計制作_第3頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單-3.1 了解CSS選擇器 -3.5 網(wǎng)頁背景設(shè)計制作_第4頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單-3.1 了解CSS選擇器 -3.5 網(wǎng)頁背景設(shè)計制作_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價我的收獲第三模塊網(wǎng)站頁面美化（CSS）3.1了解CSS選擇器使用HTML5，CSS3語言，編寫一個文字變化的網(wǎng)頁。要求當(dāng)鼠標(biāo)經(jīng)過時文字的顏色發(fā)生變化，給出案例代碼。 下面是一個使用HTML5和CSS3實現(xiàn)的簡單網(wǎng)頁示例，當(dāng)鼠標(biāo)經(jīng)過文字時，文字的顏色會發(fā)生變化。###HTML(index.html)```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文字顏色變化</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="container"><h1>鼠標(biāo)經(jīng)過我，我會變色！</h1></div></body></html>```###CSS(styles.css)```css/*設(shè)置頁面基本樣式*/body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f0f0f0;font-family:Arial,sans-serif;}/*容器樣式*/.container{text-align:center;}/*初始文字樣式*/h1{font-size:3rem;color:#333;transition:color0.3sease;/*添加顏色變化的過渡效果*/}/*鼠標(biāo)經(jīng)過時的文字樣式*/h1:hover{color:#ff6347;/*鼠標(biāo)經(jīng)過時文字變?yōu)槌壬?/}```###說明1.**HTML部分**：創(chuàng)建了一個簡單的網(wǎng)頁結(jié)構(gòu)，包含一個標(biāo)題文字（`<h1>`）。2.**CSS部分**：-使用`transition`屬性為文字顏色添加了平滑的過渡效果。-當(dāng)鼠標(biāo)經(jīng)過文字時，通過`:hover`偽類將文字顏色從默認的`#333`（深灰色）變?yōu)閌#ff6347`（橙色）。###使用方法1.將HTML和CSS代碼分別保存為`index.html`和`styles.css`文件。2.打開`index.html`文件即可在瀏覽器中查看效果。當(dāng)鼠標(biāo)經(jīng)過標(biāo)題文字時，文字顏色會平滑地變?yōu)槌壬?##擴展你可以根據(jù)需要修改顏色、字體大小或添加其他效果。例如，可以添加背景顏色變化、文字大小變化等。以下是一個擴展示例：```cssh1:hover{color:#ff6347;/*文字顏色變化*/background-color:#333;/*背景顏色變化*/padding:10px;/*增加內(nèi)邊距*/border-radius:10px;/*圓角效果*/transform:scale(1.1);/*放大效果*/}```這樣，當(dāng)鼠標(biāo)經(jīng)過文字時，不僅顏色會變化，背景顏色、大小和形狀也會發(fā)生變化。DeepSeek非常嚴(yán)謹?shù)氖褂昧颂崾驹~當(dāng)中的CSS技術(shù)，完成了案例的制作和代碼的輸出。將代碼運行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計。需要仔細閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強大。非常嚴(yán)謹?shù)慕o出了核心功能的設(shè)計方法，代碼的書寫簡潔完整，且對知識點進行了拓展。打開了學(xué)習(xí)前端CSS模塊的思維模式，提升了學(xué)習(xí)積極性。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價我的收獲第三模塊網(wǎng)站頁面美化（CSS）3.2藝術(shù)字體設(shè)計使用HTML5，CSS3語言，設(shè)計一個藝術(shù)字體。要求有突出字體的大小、粗細程度和陰影效果，給出案例代碼。 要使用HTML5和CSS3設(shè)計一個藝術(shù)字體，并突出字體的大小、粗細程度和陰影效果，可以通過以下代碼實現(xiàn)：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>藝術(shù)字體設(shè)計</title><style>body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f0f0f0;margin:0;font-family:'Arial',sans-serif;}.artistic-text{font-size:4rem;/*設(shè)置字體大小*/font-weight:bold;/*設(shè)置字體粗細*/color:#333;/*設(shè)置字體顏色*/text-shadow:4px4px8pxrgba(0,0,0,0.5);/*設(shè)置陰影效果*/letter-spacing:5px;/*設(shè)置字間距*/text-transform:uppercase;/*將文本轉(zhuǎn)換為大寫*/animation:glow2sinfinitealternate;/*添加動畫效果*/}@keyframesglow{from{text-shadow:4px4px8pxrgba(0,0,0,0.5);}to{text-shadow:6px6px12pxrgba(0,0,0,0.7),0020pxrgba(255,255,255,0.8);}}</style></head><body><divclass="artistic-text">藝術(shù)字體</div></body></html>```###代碼說明：1.**字體大小**：通過`font-size:4rem;`設(shè)置字體大小為4rem，可以根據(jù)需要調(diào)整。2.**字體粗細**：通過`font-weight:bold;`設(shè)置字體為粗體。3.**陰影效果**：通過`text-shadow:4px4px8pxrgba(0,0,0,0.5);`設(shè)置陰影效果，陰影的偏移量為4px，模糊半徑為8px，顏色為半透明的黑色。4.**字間距**：通過`letter-spacing:5px;`設(shè)置字間距為5px，使字體更加分散。5.**動畫效果**：通過`@keyframesglow`定義了一個簡單的動畫效果，使陰影在2秒內(nèi)交替變化，產(chǎn)生發(fā)光效果。###運行效果：-頁面中心會顯示一個帶有陰影效果的藝術(shù)字體，字體較大且加粗，陰影效果會隨著動畫變化，產(chǎn)生一種動態(tài)的視覺效果。你可以根據(jù)需要調(diào)整字體大小、顏色、陰影效果等參數(shù)，以達到不同的藝術(shù)效果。DeepSeek非常嚴(yán)謹?shù)氖褂昧颂崾驹~當(dāng)中的CSS技術(shù)，完成了案例的制作和代碼的輸出。將代碼運行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計。需要仔細閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強大。非常嚴(yán)謹?shù)慕o出了核心功能的設(shè)計方法，代碼的書寫簡潔完整，且對知識點進行了拓展。打開了應(yīng)用CSS設(shè)計字體的方法，提升了學(xué)習(xí)積極性。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價我的收獲第三模塊網(wǎng)站頁面美化（CSS）3.3新聞網(wǎng)頁制作使用HTML5，CSS3語言，制作一個新聞網(wǎng)頁。要求顯示新聞內(nèi)容，并對頁面文字進行樣式設(shè)置，給出案例代碼。 下面是一個簡單的新聞網(wǎng)頁示例，使用HTML5和CSS3來顯示新聞內(nèi)容，并對頁面文字進行樣式設(shè)置。###HTML部分(index.html)```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>新聞網(wǎng)頁</title><linkrel="stylesheet"href="styles.css"></head><body><header><h1>今日新聞</h1><nav><ul><li><ahref="#">首頁</a></li><li><ahref="#">國內(nèi)新聞</a></li><li><ahref="#">國際新聞</a></li><li><ahref="#">財經(jīng)新聞</a></li><li><ahref="#">科技新聞</a></li></ul></nav></header><main><article><h2>標(biāo)題：人工智能技術(shù)取得重大突破</h2><pclass="meta">發(fā)布時間：2023年10月10日|作者：張三</p><imgsrc="news-image.jpg"alt="新聞圖片"class="news-image"><pclass="content">近日，全球領(lǐng)先的科技公司宣布在人工智能領(lǐng)域取得了重大突破。這項新技術(shù)將極大地提高機器學(xué)習(xí)的效率，并有望在醫(yī)療、金融、教育等多個行業(yè)得到廣泛應(yīng)用。</p><pclass="content">專家表示，這一突破將推動人工智能技術(shù)的發(fā)展，未來幾年內(nèi)可能會看到更多基于AI的創(chuàng)新應(yīng)用。</p></article><aside><h3>相關(guān)新聞</h3><ul><li><ahref="#">人工智能在醫(yī)療領(lǐng)域的應(yīng)用</a></li><li><ahref="#">金融科技的未來發(fā)展趨勢</a></li><li><ahref="#">教育行業(yè)如何利用AI技術(shù)</a></li></ul></aside></main><footer><p>©2023新聞網(wǎng)頁.保留所有權(quán)利。</p></footer></body></html>```###CSS部分(styles.css)```css/*全局樣式*/body{font-family:Arial,sans-serif;line-height:1.6;margin:0;padding:0;background-color:#f4f4f4;color:#333;}/*頭部樣式*/header{background-color:#333;color:#fff;padding:10px0;text-align:center;}headerh1{margin:0;font-size:2.5em;}navul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;}navulli{margin:015px;}navullia{color:#fff;text-decoration:none;font-weight:bold;}navullia:hover{text-decoration:underline;}/*主體內(nèi)容樣式*/main{padding:20px;max-width:800px;margin:0auto;}articleh2{font-size:2em;color:#444;margin-bottom:10px;}article.meta{font-size:0.9em;color:#777;margin-bottom:20px;}article.news-image{width:100%;height:auto;margin-bottom:20px;}article.content{font-size:1.1em;line-height:1.8;margin-bottom:20px;}/*側(cè)邊欄樣式*/aside{background-color:#eee;padding:15px;border-radius:5px;margin-top:20px;}asideh3{font-size:1.5em;color:#444;margin-bottom:10px;}asideul{list-style:none;padding:0;margin:0;}asideulli{margin-bottom:10px;}asideullia{color:#333;text-decoration:none;}asideullia:hover{text-decoration:underline;}/*頁腳樣式*/footer{background-color:#333;color:#fff;text-align:center;padding:10px0;margin-top:20px;}footerp{margin:0;font-size:0.9em;}```###說明：1.**HTML部分**：-使用了HTML5的語義化標(biāo)簽，如`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`，使頁面結(jié)構(gòu)更清晰。-新聞內(nèi)容包含標(biāo)題、發(fā)布時間、圖片和正文。2.**CSS部分**：-設(shè)置了全局字體、行高和背景顏色。-對頭部、導(dǎo)航、主體內(nèi)容、側(cè)邊欄和頁腳進行了樣式設(shè)置。-使用了`flexbox`來布局導(dǎo)航菜單。-對新聞標(biāo)題、發(fā)布時間、圖片和正文內(nèi)容進行了樣式設(shè)置，使其更具可讀性。###運行效果：將上述HTML和CSS代碼分別保存為`index.html`和`styles.css`文件，并在瀏覽器中打開`index.html`文件，即可看到一個簡單的新聞網(wǎng)頁。你可以根據(jù)需要進一步調(diào)整樣式和內(nèi)容，以適應(yīng)不同的設(shè)計需求。DeepSeek非常嚴(yán)謹?shù)氖褂昧颂崾驹~當(dāng)中的CSS技術(shù)，完成了案例的制作和代碼的輸出。將代碼運行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計。需要仔細閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強大。非常嚴(yán)謹?shù)慕o出了核心功能的設(shè)計方法，代碼的書寫簡潔完整，且對知識點進行了拓展。打開了應(yīng)用CSS語言設(shè)計段落的方法，提升了學(xué)習(xí)積極性。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價我的收獲第三模塊網(wǎng)站頁面美化（CSS）3.4同心圓班徽設(shè)計制作使用HTML5，CSS3語言，設(shè)計一個班徽。要求班徽圖片給定，設(shè)計元素的寬度、高度、邊框的寬度、顏色和樣式，設(shè)計的效果色彩搭配豐富，和諧美觀，并給出案例代碼。 設(shè)計一個班徽需要考慮簡潔、有代表性且美觀的元素。以下是一個使用HTML5和CSS3設(shè)計的班徽示例，包含豐富的色彩搭配和和諧的設(shè)計效果。###設(shè)計思路：1.**形狀**：使用圓形作為班徽的基礎(chǔ)形狀，象征團結(jié)和完整。2.**顏色**：使用漸變色背景，搭配明亮的顏色，突出活力與青春。3.**邊框**：使用雙邊框設(shè)計，增加層次感。4.**文字**：使用自定義字體和陰影效果，突出班級名稱和口號。###HTML代碼：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>班徽設(shè)計</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="badge"><divclass="outer-circle"><divclass="inner-circle"><h1class="class-name">高三一班</h1><pclass="slogan">團結(jié)奮進，勇攀高峰</p></div></div></div></body></html>```###CSS代碼：```css/*重置默認樣式*/*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f0f0f0;}/*班徽容器*/.badge{width:300px;height:300px;display:flex;justify-content:center;align-items:center;}/*外圓*/.outer-circle{width:100%;height:100%;border:10pxsolid#ff6f61;border-radius:50%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#ff6f61,#ffcc00);box-shadow:0020pxrgba(0,0,0,0.2);}/*內(nèi)圓*/.inner-circle{width:80%;height:80%;border:5pxsolid#ffffff;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(135deg,#ffffff,#f0f0f0);box-shadow:inset0010pxrgba(0,0,0,0.1);}/*班級名稱*/.class-name{font-family:'Arial',sans-serif;font-size:28px;color:#333333;text-shadow:2px2px4pxrgba(0,0,0,0.1);margin-bottom:10px;}/*班級口號*/.slogan{font-family:'Arial',sans-serif;font-size:16px;color:#555555;text-shadow:1px1px2pxrgba(0,0,0,0.1);}```###設(shè)計說明：1.**外圓**：使用漸變色背景（從橙色到黃色），邊框為紅色，寬度為10px，增加立體感。2.**內(nèi)圓**：使用白色背景，邊框為白色，寬度為5px，與外圓形成對比。3.**文字**：班級名稱使用較大的字體，口號使用較小的字體，顏色分別為深灰色和淺灰色，搭配陰影效果，增加層次感。###效果：-班徽整體呈現(xiàn)圓形，色彩豐富且和諧。-漸變色背景和雙邊框設(shè)計增加了視覺層次感。-文字清晰，突出班級名稱和口號。你可以根據(jù)實際需求調(diào)整顏色、字體和尺寸，進一步個性化設(shè)計。DeepSeek非常嚴(yán)謹?shù)氖褂昧颂崾驹~當(dāng)中的CSS技術(shù)，完成了案例的制作和代碼的輸出。將代碼運行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計。需要仔細閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強大。非常嚴(yán)謹?shù)慕o出了核心功能的設(shè)計方法，代碼的書寫簡潔完整，且對知識點進行了拓展。打開了應(yīng)用CSS設(shè)計邊框的使用方法，提升了學(xué)習(xí)積極性。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價我的收獲第三模塊網(wǎng)站頁面美化（CSS）3.5網(wǎng)頁背景設(shè)計制作使用HTML5，CSS3語言，設(shè)計一個網(wǎng)頁的背景。要求背景圖片給定，設(shè)置主題背景圖片的平鋪方式并固定至頁面正中，并給出案例代碼。 要設(shè)計一個網(wǎng)頁背景，并將給定的背景圖片固定在頁面正中，同時設(shè)置平鋪方式，可以使用HTML5和CSS3來實現(xiàn)。以下是一個示例代碼，展示如何實現(xiàn)這一效果。###設(shè)計思路：1.**背景圖片**：使用給定的背景圖片，并將其固定在頁面正中。2.**平鋪方式**：通過CSS的`background-repeat`屬性控制圖片的平鋪方式。3.**固定背景**：使用`background-attachment:fixed`將背景圖片固定，使其不隨頁面滾動而移動。###HTML代碼：```html<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>固定背景圖片</title><linkrel="stylesheet"href="styles.css"></head><body><divclass="content"><h1>歡迎來到我的網(wǎng)頁</h1><p>這是一個帶有固定背景圖片的網(wǎng)頁示例。</p><p>向下滾動查看更多內(nèi)容。</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></div></body></html>```###CSS代碼：```css/*重置默認樣式*/*{margin:0;padding:0;box-sizing:border-box;}/*設(shè)置網(wǎng)頁背景*/body{background-image:url('background.jpg');/*替換為你的背景圖片路徑*/background-repeat:no-

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論