大學(xué)生網(wǎng)頁作業(yè) 基于HTML實現(xiàn)電影主題網(wǎng)站作業(yè)(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/239806

(title-A38JP 電影網(wǎng)站7頁,不包含js 有登陸注冊加派,表格 table布局 叫确,有的登錄注冊頁面,內(nèi)嵌 css)]

?? 截圖演示

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


三芍锦、?? 作品代碼

??HTML代碼



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <table class="nav">
        <tr height="60px">
            <td width="400px">
                <h1><a href="">影視大全</a></h1>
            </td>
            <td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td>
                <a href="">首頁</a>
            </td>
            <td>
                <a href="list.html">影視列表</a>
            </td>
            <td>
                <a href="juq.html">影視劇評</a>
            </td>
            <td>
                <a href="dec.html">影視介紹</a>
            </td>
            <td>
                <a href="login.html">登錄</a>
            </td>
            <td>
                <a href="re.html">注冊</a>
            </td>
            <td>
                <a href="my.html">我的</a>
            </td>
        </tr>
    </table>
    <img width="100%" height="500" src="picture/0.jpg" alt="">
    <div class="ban list">
        <a href="#">電視劇</a>
        <a href="#">綜藝</a>
        <a href="#">電影</a>
        <a href="#">院線大片</a>
        <a href="#">自制電影</a>
        <a href="#">動漫</a>
        <a href="#">少兒</a>
        <a href="#">紀(jì)錄片</a>
        <a href="#">VIP會員</a>
        <a href="#">音樂</a>
        <a href="#">體育</a>
        <a href="#">愛看</a>
        <a href="#">娛樂</a>
        <a href="#">生活</a>
        <a href="#">新聞</a>
        <a href="#">教育</a>
        <a href="#">汽車</a>
        <a href="#">更多</a>
    </div>
    <div class="title">影視劇</div>
    <table>
        <tr height="450">
            <td width="240">
                <img width="224" src="picture/index.jpg" alt="">
                <h3>大明風(fēng)華 TV版</h3>
                <p>主演:湯唯/朱亞文</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index1.jpg" alt="">
                <h3>鶴唳華亭</h3>
                <p>主演:羅晉/李一桐</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index2.jpg" alt="">
                <h3>淑女飄飄拳</h3>
                <p>主演:畢雯珺/孫千</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index3.jpg" alt="">
                <h3>未經(jīng)安排的青春</h3>
                <p>主演:黃宥明/余昊洋</p>
            </td>
            <td width="230">
                <img width="224" src="picture/index4.jpg" alt="">
                <h3>戀愛先生</h3>
                <p>主演:靳東/江疏影</p>
            </td>
        </tr height="450">
        <tr height="450">
            <td width="240">
                <img width="224" src="picture/index5.jpg" alt="">
                <h3>將軍在上</h3>
                <p>主演:馬思純 / 盛一倫</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index6.jpg" alt="">
                <h3>微微一笑很傾城</h3>
                <p>主演:楊洋 / 鄭爽</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index7.jpg" alt="">
                <h3>三生三世十里桃花</h3>
                <p>主演:楊冪 / 趙又廷</p>
            </td>
            <td width="240">
                <img width="224" src="picture/index8.jpg" alt="">
                <h3>白夜追兇 第一季</h3>
                <p>主演:潘粵明 / 王瀧正</p>
            </td>
            <td width="230">
                <img width="224" src="picture/index9.jpg" alt="">
                <h3>知否知否應(yīng)是綠肥紅...</h3>
                <p>主演:趙麗穎 / 馮紹峰</p>
            </td>
        </tr>
    </table>
    <div class="more">查看更多</div>
    <div class="footer">
        <div class="ban">
            <a href="#">優(yōu)酷</a>|
            <a href="#">土豆</a>|
            <a href="#">UC瀏覽器</a>|
            <a href="#">UC頭條</a>|
            <a href="#">阿里文學(xué)</a>|
            <a href="#">蝦米</a>|
            <a href="#">阿里星球</a>|
            <a href="#">阿里影業(yè)</a>|
            <a href="#">游戲</a>|
            <a href="#">鯨觀</a>
        </div>
        <div>影視版權(quán)信息</div>
    </div>
</body>
</html>


??CSS代碼



    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 100%;
            text-align: center;
            background: #333;
        }
        a{
            text-decoration: none;
            color: #eee;
        }
        .title{
            width: 1200px;
            font-size: 24px;
            font-weight: bold;
            margin: 40px auto 30px;
        }
        table{
            width: 1200px;
            margin: auto;
        }
        h3,p{
            margin: 12px;
        }
        .more{
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 40px auto 60px;
        }
        .list a{
            display: inline-block;
            color: #000;
            padding: 16px;
        }
        .footer{
            background: #333;
            color: #eee;
            padding: 40px 0;
            text-align: center;
        }
        .ban{
            width: 1200px;
            margin: 20px auto;
        }
        .footer a{
            padding: 0 20px;
        }
    </style>




四竹勉、??更多源碼

【干貨分享】自學(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,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件女气,死亡現(xiàn)場離奇詭異杏慰,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門缘滥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轰胁,“玉大人,你說我怎么就攤上這事朝扼≡叻В” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵擎颖,是天一觀的道長榛斯。 經(jīng)常有香客問我,道長肠仪,這世上最難降的妖魔是什么肖抱? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮异旧,結(jié)果婚禮上意述,老公的妹妹穿的比我還像新娘。我一直安慰自己吮蛹,他們只是感情好荤崇,可當(dāng)我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著潮针,像睡著了一般术荤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上每篷,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天瓣戚,我揣著相機與錄音,去河邊找鬼焦读。 笑死子库,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的矗晃。 我是一名探鬼主播仑嗅,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼张症!你這毒婦竟也來了仓技?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤俗他,失蹤者是張志新(化名)和其女友劉穎脖捻,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體兆衅,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡地沮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年颜价,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诉濒。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖夕春,靈堂內(nèi)的尸體忽然破棺而出未荒,到底是詐尸還是另有隱情,我是刑警寧澤及志,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布片排,位于F島的核電站,受9級特大地震影響速侈,放射性物質(zhì)發(fā)生泄漏率寡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一倚搬、第九天 我趴在偏房一處隱蔽的房頂上張望冶共。 院中可真熱鬧,春花似錦每界、人聲如沸捅僵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽庙楚。三九已至,卻和暖如春趴樱,著一層夾襖步出監(jiān)牢的瞬間馒闷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工叁征, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留纳账,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓航揉,卻偏偏與公主長得像塞祈,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子帅涂,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,930評論 2 361

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