• 第二阶段:移动web网页开发


    第二阶段:移动web网页开发

    H5C3的进阶

    VSCODE使用插件:

    image-20201226111552807

    字体大小调整: ctrl+ +或者 -

    image-20201226112758085

    H5新增标签

    image-20201226152605963

    image-20201226152811138

    音频标签

    image-20201226153002865

    image-20201226153051781

    image-20201226153218214

    视屏标签

    image-20201226153638901

    image-20201226153756806

    H5新增表input单类

    image-20201226154114563

    image-20201226154443196

    伪元素选择器

    image-20201226160803884

    flex伸缩布局

    meta视口标签

    image-20201226175217479

    1PX不是一物理像素,在PC端时 一物理像素等于 1pc

    移动端时 有标准制定: 比如ipho8 就是 1比2

    背景图片的大小

    image-20201226181008901

    image-20201226181112575

    让传统盒子变成 C3 的新盒子

    image-20201226205252088

    image-20201226205341618

    image-20201226205414749

    image-20201226205511746

    移动端的特殊样式

    image-20201226205643539

    移动端技术选型

    image-20201226205915305

    移动端常见布局

    流式布局(百分比布局)

    image-20201226210104602

    image-20201226210343289

    flex布局(重点)

    image-20201228201319009

    image-20201228201433752

    image-20201228202223745

    设置主轴

    image-20201228202239742

    image-20201228202315240

    justify-content设置主轴上子元素排列方式

    image-20201228202444093

    flex-wrap设置子元素是否换行

    image-20201228204812031

    image-20201228204751522

    align-items设置测轴上的子元素排列方式(单行)

    image-20201228205048769

    align-content 设置测轴上的子元素的排列方式(多行)

    image-20201228205804633

    image-20201228210231281

    复合属性 flex-flow

    image-20201228210552353

    子项常见素性

    image-20201228210724302

    image-20201228210847725

    image-20201228212133076

    image-20201228212313973

    第三种布局:rem适配布局(市场流行)

    rem单位

    image-20201230102332919

    image-20201230102643412

    媒体查询

    image-20201230103340376

    image-20201230102906121

    image-20201230102949773

    image-20201230103028803

    image-20201230103100000

    image-20201230103147882

    image-20201230103502150

    媒体查询+rem实现元素动态大小变化

    image-20201230104704654

    媒体查询中的引入资源

    image-20201230105210245

    image-20201230105428084

    image-20201230105545577

    less基础

    image-20201230111911506

    image-20201230111953059

    image-20201230112019650

    image-20201230112504905

    image-20201230112620292

    上面是less文件的示范内容

    image-20201230112838638

    image-20201230112854526

    image-20201230113323771

    image-20201230113343567

    image-20201230113454935

    less写伪类写伪元素的时候

    image-20201230113746741

    image-20201230113826671

    image-20201230153610230

    image-20201230161521057

    rem适配方案

    image-20201230154622967

    image-20201230182140843

    cssrem的默认大小是 1rem=16px,需要更改设置是这样然后cssroot就可以看见了

    image-20201230193940285

    移动web响应式布局(第四种布局)

    image-20201230194338500

    image-20201230194355986

    image-20201230194623332

    Bootstrap前端开发框架

    用这框架清除浮动,直接加类名:clearfix即可

    image-20201231154326670

    image-20201230195520224

    image-20201230202257303

    image-20201230202627344

    image-20201231101339407

    image-20201231102258700

    image-20201231102132920

    image-20201231102607842

    image-20201231104507819

    image-20201231104734601

    image-20201231105116268

    image-20201231105402301

    image-20201231105554365

    image-20201231110000004

    image-20201231110444172

  • 相关阅读:
    解决使用git出现 The file will have its original line endings in your working directory
    SpringBoot集成flowable碰见DMN不能初始化
    CF268D Wall Bars
    CF1327F AND Segments
    P2900 [USACO08MAR]Land Acquisition G
    CF279B Books
    CF859E Desk Disorder
    CF1147B Chladni Figure
    CF1147E Rainbow Coins
    P3565 [POI2014]HOT-Hotels
  • 原文地址:https://www.cnblogs.com/AFBF/p/14289830.html
Copyright © 2020-2023  润新知