用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作
页面效果展示
页面完整代码
<!DOCTYPE HTML>
<html>
<head>
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机.......
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，.......<br>
2018年11月11日，........
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，.......<br>
2017年3月13日，《中国日报》........<br>
2017年7月30日，............<br>
2017年11月10日上午.......<br>
2018年2月9日，......<br>
2018年10月30日，......<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；......
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机......。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，......。<br>
歼20是我国自主研制的第五代战斗机......。
</p>
<img border="0" usemap="#map" / >
<map name="map" id="map">
<area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body>
</html>页面制作技术解析
1.页面内容居中显示方法
2.导航栏悬停顶端方法
3.鼠标滑过导航标题或链接时改变背景色提示
3.隐藏滚动条方法
4.图片区域链接
大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。
下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。
使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。
(因原创问题，代码证中不能有太多文字描述，大家可以自己填充其他内容)
