服務器搭建綠色大氣的有機蔬菜食品公司網站html源碼

載HTML源碼

源碼地址，鏈接：https://www.80zhan.com/code/10509.html。我看了好多html源碼下載的，發現這個還不錯，只需要簡單注冊就能下載源碼了。
若不想注冊，可以直接下載綠色大氣的有機蔬菜食品公司網站html源碼，鏈接：https://yangxunyu.xyz/upload/2021/07/%E7%BB%BF%E8%89%B2%E5%A4%A7%E6%B0%94%E7%9A%84%E6%9C%89%E6%9C%BA%E8%94%AC%E8%8F%9C%E9%A3%9F%E5%93%81%E5%85%AC%E5%8F%B8%E7%BD%91%E7%AB%99html%E6%BA%90%E7%A0%81-1a0f6b14b7c347f9ac9bb70dc108449b.rar。

文件上傳服務

我是使用ForkLift上傳的。

vegetables.jpg

配置nginx

nginx配置詳情，參考我另外一篇文章，nginx配置詳情。

、作品介紹

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>“暨南”二字出自《尚書·禹貢》：“東漸于海，西被于流沙，朔南暨，聲教訖于四海?！币饧疵嫦蚰涎螅瑢⒅腥A文化遠播到五洲四海。
                        </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樣式：

者：前端日志

轉發鏈接：https://mp.weixin.qq.com/s/zoEfqIwfsnAWVO8L7xuUuQ

在線咨詢

上一篇：一個例子說明網頁浮動框架的應用和靜態網站使用框架注意事項！
下一篇：HTML5之列表的使用