50projects50days案例代码分析学习、效果，Html+CSS+JavaScript小案例

news2025/1/13 2:24:46

案例来源于：https://github.com/bradtraversy/50projects50days，部分资源需要科学上网加载使用，往后不再赘述。

合集链接，欢迎订阅：

https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzkwODY2OTA5NA==&action=getalbum&album_id=3618277165223084032#wechat_redirect
在这里插入图片描述

部分动态图：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

0、开始项目

（1）实现效果

开始项目显示效果如下，无其他特效，仅将Project Starter居中显示。

（2）代码解读

HTML代码

<!DOCTYPE html>
<!-- <!DOCTYPE> 声明向浏览器提供有关所期望的文档类型的“信息”。 -->
 <!-- 定义语言 -->
<html lang="en">
  <!-- <head> 元素是所有头部元素的容器。 -->
  <head>
    <!-- 规定 HTML 文档的字符编码 -->
    <meta charset="UTF-8" />
    <!--定义了网页在浏览器上的视口设置，确保网页的宽度与设备屏幕宽度相匹配，并设置初始缩放比例为1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入了一个外部的CSS样式表 -->
    <link rel="stylesheet" href="style.css" />
    <!-- 定义网页title -->
    <title>My Project</title>
  </head>
  <!-- 定义了网页的主体内容，即用户在浏览器中看到的部分 -->
  <body>
    <!-- 定义一级标题内容 -->
    <h1>Project Starter</h1>
    <!-- <script>标签用于引入JavaScript文件或直接编写JavaScript代码 -->
    <script src="script.js"></script>
  </body>
</html>

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* 一个@import规则，用于从Google Fonts导入Roboto字体 */
/* 通用选择器*，将box-sizing属性设置为border-box。元素的宽度和高度会包括边框border和内边距padding，避免在布局中出现意外的尺寸问题。 */
* {
  box-sizing: border-box;
}

body {
  /* font-family设置为Roboto字体，如果Roboto字体无法加载，则会回退到无衬线字体。 */
  font-family: 'Roboto', sans-serif;
  /* 将body元素设置为一个弹性容器 */
  display: flex;
  /* 定义了弹性容器的主轴方向为垂直方向 */
  flex-direction: column;
  /* 将弹性容器内的项目在水平和垂直方向上居中对齐。 */
  align-items: center;
  justify-content: center;
  /* 将body的高度设置为视口高度的100% */
  height: 100vh;
  /* 避免溢出，隐藏超出的部分 */
  overflow: hidden;
  /* 移除了body元素的外边距 */
  margin: 0;
}

JS代码

未使用JS

（3）知识点

这个小项目的知识点较为基础，包括如何@import的用法、内容居中显示等。

1）@import规则通常放在CSS文件的顶部，在CSS中用于导入外部样式表，常用的语法便是：@import url('url')；2）内容居中显示主要是使用：display: flex将body元素设置为一个弹性容器，flex-direction: column定义弹性容器的主轴方向为垂直方向（这句有时候可以忽略），align-items: center和justify-content: center将弹性容器内的项目在水平和垂直方向上居中对齐。

1、3D盒子背景动态分解效果

（1）实现效果

加载小黄人动态图片，点击Magic按钮实现动态分解/合并的效果。

（2）代码解读

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 使用font-awesome图标库，Font Awesome是一个图标字体和CSS框架，提供可缩放矢量图标 -->
    <!-- rel="stylesheet"：指定这是样式表，href：指定样式表的URL-->
    <!-- integrity：用于指定资源的完整性校验，确保加载的资源未被篡改 -->
    <!-- crossorigin：指定资源是否允许跨域请求，anonymous表示请求不携带凭证 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>3D Boxes Background</title>
  </head>
  <body>
    <!-- 定义按钮元素，用来触发事件，这里的元素内容使用了一个魔术帽的表情符号 -->
    <button id="btn" class="magic">Magic 🎩</button>
    <!-- 添加容器，用来放置具体的内容 -->
    <div id="boxes" class="boxes big"></div>
    <script src="script.js"></script>
  </body>
