用HTML怎么制作网页呢？

　用HTML怎么制作网页呢?静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计 ‍ ,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的。

　　一、网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

　　二、网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

　　三、网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

　　四、网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

　　五、网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。其中： (1) html文件包含：其中index.html是首页、其他html为二级页面; (2) css文件包含：css全部页面样式,文字滚动, 图片放大等; (3) js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。

们先分析一下整个网页的结构，整体内容采用的是一个两列布局，导航无限延长的背景，并且添加了分割符号

素材：

第一步：去掉默认的HTML间距。

*{padding:0;margin:0;}

Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,div等)

第二步：按效果图头部灰色背景但是无限延长

HTML代码：

<p>读书屋欢迎您！</p>

</div>

两个DIV嵌套，<div class="top">这个需要100%添加背景，而内侧<div id="top"> 实现居中布局就可以了

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

解释：宽度100%,添加背景颜色，设定高度，这样在缩放网页，始终可以看到灰色的背景

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

解释：网页宽度970像素，使id=top的div元素进行居中margin:0 auto;

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

解释：改变文字大小，就一行宣传文字，通过行高（和高度一样时间）实现垂直居中line-height:35px;

第三步：logo的实现，采用典型的以图换字的方式，有利于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;

}

在的网站效果多样而功能复杂，技术栈也多种多样，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来查看你的个人网站。

学习使用，希望这对你有帮助把！如果你有其他需求或需要进一步定制，请告诉我。

在线咨询

上一篇：HTML5废除的元素
下一篇：5.HTML格式标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。