当前位置：首页 > news >正文

平顶山做网站推广关键词seo如何优化

news 2025/7/28 16:16:42

平顶山做网站推广,关键词seo如何优化,自己做网站用软件下载,怎么编网站文章目录前言Day 1 expanding-cardsDay 2 progress-steps 前言发现一个没有用前端框架的练手项目，很适合我这种纯后端开发夯实基础，内含50个mini project，学习一下，做做笔记。项目地址：https://github.com/bradtr…

文章目录

- 前言
- Day 1 expanding-cards
- Day 2 progress-steps

前言

发现一个没有用前端框架的练手项目，很适合我这种纯后端开发夯实基础，内含50个mini project，学习一下，做做笔记。

项目地址：https://github.com/bradtraversy/50projects50days

Day 1 expanding-cards

效果预览
Day1
核心代码：

<body><div class="container"><!--active 标识被点击的图片 --><div class="panel active" ></div><div class="panel" ></div><div class="panel" ></div><div class="panel" ></div><div class="panel" ></div></div><script src="script.js"></script></body>

// 为所有的 panel 注册点击事件
panels.forEach(panel => {panel.addEventListener('click', () => {// 清空所有 active 样式removeActiveClasses()// 激活被点击 panel 的 active样式panel.classList.add('active')})
})function removeActiveClasses() {panels.forEach(panel => {panel.classList.remove('active')})
}

知识点总结：

响应式布局 flex: 5;
操作 classList 可以动态修改节点的 class

Day 2 progress-steps

效果预览
在这里插入图片描述
核心代码：

function update() {// Day1 中的处理方式circles.forEach((circle, idx) => {if(idx < currentActive) {circle.classList.add('active')} else {circle.classList.remove('active')}})// 按钮的禁用控制if(currentActive === 1) {prev.disabled = true} else if(currentActive === circles.length) {next.disabled = true} else {prev.disabled = falsenext.disabled = false}
}