時(shí)間:2023-06-10 23:42:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-06-10 23:42:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
【web前端期末大作業(yè)】制作一個(gè)HTML+CSS保護(hù)動(dòng)物寵物網(wǎng)頁(yè):精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡(jiǎn)介: 一個(gè)熱愛(ài)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁(yè): 【主頁(yè)—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè): 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式:【 HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】 超炫酷的Echarts大屏可視化源碼:【 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】 HTML+CSS+JS實(shí)例代碼: 【 ?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁(yè)代碼) 繼續(xù)更新中...】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南: 【 web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師,技術(shù)組長(zhǎng),教學(xué)總監(jiān);曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰,難涼熱血;多年過(guò)去,歷經(jīng)變遷,物是人非。 然而,對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng),熱衷分享,初心未改,繼往開(kāi)來(lái)!
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作)。 其中: (1) html文件包含:其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面; (2) css文件包含:css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等; (3) js文件包含:js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首頁(yè)</title> <link rel="stylesheet" href="css/index.css"></head><body> <div class="box"> <div class="daohang"> <img src="picture/圖標(biāo).jpg" alt=""> <a class="nav" href="dongwu.html">動(dòng)物</a> <a class="nav" href="">首頁(yè)</a> </div> <div class="box1"> <img src="picture/圖片1.jpg" alt=""> <p> <strong>寵物(pet)</strong>指人們?yōu)榱司衲康?,而不是為了?jīng)濟(jì)目的而豢養(yǎng)的生物。傳統(tǒng)的寵物是指哺乳綱或鳥(niǎo)綱的動(dòng)物,養(yǎng)著用于玩賞和作伴。 實(shí)際生活中的寵物包括魚(yú)綱、爬行綱、兩棲綱、昆蟲(chóng),甚至植物,用于觀賞、作伴、舒緩人們的精神壓力。 隨著時(shí)代的發(fā)展,寵物的范圍很廣,包括動(dòng)物、植物、虛擬寵物、電子寵物等。但大多數(shù)國(guó)家的法律還是把寵物限定在動(dòng)物范疇內(nèi)。 飼養(yǎng)寵物作為人類親近自然的機(jī)會(huì),可以滿足人類的心理需求,是非常健康正常的愛(ài)好。 2019年7月,一項(xiàng)鼻紋識(shí)別解決方案推出,并已最先應(yīng)用于犬只身份認(rèn)證。這一方案將有助于城市中的寵物管理,使AI尋寵、寵物門禁、在線犬證辦理等成為可能。 </p> </div> <div class="row"> <img src="picture/圖片2.jpg" alt=""> <img src="picture/圖片3.jpg" alt=""> <img src="picture/圖片4.jpg" alt=""> <img src="picture/圖片5.jpg" alt=""> <img src="picture/圖片6.jpg" alt=""> <img src="picture/圖片7.jpg" alt=""> <div style="clear:both"></div> </div> <div class="box4"> <p>動(dòng)物是靈性的,不同于植物。 你若孤獨(dú),它陪伴你。在陽(yáng)光的午后,蜷縮在你的臂彎。 它們不懂幸福,卻能讀懂你笑的音符;它們不懂憂傷,卻能傾聽(tīng)你內(nèi)心的痛。它們用無(wú)言的守護(hù),帶給你最美的幸福。 好好對(duì)它們吧,它們雖然只是我們的寵物,但也需要我們的愛(ài)護(hù)。 </p> </div> </div></body></html>
* { margin: 0; padding: 0; list-style: none;}a { text-decoration: none; color: #000;}p { font-weight: 300;}.zuo { float: left;}.you { float: right;}.clear { clear: both;}.box { width: 800px; margin: 0px auto; background: #ddf1fc; padding-bottom: 20px;}.daohang { width: 100%; height: 80px;}.daohang img { width: auto; height: 80px; margin-left: 50px; float: left;}.nav { display: inline-block; width: 100px; height: 100%; line-height: 80px; text-align: center; font-size: 24px; float: right; margin-right: 50px;}.nav:hover { color: #f6ccda;}.box1 { width: 100%; background: #f6ccda; margin: 20px 0;}.box1 img { width: 100%; height: 440px; margin: 0 auto;}.box1 p { padding: 20px; line-height: 2; text-indent: 2em;}.box1 p strong { font-size: 20px;}.box2 { width: 100%;}.box2 .fl { float: left; margin-right: 40px; width: 350px; height: auto;}.box2 p { font-weight: 300; font-size: 18px; text-indent: 2em; line-height: 2; padding-right: 40px; text-align: justify;}.box2 .fr { float: right; width: 350px; height: auto; margin-left: 40px;}.box3 { box-sizing: border-box; width: 100%; height: auto;}.box3 .info { float: left; width: 240px; margin: 0 10px;}.box3 img { width: 100%; height: 180px;}.box3 p { font-weight: 600; margin: 10px 0; text-align: center;}.box4 { width: 100%; box-sizing: border-box; padding: 20px; letter-spacing: 2; line-height: 2; background: #f6ccda; text-align: justify; text-indent: 2em;}.row { box-sizing: border-box; width: 100%; padding: 20px 60px;}.row img { float: left; width: 200px; height: 140px; margin: 12px;}
請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”
一鍵三連哦! 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】
帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者,一起探討 前端 Node 知識(shí),互相學(xué)習(xí)」!關(guān)鍵詞:保護(hù),動(dòng)物,作業(yè)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。