天涯论坛

 找回密码
 立即注册
搜索
查看: 76|回复: 4

用HTML制作一个简单页面(代码阅读练习)——零基本自学网页制作

[复制链接]

2991

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569152
发表于 2024-7-27 22:25:03 | 显示全部楼层 |阅读模式

页面效果展示

重播
播放
00:00 / 00:00 直播
00:00
进入全屏
50
点击按住可拖动视频

页面完整代码

<!DOCTYPE HTML> <html> <head> <title>文内链接</title> <style> a:hover { bac公斤round-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隐形战斗机首架技术验证机于2011年1月11日晌午12时50分上下进行首次升空飞行测试,13时08分成功着陆,历时18分钟。<br>全部首飞过程在歼-10S战斗教练机陪同下完成 。 2016年10月28日,首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后,还持续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。<h2><a id="chapter2">研制状况</a></h2>在2016年11月1日,第十一届珠海航展,歼-20首次进行空中飞行展示。两架歼-20做了公开飞行,不仅在现场引起轰动,立刻被西方媒介海量报告。歼-20是中国现代空中力量的表率作,进入了世界最先进的第五代战斗机行列,它是中国国防能力高速发展的一个象征。<br> 2018年11月11日,第十二届中国航展在珠海迎来“高光时刻”:歼-20战机在公开飞行展示中挂弹开仓,震撼献礼人民空军成立69周年纪念日。 <br>2019年10月13日,庆祝人民空军成立70周年航空开放活动资讯发布上,空军资讯发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”<h2><a id="chapter3" >服役动态</a></h2> 2017年3月9日,中央电视台报告歼-20战斗机正式进入空军序列。<br>2017年3月13日,《中国日报》发布信息叫作,中国自主研制的歼-20近期将装配国产发动机。<br> 2017年7月30日,歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来,3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>2017年9月28日,在中国国防部行记者会上,国防部资讯发言人吴谦大校介绍歼-20飞机已然列装部队。<br> 2017年11月10日上午,中国空军发言人申进科大校暗示,歼-20 列装部队后,已然开展编队训练。<br> 2018年2月9日,中国空军资讯发言人申进科大校发布信息,歼-20起始列装空军作战部队。<br>2018年10月30日,中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br> 2019年10月1日,歼-20现身庆祝中华人民共和国成立70周年阅兵式;阅兵中,歼-20与歼-16、歼-10C三型飞机分别以5机楔队构成战斗队形接受检阅;该三款歼击机被誉为中国空军歼击机家族的“三剑客”,是将来联合作战的骨干力量 <h2><a id="chapter4" >总体评估</a></h2>歼-20是眼下亚洲区域最先进的战机,这让中国空军在面对日本、韩国与印度等国家的空军时占有明显优良。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机因为研制进度几度推迟,尚未正式交付入役;美国F-35战斗机多次显现飞机供氧不足的问题,大面积停飞,出口受阻;韩国KF-X隐形战机先是被爆出因把握不了关键技术而被迫降成四代半战机的状况,后又传出了合作方印尼打算撤资并已通知韩国的信息因此呢,中国歼-20战机作为亚太区域领跑的优良战机。<br>中国空军正向全疆域作战的现代化战略性军种迈进,作为有效塑造态势、管控危险、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队,将进一步提高空军综合作战能力,有助于空军更好的肩负起守护国家主权、安全和领土完整的神圣使命。<br>歼20是我国自主研制的第五代战斗机,它的研制实现了既定的四大目的——打造跨代新机、引领技术发展、创新开发体系、建设卓越团队。打造跨代新机,是根据性能、技术和进度需求,研制研发我国自己的新一代隐身战斗机。引领技术发展,指经过自主创新实现强军兴军的目的。歼20在态势感知、信息对抗、协同作战等多方面取得了突破,这是中国航空工业从跟跑到并跑,再到领跑的必由之路。创新开发体系,指的是建设最先进的飞机研制要求和研制流程。经过一大批大国重器的研制,咱们创立拥有我国特殊的数字化开发体系。建设卓越团队,指的是经过型号研制,锤炼一支爱党爱国的研制队伍,这些持有报国情怀、创新精神的优秀青年是航空事业将来发展的生力军。将来咱们将在战斗机的机械化、信息化、智能化发展征程上持续前行。</p> <img border="0" src="img/image1.jpg" 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.照片区域链接

大众结合代码和技术解析,先自动分析一下每段代码的功效,以及它们之间的前后关系。这一步练习对培养代码阅读能力特别有好处,期盼大众能够自动阅读分析。

下一次,我会逐步演示“页面制作技术解析”中的五个过程以及有些重视事项。

运用碎片时间,学习完整知识!关注大鱼师兄,一块精研技艺。

目录

HTML序章(学习目的、对象、基本概念)——零基本自学网页制作

HTML是什么?——零基本自学网页制作

一个HTML页面怎样写?——零基本自学网页制作

HTML页面中head标签有啥用?——零基本自学网页制作

初识meta标签与SEO——零基本自学网页制作

HTML中的元素运用办法1——零基本自学网页制作

HTML中的元素运用办法2——零基本自学网页制作

HTML元素中的属性1——零基本自学网页制作

HTML元素中的属性2(路径详解)——零基本自学网页制作

运用HTML添加表格1(基本元素)——零基本自学网页制作

运用HTML添加表格2(表格头部与脚部)——零基本自学网页制作

运用HTML添加表格3(间距与颜色)——零基本自学网页制作

运用HTML添加表格4(行颜色与表格嵌套)——零基本自学网页制作

16进制颜色暗示与RGB色彩模型——零基本自学网页制作

HTML中的块级元素与内联元素——零基本自学网页制作

初识HTML中的<div>块元素——零基本自学网页制作

在HTML页面中嵌入其他页面的办法——零基本自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基本自学网页制作

HTML表单元素初识1——零基本自学网页制作

HTML表单元素初识2——零基本自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基本自学网页制作

HTML表单4(form的action、method属性)——零基本自学网页制作

HTML列表制作讲解——零基本自学网页制作

为HTML页面添加视频、音频的办法——零基本自学网页制作

音视频格式转换神器与html视频元素加字幕——零基本自学网页制作

HTML中运用<a>标签实现文本内链接——零基本自学网页制作

HTML中的照片区域链接办法详解——零基本自学网页制作

HTML照片区域链接重视事项与Gimp基本用法——零基本自学网页制作

用HTML制作一个简单页面(详解)——零基本自学网页制作(完结篇





上一篇:一个简单的 HTML 网页设计代码
下一篇:HTML+CSS+JS网页设计与制作摄影类个人网页
回复

使用道具 举报

3

主题

508

回帖

15

积分

新手上路

Rank: 1

积分
15
发表于 2024-8-26 05:00:33 | 显示全部楼层
你的话语如春风拂面,让我感到无比温暖。
回复

使用道具 举报

3094

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098754
发表于 2024-9-29 12:21:29 | 显示全部楼层
期待与你深入交流,共探知识的无穷魅力。
回复

使用道具 举报

3094

主题

3万

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99098754
发表于 2024-9-30 17:40:19 | 显示全部楼层
谷歌外链发布 http://www.fok120.com/
回复

使用道具 举报

2991

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569152
 楼主| 发表于 2024-10-4 06:41:25 | 显示全部楼层
楼主继续加油啊!外链论坛加油!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-24 19:51 , Processed in 0.115870 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.