學(xué)生網(wǎng)頁設(shè)計實踐作業(yè) 簡單足球靜態(tài)HTML網(wǎng)頁作品 足球網(wǎng)頁作業(yè)成品 學(xué)生體育運動足球網(wǎng)站模板

一、??作品介紹

HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)笋粟。該實例里面有設(shè)置了css的樣式設(shè)置怀挠,有div的樣式格局析蝴,這個實例比較全面,有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計绿淋。


二嫌变、??作品效果

??視頻演示

https://live.csdn.net/v/embed/240067

(title-K11SJ-足球明星C羅三級表單(8頁))]

?? 截圖演示

07.png
06.png
05.png
04.png
03.png
02.png
01.png


三、?? 作品代碼

??HTML代碼


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>球星C羅</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-----頭部開始------->
<div class="top">
<a href="index.html"><img style="float:left" src="images/logo.jpg" /></a> 
</div>
<!---nav開始---->
<div class="daohang">
<div id="nav">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="about.html">C羅簡介</a></li>
<li><a href="jingdian.html">C羅相冊</a></li>
<li><a href="minsu.html">職業(yè)生涯</a></li>
<li><a href="techan.html">C羅新聞</a></li>
<li><a href="liuyan.html">貴賓留言</a></li>
</ul>
</div>
</div>
<!---nav結(jié)束---->
<!-----banner------->
<div class="ban">
     <img src="images/banner3.jpg" width="1000" height="335" border="0"  />
                  

</div>

<!-----頭部結(jié)束------->
<!-----main開始------->
<div class="main">
<div class="box1">
<div class="shang-left">
<div class="gk-title"><a href="about.html"><h1>C羅簡介</h1></a></div>
<div class="gk">
<img src="images/gktu.jpg" />
<p>&nbsp;&nbsp;克里斯蒂亞諾·羅納爾多躬它,簡稱C羅,1985年2月5日出生于葡萄牙馬德拉島豐沙爾东涡,職業(yè)足球運動員冯吓,司職邊鋒可兼任中鋒。現(xiàn)效力于意甲尤文圖斯足球俱樂部疮跑,并身兼葡萄牙國家隊隊長组贺。C羅帶球速度極快,善于突破和射門祖娘,擁有強悍的身體素質(zhì)失尖,技術(shù)非常全面。2019年1月4日渐苏,獲得環(huán)球足球獎最佳球員獎項掀潮;6月9日,隨隊1-0戰(zhàn)勝荷蘭獲得首屆歐國聯(lián)冠軍琼富,并獲得決賽階段金靴仪吧。</p>
</div>
</div>
<div class="xz">
<a href="techan.html"><h1>C羅新聞<span><i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>></i></span></h1></a>
<a href="tc01.html"><img src="images/tc01.jpg" /></a>
<a href="tc02.html"><img src="images/tc02.jpg" /></a>
<a href="#"><img src="images/tc03.jpg" /></a>
<a href="#"><img src="images/tc04.jpg" /></a>
</div>
<div class="shang-right">
<div class="count-title"><a href="minsu.html"><h1>職業(yè)生涯</h1></a></div>
<div class="count">
<br />

<p>&nbsp;&nbsp;C羅出身于葡萄牙著名球隊里斯本競技。2003-04年賽季曼聯(lián)官方宣布以1鞠眉,224萬英鎊轉(zhuǎn)會費買入C羅薯鼠,取代轉(zhuǎn)會皇家馬德里的貝克漢姆成為"7"號球衣的新主人。</p>

<p>&nbsp;&nbsp;加入曼聯(lián)后械蹋,C羅主要擔(dān)任右翼的角色出皇,但也不時參與左路的進攻。他用華麗的腳法及優(yōu)秀盤帶能力哗戈,使球迷對他眼前一亮郊艘。</p>

<p>&nbsp;&nbsp;2009年6月26日,皇家馬德里官方確認克里斯蒂亞諾·羅納爾多將于7月1日以8谱醇,000萬英鎊轉(zhuǎn)會費加盟皇馬暇仲,年薪高達1,200萬歐元副渴。</p>
<p>&nbsp;&nbsp;2018年8月19日奈附,在尤文圖斯迎戰(zhàn)切沃的比賽中,C羅上演意甲首秀.</p>
</div>
</div>
</div>

<div class="meishi">
<div class="yy-title"><a href="jingdian.html"><h1>C羅風(fēng)采</h1></a></div>
<div class="ms">
<ul>
    <li><img src="images/jd1.jpg" /><p>圖一</p></li>
            <li><img src="images/jd2.jpg" /><p>圖二</p></li>
            <li><img src="images/jd3.jpg" /><p>圖三</p></li>
            <li><img src="images/jd4.jpg" /><p>圖四</p></li>
            <li><img src="images/jd5.jpg" /><p>圖五</p></li>
   

