TodoList前导课结构篇前端监控作业(上) | 青训营笔记

北方小学生
265 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天，今天主要记录的内容是完成前端项目-TodoList需要掌握的开发小技巧,算是一个小小的前导课，希望大家读了本文有所收获，可以独立开发Todolist小程序.

一、涉及到的知识点

HTML基本标签使用

CSS基本属性使用

JavaScript基本语法

二、学完后的收获

Html框架搭建

@media screen自适应框架

一键到顶部锚链接（平滑）

JavaScript浏览器缓冲技术

JavaScript中json与对象转换

三、实战环节

html标签的认识

介绍: 以下标签均成对呈现.

  1. header标签
  2. section标签
  3. footer标签
  4. div标签
  5. label标签
  6. input标签
  7. h2标签
  8. ol&&标签
  9. a超文本标签

解释：

  1. header标签、section标签、footer标签：上述标签都是HTML5新增的标签，基本用法更div类似,但是更具有语义性，将一个页面分为了头部、主体、脚部以及文章部分...html5新增的还有nav、article、aside标签都是语意化标签.
  2. div：div是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。我们使用div可以划分区域设计布局，是很好的占位符.
  3. label：顾名思义标签就是提示用户该块区域的内容，类似与QQ登录页面的账号密码提示快.
  4. input：是输入框、文本框、密码框、单选框、复选框...配合form表单使用.
  5. h2标签：是标题从h1-h6分别从小到大作为封装好的样式供开发主使用.
  6. ol|ul标签：ol是有序列表，ul为无序列表.
  7. a标签：超文本链接可以实现一个网页跳转到另一个网页.

案例展示：

@media screen自适应框架

通过media screen可以不需要其他框架直接进行自适应网站搭建，里面有俩个参数大家熟悉一下就可以进行自适应开发了.max-width: px和min-width: px最大和最小宽度,通过判断最大最小宽度即可进行简单的自适应网站了. 比如:

<body>
    <div class="top">
        顶部
    </div>
</body>

<style>
       .top{
           height: 400px;
           width: 100%;
           background-color:red;
       }
       // 屏幕宽度大于600px我们让top的背景色为蓝色
       @media screen and (min-width:600px){ 
           .top{
               background-color: blue;
           }               
       }
       // 屏幕宽度小于480px我们让top的背景色为绿色
       @media screen and (max-width:480px) {
           .top{
               background-color: green;
           }               
       }
</style>

宽度375px小于480px所以top背景色为绿色 image.png 宽度912px大于600px所以top背景色为蓝色

image.png 大家可以通过@media screen 配合max-width和min-width搭建自己的自适应网站了.

一键到顶部锚链接（平滑）

通常电商网站社区网站只要文章篇幅过大，就会有一键跳转到顶部的功能，一般想要实现该功能可以使用锚链接和js代码实现，但是JavaScript代码量大写起来又费劲，还容易写错，所以我们使用锚链接写，代码简单，最重要的是核心代码只有1行,没错一行代码不单实现了该功能并且效果还很平滑.

核心代码：scroll-behavior: smooth; 普通锚链接可以跳转到最上方却不可以实现平滑滚动如图:

锚链接.gif 可以看到普通的锚链接不能达到平滑的效果; 下面看案例展示; 平滑锚链接.gif 这是使用了核心代的锚链接可以看到滑动变得平稳了许多.

<body>
    <div class="con">
        <div id="top">top</div>
        <div id="o">2</div>
        <div id="w">3</div>
        <a href="#top">top</a>
    </div>
</body>


    <style>
        html,body   {   
            scroll-behavior: smooth;
            height: 2000px;
        }
        #top{
            height: 600px;
            background-color: #aaa;
        }
        #o{
            height: 600px;
            background-color:crimson;
        }
        #w{
            height: 900px;
            background-color:antiquewhite;        }
    </style>

注意：一定要把核心代码写到正确的位置，一定是使用锚链接的父级元素加核心代码.

扩展:大项目三可以使用锚链接实现文章定位功能，抛砖引玉，思路类似.

四、参考文献

菜鸟教程、csdn博客

五、总结

通过html标签的介绍和css部分有趣代码的引入，相信大家已经可以熟悉使用该前端2剑客了，今天主要讲了css的自适应屏幕和一键平滑锚链接，进一步学习就是明天的JavaScript内容了.今天的代码一定要敲一遍才能加强吸收.. 结尾:剩下JavaScript部分我会在明天按时发出来，今天属实累了，这么晚跪着写了一份笔记,身体原因见谅.今天把html和css解释完毕，明天的内容更精彩.

avatar
文章
阅读
粉丝