精美html個人主頁

有半年之久沒有更新新作品了，但這個小小領(lǐng)地我并沒有忘記，我會堅(jiān)持下去，一直在這等你，等你的每次回眸，感恩你的每次駐足，這已經(jīng)足夠成為我堅(jiān)守的動力和理由，盡管現(xiàn)在有很多不足和不盡人意，也沒很多的時間管理，我會盡量讓它保持足夠的新鮮感，每次的作品都投入足夠的用心，否則寧愿選擇缺省，當(dāng)某些東西成為寄托之后，就不能容許隨意的成分。

謝謝大家的支持，我會盡力做好每一頁的代碼，今天和大家分享的主題是《周末の玉玲》，誰的青春沒有一個故事，僅以此篇祭祀那些逝去的青春，珍惜當(dāng)下，畢業(yè)不是終點(diǎn)，不要再錯過。

該主題包含一張index.html，后面預(yù)留了3頁，留給你們自己設(shè)計(jì)，因?yàn)槊總€人的青春都不一樣，html5+css3設(shè)計(jì)，支持手機(jī)端。

導(dǎo)語

青澀的時光，情竇初開，那是學(xué)生時代，一個男孩心系一個女孩，每到課間休息都會在走廊上等你經(jīng)過，只為看你一眼，你的一顰一笑，都印記在心里，至今無法抹去，如今的生活常常在夢中遇見你，如若歲月可以回去那一年，我能否向你表明心聲和堅(jiān)持的決心，而不是讓懊悔和思念成為了不可逆轉(zhuǎn)的結(jié)局。

主題

《周末の玉玲》

圖摘

文件目錄結(jié)構(gòu)

們在網(wǎng)頁制作中，會有許多的術(shù)語

例如：CSS、HTML、DHTML、XHTML等等。

下面開始使用DIV+CSS進(jìn)行網(wǎng)頁布局設(shè)計(jì)。

所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來。

下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，圖片大致分為以下幾個部分：

　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；

　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；

　　3、底部，包括一些版權(quán)信息。

有了以上的分析，我們就可以很容易的布局了，例如以下設(shè)計(jì)層下圖:

根據(jù)上圖，畫一個實(shí)際的頁面布局圖，說明一下層的嵌套關(guān)系，這樣理解起來就會更簡單了。

　　DIV結(jié)構(gòu)如下：　

　│body {}　/*這是一個HTML元素*/

　　└#Container {}　/*頁面層容器*/　

　　　　├#Header {}　/*頁面頭部*/

　　　　├#PageBody {}　/*頁面主體*/　

　　　　│　├#Sidebar {}　/*側(cè)邊欄*/　

　　　　│　└#MainBody {}　/*主體內(nèi)容*/　

　　　　└#Footer {}　/*頁面底部*/

至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫HTML代碼和CSS。

面效果展示

頁面完整代碼

<!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">試飛進(jìn)程</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" >試飛進(jìn)程</a></h2>
殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時50分左右進(jìn)行首次升空飛行測試，13時08分成功著陸，歷時18分鐘。<br>
整個首飛過程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
2016年10月28日，首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國航展”后，還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開展海上方向?qū)崙?zhàn)化訓(xùn)練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開飛行，不僅在現(xiàn)場引起轟動，也立刻被西方媒體大量報道。殲-20是中國現(xiàn)代空中力量的代表作，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列，它是中國國防能力高速發(fā)展的一個象征。<br>
2018年11月11日，第十二屆中國航展在珠海迎來“高光時刻”：殲-20戰(zhàn)機(jī)在公開飛行展示中掛彈開倉，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開放活動新聞發(fā)布上，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
<h2><a id="chapter3" >服役動態(tài)</a></h2>
2017年3月9日，中央電視臺報道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>
2017年3月13日，《中國日報》發(fā)布消息稱，中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動機(jī)。<br>
2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過。<br>
2017年9月28日，在中國國防部行記者會上，國防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>
2017年11月10日上午，中國空軍發(fā)言人申進(jìn)科大校表示，殲-20 列裝部隊(duì)后，已經(jīng)開展編隊(duì)訓(xùn)練。<br>
2018年2月9日，中國空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開始列裝空軍作戰(zhàn)部隊(duì)。<br>
2018年10月30日，中國空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場上空。<br>
2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱；該三款殲擊機(jī)被譽(yù)為中國空軍殲擊機(jī)家族的“三劍客”，是未來聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評價</a></h2>
殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)，這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機(jī)進(jìn)行了對比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲，尚未正式交付入役；美國F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問題，大面積停飛，出口受阻；韓國KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此，中國殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢戰(zhàn)機(jī)。<br>
中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)，成為有效塑造態(tài)勢、管控危機(jī)、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負(fù)起維護(hù)國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰(zhàn)斗機(jī)，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī)，是按照性能、技術(shù)和進(jìn)度要求，研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展，指通過自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過一大批大國重器的研制，我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì)，是指通過型號研制，錘煉一支愛黨愛國的研制隊(duì)伍，這些擁有報國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來，我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(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.鼠標(biāo)滑過導(dǎo)航標(biāo)題或鏈接時改變背景色提示

3.隱藏滾動條方法

4.圖片區(qū)域鏈接

大家結(jié)合代碼和技術(shù)解析，先自行分析一下每段代碼的作用，以及它們之間的前后關(guān)系。這一步練習(xí)對培養(yǎng)代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會逐步演示“頁面制作技術(shù)解析”中的五個步驟以及一些注意事項(xiàng)。

使用碎片時間，學(xué)習(xí)完整知識！關(guān)注大魚師兄，一起精研技藝。

整合營銷服務(wù)商

精美html個人主頁

面效果展示

頁面完整代碼

頁面制作技術(shù)解析

目錄

您的項(xiàng)目需求