</ul>
</div>
</div>
<!-----main結(jié)束------->
<!-----bottom開始------->
<div class="bottom">
<p>2020-2021@ 版權(quán)所有 球星C羅 </p>
</div>
<!-----bottom結(jié)束------->
</body>
</html>




??CSS代碼



body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "宋體",arial;
    line-height: 22px;
}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

li {
    list-style: none;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}



.ms ul li img {
    width: 185px;
    height: 150px;
}

.ms ul li p {
    text-align: center;
    font-size: 14px;
}

.bottom {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
}

.bottom p {
    width: 100%;
    height: 30px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.righttitle {
    width: 935px;
    background: url(../images/er_02.png) no-repeat;
    height: 68px;
    line-height: 68px;
    padding-left: 65px;
    color: #3e8100;
    font-size: 18px;
    font-weight: bold;
}

.righttitle span {
    font-size: 14px;
    color: #a5a5a5;
    font-family: "arial";
    font-weight: normal;
}

.neirong {
    padding: 0px 15px 15px 15px;
}

.neirong img {
    margin: 0 auto;
    display: block;
}

.ncontu {
    padding-bottom: 0px;
    line-height: 22px;
    padding-left: 7px;
    width: 100%;
    padding-right: 0px;
    float: left;
    color: #464646;
}

.ncontu ul {
}

.ncontu ul li {
    width: 250px;
    display: block;
    float: left;
    height: 220px;
    overflow: hidden;
    margin-bottom: 15px;
}

.danye {
    color: #666;
    font-size: 14px;
    line-height: 25px;
}

.danye b {
    font-size: 18px;
    display: block;
    text-align: center;
}

.danye img {
    margin: 0 auto;
    display: block;
}

.news {
    width: 100%;
}

.news ul li {
    line-height: 30px;
    height: 30px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    color: #3d2915;
}

.news ul li a {
    float: left;
    display: block;
    line-height: 30px;
    height: 30px;
    background: url(../images/lvdian.jpg) left center no-repeat;
    color: #3d2915;
    padding-left: 20px;
}

.news ul li a:hover {
    color: #000;
}

.news ul li span {
    float: right;
    color: #666;
    line-height: 30px;
}

.biaoti {
    color: #3d2915;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    text-align: center;
    margin-bottom: 10px;
    _margin-bottom: 10px;
}

.inpt {
    border: 1px #bbb solid;
    width: 550px;
    height: 20px;
}

.tare {
    border: 1px #bbb solid;
    width: 550px;
    height: 200px;
}

.btn {
    width: 60px;
    height: 25px;
    border: 1px #bbb solid;
    background: #fff;
}





四煮剧、??更多源碼

【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫(持續(xù)更新中...)

??【web學(xué)習(xí)指南】從web基礎(chǔ)斥滤、計算機基礎(chǔ)到前端常用框架的教程将鸵,涵蓋前端大部分必備知識(學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享)

Gitee倉庫地址(來個Star吧~): https://gitee.com/zhanyuqiu2022/my-app

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市佑颇,隨后出現(xiàn)的幾起案子顶掉,更是在濱河造成了極大的恐慌,老刑警劉巖挑胸,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件痒筒,死亡現(xiàn)場離奇詭異,居然都是意外死亡茬贵,警方通過查閱死者的電腦和手機簿透,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來解藻,“玉大人老充,你說我怎么就攤上這事∶螅” “怎么了啡浊?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長胶背。 經(jīng)常有香客問我巷嚣,道長,這世上最難降的妖魔是什么钳吟? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任涂籽,我火速辦了婚禮,結(jié)果婚禮上砸抛,老公的妹妹穿的比我還像新娘评雌。我一直安慰自己,他們只是感情好直焙,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布景东。 她就那樣靜靜地躺著,像睡著了一般奔誓。 火紅的嫁衣襯著肌膚如雪斤吐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天厨喂,我揣著相機與錄音和措,去河邊找鬼。 笑死蜕煌,一個胖子當著我的面吹牛派阱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播斜纪,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼贫母,長吁一口氣:“原來是場噩夢啊……” “哼文兑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起腺劣,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤绿贞,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后橘原,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體籍铁,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年趾断,在試婚紗的時候發(fā)現(xiàn)自己被綠了寨辩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡歼冰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出耻警,到底是詐尸還是另有隱情隔嫡,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布甘穿,位于F島的核電站腮恩,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏温兼。R本人自食惡果不足惜秸滴,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望募判。 院中可真熱鬧荡含,春花似錦、人聲如沸届垫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽装处。三九已至误债,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間妄迁,已是汗流浹背寝蹈。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留登淘,地道東北人箫老。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像黔州,于是被迫代替她去往敵國和親槽惫。 傳聞我的和親對象是個殘疾皇子周叮,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容