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

news/2024/9/18 14:45:51/ 标签: 学习, html, css, javascript, 前端

案例来源于：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代码

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代码

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代码

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表示请求不携带凭证 --><linkrel="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代码

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方法创建divconst box = document.createElement('div')// 为创建的div添加boxbox.classList.add('box')// 设置每个box的背景位置，分别是向左偏移-j*125px即向右偏移j*125，和向上偏移-i*125pxbox.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.ppmy.cn/news/1524895.html

相关文章

ai智能语电销机器人有哪些功能？

ai智能语电销机器人有哪些功能？

近几年火爆的AI语音机器人&#xff0c;已经可以成熟的服务于金融贷款、理财、房地产、电商、汽车等行业&#xff0c;成熟的适用于电话销售、客服服务、售后管理等等基础岗位&#xff0c;那么ai智能语电销机器人有哪些功能&#xff1f;我们来看一看。 顾名思义&#xff0c;智能…
阅读更多...
数据结构 栈 队列

数据结构 栈 队列

系统栈&#xff1a; 保护局部变量 函数的形参和返回值 函数的调用关系&#xff08;保护现场&#xff0c;恢复现场操作&#xff0c;遵循先进后出&#xff0c;后进先出&#xff09; 数据结构栈&#xff08;顺序栈&#xff0c;链式栈&#xff09;&#xff1a; 同样遵遵循先进…
阅读更多...
Linux操作系统入门(一)

Linux操作系统入门(一)

Linux操作系统是开源的类Unix操作系统内核&#xff0c;由林纳斯托瓦兹在1991年创建。 Linux操作系统以其强大的性能、稳定性和开放性&#xff0c;赢得了全球用户的广泛认可&#xff0c;从服务器到个人电脑&#xff0c;从超级计算机到嵌入式设备&#xff0c;都有它的身影。作为…
阅读更多...
vue如何做到计算属性传参？

vue如何做到计算属性传参？

1.计算属性传参&#xff0c;还在return一个函数&#xff1f; let nameFull computed(() > {return e > {console.log(参数, e)} }) 那这样的话&#xff0c;干脆直接写一个函数 2.真正的计算属性传参&#xff0c;借助map实现 import { computed } from "vue&quo…
阅读更多...
手把手教你给服务器安装及使用ESXI系统

手把手教你给服务器安装及使用ESXI系统

ESXi&#xff08;以前称为 ESX Server&#xff09;是由 VMware 开发的一款企业级的裸机虚拟化管理程序&#xff08;hypervisor&#xff09;。ESXi 允许直接在物理硬件上运行&#xff0c;并在其上创建和管理多个虚拟机&#xff08;VMs&#xff09;&#xff0c;每个虚拟机都可以运…
阅读更多...
Python酷库之旅-第三方库Pandas(116)

Python酷库之旅-第三方库Pandas(116)

目录 一、用法精讲 511、pandas.DataFrame.std方法 511-1、语法 511-2、参数 511-3、功能 511-4、返回值 511-5、说明 511-6、用法 511-6-1、数据准备 511-6-2、代码示例 511-6-3、结果输出 512、pandas.DataFrame.var方法 512-1、语法 512-2、参数 512-3、功能…
阅读更多...
Element UI入门笔记（个人向）

Element UI入门笔记（个人向）

Element UI入门笔记 将页面分割为一级菜单、二级菜单、导航栏三个部分&#xff1b;使用npm下载安装&#xff0c;使用语句npm i element-ui -s; 布局组件 el-form 用于创建和管理表单&#xff1b;从属性上看&#xff1a; :model&#xff1a;用于双向数据绑定&#xff0c;将表单…
阅读更多...
3C电子胶黏剂在手机制造方面有哪些关键的应用

3C电子胶黏剂在手机制造方面有哪些关键的应用

3C电子胶黏剂在手机制造方面有哪些关键的应用 3C电子胶黏剂在手机制造中扮演着至关重要的角色&#xff0c;其应用广泛且细致&#xff0c;覆盖了手机内部组件的多个层面&#xff0c;确保了设备的可靠性和性能。以下是电子胶在手机制造中的关键应用&#xff1a; 手机主板用胶&…
阅读更多...
Android Framework（五）WMS-窗口显示流程——窗口布局与绘制显示

Android Framework（五）WMS-窗口显示流程——窗口布局与绘制显示

文章目录 relayoutWindow流程概览应用端处理——ViewRootImpl::setView -> relayoutWindowViewRootImpl::setViewViewRootImpl::performTraversalsViewRootImpl::relayoutWindow Surface的创建WindowManagerService::relayoutWindow了解容器类型和Buff类型的SurfaceBuff类型…
阅读更多...
调接口某个属性信息为null

调接口某个属性信息为null

1、问题描述 通过feign调用别的系统接口&#xff0c;发现有个属性&#xff0c;获取的值始终是null。 找接口提供方&#xff0c;提供方自测接口&#xff0c;是有返回值的。 2、问题排查 接口调用过程如图&#xff1a; &#xff08;1&#xff09;接口提供方开发接口test (2) …
阅读更多...
【渗透测试】——DVWA靶场搭建

