網頁模版制作，簡單上手

會Github倉庫或者Cloudflare的本地上傳后，html文件或者css，json文件的編輯會很難，但是網上有許多免費模版，下面就推薦一個比較好用的模版生成網站：

在這個網頁中選擇模板后可以直接點擊對應地方編輯

然后選擇發布更新

最后就可以獲得一個臨時的URL

最后點擊打包下載頁面（上一張圖里面）

Tips：可能會提示你vip等級不夠，不用擔心，在個人界面點擊升級會員

進入后看中間

就可以申請到vip了

是不是非常簡單？但是真正想要自己創意的網站，可以學學HTML,CSS以及腳本語言

用Shopify，我們不僅可以建立在線商店，而且還可以借助其Storefront API，創建自定義客戶端應用程序來連接到它。在這篇文章使用Nextjs14和shopify store front api創建自定義在線商城

在的網站效果多樣而功能復雜，技術棧也多種多樣，react\vue\jquery等層出不窮，對于編程愛好者初學者入門極不友好。我這里有一個簡單的個人網站模板，包括主頁、項目和聯系方式、關于我四個部分。你可以根據自己的需求進行調整。

模板效果展示：

主頁 (index.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" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>歡迎來到我的個人網站</h1>
            <p>我是一個充滿激情的程序員，熱衷于學習和分享知識。</p>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

關于我 (about.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" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="about">
    <h1>關于我</h1>
    <p>你好！我是[一周一志程序員]，一名經驗豐富的Java程序員，致力于能源電力SaaS和系統架構設計。</p>
    <p>目前我正在備考2024年11月6日的《系統架構設計師》考試，并在著手成為獨立開發者，輕創業準備中。</p>
  </section>
</main>
<footer>
  <p>? 2024 一周一志程序員</p>
</footer>
</body>
</html>

項目 (projects.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" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="projects">
            <h1>項目</h1>
            <ul>
                <li><strong>電力SaaS平臺開發</strong> - 開發用電考核模塊。</li>
                <li><strong>系統架構設計</strong> - 為不同客戶提供系統架構解決方案。</li>
                <li><strong>Spring Boot 項目</strong> - 創建和管理多個Spring Boot項目。</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

聯系方式 (contact.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" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="contact">
    <h1>聯系方式</h1>
    <p>如果你有任何問題或合作意向，請隨時聯系我。</p>
    <p>Email: <a href="mailto:1184795629@qq.com">your-email@domain.com</a></p>
    <p>公眾號: <a href="#">一周一志程序員</a></p>
    <p>抖音: <a href="#">麥冬會開花</a></p>
  </section>
</main>
<footer>
  <p>? 2024 我的名字</p>
</footer>
</body>
</html>

樣式文件 (styles.css)

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #06362B;
    color: #fff;
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
}

.about, .projects, .contact {
    padding: 2rem;
}

footer {
    background: #06362B;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

你可以將這些文件保存為index.html、about.html、projects.html、contact.html和styles.css，并將它們放在同一目錄下。然后，你可以通過瀏覽器打開index.html來查看你的個人網站。

學習使用，希望這對你有幫助把！如果你有其他需求或需要進一步定制，請告訴我。

在線咨詢

上一篇：CSS 將會推出 if() 語句，一次大膽的嘗試！
下一篇：最常用的18個SIP呼叫業務流程詳解完整版-點擊呼叫

您的項目需求

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