用HTML制作一個簡單頁面(代碼閱讀練習(xí))——零基礎(chǔ)自學(xué)網(wǎng)頁制作
頁面效果展示
頁面完整代碼
<!DOCTYPE HTML><html><head> <title>文內(nèi)鏈接</title><style>a:hover{background-color:yellow;}</style></head> <body ><div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度--><div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端--><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">服役動態(tài)</a><a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a></div><!--使導(dǎo)航菜單懸停在頂端(結(jié)尾)--><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隱形戰(zhàn)斗機首架技術(shù)驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試,13時08分成功著陸,歷時18分鐘。<br>整個首飛過程在殲-10S戰(zhàn)斗教練機陪伴下完成 。2016年10月28日,首次發(fā)布“空軍試飛員將駕殲-20飛機亮相中國航展”后,還陸續(xù)發(fā)布了“殲-20戰(zhàn)機列裝空軍作戰(zhàn)部隊”“空軍殲-20戰(zhàn)機首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。<h2><a id="chapter2">研制情況</a></h2>在2016年11月1日,第十一屆珠海航展,殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行,不僅在現(xiàn)場引起轟動,也立刻被西方媒體大量報道。殲-20是中國現(xiàn)代空中力量的代表作,也進入了世界最先進的第五代戰(zhàn)斗機行列,它是中國國防能力高速發(fā)展的一個象征。<br>2018年11月11日,第十二屆中國航展在珠海迎來“高光時刻”:殲-20戰(zhàn)機在公開飛行展示中掛彈開倉,震撼獻禮人民空軍成立69周年紀念日。 <br>2019年10月13日,慶祝人民空軍成立70周年航空開放活動新聞發(fā)布上,空軍新聞發(fā)言人申進科大校介紹殲-20戰(zhàn)機列陣人民空軍“王牌部隊”<h2><a id="chapter3" >服役動態(tài)</a></h2>2017年3月9日,中央電視臺報道殲-20戰(zhàn)斗機正式進入空軍序列。<br>2017年3月13日,《中國日報》發(fā)布消息稱,中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動機。<br>2017年7月30日,殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來,3架殲-20隱形戰(zhàn)斗機以楔形編隊的形式在天空中飛過。<br>2017年9月28日,在中國國防部行記者會上,國防部新聞發(fā)言人吳謙大校介紹殲-20飛機已經(jīng)列裝部隊。<br>2017年11月10日上午,中國空軍發(fā)言人申進科大校表示,殲-20 列裝部隊后,已經(jīng)開展編隊訓(xùn)練。<br>2018年2月9日,中國空軍新聞發(fā)言人申進科大校發(fā)布消息,殲-20開始列裝空軍作戰(zhàn)部隊。<br>2018年10月30日,中國空軍4架殲-20隱形戰(zhàn)斗機現(xiàn)身珠海金灣機場上空。<br>2019年10月1日,殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰(zhàn)斗隊形接受檢閱;該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”,是未來聯(lián)合作戰(zhàn)的骨干力量<h2><a id="chapter4" >總體評價</a></h2>殲-20是眼下亞洲區(qū)域最先進的戰(zhàn)機,這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機進行了對比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機由于研制進度幾度推遲,尚未正式交付入役;美國F-35戰(zhàn)斗機也多次出現(xiàn)飛機供氧不足的問題,大面積停飛,出口受阻;韓國KF-X隱形戰(zhàn)機先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機的情況,后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此,中國殲-20戰(zhàn)機成為亞太區(qū)域領(lǐng)跑的優(yōu)勢戰(zhàn)機。<br>中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進,成為有效塑造態(tài)勢、管控危機、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-20戰(zhàn)機列裝空軍作戰(zhàn)部隊,將進一步提升空軍綜合作戰(zhàn)能力,有助于空軍更好的肩負起維護國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>殲20是我國自主研制的第五代戰(zhàn)斗機,它的研制實現(xiàn)了既定的四大目標——打造跨代新機、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團隊。打造跨代新機,是按照性能、技術(shù)和進度要求,研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機。引領(lǐng)技術(shù)發(fā)展,指通過自主創(chuàng)新實現(xiàn)強軍興軍的目標。殲20在態(tài)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破,這是中國航空工業(yè)從跟跑到并跑,再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系,是指建設(shè)最先進的飛機研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團隊,是指通過型號研制,錘煉一支愛黨愛國的研制隊伍,這些擁有報國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來,我們將在戰(zhàn)斗機的機械化、信息化、智能化發(fā)展征程上不斷前行。</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(結(jié)尾)--></div><!--小div套大div隱藏滾動條(結(jié)尾)--></div><!--使頁面居中顯示,并展視窗50%寬度(結(jié)尾)--></body> </html>
頁面制作技術(shù)解析
1.頁面內(nèi)容居中顯示方法
2.導(dǎo)航欄懸停頂端方法
3.鼠標滑過導(dǎo)航標題或鏈接時改變背景色提示
3.隱藏滾動條方法
4.圖片區(qū)域鏈接
大家結(jié)合代碼和技術(shù)解析,先自行分析一下每段代碼的作用,以及它們之間的前后關(guān)系。這一步練習(xí)對培養(yǎng)代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。
下一次,我會逐步演示“頁面制作技術(shù)解析”中的五個步驟以及一些注意事項。
使用碎片時間,學(xué)習(xí)完整知識!關(guān)注大魚師兄,一起精研技藝。
目錄
HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的圖片區(qū)域鏈接方法詳解——零基礎(chǔ)自學(xué)網(wǎng)頁制作