html+css+js 我的學校網頁設計與制作實例(6個頁面)

、作品介紹

HTML+CSS+JS網頁設計與制作，我的學校網頁設計與制作實例，本實例適合于初學HTML+CSS+JS的同學。該案例里面有div+css的樣式布局設置，這個實例比較全面，有一級頁、二級頁、詳情頁、輸入表單等，共6個頁面。本文將介紹如何通過從零開始設計我的學校網站，并將其轉換為代碼的過程來實現設計與制作。（網頁設計與制作分享。源碼分享。）

1.網頁作品簡介方面：青綠色簡約風格，div+css布局。主要有：首頁、關于暨大、學校新聞、新聞詳情頁、校園風光、聯系我們等總共6個頁面html下載。

2.網頁作品技術方面：使用CSS制作了網頁背景圖、鼠標經過及選中導航變色效果等。首頁制作了搜索表單。

3.網頁作品布局方面：網頁布局整體為LOGO、導航、主體內容布局。子頁面多種布局，圖片居中布局，文本描述對齊方式設置了左對齊。

4.網頁作品編輯方面：此作品為我的學校網頁設計題材，代碼為 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、Vscode 、Sublime 所有編輯器均可使用）

二、作品效果

視頻演示：

截圖演示：

首頁

關于暨大

學校新聞

新聞詳情頁

校園風光

聯系我們

三、作品代碼

文件目錄：

HTML代碼：

首頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首頁</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <!-- 頭部 -->
    <div class="top-box">
        <!-- logo -->
        <img src="./images/logo2.svg" class="logo" alt="" />
        <div class="right-box">
            <a href="#">新門戶</a>
            <a href="#">郵件</a>
            <a href="#">網上服務大廳</a> | 
            <a href="#">圖書館</a>
            <div class="in-row">
                <input type="text" placeholder="請輸入您的關鍵詞">
                <button class="button">搜索</button>
            </div>
        </div>
    </div>
    <div class="header">
        <!-- logo -->
        <img src="./images/hw_zxdj.png" class="logo" alt="" />
        <!-- 導航欄 -->
        <div class="nav">
            <ul>
                <li>
                    <a class="active" href="./index.html" target="_self">
                        <span title="首頁">首頁</span>
                    </a>
                </li>
                <li>
                    <a href="./about.html" target="_self">
                        <span title="關于暨大">關于暨大</span>
                    </a>
                </li>
                <li>
                    <a href="./news.html" target="_self">
                        <span title="學校新聞">學校新聞</span>
                    </a>
                </li>
                <li>
                    <a href="./scenery.html" target="_self">
                        <span title="校園風光">校園風光</span>
                    </a>
                </li>                
                <li>
                    <a href="./contact.html" target="_self">
                        <span title="聯系我們">聯系我們</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主內容 -->
    <div class="main-content">
        <div class="banner">
            <img src="./images/banner.jpg" alt="" />
        </div>
        <div class="project-content">
            <p class="content-title">暨南大學</p>
            <div class="detail-content">
                <div class="detail-pic">
                    <img src="./images/dasdasda.jpg" alt="" />
                </div>
                <div class="detail-desc">
                    <p>暨南大學是中國第一所由政府創辦的華僑學府。</p>
                    <p>“暨南”二字出自《尚書·禹貢》：“東漸于海，西被于流沙，朔南暨，聲教訖于四海。”意即面向南洋，將中華文化遠播到五洲四海。
                        </p>
                    <p>學校目前是中央統戰部、教育部、廣東省人民政府共建的國家“雙一流”建設高校，直屬中央統戰部管理。</p>
                    <p> 暨南大學是中國歷史最悠久的大學之一。學校的前身是1906年清政府創立于南京的暨南學堂，后遷至上海，1927年更名為國立暨南大學。</p>
                </div>
            </div>
            <p class="content-title">校園風光</p>
            <div class="content-list content-list2">
                <ul>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy6.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy7.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy8.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy9.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy10.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy11.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy12.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                    <li>
                        <div class="cover-pic">
                            <img src="./images/xy13.jpg" alt="" />
                        </div>
                        <p class="title">校園一角</p>
                    </li>
                </ul>
            </div>

            <p class="content-title">媒體暨大</p>
            <div class="content-list content-list2">
                <video src="https://osvc-mediaxbase.jnu.edu.cn/media/mediax/media/202312/25/51c2c04451825398f8c8b734.mp4" class="video" controls></video>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div class="contact-container">
            <div class="contact-title">
                <p>聯系</p>
                <p>Contact</p>
            </div>
            <div class="contact-content">
                <p class="c-name">木番薯科技</p>
                <div class="c-addr">
                    <p>地 點：廣州市天河區花城大道666號</p>
                    <p>郵編：510000</p>
                </div>
                <div class="c-addr">
                    <p>公眾號名稱：木番薯科技</p>
                    <p>公眾號號碼：mengchatchat91</p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