</html>

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* 引入了两种字体，Roboto和Poppins */
/* 还是使用*通用选择器匹配页面所有元素，将box-sizing属性设置为border-box改变元素盒模型的计算方式，使元素的宽度和高度包括内容、内边距（padding）和边框（border） */
* {
  box-sizing: border-box;
}
/* 设置body元素样式 */
body {
  /* 设置背景色 */
  background-color: #fafafa;
  /* 设置字体，如果roboto字体不能用则使用sans-serif字体 */
  font-family: 'Roboto', sans-serif;
  /* 弹性容器 */
  display: flex;
  /* 主轴为垂直方向 */
  flex-direction: column;
  /* 垂直方向居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  height: 100vh;
  /* 隐藏超出部分 */
  overflow: hidden;
}

/* 设置magic按钮样式 */
.magic {
  background-color: #f9ca24;
  /* 字体颜色 */
  color: #fff;
  font-family: 'Poppins', sans-serif;
  /* 无框线 */
  border: 0;
  /* 边框圆角为3像素 */
  border-radius: 3px;
  /* 字号 */
  font-size: 16px;
  /* 设置内边距垂直内边距为12px,水平内边距20px */
  padding: 12px 20px;
  /* 鼠标悬停时,光标为 pointer指针小手的样式,暗示可以点击*/
  cursor: pointer;
  /* 将元素相对于视窗进行定位,即元素的位置保持不变*/
  position: fixed;
  /* 设置元素距离其包含块顶部20像素,也就是浏览器顶部 */
  top: 20px;
  /* 字母之间的间距 */
  letter-spacing: 1px;
  /* 盒子阴影效果 */
  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
  /* 元素的堆叠顺序 */
  z-index: 100;
}

/* 定义两个伪类选择器,用于改变元素在特定交互状态下的样式*/
.magic:focus {
  /* 移除当.magic类的元素获得焦点时浏览器默认的轮廓线（outline）,感觉可以省略 */
  outline: none;
}

.magic:active {
  /* 移除当.magic类的元素被按下（活跃状态）时的阴影效果,给用户一种按钮被按下的视觉反馈*/
  box-shadow: none;
  /* 使用CSS变换（transform）属性将元素向下移动2像素,给用户一种按钮被按下的视觉效果 */
  transform: translateY(2px);
}

/* 先定义boxes类的效果,这是效果图第二张图时的设置 */
.boxes {
  display: flex;
  /* 允许子元素换行显示 */
  flex-wrap: wrap;
  /* 在主轴上平均分布子元素，每个元素两侧的间隔相等 */
  justify-content: space-around;
  /* 设置高和宽 */
  height: 500px;
  width: 500px;
  /* 相对定位 */
  position: relative;
  /* 为尺寸变化设置一个0.4秒的渐变动画效果 */
  transition: 0.4s ease;
}
/* 盒子分散后的尺寸设置 */
.boxes.big {
  width: 600px;
  height: 600px;
}

/* .box由JS函数创建 */
.boxes.big .box {
  /* 子元素.box在.boxes.big容器中会被旋转360度 */
  transform: rotateZ(360deg);
}
/* 设置16个子元素.box的样式 */
.box {
  /* 添加背景图为小黄人动图 */
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
  /* 确保背景图像不重复平铺 */
  background-repeat: no-repeat;
  /* 背景图尺寸 */
  background-size: 500px 500px;
  /* 相对定位 */
  position: relative;
  /* 设置.box元素的尺寸 */
  height: 125px;
  width: 125px;
  /* 变换设置一个0.4秒的渐变动画效果 */
  transition: 0.4s ease;
}

