HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

站长

2022年09月08日 18:22 · 阅读数 46

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页 HTML、CSS 和 JavaScript 是前端编程密不可分的三大语言，我们一般看到的网页都由这三种语言组合编程而成。这三者之间究竟有什么样的关系？他们又是通过什么样的软件编成的呢？

目录
HTML、CSS 和 JavaScript 之间的关系
网页制作实战

HTML、CSS 和 JavaScript 之间的关系

我们平时看到的网页就像是一座已经建好的房子，而这三个编程语言则分别负责房子的结构（Structure）、样式（Styling）和功能（Functionality）。对一个完整的网页而言，三者几乎缺一不可。但在极端情况下，只要有 HTML 就可以制作出最简单的网页，CSS 和 JavaScript 则会为网页赋予更精美的样式和更多样的功能。

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

.HTML 文件：网页的基本架构，一般在这里调用 CSS 和 JS 文件.CSS 文件：网页样式文件，调整网页的整体颜色、位置、字体、按钮等设计.JS 文件：赋予网页的交互功能，例如：用户点击、输入等操作会触发哪些功能

网页制作实战

在学习编程的时候，最重要的就是直接动手尝试，从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤，手把手带你制作一个简易的网站，让你了解 HTML、CSS 和 JS 之间的关系与基本操作：

草拟网站内容
在 Lightly 中编写代码
使用 HTML 建立网站基本框架
使用 CSS 调整网站设计
使用 JavaScript 添加网站功能

我们在此次教程中使用轻量且功能强大的 Lightly 集成开发工具（IDE），学习过程中无需下载任何编程软件，也无需熟记复杂的界面操作，只需要通过网页打开就可以在线上实时编写代码，通过一键运行完成网页制作。

这个网页制作教程会教大家制作一个可切换浅色和深色主题的简单网页，网页的效果大致如下：

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

点击进入 Lightly，查看完整代码

在 Lightly 创建 HTML 文件

注册并登录 Lightly 账户后，点击 “新建项目” 并创建 HTML 文件。

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

打开项目后，你会发现 Lightly 已经为我们分别建好了 Index.html、style.css 和 script.js 三个文件。

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

使用 HTML 建立框架

仔细看 index.html 的代码，Lightly 也为我们关联好了 CSS 和 JS 文件，关联这两个文件的代码分别如下：

<!--- 关联 CSS 文件的代码 --->
<link type="text/css" rel="stylesheet" href="css/style.css"/>

<!--- 关联 JS 文件的代码 --->
<script type="text/javascript" src="js/script.js"></script>

在正式开始网页的编程之前，我们也可以先调整 <head> 标签中的页面信息，同时确保 CSS 和 JS 文件正确关联。

<head>
    <meta charset="UTF-8">
    <title>Lightly 网页制作</title> <!--- 这里可以修改页面标题 --->
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
</head>

添加网页内容<body> 标签含有网页的主要内容，如果直接点击右上角的小眼睛，目前只会弹出 “Hello World!”。我们可以修改 <body> </body> 里的内容，让网页变得更丰富。

<body>
    
    <!--- 这里的内容是评论，不会显示在网页中 --->
    
    <!--- h1 标题 --->
    <h1>网页制作指南</h1>

    <!--- p = paragraph 段落 --->
    <p id="msg">任务清单</p>
    
    <!--- ul = unordered list 无序号列表 --->
    <!--- ol = ordered list 有序号列表 --->
    <!--- li 即列表中的内容 --->
    <ul>
      <li class="list">添加可视化设计</li>
      <li class="list">添加浅色与深色主题</li>
      <li>添加切换主题功能！</li>
    </ul>
    
</body>

添加好内容后，我们可以在此预览网页：

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

只修改了 HTML 部分的网页只有黑白文字，没有设计。

使用 CSS 设计网页

完成网页的基本结构后，我们转到 style.css 文件，开始为网页设计编程。Lightly 的 style.css 文件默认为空白，我们可以尝试添加以下参数代码：

定义颜色名称

/* CSS 的评论代码与 HTML 不同 */

/* 使用根目录定义颜色 */
:root {
  --green: #f0fff0;
  --white: #ffffff;
  --black: #000000;
}

* {
  color: var(--fontColor);
}

更改字体样式

body {
    /* 设置背景颜色，调整文本为黑体、居中 */
    font-family: SimHei;
    text-align: center;
    background: var(--bg);
}

ul {
    /* 设置 ul 文本为宋体 */
    font-family: SimSun;
}

为列表设置边框

/* 为 ul 添加边框 */
.feature {
    text-align: left;
    font-size: 24px;
    margin: auto;
    width: 400px;
    height: 200px;
    outline: solid 1px;

    /* 将列表内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

添加浅色主题

/* 添加浅色主题 */
.light-theme {
  color: var(--black);
  background: var(--green);
}

在刷新网页之前，我们需要回到 .HTML 文件为 <body> 标签添加浅色主题：<body class="light-theme">

同时在 <ul> 的上下方添加 <div> 标签，注意需要为 <div> 标签添加 class：

    <div class="feature">
        <ul>
           ...
        </ul>
    </div>

完成后 CSS 文件配置后，回到 .HTML 文件重新加载网页查看效果：

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

使用 JavaScript 实现主题切换

掌握基本的 CSS 设计后，我们可以尝试进一步编写 JavaScript 代码，让网页实现深色和浅色主题切换的功能。

首先，我们需要在 .html 文件中添加“切换主题”的按钮：

    <!--- div = division 分区 --->
    <div>
        <button class="btn" onclick="function()">切换深色</button>
    </div>

接着，把 <head> 中的 script.js 关联代码移动（剪切+粘贴）到 </body> 标签结束前：

<script type="text/javascript" src="js/script.js"></script>

</body>

在添加切换功能前，我们需要添加并调整 CSS 的主题：

/* 添加浅色主题 */
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

/* 添加深色主题 */
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

然后调整按钮设计：

/* 调整按钮设计 */
.btn {
    position: absolute;
    top: 20px;
    left: 250px;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: none;
    color: var(--btnFontColor);
    background-color: var(--btnBg);
}

/* 添加点击效果 */
.btn:focus { outline-style: none; }

最后，转到 script.js 文件并添加按钮功能：

// 为 switcher 添加定义
const switcher = document.querySelector('.btn');

// 使用监听功能监听按钮动态
switcher.addEventListener('click', function() {
    document.body.classList.toggle('dark-theme')

    // 使用 if 功能实现主题切换
    var className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "切换深色";
    }
    else {
        this.textContent = "切换浅色";
    }

    console.log('current class name: ' + className);

});

所有步骤完成后，重新预览网页效果。现在，点击按钮即可切换主题颜色：

HTML / CSS / JS 编程入门 —— 使用 Lightly 制作可切换主题的简单网页

点击进入 Lightly，查看完整代码