【渗透测试】——DVWA靶场搭建

&#x1f4d6; 前言&#xff1a;DVWA&#xff08;Damn Vulnerable Web Application&#xff09;是一个用于安全漏洞测试的 PHP/MySQL 网络应用&#xff0c;旨在为安全专业人士提供一个合法的环境&#xff0c;以测试他们的技能和工具&#xff0c;同时帮助 Web 开发者更好地理解 …
阅读更多...
【UI】element ui table（表格）expand实现点击一行展开功能

【UI】element ui table（表格）expand实现点击一行展开功能

文章目录 前言涉及知识点&#xff1a;代码部分隐藏小箭头总结 前言 element ui是一个非常不错的vue的UI框架&#xff0c;element对table进行了封装&#xff0c;简化了vue对表格的渲染。 element ui表格中有一个功能是展开行&#xff0c;在2.0版本官网例子中&#xff0c;只可以…
阅读更多...
斯坦福研究人员探讨大型语言模型在社交网络生成中的应用及其在政治同质性上的偏见

斯坦福研究人员探讨大型语言模型在社交网络生成中的应用及其在政治同质性上的偏见

社交网络生成在许多领域有着广泛的应用&#xff0c;比如流行病建模、社交媒体模拟以及理解社交现象如两极化等。当由于隐私问题或其他限制无法直接观察真实网络时&#xff0c;创建逼真的社交网络就显得尤为重要。这些生成的网络对于在这些情况下准确建模互动和预测结果至关重要…
阅读更多...
相机光学（三十七）——自动对焦原理

相机光学（三十七）——自动对焦原理

1.自动对焦的三种方式 目前在手机上采用的自动对焦系统包括反差对焦、相位对焦和激光对焦三种方案&#xff0c;下面我们来看一下它们的工作原理和相互之间的区别是什么。 1.1反差对焦【CDAF】- Contrast Detection Auto Focus 反差对焦是目前普及率最高、使用最广泛、成本相对…
阅读更多...
透视表支持自定义聚合公式，新增字体管理功能，DataEase开源BI工具v2.10 LTS版本发布

透视表支持自定义聚合公式，新增字体管理功能，DataEase开源BI工具v2.10 LTS版本发布

2024年9月9日&#xff0c;人人可用的开源BI工具DataEase正式发布v2.10 LTS&#xff08;Long Term Support&#xff09;版本。DataEase开源项目组将对v2.10 LTS版本提供长期支持&#xff0c;定期迭代发布小版本&#xff0c;持续进行问题修复更新并针对部分功能进行优化。欢迎广大…
阅读更多...
谋算中的因果与归纳不同于计算中的因果与归纳

谋算中的因果与归纳不同于计算中的因果与归纳

谋算中的因果与归纳不同于计算中的因果与归纳。计算中的因果与归纳是基于已有的数据和信息&#xff0c;通过数学运算和逻辑推理得出结论。而谋算中的因果与归纳则是基于对未来的预测和判断&#xff0c;通过分析和推理得出结论。因此&#xff0c;谋算中的因果与归纳需要更多的主…
阅读更多...
rsync+inotify 实现数据实时同步

rsync+inotify 实现数据实时同步

Rsync&#xff08;远程同步&#xff0c;Remote Sync&#xff09;是一款开源的、快速的、多功能的、可实现全量及增量的本地或远程数据同步备份的优秀工具&#xff0c;并且可以不进行改变原有数据的属性信息,实现数据的备份迁移特性。Rsync软件适用于unix/linux/windows等多种操…
阅读更多...
铭顺元宇宙时代到来，数字人应用案例分享

铭顺元宇宙时代到来，数字人应用案例分享

近年来&#xff0c;随着技术的不断发展&#xff0c;数字人的功能和表现力也在不断提升&#xff0c;形形色色的虚拟数字人正代替真人&#xff0c;扮演着代言人、主播、客服和智能助理的角色&#xff0c;涉及文旅、电商、金融等多个行业。作为随着AI技术在数字人产业中的发展&…
阅读更多...
＜数据集＞二维码识别数据集＜目标检测＞

＜数据集＞二维码识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1601张 标注数量(xml文件个数)&#xff1a;1601 标注数量(txt文件个数)&#xff1a;1601 标注类别数&#xff1a;1 标注类别名称&#xff1a;[QR] 序号类别名称图片数框数1QR16016286 使用标注工具&#xff1a;l…
阅读更多...
供方软件供应链安全保障要求及开源场景对照自评表（上）

供方软件供应链安全保障要求及开源场景对照自评表（上）

国标《信息安全技术 软件供应链安全要求》确立了软件供应链安全目标&#xff0c;规定了软件供应链安全风险管理要求和供需双方的组织管理和供应活动管理安全要求。 开源软件供应链作为软件供应链的一种特殊形式&#xff0c;该国标亦适用于指导开源软件供应链中的供需双方开展组…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站