也適用于：大學生網頁作業制作 (HTML+CSS)、大學生HTML期末大作業、web前端期末大作業、web課程設計網頁規劃與設計、我的學校網頁設計作業成品、HTML+CSS+JS網頁設計期末課程大作業等。

css樣式：

段時間做畢業設計的過程中，發現了兩個十分好看的前端頁面，利用HTML，CSS以及JS寫成的。

第一個代碼點擊進入時有好看的進入動畫，旋轉轉圈之后，從中間向兩側緩緩打開：

打開之后，首頁長這樣：

點擊頭部的幾塊區域，有炫酷的滑動切換動畫：

第二個頁面點擊進入之后，第一眼看到的頁面是這樣的：

鼠標下拉可以繼續查看：

是不是很好看呢？我的畢業設計頁面就是在第一個頁面的基礎上來設計實現的，哈哈，我的頁面長這樣：

嗯，畢業設計做了一個簡單的圖像文字識別系統，在頁面上傳圖片后，系統識別出圖片中的文字，并在此基礎上衍生出身份證識別，銀行卡識別，駕駛證識別，傳圖識色等功能，整個系統涉及到圖像預處理，神經網絡等技術。

可把我厲害壞了，哈哈，不過其實市面上有很多圖像識別方面的軟件啦。

圖像預處理技術

等改天有時間了，我準備把這個圖像文字識別系統從設計到實現的過程一步一步寫出來，屆時，歡迎大家前來圍觀啊！！

想要前面兩個前端頁面代碼的小伙伴，可以私信我獲取哦~~

TML 的內容遠不止 <div> 、<a>和 <p> 。如此多更復雜、更強大的標簽，你可能從未使用過。具有從交互式圖像到復雜的 UI 組件的有趣功能。

1.<progress>和<meter>

但是，接下來就是 meter -- 也被稱為 progress 在橫行：

2.<dfn>

dfn -- 用于我們將在頁面中定義的任何內容：

3.<dialog>

原生 HTML 對話框！

4.<map>和<area>

們稱這樣的可點擊圖片為圖像地圖。

5.<bdo>

超級神秘的縮寫在這里，它是做什么的？

6.<base>

<a> 使用頁面的域名來獲取他們將導航您的完整 URL：

但是，當你在 HTML 中創建一個基礎的 <base> 會發生什么？

現在他們都使用 <base> 的 href 中的硬編碼值來獲取完整的 URL：

像 Angular 和 Flutter Web 這樣的框架也在使用它：

7.<time>

對于日期和時間：

8.<hgroup>

<hgroup> 表示標題標簽和下面的一些內容是相關的

9.<kbd>

代表鍵盤輸入：

10.<cite>

表示書籍、歌曲、電影或其他創作作品的標題：

所以，這些是 HTML 中最不為人知和使用的 10 個標簽。盡管使用率低，但在各種情況下都非常有用。

在線咨詢

上一篇：20201119登錄頁面模板的制作
下一篇：CSS 浮動布局實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商