/* 定义了.box元素的两个伪元素::after和::before的样式，形成分割后的小图片三维景深的效果*/
/* 小图片右侧的黄色矩形 */
.box::after {
  /* 必须提供非空的content属性值来创建伪元素 */
  content: '';
  background-color: #f6e58d;
  /* 相对于其最近的已定位（非static）祖先元素为绝对定位 */
  position: absolute;
  /* 将伪元素从其包含元素的顶部向下偏移8像素 */
  top: 8px;
  /* 向左偏移15像素 */
  right: -15px;
  /* 高度为其包含元素的高度的100% */
  height: 100%;
  /* 设置伪元素的宽度为15像素 */
  width: 15px;
  /* 沿着Y轴将伪元素倾斜45度 */
  transform: skewY(45deg);
}

/* 小图片下面的黄色矩形 */
.box::before {
  content: '';
  background-color: #f9ca24;
  position: absolute;
  /* 向上偏移15px */
  bottom: -15px;
  /* 向右偏移8px */
  left: 8px;
  /* 高15px */
  height: 15px;
  /* 宽100% */
  width: 100%;
  /* 沿着x轴将伪元素倾斜45度 */
  transform: skewX(45deg);
}

JS代码

const boxesContainer = document.getElementById('boxes')
// 上句获取html文件中ID为boxes的元素的引用
const btn = document.getElementById('btn')
// 上句获取html文件中ID为btn的元素的引用

// 下面为按钮添加一个点击事件监听器，点击按钮时，切换boxesContainer的big类。
// 点击magic按钮后big类被添加，根据CSS样式改变 boxes也就是boxesContainer 的尺寸
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

// 生成一个4x4的网格布局，每个格子是一个带有box类的div元素。
function createBoxes() {
  // 两次循环，生成4*4的小盒子
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      // 使用document.createElement方法创建div
      const box = document.createElement('div')
      // 为创建的div添加box
      box.classList.add('box')
      // 设置每个box的背景位置，分别是向左偏移-j*125px即向右偏移j*125，和向上偏移-i*125px
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      // 将创建的box元素添加到boxesContainer中
      boxesContainer.appendChild(box)
    }
  }
}

createBoxes()

（3）知识点

可以通过在浏览器中F12打开控制台，查看一些代码勾选与否的效果，通过对比能够更容易明白一些代码的作用。
Html文件中还增加了一些之前未接触过的设置，例如crossorigin属性在HTML中用于指定是否应该在请求外部资源时发送凭据（如cookies、授权头等）。这个属性通常与图片、字体、脚本等资源的加载有关，特别是在使用CDN或跨域请求资源时。anonymous是默认值，表示请求不会携带任何凭据，即不会发送cookies或HTTP认证信息。这适用于大多数情况，特别是访问不需要受保护的资源时。

这里涉及了CDN和跨域的概念，CDN是全称是Content Delivery Network，即内容分发网络，其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。按我的理解，简单来说就是一个数据，黑龙江和西藏的用户都要访问，但是如果放在黑龙江的服务器上，西藏用户访问慢；放在西藏服务器，黑龙江用户慢。所以使用CDN将数据放在了全国各地的服务器上，黑龙江用户访问黑龙江服务器上的数据，西藏用户也就近访问西藏服务器上的用户。跨域请求也很简单，你在自己的网站中使用别人网站发布数据的链接时，就发生了跨域访问。

2、动画倒计时

合集链接，欢迎订阅：

https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzkwODY2OTA5NA==&action=getalbum&album_id=3618277165223084032#wechat_redirect

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2131002.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Invoke-Maldaptive：一款针对LDAP SearchFilter的安全分析工具

Invoke-Maldaptive：一款针对LDAP SearchFilter的安全分析工具

关于Invoke-Maldaptive MaLDAPtive 是一款针对LDAP SearchFilter的安全分析工具&#xff0c;旨在用于对LDAP SearchFilter 执行安全解析、混淆、反混淆和安全检测。 其基础是 100% 定制的 C# LDAP 解析器&#xff0c;该解析器处理标记化和语法树解析以及众多自定义属性&#x…
阅读更多...
35岁失业后：靠这几个AI副业，也能养活自己

35岁失业后：靠这几个AI副业，也能养活自己

