JavaScript 网页设计案例与技巧

仰望丨苍穹

于 2024-10-10 00:00:00 发布

阅读量1.2k

点赞数 22

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_31426349/article/details/142786104

版权

简单的 JavaScript 网页设计案例

展示了动态改变页面内容和样式的效果：

一、HTML 结构

<!DOCTYPE html>
<!-- 这是文档类型声明，告知浏览器以 HTML5 标准解析页面 -->
<html lang="en">
<!-- 整个网页的根元素，lang="en" 表示页面语言为英语 -->

<head>
  <!-- 网页的头部信息 -->
  <meta charset="UTF-8">
  <!-- 指定页面的字符编码为 UTF-8，以支持多种字符 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 用于适配不同设备的视口设置 -->
  <title>JavaScript 网页设计案例</title>
  <!-- 网页的标题 -->
  <link rel="stylesheet" href="styles.css">
  <!-- 引入外部的 CSS 样式表文件 -->
</head>

<body>
  <!-- 网页的主体内容 -->
  <h1>欢迎来到我的网页</h1>
  <!-- 一级标题 -->
  <p id="description">这是一个使用 JavaScript 设计的网页。</p>
  <!-- 带有特定 ID 的段落 -->
  <button id="changeButton">点击改变内容</button>
  <!-- 带有特定 ID 的按钮 -->

  <script src="script.js"></script>
  <!-- 引入外部的 JavaScript 脚本文件 -->
</body>

</html>

一个简单的 HTML 结构框架，包含了基本的元数据、标题、样式表链接和主体内容。主体内容中有一个标题、一个段落和一个按钮，并通过 script 标签引入了外部的 JavaScript 文件来实现更多的交互功能。但目前仅构建了页面的基本框架，具体的交互效果和样式需要在 styles.css 和 script.js 中进行定义和实现。

二、CSS 样式（styles.css）

body {
  /* 设置整个网页主体的字体为 Arial 或无衬线字体 */
  font-family: Arial, sans-serif;
  /* 设置主体的背景颜色为浅灰色 #f5f5f5 */
  background-color: #f5f5f5;
  /* 将主体内的文本居中对齐 */
  text-align: center;
}

h1 {
  /* 设置一级标题的文字颜色为深灰色 #333 */
  color: #333;
}

button {
  /* 为按钮设置内边距，上下 10 像素，左右 20 像素 */
  padding: 10px 20px;
  /* 设置按钮的背景颜色为绿色 #4CAF50 */
  background-color: #4CAF50;
  /* 设置按钮文字颜色为白色 */
  color: white;
  /* 去除按钮的边框 */
  border: none;
  /* 当鼠标悬停在按钮上时，显示为指针形状，提示可点击 */
  cursor: pointer;
}

主要定义了网页主体 body、一级标题 h1 和按钮 button 的基本样式，包括字体、颜色、背景、对齐方式、内边距等属性，以实现一定的视觉效果和布局。