第二阶段：移动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

posted @ 2021-01-17 19:24  啊方不方  阅读(115)  评论(0)  编辑  收藏  举报