最近几年连续的经济下行&#xff0c;到现在已经彻底传导到所有行业&#xff0c;波及到越来越多的人… 这种波及&#xff0c;最集中反映在失业率上&#xff0c;今年又是1179万应届生毕业即失业&#xff0c;加入到庞大的就业漩涡中&#xff0c;35岁裁员已成常态。 大环境确实如此…
阅读更多...
RocketMQ 基础入门

RocketMQ 基础入门

文章内容是学习过程中的知识总结&#xff0c;如有纰漏&#xff0c;欢迎指正 文章目录 前言 RocketMQ 特点 RocketMQ 优势 1. RocketMQ 基本概念 1.1 NameServer 1.1.1 NameServer作用 1.1.2 和zk的区别 1.1.3 高可用保障 1.2 Broker 1.2.1 部署方式 1.2.1.1 单 Master 1.2.1.2 …
阅读更多...
OpenAI推出o1，一个能够自我事实核查的模型

OpenAI推出o1，一个能够自我事实核查的模型

ChatGPT的开发者OpenAI宣布了其下一次重大产品发布&#xff1a;一个代号为“Strawberry”&#xff08;草莓&#xff09;的生成式AI模型&#xff0c;正式名称为OpenAI o1。 更准确地说&#xff0c;o1实际上是一个模型家族。周四&#xff0c;两个版本将在ChatGPT和OpenAI的API中…
阅读更多...
最新kubernetes的安装填坑之旅(新手篇)

最新kubernetes的安装填坑之旅(新手篇)

Kubernetes&#xff08;常简称为 K8s&#xff09;是一个开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序&#xff0c;lz也不知道哪根脑经秀逗了&#xff0c;竟然妄挑战学习一下&#xff0c;结果折戟沉沙&#xff0c;被折腾的欲仙欲死&#xff0c;不过…
阅读更多...
26577flask旧衣物捐赠系统—计算机毕业设计源码26577

26577flask旧衣物捐赠系统—计算机毕业设计源码26577

摘要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0c;应用软件的工作规…
阅读更多...
【鸿蒙开发从0到1 day10】

【鸿蒙开发从0到1 day10】

