用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作

Posted 2021-04-04 爱玩CG

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用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>