• l0_532029
    了解作者
  • 1.2MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 03:46
    上传日期
Frontend Mentor-常见问题手风琴卡解决方案 这是的一种解决方案。 目录 概述 挑战 用户应该能够: 根据组件的设备屏幕尺寸查看组件的最佳布局 查看页面上所有互动元素的悬停状态 单击问题时隐藏/显示问题的答案 截屏 链接 解决方案URL: 在此处添加解决方案URL 实时站点URL:在此处添加实时站点URL 我的过程 我首先通过使用媒体查询完成了桌面版本,然后开发了不带@media的移动版本。 内置 语义HTML5标记 CSS自定义属性 弹性盒 CSS网格 移动优先的工作流程 JavaScript 我学到的是 我已经学会了如何使用已学会制作手风琴的JS,并且对如何在未来的项目中使用JS有了一个了解。 acc [ i ] . addEventListener ( 'click' , function ( ) { . , . . } 持续发展 我想使用更多的JS制作动
coffee-oclock-master.zip
  • coffee-oclock-master
  • .gitignore
    8B
  • images
  • cafe-mocha.png
    20.9KB
  • americano.png
    285.6KB
  • coffee-granules-icon.png
    12.3KB
  • espresso.png
    49.1KB
  • espresso-machiato.png
    50.4KB
  • turkish-coffee.png
    218.1KB
  • mail-icon.png
    23.6KB
  • facebook-icon.png
    4.3KB
  • cafe-breve.png
    42.1KB
  • cappuccino.png
    33.9KB
  • marble-background.jpg
    69.4KB
  • latte.png
    43.1KB
  • ig-icon.png
    25.7KB
  • coffe-on-table.png
    43.6KB
  • script.js
    9.6KB
  • icon-style.css
    1.4KB
  • README.md
    1.8KB
  • style.css
    6.6KB
  • index.html
    5KB
  • design
  • 152079816_449988452719547_1264447448122171317_n.jpg
    87.9KB
  • coffe-website-design.jpg
    225.7KB
  • icon.js
    241B
内容介绍
# Frontend Mentor - FAQ accordion card solution This is a solution to the [FAQ accordion card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam). ## Table of contents - [Overview](#overview) - [The challenge](#the-challenge) - [Screenshot](#screenshot) - [Links](#links) - [My process](#my-process) - [Built with](#built-with) - [What I learned](#what-i-learned) - [Continued development](#continued-development) - [Author](#author) ## Overview ### The challenge Users should be able to: - View the optimal layout for the component depending on their device's screen size - See hover states for all interactive elements on the page - Hide/Show the answer to a question when the question is clicked ### Screenshot ![](C:\Users\CARLOS\Pictures\h\faq-accordion.jpg) ### Links - Solution URL: [Add solution URL here](https://www.frontendmentor.io/solutions/first-use-of-js-in-project-22wnyI3C6) - Live Site URL: [Add live site URL here](https://faq-card-accordion-main.vercel.app/) ## My process I have done the desktop version first by using media queries then I have developed the mobile version without @media. ### Built with - Semantic HTML5 markup - CSS custom properties - Flexbox - CSS Grid - Mobile-first workflow - JavaScript ### What I learned I have learnt how to used the JS I have learnt to make an accordion and i have got an idea of how to use js fr future projects. ```js acc[i].addEventListener('click',function(){.,..} ``` ### Continued development I would like to use more JS to make animations and 3D web graphics, and also learn how to close an open accordion when another accordion is oppened. ## Author - Frontend Mentor - [@Ayoub1dev](https://www.frontendmentor.io/profile/Ayoub1dev)
评论
    相关推荐
    • html css module
      html css module html css module html css module html css module html css module html css module html css module
    • html5 js css
      html5手册 js手册 css3.0手册
    • CSS3.0 HTML5
      CSS3 HTML5入门到精通 W3CSchool版 CSS3.0(腾讯ISD版) CSS3.0(飘零雾雨版).chm CSS3.0(腾讯ISD版).chm HTML5(W3CSchool版).chm
    • HtmlCss
      HtmlCss
    • HTML5 CSS DIV materials
      HTML5 CSS DIV materials
    • HTML5 CSS3
      WEB技术 HTML5 CSS3等 chm版
    • HTML-CSS
      DMM WEBCAMPツンテンツ【HTML / CSSを学ぼう】 DMM WEBCAMPの学习CSSンをンツHTML / CSSを学ぼうの研修论文です。 使い方 html / cssファイルのため,PCのブラウザで実行できます。 DMM WEBCAMP内容[学习HTML / ...
    • HtmlCss
      #HtmlCss HtmlCss HtmlCss
    • HTML5 css文档
      HTML5入门自学教程 CSS3.0参考手册
    • html5 css3
      这是由html5+css3制作的一个实例,包含三个页面,俩种风格,并且提供了四种按钮方案供大家选择。