ArkUI布局高级 一.线性布局1.间距(space)2.主轴对齐方式3.交叉轴对齐方式4.单个子组件交叉轴的对齐方式5.自适应缩放6.侧轴对齐方式7.案例 二.弹性布局1.淘宝网页面案例分析 三.总结 一.线性布局 线性布局&#xff08;LinearLayout&#xff09;是开发中最常用的布局&#xff0…
阅读更多...
海鲜市场|基于springboot的网络海鲜市场系设计与实现(附项目源码+论文+数据库）

海鲜市场|基于springboot的网络海鲜市场系设计与实现(附项目源码+论文+数据库）

私信或留言即免费送开题报告和任务书&#xff08;可指定任意题目&#xff09; 目录 一、摘要 二、相关技术 三、系统设计 四、数据库设计 五、核心代码 六、论文参考 七、源码获取 一、摘要 计算机网络发展到现在已经好几十年了&#xff0c;在理论上面已…
阅读更多...
HyperWorks二维网格划分及拓扑改进

HyperWorks二维网格划分及拓扑改进

Step 01&#xff1a;载入模型 Exercise_3a.hm。 Step 02&#xff1a;2D 网格划分。 进入 automesh 面板。 图 3-13 设置 automesh 面板网格控制参数 (2) 指定 element size 为 5&#xff0c;根据图 3-13 设置网格控制参数。 (3) 查看网格。 图 3-14 新创建的网格模型 网格…
阅读更多...
计算机组成原理(二) —— Cache 高速缓存

计算机组成原理(二) —— Cache 高速缓存

这篇主要讲一下高速缓存&#xff0c;涉及到高速缓存的几种形式&#xff0c;缓存友好代码注意事项&#xff0c;多处理器下缓存的同步机制。 文章目录 存储器层次结构高速缓存存储器通用的高速缓存存储器组织结构直接映射高速缓存组选择行匹配字选择不命中时的行替换冲突不命中 组…
阅读更多...
半个月赚3000+，用AI做仙侠场景账号，全网分发

半个月赚3000+，用AI做仙侠场景账号，全网分发

那些看过的仙侠剧、修仙小说&#xff0c;玩过的仙侠游戏&#xff0c;你还记得吗&#xff1f; 仙侠类型之所以让人津津乐道&#xff0c;除了不同于普通人的人物形象塑造以及跌宕起伏的剧情之外&#xff0c;美轮美奂的仙境场景也是重中之重。所以&#xff0c;每个人心中都有独属于…
阅读更多...
Qt Model/View之Model

Qt Model/View之Model

在检查如何处理选择之前&#xff0c;您可能会发现检查模型/视图框架中使用的概念很有用。 基本概念 在模型/视图架构中&#xff0c;模型提供了一个标准接口&#xff0c;用于视图和委托访问数据。在Qt中&#xff0c;标准接口由QAbstractItemModel类定义。无论数据项如何存储在…
阅读更多...
ListBox显示最新数据、左移和右移操作

ListBox显示最新数据、左移和右移操作

1、程序 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.IO; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using static Sys…
阅读更多...
《餐饮世界》是什么级别的期刊？是正规期刊吗？能评职称吗？

《餐饮世界》是什么级别的期刊？是正规期刊吗？能评职称吗？

​问题解答 问&#xff1a;《餐饮世界》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《餐饮世界》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a; 中国商业联合会 主办单位&am…
阅读更多...
b√最大矩阵和

b√最大矩阵和

题目描述 给定一个二维整数矩阵&#xff0c;要在这个矩阵中选出一个子矩阵. 使得这个子矩阵内所有的数字和尽量大&#xff0c;我们把这个子矩阵称为和最大子矩阵 子矩阵的选取原则是原矩阵中一块相互连续的矩形区域。 输入描述 输入的第一行包含2个整数n,m(1< n,m< 10…
阅读更多...
Mysql连接不上的问题？

Mysql连接不上的问题？

Mysql服务器本地能访问&#xff0c;但是外部连接报错如下&#xff1a;显然我也知道这就是一个权限问题&#xff0c;但是在网上百度的方法要么就是不生效&#xff0c;要么就是执行命令报错&#xff0c;很抓狂&#xff5e;这里提供精准的解决方案&#xff1a;SELECT User, Host F…
阅读更多...
EV代码签名证书签名指南，签名要求、签名步骤一览

EV代码签名证书签名指南，签名要求、签名步骤一览

作为软件开发者&#xff0c;在软件分发之前&#xff0c;为软件应用程序进行代码签名&#xff0c;可标识开发者身份&#xff0c;消除“未知发布者”警告&#xff0c;确保代码完整性&#xff0c;有利于应用程序安全分发&#xff0c;也可以让用户放心下载。而为软件应用程序进行代…
阅读更多...
【C语言从不挂科到高绩点】17-C语言中的宏定义

【C语言从不挂科到高绩点】17-C语言中的宏定义

Hello&#xff01;彦祖们&#xff0c;俺又回来了&#xff01;&#xff01;&#xff01;&#xff0c;继续给大家分享 《C语言从不挂科到高绩点》课程!! 本节将为大家讲解C语言中的函数&#xff1a; 本套课程将会从0基础讲解C语言核心技术&#xff0c;适合人群&#xff1a; 大学…
阅读更多...
取消Cursor的注释斜体字风格

取消Cursor的注释斜体字风格

1. 打开settings.json 2. 添加如下代码 "editor.tokenColorCustomizations": {"textMateRules": [{"name": "Comment","scope": ["comment","comment.block","comment.block.documentation"…
阅读更多...
Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析

Vert.x HttpClient调用后端服务时使用Idle Timeout和KeepAlive Timeout的行为分析

其实网上有大量讨论HTTP长连接的文章&#xff0c;而且Idle Timeout和KeepAlive Timeout都是HTTP协议上的事情&#xff0c;跟Vert.x本身没有太大关系&#xff0c;只不过最近在项目上遇到了一些问题&#xff0c;用到了Vert.x的HttpClient&#xff0c;就干脆总结一下&#xff0c;留…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023