EstudosobreasboaspráticasdeCSS-SMACSSeMetodologiaBEM资源-CSDN文库

共15个文件

css：7个

json：2个

html：2个

element

需积分: 1 24 浏览量 2024-08-09 01:36:25 上传评论收藏 9KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

<!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>

评论收藏

内容反馈