博物馆网页设计案例（html制作网页案例代码—-(故宫博物馆9页)特效很多）

时间2025-06-20 16:02:39分类IT科技浏览5092

导读：⛵ 源码获取文末联系 ✈...

⛵ 源码获取文末联系 ✈

HTML：结构

CSS：样式

在操作方面上运用了html5和css3 ，

采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript：做与用户的交互行为

前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；

（2）css文件：css全部页面样式,文字滚动, 图片放大等；

（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）

网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO 、公司名称、导航、banner 、新闻、相关信息、底部信息、banner一般是5个　　

(2)二级页面：从首页点击进入之后的页面叫做二级页面

(3)三级页面：从二级页面点击进入的页面

网页html

：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的

首页网站

：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名

导航菜单

：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用.

网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。

网页演示

HTML结构代码

<!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/函数.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">导览</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">学术</a><b><img src="picture/arrow1.png" alt=""></b></li> <li><a href="cultural.html">文创</a><b><img src="picture/arrow1.png" alt=""></b></li> <li><a href="about.html">关于</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">注册</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:;">开放时间</a> <a href="javascript:;">票务服务</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> </div> </div> <div class="child c3"> <div class="nav"> <a href="javascript:;">教育新闻</a> <a href="javascript:;">故宫讲坛</a> <a href="javascript:;">故宫博物院教育中心</a> <a href="javascript:;">国际博协培训中心</a> <a href="javascript:;">故宫志愿者</a> </div> </div> <div class="child c4"> <div class="nav"> <a href="javascript:;">建筑</a> <a href="javascript:;">藏品</a> <a href="javascript:;">古籍</a> <a href="javascript:;">宫廷历史</a> <a href="javascript:;">文物医院</a> <a href="javascript:;">文化专题</a> <a href="javascript:;">名画记</a> <a href="javascript:;">数字多宝阁</a> <a href="javascript:;">数字文物库</a> <a href="javascript:;">藏品总目</a> </div> </div> <div class="child c5"> <div class="nav"> <a href="javascript:;">学术资讯</a> <a href="javascript:;">专家名录</a> <a href="javascript:;">故宫研究院</a> <a href="javascript:;">故宫学院</a> <a href="javascript:;">其他学术机构</a> <a href="javascript:;">故宫博物院院刊</a> </div> </div> <div class="child c6"> <div class="nav"> <a href="javascript:;">故宫出版</a> <a href="javascript:;"> 文创产品</a> <a href="javascript:;"> 故宫壁纸</a> <a href="javascript:;"> 故宫APP</a> <a href="javascript:;"> 故宫游戏</a> </div> </div> <div class="child c7"> <div class="nav"> <a href="javascript:;">总说</a> <a href="javascript:;">领导资讯</a> <a href="javascript:;">院史编年</a> <a href="javascript:;">景仁榜</a> <a href="javascript:;">机构</a> <a href="javascript:;">设置</a> </div> </div> </div></header> <div class="home"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ol> </ol> </div> <div class="h_w"> <div class="h_row1"> <h1>故宫博物院关于“五一 ”假期期间参观的温馨提示</h1> <p>“五一 ”假期期间，故宫博物院开馆时间从8:30提前至8:00 。为了更好地提供票务服务，即日起，故宫博物院门票的开售时间从每日24时，提前至每日20时。</p> <a href="javascript:;">详细内容 <div id="line0" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#dadada" d="M0,5L5,5L5,0L105,0L105,5L110,5L110,35L105,35L105,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div> </a> </div> <div class="h_row2"> <div class="row2_col1"> <div class="row1"> <div class="new"> <h1><img src="picture/public-icon1.png" alt="">故宫      资讯<img src="picture/public-icon2.png" alt=""> <a href="javascript:;" class="a">更多 <i></i> </a> </h1> <div class="list"> <a href="javascript:;">【声明】关于故宫博物院在职、离退休人员参加社会文物鉴定等公务性活动的声明</a> <a href="javascript:;">【严正声明】关于我院依法对“故宫博物院 ”享有名称权和对已注册商标的商标专用权的严正声明</a> </div> <ul class="bottom"> <li>故宫博物院第九届故宫学高校教师讲习班招收学员启事 <p>03 / 17</p> </li> <li>故宫博物院关于“五一 ”假期期间参观的温馨提示 <p>04 / 30</p> </li> <li>故宫博物院2021年度部门预算 <p>04 / 30</p> </li> <li>“庙堂仪范——故宫博物院藏历代人物画特展（第一期） <p>04 / 30</p> </li> <li>故宫博物院陶瓷馆于“五一 ”武英殿开馆 <p>04 / 30</p> </li> </ul> </div> <div class="img"><img src="picture/s6084d111809d6.jpg" alt=""></div> </div> <div class="row2"> <img src="picture/s60471e6f2bc3d.png" alt=""> </div> </div> <div class="row2_col2"> <div class="row1"> <div class="col1"> <div class="h1">2021 / 5 / 2</div> <div class="h2">今日开馆</div> <div class="p"> <div class="p">除法定节假日，故宫博物院全年实行周一闭馆<strong>入馆参观需验证健康码，测体温，刷身份证</strong></div> </div> <div class="list"> <div class="li"> <h1>08:30</h1> <p>开放进馆时间</p> </div> <span></span> <div class="li"> <h1>16:00</h1> <p>止票时间<br>(含钟表馆、珍宝馆)</p> </div> <span></span> <div class="li"> <h1>16:10</h1> <p>停止入馆时间</p> </div> <span></span> <div class="li"> <h1>17:00</h1> <p>闭馆时间</p> </div> </div> </div> <div class="col2"> <div class="col2_row1"> <div class="item1"> <img src="picture/s5fae58c4971ad.png" alt=""> <div class="h">官方购票网站</div> </div> <div class="item1"> <img src="picture/s5fae58c497445.png" alt=""> <div class="h">官方购票公众号</div> </div> <div class="item2"> <div class="h1">票务咨询电话</div> <div class="p1">服务时间：8:30 — 22:00</div> <div class="t"> <span>010-85007057</span> <span>010-85007058 </span> <span>010-85007062 </span> <span>010-85007063 </span> <span>010-85007966 </span> <span>010-85007970</span> <span>010-85007967</span> <span>010-85007968</span> </div> </div> </div> <div class="slp"></div> <ul class="col2_row2"> <li><img src="picture/s5fa5319858ff0.png" alt="">导览地图</li> <li><img src="picture/s5fa531985946e.png" alt="">交通路线</li> <li><img src="picture/s5fa5319859960.png" alt="">票务服务</li> <li><img src="picture/s5fa5319859c8d.png" alt="">游览须知</li> </ul> </div> </div> <div class="box4"> <h1><img src="picture/public-icon1.png" alt="">开放      公告<img src="picture/public-icon2.png" alt=""> <a href="javascript:;" class="a">更多 <i></i> </a> </h1> <div class="list"> <a href="javascript:;">故宫博物院关于暂停城墙开放的公告</a> <a href="javascript:;">故宫博物院实行全部网络购票</a> </div> <ul class="bottom"> <li>关于承乾宫青铜器馆暂停开放的公告 <p>2021 / 04 / 27</p> </li> <li>关于故宫博物院典藏如意展恢复开放的公告 <p>2021 / 03 / 10</p> </li> <li>关于故宫博物院典藏如意展暂停开放的公告 <p>2021 / 03 / 03</p> </li> </ul> </div> </div> </div> <div class="h_row3"> <div class="box1"> <h1><img src="picture/public-icon1.png" alt="">故宫      藏品<img src="picture/public-icon2.png" alt=""></h1> <div class="num"><b>1,863,404</b> <p><img src="picture/indexicon1.png" alt=""></p> </div> <a href="javascript:;">藏品总目 <div id="line1" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#ffffff" d="M0,5L5,5L5,0L135,0L135,5L140,5L140,35L135,35L135,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div> </a> <a href="javascript:;">数字文物库 <div id="line2" style="position: absolute; inset: 0px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="140" height="40" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="none" stroke="#ffffff" d="M0,5L5,5L5,0L135,0L135,5L140,5L140,35L135,35L135,40L5,40L5,35L0,35L0,5" stroke-width="2" stroke-dasharray="1000,1000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-width: 2; stroke-dashoffset: 0px; stroke-dasharray: 500, 500;"></path></svg></div> </a> </div> <ul class="box2"> <li><img src="picture/s60754db6220db.jpg" alt=""> <div class="mask"> <p>马远白蔷薇图页</p> <p> 宋</p> <p>纵26.2cm，横25.8cm</p> <p></p> <p class="jj">画中的白蔷薇花朵硕大，枝叶繁茂，光彩夺目。画家笔法严谨，画风清丽活泼，颇具生气，代表了南宋画院花鸟画的典型风貌。</p> </div> </li> <li><img src="picture/s60754db622db6.jpg" alt=""> <div class="mask"> <p>晴春蝶戏图页</p> <p> 宋</p> <p>纵23.7cm ，横25.3cm</p> <p></p> <p class="jj">图绘体态多姿的凤蝶、娇小素净的粉蝶等各种蝴蝶，在明媚的春光下宛若俏丽的花团漫天绽放，形象生动地体现出蝶戏的创作主题。</p> </div> </li> <li><img src="picture/s60754db620cb3.jpg" alt=""> <div class="mask"> <p>碧桃图页</p> <p> 宋</p> <p>纵24.8厘米，横27厘米</p> <p></p> <p class="jj">图中盛开的碧桃红白相映，枝叶扶疏，娇柔妩媚。虽然画面上仅绘桃花两枝，但它的繁花簇簇、苞蕾盈枝则透露出浓郁的春意。</p> </div> </li> </ul> </div> <div class="h_row4"> <div class="row1"> <h1><img src="picture/public-icon1.png" alt=""> 博物馆活动<img src="picture/public-icon2.png" alt=""></h1> <ul class="box3"> <li> <h3>【讲座报道】朱玉麒：从燕然山到大成殿——西北边疆平定的纪功碑——故宫研究院学术讲坛第八十二讲</h3> <p>2021年4月21日下午，北京大学历史学系暨中国古代史研究中心教授朱玉麒先生在故宫博物院第二会议...</p> </li> <li> <h3>《（新编）中国通史》清代（上）卷、中国历史图录卷编纂工作正式启动</h3> <p>《（新编）中国通史》是党中央在中国特色社会主义进入新时代，中华民族迎来全面建成小康社会，实现第一...</p> </li> <li> <h3>国际古迹遗址日中国主题活动“我在故宫画彩画——听障青少年走进文化遗产地 ”顺利举行</h3> <p>2021年4月18日上午，由国家文物局指导，中国古迹遗址保护协会、故宫博物院、中国听力语言康复研...</p> </li> <li> <h3>【讲座报道】王旭东院长：“敦煌与故宫——中华文化包容互鉴的结晶 ” ——2021年北大故宫系列学术讲座隆重开启</h3> <p>2021年4月9日晚，在这春意盎然的美好日子里，故宫博物院院长王旭东做客北京大学，举办主题为“敦...</p> </li> </ul> </div> <div class="row2"> <img src="picture/s608b636e07539.jpg" alt=""> </div> </div> <ul class="h_row5"> <li><img src="picture/s5ebe364fa24bd.jpg" alt=""> <div class="cont"><img src="picture/s5863704a46b10.png" alt=""> <p>图书馆</p> </div> <div class="mask"></div> </li> <li><img src="picture/s5835a58eb4421.jpg" alt=""> <div class="cont"><img src="picture/s58636fe246e0a.png" alt=""> <p>视听馆</p> </div> <div class="mask"></div> </li> <li><img src="picture/s5835a57aca965.jpg" alt=""> <div class="cont"><img src="picture/s58bcfc20c5076.png" alt=""> <p>数字文物库</p> </div> <div class="mask"></div> </li> <li><img src="picture/s5f86a1c4afbf6.jpg" alt=""> <div class="cont"><img src="picture/s58bcfc33c893d.png" alt=""> <p>全景故宫</p> </div> <div class="mask"></div> </li> <li><img src="picture/s5835a57aca965.jpg" alt=""> <div class="cont"><img src="picture/s58bcfc4e63ba3.png" alt=""> <p>V故宫</p> </div> <div class="mask"></div> </li> </ul> </div> <div class="sidebar"> <ul class="sidebar_ul"> <li> <a href="javascript:;"></a> </li> <li> <a href="javascript:;">常</a> <div class="box"><i>年</i> · <i>庆</i> · <i>博</i> · <i>春</i> · <i>夏</i> · <i>秋</i> · <i>冬</i> · <i>常</i></div> </li> <li> <a href="javascript:;">享</a> <div class="box"><img src="picture/share-icon1.png" alt=""><img src="picture/share-icon2.png" alt=""></div> </li> <li> <a href="javascript:;">书</a> <div class="box">图书馆</div> </li> <li> <a href="javascript:;">听</a> <div class="box">视听馆</div> </li> <li> <a href="cultural.html">创</a> <div class="box">文创馆</div> </li> <li> <a href="javascript:;">景</a> <div class="box">全局故宫</div> </li> <li> <a href="javascript:;">VR</a> <div class="box">V故宫</div> </li> <li> <a href="javascript:;">云</a> <div class="box">云游故宫</div> </li> <li> <a href="signin.html">登</a> <div class="box">会员登录</div> </li> <li> <a href="javascript:;"></a> <div class="box">调查问卷</div> </li> </ul> <div class="sidebar_x"></div> </div>  <div class="footer"> <div class="num">网站访问量<span><i>1</i><i>3</i><i>1</i><i>7</i><i>7</i><i>3</i><i>8</i><i>8</i><i>0</i></span></div> <div class="nav_foot"> 网站地图    相关链接   影像授权   隐私政策   版权声明   在线咨询   联系我们   关于我们   调查问卷 </div> <div class="row1">网站维护：故宫博物院资料信息部    联系方式：gugong@dpm.org.cn</div> <div class="row2"><img src="picture/ico.png" alt=""> 京公网安备 11010102004165号   京ICP备05067311号-1</div> <div class="row3">© 2001-   现在 故宫博物院   网站建设：北京分形科技</div> <div class="jy">浏览建议</div> <div class="row4"> <div class="col"> <div class="col3"></div> </div> <div class="col2"></div> </div> </div> </body> </html>

学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20% ，你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？

所以，放松心态吧，好好享受大学时光

—————————————————

学习更多

关注我 | 点赞博文 | 每天带你涨知识

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。