? 源碼獲取 文末聯(lián)系 ?
Web前端開發(fā)技術(shù)
描述 網(wǎng)頁設(shè)計(jì)題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計(jì)期末課程大作業(yè) 茶文化網(wǎng)站 | 中華傳統(tǒng)文化題材 | 京劇文化水墨風(fēng)書畫 | 中國民間年畫文化藝術(shù)網(wǎng)站 | 等網(wǎng)站的設(shè)計(jì)與制作 | HTML期末大學(xué)生網(wǎng)頁設(shè)計(jì)作業(yè)，Web大學(xué)生網(wǎng)頁
-
HTML：結(jié)構(gòu)
-
CSS：樣式
在操作方面上運(yùn)用了html5和css3，
采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動(dòng)、絕對(duì)定位、相對(duì)定位、字體樣式、引用視頻等基礎(chǔ)知識(shí) -
JavaScript：做與用戶的交互行為
前端學(xué)習(xí)路線
（1）html文件：其中index.html是首頁、其他html為二級(jí)頁面；
（2）css文件：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3）js文件：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（網(wǎng)頁中運(yùn)用到j(luò)s代碼）
網(wǎng)頁基本結(jié)構(gòu)
(1)首頁：進(jìn)入網(wǎng)頁中看到的第一個(gè)頁面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)
(2)二級(jí)頁面：從首頁點(diǎn)擊進(jìn)入之后的頁面叫做二級(jí)頁面
(3)三級(jí)頁面：從二級(jí)頁面點(diǎn)擊進(jìn)入的頁面
網(wǎng)頁html：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說，網(wǎng)站就是由網(wǎng)頁組成的
首頁網(wǎng)站：首頁是一個(gè)網(wǎng)站的入口網(wǎng)頁，故往往會(huì)被編輯得易于了解該網(wǎng)站多數(shù)作為首頁的文件名是index加上擴(kuò)展名
導(dǎo)航菜單：是指位于頁面頂部或者側(cè)邊區(qū)域的，也稱之為導(dǎo)航欄，它起著鏈接站點(diǎn)或者軟件內(nèi)的各個(gè)頁面的作用.
網(wǎng)頁頁腳：是網(wǎng)頁中每個(gè)頁面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號(hào)等。文章來源：http://www.zghlxwxcb.cn/news/detail-446292.html
網(wǎng)頁演示
文章來源地址http://www.zghlxwxcb.cn/news/detail-446292.html
HTML結(jié)構(gòu)代碼
<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<title>故宮博物館</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/homecommon.css">
<link rel="stylesheet" href="css/home.css">
<script src="js/函數(shù).js"></script>
<script src="js/common.js"></script>
<script src="js/home.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 頭部 -->
<header>
<div class="logo"></div>
<div class="nav">
<ul>
<li><a href="">首頁</a></li>
<li><a href="guide.html">導(dǎo)覽</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="exhibition.html">展覽</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="teach.html">教育</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="probe.html">探索</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="learning.html">學(xué)術(shù)</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="cultural.html">文創(chuàng)</a><b><img src="picture/arrow1.png" alt=""></b></li>
<li><a href="about.html">關(guān)于</a><b><img src="picture/arrow1.png" alt=""></b></li>
</ul>
</div>
<div class="tools">
<ul class="clear">
<li>
<a href="javascript:;"><img src="picture/tools1.png" alt=""></a>
<div class="show">
<a href="signin.html">登錄</a>
<a href="signin.html">注冊(cè)</a>
</div>
</li>
<li>
<a href="javascript:;"><img src="picture/tools2.png" alt=""></a>
<div class="show">
<a href="javascript:;">EN</a>
<a href="javascript:;">青少版</a>
</div>
</li>
<li>
<a href="javascript:;"><img src="picture/tools3.png" alt=""></a>
<div class="show">
<a href="javascript:;">搜索</a>
</div>
</li>
</ul>
<a href="#" class="tools4">
<img src="picture/tools4.png" alt="">
</a>
</div>
<div class="nav_child">
<div class="child c1">
<div class="nav">
<a href="javascript:;">開放時(shí)間</a>
<a href="javascript:;">票務(wù)服務(wù)</a>
<a href="javascript:;">交通路線</a>
<a href="javascript:;">游覽須知</a>
<a href="javascript:;">全景故宮</a>
</div>
</div>
<div class="child c2">
<div class="nav">
<a href="javascript:;">近期展覽</a>
<a href="javascript:;">專館</a>
<a href="javascript:;">原狀陳列</a>
<a href="javascript:;">赴外展覽</a>
<到了這里，關(guān)于html制作網(wǎng)頁案例代碼----(故宮博物館9頁)特效很多的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Vue3 博物館管理系統(tǒng)] 使用Vue3、Element-plus tabs組件構(gòu)建選項(xiàng)卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
