位置: IT常识 - 正文

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

编辑：rootadmin

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

推荐整理分享html制作网页案例代码----(故宫博物馆9页)特效很多(html制作网页教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:html制作网页案例代码,html制作网页案例代码,html网页制作的基本步骤,html网页制作案例教程,html网页制作案例教程,html制作网页案例,html制作网页案例代码,html制作网页案例,内容如对您有帮助，希望把文章链接给更多的朋友！

⛵ 源码获取文末联系 ✈

HTML：结构

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

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

JavaScript：做与用户的交互行为

文章目录前端学习路线网页基本结构网页演示HTML结构代码学的反而越迷茫学习更多前端学习路线

（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:;">【