Web大學(xué)生網(wǎng)頁作業(yè)成品——籃球網(wǎng)站設(shè)計與實現(xiàn)(HTML+CSS)

一饲常、??作品介紹

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ù)文章 + 資源分享)

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末诫咱,一起剝皮案震驚了整個濱河市笙隙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌坎缭,老刑警劉巖竟痰,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件签钩,死亡現(xiàn)場離奇詭異,居然都是意外死亡凯亮,警方通過查閱死者的電腦和手機边臼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來假消,“玉大人柠并,你說我怎么就攤上這事「晦郑” “怎么了臼予?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長啃沪。 經(jīng)常有香客問我粘拾,道長,這世上最難降的妖魔是什么创千? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任缰雇,我火速辦了婚禮,結(jié)果婚禮上追驴,老公的妹妹穿的比我還像新娘械哟。我一直安慰自己,他們只是感情好殿雪,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布暇咆。 她就那樣靜靜地躺著,像睡著了一般丙曙。 火紅的嫁衣襯著肌膚如雪爸业。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天亏镰,我揣著相機與錄音扯旷,去河邊找鬼。 笑死索抓,一個胖子當(dāng)著我的面吹牛薄霜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纸兔,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼惰瓜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了汉矿?” 一聲冷哼從身側(cè)響起崎坊,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎洲拇,沒想到半個月后奈揍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體曲尸,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年男翰,在試婚紗的時候發(fā)現(xiàn)自己被綠了另患。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡蛾绎,死狀恐怖昆箕,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情租冠,我是刑警寧澤鹏倘,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站顽爹,受9級特大地震影響纤泵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜镜粤,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一捏题、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肉渴,春花似錦公荧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庸诱。三九已至捻浦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桥爽,已是汗流浹背朱灿。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钠四,地道東北人盗扒。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像缀去,于是被迫代替她去往敵國和親侣灶。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

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