摘要:
一、概念 ①em大小是基于父元素的字体大小 ②rem是相对单位,r是root的意思,在html页面上就是html标签,所以rem的大小是基于html元素的字体大小 二、rem适配 ①使用flex的伸缩布局、使用百分比的流式布局、使用媒体查询的响应式布局,共同点就是元素只能做宽度的适配(图片除外) ② 阅读全文
摘要:
一、思路 ①less无法在浏览器中直接使用,浏览器不能识别 ②通过less解析插件less.js(JavaScript插件)可以把less文件解析成css代码(下载地址) 二、具体应用 ①less.js 插件的原理是使用Ajax,所以需要以HTTP协议打开文件,而不是使用文件协议 file://(这 阅读全文
摘要:
一、注释 ①工具:利用VS code的插件easyless,实时预览 ②行注释不会编译,块注释可以编译 ③最好在文件的开头加上@charset 'UTF-8'; 防止出现编码问题 二、变量 ①LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单 ②定义变量必须使用@ 阅读全文
摘要:
一、less环境安装 ①首先需要在电脑上安装nodejs,一般会内置npm,利用以下命令可以检测: ②利用npm在线安装less,运行 npm install –g less ③查看是否安装成功,Lessc –v 查看版本 二、less简介 ①CSS(层叠样式表)是一门历史悠久的标记性语言,同 HT 阅读全文
摘要:
一、轮播图组件模板(官方文档) 二、分析轮播图组件结构 ①carousel 轮播图的模块, slide是否加上滑动效果,data-ride="carousel" 初始化轮播图属性 ②data-target="#carousel-example-generic" 控制目标轮播图,data-slide- 阅读全文
摘要:
一、导航条模板(官方文档) 二、分析导航条模板结构 ①navbar导航模块 ,类navbar-default 表示默认样式(灰白),还可以是navbar-inverse(反色,黑白),两种主题 ②container-fluid 表示的是导航的内容容器是流式布局,如果设置成container就是响应式 阅读全文
摘要:
一、概念: ①Bootstrap包括了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动扩展到最多12列 ②栅格系统其实就是行和列的布局,网格状布局,通过一系列的行(row)与列(column)创建页面布局,你的内容就可以放入创建好的布局中。 二、行 阅读全文
摘要:
一、概述 ①当下最流行的前端UI框架(有预制界面组件),组件简洁大方,代码规范精简,界面自定义性强,可以有效提高web开发效率 ②有自己的生态圈,不断的更新迭代。提供了一套简洁、直观、强悍的组件。标准化的html+css编码规范。让开发更简单,提高了开发的效率。 ③虽然界面组件样式已经定义好了,但是 阅读全文
摘要:
一、响应式开发 ①在移动互联日益成熟的时候,我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 ②通常的做法是针对移动端单独做一套特定的版本,但是如果终端越来越多那么你需要开发的版本就会越来越多(大屏移动设备普及) ③这时候就出现了响应式开发,简而言之,就是一个网站能够兼容多个终端 ④现在的移 阅读全文
摘要:
一、文字环绕效果:使用浮动 二、两栏自适应 ①上面的例子里,如果把文字放进另外一个div盒子里,效果不变 ②然后对右边的div盒子加上overflow:hidden属性,出现了变化(触发了bfc) ③把右边盒子的文字去掉,加上一些样式 ④这样就可以做出移动端的一个两栏自适应的布局:左栏固定不变,右栏 阅读全文