AI生成式探究學習教學輔助設計單-5.1 簡單計算器的制作_第1頁
AI生成式探究學習教學輔助設計單-5.1 簡單計算器的制作_第2頁
AI生成式探究學習教學輔助設計單-5.1 簡單計算器的制作_第3頁
AI生成式探究學習教學輔助設計單-5.1 簡單計算器的制作_第4頁
AI生成式探究學習教學輔助設計單-5.1 簡單計算器的制作_第5頁
已閱讀5頁，還剩3頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

AI生成式探究學習教學輔助設計單使用AI名稱：DeepSeek班級：學生姓名：子任務名稱提示詞AI的回應對AI回應的評價我的收獲第五模塊網站頁面布局5.1電子禮盒設計制作使用HTML5，CSS3，盒子模型相關屬性。完成父親節專屬的購物網頁設計的制作，給出案例代碼。 下面是一個簡單的父親節專屬購物網頁設計的案例代碼，使用了HTML5和CSS3，并應用了盒子模型的相關屬性。---###1.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><header><h1>父親節專屬購物</h1><p>為爸爸挑選最棒的禮物！</p></header><main><sectionclass="product"><imgsrc="gift1.jpg"alt="禮物1"><h2>豪華剃須刀</h2><p>讓爸爸每天都能享受舒適的剃須體驗。</p><pclass="price">￥499</p><button>加入購物車</button></section><sectionclass="product"><imgsrc="gift2.jpg"alt="禮物2"><h2>男士香水</h2><p>經典男士香水，展現爸爸的獨特魅力。</p><pclass="price">￥299</p><button>加入購物車</button></section><sectionclass="product"><imgsrc="gift3.jpg"alt="禮物3"><h2>智能手表</h2><p>健康監測，智能提醒，爸爸的健康助手。</p><pclass="price">￥899</p><button>加入購物車</button></section></main><footer><p>©2023父親節專屬購物.保留所有權利。</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結構：header

部分包含網頁的標題和描述。main

部分包含多個

section，每個

section

代表一個商品。footer

部分包含版權信息。2.CSS樣式：使用了

box-sizing:border-box;

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

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

box-shadow

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

background-color

和

color

屬性來實現。3.響應式設計：通過

flex-wrap:wrap;

和

width:30%;

的設置，商品卡片在小屏幕設備上會自動換行，適應不同屏幕尺寸。4.圖片資源gift1.jpg,

gift2.jpg,

gift3.jpg

是商品的圖片，你需要準備這些圖片并放在與HTML文件相同的目錄下，或者修改圖片路徑以適應你的項目結構。5.運行效果將上述代碼保存為

index.html

和

styles.css

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

index.html

文件，即可看到一個簡單的父親節專屬購物網頁。DeepSeek非常嚴謹的使用了提示詞當中的web前端技術，完成了案例的制作和代碼的輸出。將代碼運行到h

溫馨提示

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

評論

0/150

提交評論