當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML期末作业，简单的学生网页作业源码基于html实现中国脸谱传统文化网站设计(5个页面)

發(fā)布時(shí)間：2023/12/29 HTML 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML期末作业，简单的学生网页作业源码基于html实现中国脸谱传统文化网站设计(5个页面) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

📂文章目錄

👨?🎓網(wǎng)頁題目
??網(wǎng)頁描述
🌐網(wǎng)頁效果
?? 代碼實(shí)現(xiàn)
- 🧱HTML結(jié)構(gòu)代碼
🎁更多干貨

👨?🎓網(wǎng)頁題目

🍵茶文化網(wǎng)站、🏳??🌈中華傳統(tǒng)文化題材、京劇文化🔏水墨風(fēng)書畫、xx民間年畫文化藝術(shù)網(wǎng)站、等網(wǎng)站的設(shè)計(jì)與制作。

??網(wǎng)頁描述

🏷? 這個(gè)首頁代碼運(yùn)用了DIV盒子的使用方法，如盒子的嵌套、浮動(dòng)、margin、border、background等屬性的使用，外部大盒子設(shè)定居中，內(nèi)部左中右布局，下方橫向浮動(dòng)排列，大學(xué)學(xué)習(xí)的前端知識(shí)點(diǎn)和布局方式都有運(yùn)用，CSS的代碼量也很足、很細(xì)致，使用hover來完成過渡效果、鼠標(biāo)滑過效果等，使用表格、表單補(bǔ)充模塊，為方便新手學(xué)習(xí), 個(gè)別源碼頁面中沒有使用js有需要的可以自行添加。

🌐網(wǎng)頁效果

?? 代碼實(shí)現(xiàn)

🧱HTML結(jié)構(gòu)代碼

<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>藝術(shù)</title> <link rel="stylesheet" type="text/css" href="css/style.css" /></head><body> <div class="wrap"><div class="top"><div class="logo"><img src="images/logo.png" width="404" height="125" /></div><div class="nav"><ul><li><a href="index.html">首頁</a></li><li><a href="introduce.html">介紹</a></li><li><a href="center.html">中心</a></li><li><a href="art.html">藝術(shù)</a></li><li><a href="about.html">關(guān)于</a></li></ul></div><div class="s_btn"></div></div><div class="art_box"><img src="images/art_01.png" width="1024" height="528" /></div><div class="box2"><div class="box_c"><div class="box_z"><p>寶貴的民間文化。每張臉譜，都承載著<br />它的生命。</p></div><div class="box_e"><img src="images/tu_02.png" width="154" height="124" /></div></div></div><div class="box3"><div class="lj1"><a href="#">網(wǎng)站地圖</a><a href="#" style="margin-top:30px;">隱私政策</a><a href="#" style="margin-top:60px;">簡(jiǎn)體中文 / English </a></div><div class="lj1"><a href="#">xx我們</a><a href="#" style="margin-top:30px;">常見問題與回復(fù)</a></div><div class="bq"></div></div><div class="foot"><div class="backTop"><a href="#"><img src="images/tu_03.png" width="27" height="24" /></a></div></div></div></body> </html>

🎁更多干貨

1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！

2.💗【👇🏻👇🏻👇🏻關(guān)注我| 💬獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板、大學(xué)生畢業(yè)HTML模板、期末大作業(yè)模板、等! 「在這里有好多前端開發(fā)者，一起探討前端 Node 知識(shí)，互相學(xué)習(xí)」！

以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻💬