用HTML怎么制作網(wǎng)頁呢？

　用HTML怎么制作網(wǎng)頁呢?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網(wǎng)頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。

　　一、網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。

　　二、網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。

　　三、網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

　　四、網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件;

　　五、網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等(個別網(wǎng)頁中運用到js代碼)。

們先分析一下整個網(wǎng)頁的結(jié)構(gòu)，整體內(nèi)容采用的是一個兩列布局，導航無限延長的背景，并且添加了分割符號

素材：

第一步：去掉默認的HTML間距。

*{padding:0;margin:0;}

Ps(我們可以在后期進行修改,根據(jù)網(wǎng)頁中使用的HTML元素的個數(shù)如body,h1,div等)

第二步：按效果圖頭部灰色背景但是無限延長

HTML代碼：

<p>讀書屋歡迎您！</p>

</div>

兩個DIV嵌套，<div class="top">這個需要100%添加背景，而內(nèi)側(cè)<div id="top"> 實現(xiàn)居中布局就可以了

.top{width:100%;background:#f5f5f5;height:35px;}

解釋：寬度100%,添加背景顏色，設定高度，這樣在縮放網(wǎng)頁，始終可以看到灰色的背景

#top {width:970px;margin:0 auto;}

解釋：網(wǎng)頁寬度970像素，使id=top的div元素進行居中margin:0 auto;

#top p{font-size:13px;line-height:35px;}

解釋：改變文字大小，就一行宣傳文字，通過行高（和高度一樣時間）實現(xiàn)垂直居中l(wèi)ine-height:35px;

第三步：logo的實現(xiàn)，采用典型的以圖換字的方式，有利于SEO

HTML代碼：

<h1>

<a href="#">css教程</a>

</h1>

</div>

CSS編碼：

#header h1 a{

background:url(images/logo.png) no-repeat 0 50%;

display:block;

width:215px;height:60px;

text-indent:-9999px;

}

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

模板效果展示：

主頁 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的個人網(wǎng)站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關(guān)于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯(lián)系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>歡迎來到我的個人網(wǎng)站</h1>
            <p>我是一個充滿激情的程序員，熱衷于學習和分享知識。</p>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

關(guān)于我 (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>關(guān)于我 - 我的個人網(wǎng)站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關(guān)于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯(lián)系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="about">
    <h1>關(guān)于我</h1>
    <p>你好！我是[一周一志程序員]，一名經(jīng)驗豐富的Java程序員，致力于能源電力SaaS和系統(tǒng)架構(gòu)設計。</p>
    <p>目前我正在備考2024年11月6日的《系統(tǒng)架構(gòu)設計師》考試，并在著手成為獨立開發(fā)者，輕創(chuàng)業(yè)準備中。</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>項目 - 我的個人網(wǎng)站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關(guān)于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯(lián)系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="projects">
            <h1>項目</h1>
            <ul>
                <li><strong>電力SaaS平臺開發(fā)</strong> - 開發(fā)用電考核模塊。</li>
                <li><strong>系統(tǒng)架構(gòu)設計</strong> - 為不同客戶提供系統(tǒng)架構(gòu)解決方案。</li>
                <li><strong>Spring Boot 項目</strong> - 創(chuàng)建和管理多個Spring Boot項目。</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

聯(lián)系方式 (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聯(lián)系方式 - 我的個人網(wǎng)站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關(guān)于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯(lián)系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="contact">
    <h1>聯(lián)系方式</h1>
    <p>如果你有任何問題或合作意向，請隨時聯(lián)系我。</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來查看你的個人網(wǎng)站。

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

在線咨詢

上一篇：HTML5廢除的元素
下一篇：5.HTML格式標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商