一、??作品介紹
HTML實(shí)例網(wǎng)頁(yè)代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過(guò)從頭開(kāi)始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過(guò)程來(lái)實(shí)踐設(shè)計(jì)。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239840
(title-B43JP-櫻木花道籃球(3頁(yè)面))]
?? 截圖演示
三、?? 作品代碼
??HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/index.css">
<title>櫻木花道</title>
</head>
<body>
<!-- header -->
<header class="w1200">
<img src="images/banner.jpg" alt="">
</header>
<!-- nav -->
<nav class="w1200">
<ul>
<li><a href="index.html">首頁(yè)</a></li>
<li><a href="about.html">角色經(jīng)歷</a></li>
<li><a href="dossier.html">人物檔案</a></li>
</ul>
</nav>
<!-- 主體部分 -->
<section class="main">
<div class="main-intro">
<img src="images/index_1.jpg" alt="">
<h2>櫻木花道 （日本漫畫《灌籃高手》中的主人公）</h2>
<p>櫻木花道（さくらぎはなみち；Hanamichi Sakuragi），漫畫作品《灌籃高手》的主人公。神奈川縣湘北高中高一學(xué)生，湘北籃球隊(duì)的主力隊(duì)員之一，司職大前鋒。</p>
<p>櫻木是一個(gè)頭腦簡(jiǎn)單卻又不失可愛(ài)的問(wèn)題人物，他的個(gè)性既豪爽又單純，某些時(shí)候純情的他好似一個(gè)長(zhǎng)不大的孩子，有時(shí)又變得自大得目中無(wú)人，敢于斷言自己就是天才，自信心十足。 </p>
<p>他是井上雄彥筆下最成功的人物之一。</p>
<a href="#">查看更多</a>
<video src="video/櫻木花道.mp4" controls="controls" poster="images/index_2.jpg"></video>
</div>
<div class="main-part">
<h3>人物關(guān)系</h3>
<ul>
<li>
<img src="images/part_1.jpg" alt="">
<h4> 喜歡的人 赤木晴子</h4>
<p>赤木晴子(あかぎ はるこ)是日本動(dòng)漫《灌籃高手》中的女性角色，湘北高中高一年級(jí)學(xué)生，?；@球隊(duì)長(zhǎng)赤木剛憲的妹妹。 晴子初次登場(chǎng)被男主人公櫻木花道暗戀，發(fā)現(xiàn)櫻木異于常人的身體素質(zhì)后便引薦進(jìn)入湘北籃球隊(duì)。是櫻木打好籃球的重要?jiǎng)恿Γ祽俚娜耸橇鞔?。最終和正在養(yǎng)傷的櫻木建立了每周一通信的關(guān)系。 赤木晴子善良可愛(ài)，單純又不失頭腦，是《灌籃高手》中令人眼前一亮的角色。
</p>
</li>
<li>
<img src="images/part_2.jpg" alt="">
<h4> 隊(duì)友&死對(duì)頭 流川楓</h4>
<p>日本動(dòng)漫《灌籃高手》中的第二男主角。湘北高中籃球隊(duì)的王牌球員，司職小前鋒，神奈川縣五大最佳球員之一、全日本青少年隊(duì)成員。
</p>
<p>曾是富丘中學(xué)的籃球隊(duì)隊(duì)長(zhǎng)，因技術(shù)全面華麗而在縣內(nèi)已小有名氣。在升入湘北高中后，正式成為了湘北的王牌球員，幫助湘北打進(jìn)全國(guó)大賽。在全國(guó)大賽擊敗衛(wèi)冕冠軍山王工業(yè)的比賽中發(fā)揮著重要作用，后因球隊(duì)元?dú)獯髶p而被愛(ài)和學(xué)院淘汰。</p>
<p>大賽結(jié)束后，流川楓加入日本青少年隊(duì)。</p>
</li>
<li>
<img src="images/part_3.jpg" alt="">
<h4> 假想敵 森重寬</h4>
<p>森重寬，日本動(dòng)漫《灌籃高手》中的角色，名朋工業(yè)高中籃球隊(duì)的王牌球員，司職中鋒。
</p>
<p>名朋工業(yè)高校高一年級(jí)的學(xué)生，其球風(fēng)一般被讀者認(rèn)為是以沙奎爾·奧尼爾為原型創(chuàng)作，但作者并沒(méi)有說(shuō)明他的人物原型。他擁有遠(yuǎn)超高中生的身材與力量，同時(shí)還有驚人的運(yùn)動(dòng)能力?？梢栽诠嗷@時(shí)一下子撞翻兩三個(gè)人。喜歡在灌籃后吊在籃筐上居高臨下看那些被他撞倒在地的對(duì)手，但也經(jīng)常因此被判技術(shù)犯規(guī)，他的教練也對(duì)此感到很頭疼。</p>
<p>森重寬是原作者著重筆墨描寫的配角之一。</p>
</li>
</ul>
</div>
</section>
<!-- footer -->
<footer>
Copyright 2020/5/15 阿甘定制
</footer>
</body>
</html>
??CSS代碼
/* 主體部分 */
/* 整體介紹模塊 */
.main-intro {
height: 500px;
}
.main-intro h2 {
margin: 0 10px 0 0;
font-size: 34px;
}
.main-intro p {
margin: 15px auto;
line-height: 24px;
}
.main-intro img {
float: right;
width: 268px;
height: 432px;
padding: 30px 0;
margin-left: 50px;
border: 1px solid #eeeeee;
}
.main-intro video {
width: 800px;
height: 206px;
}
.main-intro a {
display: inline-block;
margin-bottom: 10px;
padding: 6px 20px;
background-color: #df372c;
border-radius: 6px;
}
/* 人物關(guān)系部分 */
.main-part {
overflow: hidden;
}
.main-part li {
height: 120px;
margin-bottom: 60px;
border-top: 1px solid #eeeeee;
}
.main-part img {
float: left;
width: 150px;
height: 150px;
margin-right: 36px;
margin-top: 15px;
border-radius: 75px;
border: 1px solid #eeeeee;
}
.main-part h4 {
margin-top: 15px;
margin-bottom: 10px;
color: #df372c;
}
四、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉(cāng)庫(kù)（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計(jì)算機(jī)基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識(shí)（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉(cāng)庫(kù)地址（來(lái)個(gè)Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
