关于javascript:HTML-CSS-JS-编程入门-使用-Lightly-制作可切换主题的简单网页

HTML、CSS 和 JavaScript 是前端编程密不可分的三大语言，咱们个别看到的网页都由这三种语言组合编程而成。这三者之间到底有什么样的关系？他们又是通过什么样的软件编成的呢？

目录

HTML、CSS 和 JavaScript 之间的关系

网页制作实战

咱们平时看到的网页就像是一座曾经建好的房子，而这三个编程语言则别离负责房子的构造（Structure）、款式（Styling）和性能（Functionality）。对一个残缺的网页而言，三者简直缺一不可。但在极其状况下，只有有 HTML 就能够制作出最简略的网页，CSS 和 JavaScript 则会为网页赋予更精美的款式和更多样的性能。

.HTML 文件：网页的根本架构，个别在这里调用 CSS 和 JS 文件
.CSS 文件： 网页款式文件，调整网页的整体色彩、地位、字体、按钮等设计
.JS 文件： 赋予网页的交互性能，例如：用户点击、输出等操作会触发哪些性能

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

草拟网站内容
在 Lightly 中编写代码
应用 HTML 建设网站根本框架
应用 CSS 调整网站设计
应用 JavaScript 增加网站性能

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

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

点击进入 Lightly，查看残缺代码

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

关上我的项目后，你会发现 Lightly 曾经为咱们别离建好了 Index.html、style.css 和 script.js 三个文件。

认真看 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 局部的网页只有黑白文字，没有设计。

实现网页的根本构造后，咱们转到 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 文件从新加载网页查看成果：

把握根本的 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);

});

所有步骤实现后，从新预览网页成果。当初，点击按钮即可切换主题色彩：

点击进入 Lightly，查看残缺代码

关于javascript:HTML-CSS-JS-编程入门-使用-Lightly-制作可切换主题的简单网页

HTML、CSS 和 JavaScript 之间的关系

网页制作实战

在 Lightly 创立 HTML 文件

应用 HTML 建设框架

应用 CSS 设计网页

应用 JavaScript 实现主题切换