物料准备

标注图

如果有psd设计稿最好，但练习时通常是对着别人网站写的，可以用这个插件来获取尺寸：VisBug - Crx4Chrome插件下载

不建议直接调控制台看尺寸，因为直接就看到了dom结构和样式，不利于练习；最好是先自己实现，然后对比人家的，看看差异在哪儿，才能更好的提升

image-20220116163159539

获取图片资源

由于是别人的网站，需要下载

使用AIX智能下载器-crx插件，下载链接：AIX智能下载器

如果想要批量下载，浏览器配置中，下载选项设置下载地址和取消询问

不过建议，用到哪个就选哪个下载

image-20220116170248209

记得把该页面所有的内容滚动看一下，先缓存一下，如下：

image-20220116164808039

image-20220116164952810

获取视频资源

图标

  • 使用阿里图标库，注重图标素材积累

  • 在线引入

    1
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3144739_ot22wco7hul.css">

  • 图标找和案例类似的即可，最后案例结束，图标以本地形式引入

取色工具

使用edge浏览器自带的CSS概述，但复制不了

image-20220116172943395

下载TakeColor取色工具，Alt + C保存一组色值

有些元素如果hover的时候，发生了改变，先截图即可，截图工具推荐Snipaste

image-20220116174823205

也可以下载插件：FeHelper - Awesome (baidufe.com)

css代码组织规范

组织CSS - 学习 Web 开发 | MDN (mozilla.org)

vscode插件

字体及图标

  • 字体

    • googlez字体（国内不行）
    • 离线字体

  • 图标

    • cdn.js上搜索fontawesome

拿到设计稿

静态页面

  • 布局分析
    • 分析某个页面的盒子构成，选择合适的布局（要求：了解盒子模型）
      • 看超大、大、中、小、超小屏幕下页面布局变化，使用原子类样式的方式（bootstrap），构思代码结构（要求：理解bootsrap栅格原理）
        • 策略：从超大屏幕的pc端开始布局，最后根据实际需求，再修改小、超小屏幕布局
    • 分析隐藏的结构，保证良好的代码结构