AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單-5.1 簡單計(jì)算器的制作-5.4 購物車商品列表制作_第1頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單-5.1 簡單計(jì)算器的制作-5.4 購物車商品列表制作_第2頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單-5.1 簡單計(jì)算器的制作-5.4 購物車商品列表制作_第3頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單-5.1 簡單計(jì)算器的制作-5.4 購物車商品列表制作_第4頁
AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單-5.1 簡單計(jì)算器的制作-5.4 購物車商品列表制作_第5頁
已閱讀5頁，還剩33頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價(jià)我的收獲第五模塊網(wǎng)站頁面布局5.1電子禮盒設(shè)計(jì)制作使用HTML5，CSS3，盒子模型相關(guān)屬性。完成父親節(jié)專屬的購物網(wǎng)頁設(shè)計(jì)的制作，給出案例代碼。 下面是一個(gè)簡單的父親節(jié)專屬購物網(wǎng)頁設(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é)專屬購物</title><linkrel="stylesheet"href="styles.css"></head><body><header><h1>父親節(jié)專屬購物</h1><p>為爸爸挑選最棒的禮物！</p></header><main><sectionclass="product"><imgsrc="gift1.jpg"alt="禮物1"><h2>豪華剃須刀</h2><p>讓爸爸每天都能享受舒適的剃須體驗(yàn)。</p><pclass="price">￥499</p><button>加入購物車</button></section><sectionclass="product"><imgsrc="gift2.jpg"alt="禮物2"><h2>男士香水</h2><p>經(jīng)典男士香水，展現(xiàn)爸爸的獨(dú)特魅力。</p><pclass="price">￥299</p><button>加入購物車</button></section><sectionclass="product"><imgsrc="gift3.jpg"alt="禮物3"><h2>智能手表</h2><p>健康監(jiān)測，智能提醒，爸爸的健康助手。</p><pclass="price">￥899</p><button>加入購物車</button></section></main><footer><p>©2023父親節(jié)專屬購物.保留所有權(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.功能說明1.HTML結(jié)構(gòu)：header

部分包含網(wǎng)頁的標(biāo)題和描述。main

部分包含多個(gè)

section，每個(gè)

section

代表一個(gè)商品。footer

部分包含版權(quán)信息。2.CSS樣式：使用了

box-sizing:border-box;

來確保盒子模型的計(jì)算方式一致。flexbox

布局用于商品部分的排列，使其在不同屏幕尺寸下都能保持良好的布局。每個(gè)商品卡片使用了

box-shadow

來增加立體感。按鈕的樣式和懸停效果通過

background-color

和

color

屬性來實(shí)現(xiàn)。3.響應(yīng)式設(shè)計(jì)：通過

flex-wrap:wrap;

和

width:30%;

的設(shè)置，商品卡片在小屏幕設(shè)備上會自動換行，適應(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

文件，然后在瀏覽器中打開

index.html

文件，即可看到一個(gè)簡單的父親節(jié)專屬購物網(wǎng)頁。DeepSeek非常嚴(yán)謹(jǐn)?shù)氖褂昧颂崾驹~當(dāng)中的web前端技術(shù)，完成了案例的制作和代碼的輸出。將代碼運(yùn)行到hbuilder環(huán)境當(dāng)中可以得到這樣的一個(gè)結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計(jì)。需要仔細(xì)閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進(jìn)行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書寫。打開了學(xué)習(xí)Web前端頁面布局模塊的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價(jià)我的收獲第五模塊網(wǎng)站頁面布局5.2九宮格設(shè)計(jì)制作使用HTML5，CSS3，浮動方式相關(guān)屬性。完成一個(gè)九宮格的制作，給出案例代碼。 下面是一個(gè)使用HTML5和CSS3制作的九宮格案例代碼，使用了浮動（float）屬性來實(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;}/*清除浮動*/.container::after{content:"";display:table;clear:both;}---###4.功能說明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í)，背景顏色會發(fā)生變化。使用

::after

偽元素清除浮動，防止容器高度塌陷。3.響應(yīng)式設(shè)計(jì)：九宮格的寬度和高度固定為

300px，你可以根據(jù)需要調(diào)整容器的大小，或者使用百分比來實(shí)現(xiàn)響應(yīng)式布局。4.運(yùn)行效果將上述代碼保存為

index.html和

styles.css

文件，然后在瀏覽器中打開

index.html

文件，即可看到一個(gè)九宮格布局。每個(gè)格子中的數(shù)字表示格子的編號，鼠標(biāo)懸停在格子上時(shí)，背景顏色會發(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ì)閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進(jìn)行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書寫。打開了學(xué)習(xí)Web前端頁面布局模塊的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價(jià)我的收獲第五模塊網(wǎng)站頁面布局5.3購物車圖標(biāo)的制作使用HTML5，CSS3，定位相關(guān)屬性。完成購物車頁面上購物車按鈕顯示在右下角位置的制作，給出案例代碼。 使用HTML5和CSS3完成的購物車頁面布局示例代碼，其中購物車按鈕固定在頁面的右下角位置。這種布局常見于電商網(wǎng)站，方便用戶隨時(shí)訪問購物車。---<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>購物車頁面-右下角購物車按鈕</title><style>/*頁面整體樣式*/body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;}/*頁面內(nèi)容區(qū)域*/.content{padding:20px;text-align:center;}/*購物車按鈕容器*/.cart-button-container{position:fixed;/*固定定位*/bottom:20px;/*距離底部20px*/right:20px;/*距離右側(cè)20px*/z-index:1000;/*確保按鈕在最上層*/}/*購物車按鈕*/.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;/*背景色過渡效果*/}/*購物車按鈕懸停效果*/.cart-button:hover{background-color:#ff6b81;/*懸停時(shí)背景色變淺*/}/*購物車數(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><!--頁面內(nèi)容--><divclass="content"><h1>歡迎來到我的商店</h1><p>這里是商品展示區(qū)域。</p><p>向下滾動查看更多內(nèi)容。</p><p>...</p><p>更多內(nèi)容...</p><p>...</p><p>繼續(xù)滾動...</p><p>...</p><p>到底了！</p></div><!--購物車按鈕--><divclass="cart-button-container"><ahref="#"class="cart-button">??<!--購物車圖標(biāo)--><spanclass="cart-count">3</span><!--購物車數(shù)量提示--></a></div></body></html>---###4.功能說明1.頁面整體樣式：body設(shè)置了頁面字體和背景顏色。.content是頁面內(nèi)容區(qū)域，用于展示商品信息。2.購物車按鈕容器(.cart-button-container)：使用position:fixed將按鈕固定在頁面上。bottom:20px和right:20px將按鈕定位在頁面的右下角。z-index:1000確保按鈕始終顯示在最上層。3.購物車按鈕(.cart-button)：使用width和height設(shè)置按鈕大小，border-radius:50%使其變成圓形。使用display:flex將購物車圖標(biāo)和數(shù)量提示居中。背景色為紅色（#ff4757），文字為白色。添加了陰影效果（box-shadow）和懸停效果（hover）。4.購物車數(shù)量提示(.cart-count)：使用position:absolute將數(shù)量提示定位在按鈕的右上角。背景為黑色，文字為白色，形狀為圓形5.頁面內(nèi)容區(qū)域(.content)：用于展示頁面主要內(nèi)容，包含一些占位文本。效果：頁面右下角固定顯示一個(gè)圓形的購物車按鈕。按鈕背景為紅色，包含一個(gè)購物車圖標(biāo)（??）和數(shù)量提示（例如“3”）。當(dāng)用戶滾動頁面時(shí)，按鈕始終保持在右下角位置。懸停按鈕時(shí)，背景色會變淺，提供交互反饋。DeepSeek非常嚴(yán)謹(jǐn)?shù)氖褂昧颂崾驹~當(dāng)中的Web前端技術(shù)，完成了案例的制作和代碼的輸出。將代碼運(yùn)行到Hbuilder環(huán)境當(dāng)中可以得到這樣的一個(gè)結(jié)果。AI給出的案例代碼。兼顧了功能，樣式設(shè)計(jì)。需要仔細(xì)閱讀一遍。理解模型給出的代碼的語法邏輯，并且和教材當(dāng)中的案例進(jìn)行對比學(xué)習(xí)。AI生成式輔助學(xué)習(xí)方法，功能非常強(qiáng)大。從另外一個(gè)角度非常嚴(yán)謹(jǐn)完整的給出了另外一種設(shè)計(jì)方法，代碼的書寫。打開了學(xué)習(xí)Web前端頁面布局模塊中定位的思維定式和畏難情緒。AI生成式探究學(xué)習(xí)教學(xué)輔助設(shè)計(jì)單使用AI名稱：DeepSeek班級：學(xué)生姓名：子任務(wù)名稱提示詞AI的回應(yīng)對AI回應(yīng)的評價(jià)我的收獲第五模塊網(wǎng)站頁面布局5.4購物車商品列表制作使用HTML5，CSS3，彈性布局相關(guān)屬性。完成一個(gè)移動端商品列表展示的制作，給出案例代碼。 以下是一個(gè)使用HTML5、CSS3和彈性布局（Flexbox）來制作移動端商品列表頁面的示例代碼。這個(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. 本站所有資源如無特殊說明，都需要本地電腦安裝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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論