版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱(chēng)：DeepSeek班級(jí)：學(xué)生姓名：子任務(wù)名稱(chēng)提示詞AI的回應(yīng)對(duì)AI回應(yīng)的評(píng)價(jià)我的收獲第五模塊網(wǎng)站頁(yè)面布局5.1電子禮盒設(shè)計(jì)制作使用HTML5，CSS3，盒子模型相關(guān)屬性。完成父親節(jié)專(zhuān)屬的購(gòu)物網(wǎng)頁(yè)設(shè)計(jì)的制作，給出案例代碼。 下面是一個(gè)簡(jiǎn)單的父親節(jié)專(zhuān)屬購(gòu)物網(wǎng)頁(yè)設(shè)計(jì)的案例代碼，使用了HTML5和CSS3，并應(yīng)用了盒子模型的相關(guān)屬性。---###1.HTML結(jié)構(gòu)<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>父親節(jié)專(zhuān)屬購(gòu)物</title><linkrel="stylesheet"href="styles.css"></head><body><header><h1>父親節(jié)專(zhuān)屬購(gòu)物</h1><p>為爸爸挑選最棒的禮物！</p></header><main><sectionclass="product"><imgsrc="gift1.jpg"alt="禮物1"><h2>豪華剃須刀</h2><p>讓爸爸每天都能享受舒適的剃須體驗(yàn)。</p><pclass="price">￥499</p><button>加入購(gòu)物車(chē)</button></section><sectionclass="product"><imgsrc="gift2.jpg"alt="禮物2"><h2>男士香水</h2><p>經(jīng)典男士香水，展現(xiàn)爸爸的獨(dú)特魅力。</p><pclass="price">￥299</p><button>加入購(gòu)物車(chē)</button></section><sectionclass="product"><imgsrc="gift3.jpg"alt="禮物3"><h2>智能手表</h2><p>健康監(jiān)測(cè)，智能提醒，爸爸的健康助手。</p><pclass="price">￥899</p><button>加入購(gòu)物車(chē)</button></section></main><footer><p>©2023父親節(jié)專(zhuān)屬購(gòu)物.保留所有權(quán)利。</p></footer></body></html>---###2.CSS樣式```css/*styles.css*//*重置樣式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;line-height:1.6;background-color:#f4f4f4;color:#333;}header{background-color:#333;color:#fff;padding:20px;text-align:center;}headerh1{margin-bottom:10px;}main{display:flex;justify-content:space-around;flex-wrap:wrap;padding:20px;}.product{background-color:#fff;border:1pxsolid#ddd;border-radius:5px;width:30%;margin:10px;padding:20px;text-align:center;box-shadow:02px5pxrgba(0,0,0,0.1);}.productimg{max-width:100%;border-radius:5px;}.producth2{margin:15px0;font-size:1.5em;}.productp{margin:10px0;color:#666;}.product.price{font-size:1.2em;color:#e67e22;font-weight:bold;}.productbutton{background-color:#333;color:#fff;border:none;padding:10px20px;border-radius:5px;cursor:pointer;margin-top:10px;}.productbutton:hover{background-color:#555;}footer{background-color:#333;color:#fff;text-align:center;padding:10px;position:fixed;width:100%;bottom:0;}---###4.功能說(shuō)明1.HTML結(jié)構(gòu)：header
部分包含網(wǎng)頁(yè)的標(biāo)題和描述。main
部分包含多個(gè)
section，每個(gè)
section
代表一個(gè)商品。footer
部分包含版權(quán)信息。2.CSS樣式：使用了
box-sizing:border-box;
來(lái)確保盒子模型的計(jì)算方式一致。flexbox
布局用于商品部分的排列，使其在不同屏幕尺寸下都能保持良好的布局。每個(gè)商品卡片使用了
box-shadow
來(lái)增加立體感。按鈕的樣式和懸停效果通過(guò)
background-color
和
color
屬性來(lái)實(shí)現(xiàn)。3.響應(yīng)式設(shè)計(jì)：通過(guò)
flex-wrap:wrap;
和
width:30%;
的設(shè)置，商品卡片在小屏幕設(shè)備上會(huì)自動(dòng)換行，適應(yīng)不同屏幕尺寸。4.圖片資源gift1.jpg,
gift2.jpg,
gift3.jpg
是商品的圖片，你需要準(zhǔn)備這些圖片并放在與HTML文件相同的目錄下，或者修改圖片路徑以適應(yīng)你的項(xiàng)目結(jié)構(gòu)。5.運(yùn)行效果將上述代碼保存為
index.html
和
styles.css
文件，然后在瀏覽器中打開(kāi)
index.html
文件，即可看到一個(gè)簡(jiǎn)單的父親節(jié)專(zhuān)屬購(gòu)物網(wǎng)頁(yè)。DeepSeek非常嚴(yán)謹(jǐn)?shù)氖褂昧颂崾驹~當(dāng)中的web前端技術(shù)，完成了案例的制作和代碼的輸出。將代碼運(yùn)行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個(gè)結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計(jì)。需要仔細(xì)閱讀一遍。理解模型給出的代碼的語(yǔ)法邏輯，并且和教材當(dāng)中的案例進(jìn)行對(duì)比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書(shū)寫(xiě)。打開(kāi)了學(xué)習(xí)Web前端頁(yè)面布局模塊的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱(chēng)：DeepSeek班級(jí)：學(xué)生姓名：子任務(wù)名稱(chēng)提示詞AI的回應(yīng)對(duì)AI回應(yīng)的評(píng)價(jià)我的收獲第五模塊網(wǎng)站頁(yè)面布局5.2九宮格設(shè)計(jì)制作使用HTML5，CSS3，浮動(dòng)方式相關(guān)屬性。完成一個(gè)九宮格的制作，給出案例代碼。 下面是一個(gè)使用HTML5和CSS3制作的九宮格案例代碼，使用了浮動(dòng)（float）屬性來(lái)實(shí)現(xiàn)布局。---###1.HTML結(jié)構(gòu)<!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"><divclass="grid-item">1</div><divclass="grid-item">2</div><divclass="grid-item">3</div><divclass="grid-item">4</div><divclass="grid-item">5</div><divclass="grid-item">6</div><divclass="grid-item">7</div><divclass="grid-item">8</div><divclass="grid-item">9</div></div></body></html>---###2.CSS樣式css/*styles.css*//*重置樣式*/*{margin:0;padding:0;box-sizing:border-box;}body{font-family:Arial,sans-serif;background-color:#f4f4f4;display:flex;justify-content:center;align-items:center;height:100vh;}.container{width:300px;height:300px;background-color:#fff;border:2pxsolid#333;box-shadow:0010pxrgba(0,0,0,0.1);}.grid-item{width:33.33%;height:33.33%;float:left;border:1pxsolid#333;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:bold;background-color:#e67e22;color:#fff;transition:background-color0.3sease;}.grid-item:hover{background-color:#d35400;}/*清除浮動(dòng)*/.container::after{content:"";display:table;clear:both;}---###4.功能說(shuō)明1.HTML結(jié)構(gòu)：使用一個(gè)
container
容器包裹了9個(gè)
grid-item，每個(gè)
grid-item
代表九宮格中的一個(gè)格子。2.CSS樣式：使用
float:left;
實(shí)現(xiàn)格子的橫向排列。每個(gè)格子的寬度和高度設(shè)置為
33.33%，確保三行三列的布局。使用
flexbox
將格子中的內(nèi)容居中顯示。添加了
hover
效果，當(dāng)鼠標(biāo)懸停在格子上時(shí)，背景顏色會(huì)發(fā)生變化。使用
::after
偽元素清除浮動(dòng)，防止容器高度塌陷。3.響應(yīng)式設(shè)計(jì)：九宮格的寬度和高度固定為
300px，你可以根據(jù)需要調(diào)整容器的大小，或者使用百分比來(lái)實(shí)現(xiàn)響應(yīng)式布局。4.運(yùn)行效果將上述代碼保存為
index.html和
styles.css
文件，然后在瀏覽器中打開(kāi)
index.html
文件，即可看到一個(gè)九宮格布局。每個(gè)格子中的數(shù)字表示格子的編號(hào)，鼠標(biāo)懸停在格子上時(shí)，背景顏色會(huì)發(fā)生變化。你可以根據(jù)需要修改格子的內(nèi)容和樣式，例如添加圖片或文字。DeepSeek非常嚴(yán)謹(jǐn)?shù)氖褂昧颂崾驹~當(dāng)中的web前端技術(shù)，完成了案例的制作和代碼的輸出。將代碼運(yùn)行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個(gè)結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計(jì)。需要仔細(xì)閱讀一遍。理解模型給出的代碼的語(yǔ)法邏輯，并且和教材當(dāng)中的案例進(jìn)行對(duì)比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書(shū)寫(xiě)。打開(kāi)了學(xué)習(xí)Web前端頁(yè)面布局模塊的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱(chēng)：DeepSeek班級(jí)：學(xué)生姓名：子任務(wù)名稱(chēng)提示詞AI的回應(yīng)對(duì)AI回應(yīng)的評(píng)價(jià)我的收獲第五模塊網(wǎng)站頁(yè)面布局5.3購(gòu)物車(chē)圖標(biāo)的制作使用HTML5，CSS3，定位相關(guān)屬性。完成購(gòu)物車(chē)頁(yè)面上購(gòu)物車(chē)按鈕顯示在右下角位置的制作，給出案例代碼。 使用HTML5和CSS3完成的購(gòu)物車(chē)頁(yè)面布局示例代碼，其中購(gòu)物車(chē)按鈕固定在頁(yè)面的右下角位置。這種布局常見(jiàn)于電商網(wǎng)站，方便用戶(hù)隨時(shí)訪問(wèn)購(gòu)物車(chē)。---<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>購(gòu)物車(chē)頁(yè)面-右下角購(gòu)物車(chē)按鈕</title><style>/*頁(yè)面整體樣式*/body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}/*頁(yè)面內(nèi)容區(qū)域*/.content{padding:20px;text-align:center;}/*購(gòu)物車(chē)按鈕容器*/.cart-button-container{position:fixed;/*固定定位*/bottom:20px;/*距離底部20px*/right:20px;/*距離右側(cè)20px*/z-index:1000;/*確保按鈕在最上層*/}/*購(gòu)物車(chē)按鈕*/.cart-button{width:60px;height:60px;background-color:#ff4757;/*紅色背景*/border-radius:50%;/*圓形按鈕*/display:flex;justify-content:center;align-items:center;color:#fff;/*白色文字*/font-size:24px;text-decoration:none;box-shadow:04px8pxrgba(0,0,0,0.2);/*陰影效果*/transition:background-color0.3sease;/*背景色過(guò)渡效果*/}/*購(gòu)物車(chē)按鈕懸停效果*/.cart-button:hover{background-color:#ff6b81;/*懸停時(shí)背景色變淺*/}/*購(gòu)物車(chē)數(shù)量提示*/.cart-count{position:absolute;top:-5px;right:-5px;background-color:#333;/*黑色背景*/color:#fff;/*白色文字*/font-size:12px;width:20px;height:20px;border-radius:50%;/*圓形*/display:flex;justify-content:center;align-items:center;}</style></head><body><!--頁(yè)面內(nèi)容--><divclass="content"><h1>歡迎來(lái)到我的商店</h1><p>這里是商品展示區(qū)域。</p><p>向下滾動(dòng)查看更多內(nèi)容。</p><p>...</p><p>更多內(nèi)容...</p><p>...</p><p>繼續(xù)滾動(dòng)...</p><p>...</p><p>到底了！</p></div><!--購(gòu)物車(chē)按鈕--><divclass="cart-button-container"><ahref="#"class="cart-button">??<!--購(gòu)物車(chē)圖標(biāo)--><spanclass="cart-count">3</span><!--購(gòu)物車(chē)數(shù)量提示--></a></div></body></html>---###4.功能說(shuō)明1.頁(yè)面整體樣式：body設(shè)置了頁(yè)面字體和背景顏色。.content是頁(yè)面內(nèi)容區(qū)域，用于展示商品信息。2.購(gòu)物車(chē)按鈕容器(.cart-button-container)：使用position:fixed將按鈕固定在頁(yè)面上。bottom:20px和right:20px將按鈕定位在頁(yè)面的右下角。z-index:1000確保按鈕始終顯示在最上層。3.購(gòu)物車(chē)按鈕(.cart-button)：使用width和height設(shè)置按鈕大小，border-radius:50%使其變成圓形。使用display:flex將購(gòu)物車(chē)圖標(biāo)和數(shù)量提示居中。背景色為紅色（#ff4757），文字為白色。添加了陰影效果（box-shadow）和懸停效果（hover）。4.購(gòu)物車(chē)數(shù)量提示(.cart-count)：使用position:absolute將數(shù)量提示定位在按鈕的右上角。背景為黑色，文字為白色，形狀為圓形5.頁(yè)面內(nèi)容區(qū)域(.content)：用于展示頁(yè)面主要內(nèi)容，包含一些占位文本。效果：頁(yè)面右下角固定顯示一個(gè)圓形的購(gòu)物車(chē)按鈕。按鈕背景為紅色，包含一個(gè)購(gòu)物車(chē)圖標(biāo)（??）和數(shù)量提示（例如“3”）。當(dāng)用戶(hù)滾動(dòng)頁(yè)面時(shí)，按鈕始終保持在右下角位置。懸停按鈕時(shí)，背景色會(huì)變淺，提供交互反饋。DeepSeek非常嚴(yán)謹(jǐn)?shù)氖褂昧颂崾驹~當(dāng)中的Web前端技術(shù)，完成了案例的制作和代碼的輸出。將代碼運(yùn)行到Hbuilder環(huán)境當(dāng)中可以得到這樣的一個(gè)結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計(jì)。需要仔細(xì)閱讀一遍。理解模型給出的代碼的語(yǔ)法邏輯，并且和教材當(dāng)中的案例進(jìn)行對(duì)比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書(shū)寫(xiě)。打開(kāi)了學(xué)習(xí)Web前端頁(yè)面布局模塊中定位的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱(chēng)：DeepSeek班級(jí)：學(xué)生姓名：子任務(wù)名稱(chēng)提示詞AI的回應(yīng)對(duì)AI回應(yīng)的評(píng)價(jià)我的收獲第五模塊網(wǎng)站頁(yè)面布局5.4購(gòu)物車(chē)商品列表制作使用HTML5，CSS3，彈性布局相關(guān)屬性。完成一個(gè)移動(dòng)端商品列表展示的制作，給出案例代碼。 以下是一個(gè)使用HTML5、CSS3和彈性布局（Flexbox）來(lái)制作移動(dòng)端商品列表頁(yè)面的示例代碼。這個(gè)示例展示了一個(gè)3行2列的商品列表。---<!DOCTYPEhtml><htmllang="en"><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"><divclass="item">商品1</div><divclass="item">商品2</div><divclass="item">商品3</div><divclass="item">商品4</div><divclass="item">商品5</div><divclass="item">商品6</div></div></
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 【正版授權(quán)】 IEC 62053-21:2003 FR-D Electricity metering equipment (a.c.) - Particular requirements - Part 21: Static meters for active energy (classes 1 and 2)
- 【正版授權(quán)】 IEC 60502-1:2004 EN-D Power cables with extruded insulation and their accessories for rated voltages from 1 kV (Um = 1,2 kV) up to 30 kV (Um = 36 kV) - Part 1: Cables for ra
- 【正版授權(quán)】 IEC 60669-1:1998+AMD1:1999+AMD2:2006 CSV EN-D Switches for household and similar fixed-electrical installations - Part 1: General requirements
- 2024年二月化糞池微生物活性定期檢測(cè)與維護(hù)合同
- 創(chuàng)意粉筆畢業(yè)論文答辯框架
- 酒精壁爐知識(shí)培訓(xùn)課件
- 2025年學(xué)校物理老師教學(xué)方案
- 酒水品鑒知識(shí)培訓(xùn)課件
- 2025年紀(jì)念三八婦女節(jié)111周年活動(dòng)方案
- 伺服系統(tǒng)與工業(yè)機(jī)器人課件第6章 伺服驅(qū)動(dòng)器的參數(shù)配置
- 華能?chē)?guó)際電力股份有限公司本質(zhì)安全體系管理手冊(cè)
- 中青劇院管理手冊(cè)
- 《對(duì)話大千世界-繪畫(huà)創(chuàng)意與實(shí)踐》 第1課時(shí) 定格青春-向藝術(shù)家學(xué)創(chuàng)作
- CET46大學(xué)英語(yǔ)四六級(jí)單詞EXCEL版
- 文化人類(lèi)學(xué)完整版
- 2022年南通市特殊教育崗位教師招聘考試筆試試題及答案解析
- GB/T 13888-2009在開(kāi)磁路中測(cè)量磁性材料矯頑力的方法
- 《劉姥姥人物形象分析》課件-部編版語(yǔ)文九年級(jí)上冊(cè)
- 年產(chǎn)萬(wàn)噸丁二烯畢業(yè)設(shè)計(jì)
- TPM管理基礎(chǔ)知識(shí)培訓(xùn)課件
- 《林海雪原》知識(shí)點(diǎn) 整理
評(píng)論
0/150
提交評(píng)論