一饲常、??作品介紹
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/239840
(title-B43JP-櫻木花道籃球(3頁面))]
?? 截圖演示
三、?? 作品代碼
??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">首頁</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é)生衅檀，湘北籃球隊的主力隊員之一招刨，司職大前鋒。</p>
<p>櫻木是一個頭腦簡單卻又不失可愛的問題人物哀军，他的個性既豪爽又單純计济，某些時候純情的他好似一個長不大的孩子，有時又變得自大得目中無人排苍，敢于斷言自己就是天才沦寂，自信心十足。 </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>赤木晴子(あかぎ はるこ)是日本動漫《灌籃高手》中的女性角色传藏，湘北高中高一年級學(xué)生，型兀籃球隊長赤木剛憲的妹妹毯侦。 晴子初次登場被男主人公櫻木花道暗戀，發(fā)現(xiàn)櫻木異于常人的身體素質(zhì)后便引薦進(jìn)入湘北籃球隊具垫。是櫻木打好籃球的重要動力侈离，暗戀的人是流川楓。最終和正在養(yǎng)傷的櫻木建立了每周一通信的關(guān)系筝蚕。 赤木晴子善良可愛卦碾，單純又不失頭腦铺坞，是《灌籃高手》中令人眼前一亮的角色。
</p>
</li>
<li>
<img src="images/part_2.jpg" alt="">
<h4> 隊友&死對頭 流川楓</h4>
<p>日本動漫《灌籃高手》中的第二男主角洲胖。湘北高中籃球隊的王牌球員济榨，司職小前鋒，神奈川縣五大最佳球員之一绿映、全日本青少年隊成員擒滑。
</p>
<p>曾是富丘中學(xué)的籃球隊隊長，因技術(shù)全面華麗而在縣內(nèi)已小有名氣叉弦。在升入湘北高中后丐一，正式成為了湘北的王牌球員，幫助湘北打進(jìn)全國大賽淹冰。在全國大賽擊敗衛(wèi)冕冠軍山王工業(yè)的比賽中發(fā)揮著重要作用钝诚，后因球隊元氣大損而被愛和學(xué)院淘汰。</p>
<p>大賽結(jié)束后榄棵，流川楓加入日本青少年隊。</p>
</li>
<li>
<img src="images/part_3.jpg" alt="">
<h4> 假想敵 森重寬</h4>
<p>森重寬潘拱，日本動漫《灌籃高手》中的角色疹鳄，名朋工業(yè)高中籃球隊的王牌球員，司職中鋒芦岂。
</p>
<p>名朋工業(yè)高校高一年級的學(xué)生瘪弓，其球風(fēng)一般被讀者認(rèn)為是以沙奎爾·奧尼爾為原型創(chuàng)作，但作者并沒有說明他的人物原型禽最。他擁有遠(yuǎn)超高中生的身材與力量腺怯，同時還有驚人的運動能力〈ㄎ蓿可以在灌籃時一下子撞翻兩三個人呛占。喜歡在灌籃后吊在籃筐上居高臨下看那些被他撞倒在地的對手，但也經(jīng)常因此被判技術(shù)犯規(guī)懦趋，他的教練也對此感到很頭疼晾虑。</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 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)帜篇、計算機基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
