*页 >> 问答

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

发布于：2023-08-06 12:24:22

> ⛵ 源码获取 文末联系 ✈

Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | **民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业，Web大学生网页 HTML：结构

CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

JavaScript：做与用户的交互行为

@TOC

前端学习路线

（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="">故宫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;资讯<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="">开放&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公告<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="">故宫&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;藏品<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"> 网站地图 &nbsp;&nbsp; 相关链接&nbsp;&nbsp; 影像授权&nbsp;&nbsp; 隐私政策&nbsp;&nbsp; 版权声明&nbsp;&nbsp; 在线咨询&nbsp;&nbsp; 联系我们&nbsp; &nbsp;关于我们&nbsp;&nbsp; 调查问卷 </div> <div class="row1">网站维护：故宫博物院资料信息部&nbsp;&nbsp;&nbsp; 联系方式：gugong@dpm.org.cn</div> <div class="row2"><img src="picture/ico.png" alt=""> 京公网安备 11010102004165号 &nbsp;&nbsp;京ICP备05067311号-1</div> <div class="row3">© 2001- &nbsp;&nbsp;现在&nbsp;故宫博物院 &nbsp;&nbsp;网站建设： 北京分形科技</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%，你可能就会发出一声叹息:原来工作也不过如此嘛。

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

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

学习更多

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

在这里插入图片描述


免责声明：本站所有内容及图片均采集来源于网络，并无商业使用，如若侵权请联系删除。

上一篇：蚌埠网站建设解读：为什么说中小企业要做一个企业网站？

下一篇：市北区税务局发挥服务“心”力量 搭建缴费连心桥罗布泊遇难女孩照片曝光，肤白貌美气质绝佳，花一万旅游碳化成干

资讯 观察行业视觉，用专业的角度，讲出你们的心声。
MORE

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息，我们会在24小时内与您取得联系。