10hours-10javascriptprojects

连更10天，每天1小时

我的仓库

课程主页

2022.9.15 倒数日

1. 资源：fonts 谷歌字体，可以直接用@import(url)导入；unsplash 图片网站
2. box-sizing :border-box， 再用margin来调整间距
3. flex 布局的应用，center用的比较多
4. CSS 利用不同的class名去单独设置某一属性。比如对于月日的div，分别用.big-text设置字体,.countdown-el设置位置等
5. 用rem设置字体大小可以保持统一

2022.9.15 歌词板

某元素，希望background-image背景图片是半透明的，但是元素里面的其他内容，例如文字，图标之类的还是不透明。

法1 梯度下降liner-gradient(color,color);

法2 cross-fade()

<image-combination> = cross-fade( <image>, <image>, <percentage> )

其中<percentage>指的是透明度，只会改变第2个图像的透明度，最终的效果是第1个图像完全不透明和第2个图像半透明叠加的效果。

2022.9.16 Quiz问答题

1. 利用js文件obj存储问答
2. 快捷键：ul>li*4>input:radio+label,生成四个单选选项

<ul>
    <li>
      <input type="radio" id="a" name="answers">
      <label id='a_text' for="a">answer1</label>
    </li>
    ...
 </ul>

4. border-radius,box-shadow
5. 为ul设置，list-style-type: none 设置li无样式
6. 资源：flat UI Colors
7. 指向按钮时指针改变cursor: pointer;

2022.9.16 Recipe App

1.开放Api：Public Api 2.

span{
    display: inline-block;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 75px;
}