<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMACSS</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="module.css">
<link rel="stylesheet" href="tema-a.css">
<link rel="stylesheet" href="tema-b.css">
</head>
<body class="tema-b">
<div id="header">
<div class="container">
<h1 class="title">
Nome do Site
</h1>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Produtos</a>
</li>
<li>
<a href="">Contato</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div class="accordion">
<header class="accordion-header">
Nome do accordion
</header>
<p class="accordion-content">
Conteudo
</p>
</div>
</div>
<footer>
<div class="container">
<div class="mensagem mensagem-is-error">
<h5 class="mensagem-titulo">Atenção</h5>
<p class="mensagem-conteudo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusamus velit iste delectus culpa ullam rem debitis quaerat illum, quidem consectetur alias quae architecto accusantium, deleniti repellat et autem saepe?
</p>
</div>
</div>
</footer>
<script>
const accordions = document.querySelectorAll('.accordion-header');
for (let i = 0; i < accordions.length; i++) {
accordions[i].addEventListener('click', function(evento) {
// JEITO FÁCIL
evento.target.parentNode.classList.toggle('accordion-is-open');
// JEITO DIFÍCIL
// if (evento.target.parentNode.classList.contains('accordion-is-open')) {
// evento.target.parentNode.classList.remove('accordion-is-open');
// } else {
// evento.target.parentNode.classList.add('accordion-is-open');
// }
})
}
</script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
Estudo sobre as boas práticas de CSS - SMACSS e Metodologia BEM
共15个文件
css:7个
json:2个
html:2个
需积分: 1 0 下载量 80 浏览量
2024-08-09
01:36:25
上传
评论
收藏 9KB ZIP 举报
温馨提示
Estudo sobre as boas práticas de CSS - SMACSS e Metodologia BEM (Block Element Modifier) - Cada arquivo CSS possui comentários com explic…
资源推荐
资源详情
资源评论
收起资源包目录
Boas_Praticas_De_CSS.zip (15个子文件)
Boas_Praticas_De_CSS-main
.gitattributes 66B
smacss
module.css 924B
layout.css 411B
tema-b.css 54B
index.html 2KB
base.css 331B
tema-a.css 271B
package.json 321B
package-lock.json 8KB
.gitignore 12B
bem
main.css 1KB
main.scss 298B
mainSass.css.map 147B
index.html 565B
mainSass.css 217B
共 15 条
- 1
资源评论
普通网友
- 粉丝: 3453
- 资源: 506
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 基于STM32F103的LED闪烁仿真-定时器中断方式
- 实验室预约管理+vue
- 基于Python和Echarts职位画像系统-用Scrapy抓取招聘数据使用Django+echarts完成数据可视化
- frpc-linux-amd64-v3.0
- NIST Supplemental Fingerprint Card Data (SFCD)数据集下载
- 进入PE系统查看IP脚本
- 基于Python和Echarts的职位画像系统源码+文档说明(期末大作业)
- 树莓派无人机飞控说明+pdf
- http(HyperText Transfer Protocol)需求详细介绍
- 基于Python和Echarts的职位画像系统源码+文档说明(毕业设计)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功