一、?????網(wǎng)站題目
??校園籃球網(wǎng)頁設(shè)計(jì)、?足球體育運(yùn)動(dòng)、??體育游泳運(yùn)動(dòng)、??兵乓球 、??網(wǎng)球、等網(wǎng)站的設(shè)計(jì)與制作。
二、??網(wǎng)站描述
??? 大學(xué)生校園運(yùn)動(dòng)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)作品，采用DIV CSS布局制作，內(nèi)容包括：校園運(yùn)動(dòng)、運(yùn)動(dòng)技巧、運(yùn)動(dòng)規(guī)則、技術(shù)規(guī)則、經(jīng)典動(dòng)作。頁面主體內(nèi)容區(qū)域?qū)挾葹?200PX。網(wǎng)頁整體使用CSS設(shè)置了網(wǎng)頁背景圖片。頁面精美包含多個(gè)排版布局，學(xué)生網(wǎng)頁作業(yè)水平制作。
?? 一套優(yōu)質(zhì)的??網(wǎng)頁設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
- 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。
- 所有頁面相互超鏈接，可到三級(jí)頁面，有5-10個(gè)頁面組成。
- 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯(cuò)亂，使用Div+Css技術(shù)。
- 菜單美觀、醒目，二級(jí)菜單可正常彈出與跳轉(zhuǎn)。
- 要有JS特效，如定時(shí)切換和手動(dòng)切換圖片輪播。
- 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。
三、??網(wǎng)站介紹
??網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁布局結(jié)構(gòu)。
??網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
??網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
??網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
??網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）??html文件包含：其中index.html是首頁、其他html為二級(jí)頁面；
（2）?? css文件包含：css全部頁面樣式,文字滾動(dòng), 圖片放大等；
（3）?? js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。
四、??網(wǎng)站演示
五、?? 網(wǎng)站代碼
??HTML結(jié)構(gòu)代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>足球世界杯</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="site_title"> <a href="#" target="_parent"> <img src="images/logo.png"/> </a> </div>
<div id="menu">
<ul>
<li><a href="index.html" class="current">網(wǎng)站首頁</a></li>
<li><a href="#">歷史沿革</a></li>
<li><a href="#">歷屆成績</a></li>
<li><a href="portfolio.html">足球相冊</a></li>
<li><a href="#">影響作用</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<!-- end of header -->
<div id="banner">
<div id="banner_left">
<h2>國際足聯(lián)世界杯</h2>
<p>世界杯（FIFA World Cup）通常指的是國際足聯(lián)世界杯（其他項(xiàng)目亦有世界杯，比如國際籃聯(lián)世界杯、國際排聯(lián)世界杯等），是世界上最高榮譽(yù)、最高規(guī)格、最高含金量、最高知名度的足球比賽，與奧運(yùn)會(huì)并稱為全球體育兩大最頂級(jí)賽事，甚至是轉(zhuǎn)播覆蓋率超過奧運(yùn)會(huì)的全球最大體育盛事。</p>
<p>世界杯是全球各個(gè)國家在足球領(lǐng)域最夢寐以求的神圣榮耀，哪一支國家足球隊(duì)能得到冠軍，就是名正言順的世界第一，整個(gè)世界都會(huì)為之瘋狂沸騰。世界杯上發(fā)揮出色的球員都會(huì)被該國家奉為民族英雄永載史冊，所以它亦代表了各個(gè)足球運(yùn)動(dòng)員的終極夢想。</p>
<p>世界杯每四年舉辦一次，任何國際足聯(lián)會(huì)員國（地區(qū)）都可以派出代表隊(duì)報(bào)名參加這項(xiàng)賽事。</p>
<p></p>
</div>
<div id="banner_right"> <span></span> <img src="images/dm.jpg" width="520" /> </div>
<!-- end of slider -->
</div>
<!-- end of banner -->
<div id="content">
<div class="section_w900">
<div class="section_w580 float_l">
<h2>歷史沿革</h2>
<img src="images/a1.png" class="float_l_img" width="200" />
<p>1956年，國際足聯(lián)盧森堡會(huì)議上，把錦標(biāo)賽的名稱改為“雷米特杯賽”，以表彰前國際足聯(lián)主席，法國人雷米特為足球事業(yè)所作出的巨大貢獻(xiàn)。后來，有人建議把兩個(gè)名字連在一起，稱為“世界足球錦標(biāo)賽——雷米特杯”；最后在赫爾辛基的代表會(huì)議上，最終更名為“世界足球冠軍杯——雷米特杯”，簡稱“世界杯”。每四年舉辦一屆。</p>
<p>巴西國家男子足球隊(duì)目前是奪得該項(xiàng)榮譽(yù)最多的球隊(duì)，共獲得5次世界杯冠軍，并且在3奪世界杯后永久地保留了前任世界杯雷米特金杯，現(xiàn)在的世界杯是大力神杯。德國在1974年首次捧杯并沿用至今，都統(tǒng)稱為世界杯。</p>
<div class=" cleaner"></div>
<h2>影響作用</h2>
<img src="images/a2.png" class="float_l_img" width="200" />
<p>在一些國家，例如中國，雖然國家隊(duì)屢次無法進(jìn)入世界杯，但世界杯仍舊帶來客觀的經(jīng)濟(jì)影響。2010年南非世界杯開始前，如往常一樣，中國國家廣電總局規(guī)定只有中國中央電視臺(tái)有獨(dú)家的轉(zhuǎn)播購買權(quán)利，有傳媒報(bào)道中央電臺(tái)僅在廣告費(fèi)方面的收入就超過20億元人民幣可謂賺的盆滿缽滿，而中國的一些啤酒企業(yè)，甚至股票市場都會(huì)因?yàn)槭澜绫呐e行產(chǎn)生波動(dòng)。</p>
<p>世界杯賽影響力亦體現(xiàn)在多國的政治領(lǐng)域，通常奪冠球隊(duì)與表現(xiàn)出色的球員都會(huì)被各國視為民族英雄，1998年法國隊(duì)在本土勇奪冠軍，法國總統(tǒng)希拉克甚至在頒獎(jiǎng)時(shí)讓隊(duì)長迪迪?！さ律斜硨ψ约赫驹陂L桌上高舉大力神杯，甚至于八年后的德國世界杯，東道主德國隊(duì)即使沒能奪取最后的冠軍，但德國總統(tǒng)科勒爾仍舊在總統(tǒng)府接見了季軍球隊(duì)。球隊(duì)英雄世界杯金靴獎(jiǎng)得主克洛澤被總統(tǒng)親自受勛。世界杯的比賽，包括德國總理默克爾，英國首相卡梅倫，意大利總統(tǒng)納波利塔諾，法國總統(tǒng)奧朗德，聯(lián)合國秘書長潘基文等多名政要以及英國女皇伊莉莎白二世，西班牙國王胡安·卡洛斯等各國皇室成員都會(huì)親臨賽場觀看比賽。</p>
<div class="cleaner"></div>
</div>
<!-- end of section_600 -->
<div class="section_w280 float_r">
<div class="testimonial">
<p><img src="images/a4.png" width="240" /> </p>
</div>
<div class="testimonial">
<p><img src="images/a3.png" width="240" /> </p>
</div>
</div>
<div class=" cleaner"></div>
<h2>足球相冊</h2>
<div class="zqxc_list">
<ul>
<li><a href="#"><img src="images/image_01.jpg"/></a></li>
<li><a href="#"><img src="images/image_02.jpg"/></a></li>
<li><a href="#"><img src="images/image_03.jpg"/></a></li>
<li><a href="#"><img src="images/image_04.jpg"/></a></li>
</ul>
</div>
<div class="cleaner"></div>
</div>
</div>
<div id="content_bottom"></div>
<!-- end of content -->
<div id="footer"> Copyright ? 足球世界杯 </div>
</div>
<!-- end of wrapper -->
</body>
</html>
??CSS樣式代碼
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #6f6f6f;
background: #2ac5c0 url(../images/body_top.jpg) repeat-x;
}
a:link,
a:visited {
color: #17aba6;
text-decoration: underline;
font-weight: bold;
}
a:active,
a:hover {
color: #CC9900;
text-decoration: none;
}
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
.cleaner {
clear: both;
width: 100%;
height: 0px;
font-size: 0px;
}
padding: 0;
display: block;
float: left;
width: 180px;
height: 196px;
margin: 0 13px 12px 0;
background: url(../images/portfolio_frame.jpg) no-repeat;
}
.showcase li a {
display: block;
margin: 20px;
text-decoration: none;
}
.showcase li a img {
margin-bottom: 5px;
}
.showcase li a span {
margin-top: 5px;
color: #5e5e5e;
font-weight: normal;
}
/* end of content */
/* footer */
#footer {
clear: both;
width: 1000px;
padding: 10px 12px;
margin: 0 auto;
color: #252525;
text-align: center;
}
#footer a {
font-weight: normal;
color: #252525;
text-decoration: underline;
}
/* end of footer */
.zqxc_list {
width: 900px;
height: auto;
margin: auto;
}
.zqxc_list ul {
margin-left: -40px;
}
.zqxc_list li {
width: 210px;
height: 150px;
float: left;
border: 2px solid #ccc;
margin: 5px;
list-style-type: none;
}
.zqxc_list li:hover {
border: 2px solid #cad51c;
}
.zqxc_list li img {
width: 210px;
height: 150px;
}
六、?? 如何讓學(xué)習(xí)不再盲目
很多剛?cè)腴T編程的小白學(xué)習(xí)了基礎(chǔ)語法，卻不知道語法的用途，不知道如何加深映像，不知道如何提升自己，這個(gè)時(shí)候每天刷自主刷一些題就非常重要（百煉成神），可以去?？途W(wǎng)上的編程初學(xué)者入門訓(xùn)練。該專題為編程入門級(jí)別，適合剛學(xué)完語法的小白練習(xí)，題目涉及編程基礎(chǔ)語法，基本結(jié)構(gòu)等，每道題帶有練習(xí)模式和考試模式，可還原考試模式進(jìn)行模擬，也可通過練習(xí)模式進(jìn)行練習(xí) 。
七、??更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “??點(diǎn)贊” “??評論” “??收藏” 一鍵三連哦！
2.??【????????????關(guān)注我| ??獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！文章來源：http://www.zghlxwxcb.cn/news/detail-743817.html
3.文章來源地址http://www.zghlxwxcb.cn/news/detail-743817.html
到了這里，關(guān)于如何使用HTML制作個(gè)人網(wǎng)站（ web期末大作業(yè)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
