11 2019 档案
摘要：响应式开发 1. 响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的 | 设备划分 | 尺寸区间 | | | | | 超小屏幕（手机） | =768px~=992px~=1200px | 2. 响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实
阅读全文
摘要：rem布局 1. 技术选型 方案：采取单独制作移动页面方案 技术：布局采取rem适配布局（less rem+媒体查询） 设计图纸：750px尺寸 2. 相关文件夹结构 3. 设置视口标签以及引入初始化央视 ~~~html ~~~ 4. 设置公共的common.less文件 设置好最常见的屏幕尺寸，利
阅读全文
摘要：移动端rem适应布局 1. rem rem（root em）是一个相对单位，类似于em，em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 比如，根元素（html）设置font size=12px；非根元素设置width：2rem；则换成px表示24px 2. 媒体查询 使
阅读全文
摘要：flex布局开发 1. 布局原理 flex时flexible Box的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都可以定位flex布局 【注意】 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical align属性将失效 伸缩布局=弹性布局=
阅读全文
摘要：移动端流失布局 1. 移动端调试方法 Chrome Devtools（谷歌浏览器）的模拟手机调试 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器 使用外网服务器，直接ip或域名访问 2. 视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理
阅读全文
摘要：网站的favicon图标 favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。 制作favicon图标 把图片转换为png图片 把png图片转换为ico图标，这需要借助第三方转换网站，例如比特虫：http：//www.bitbug.net/ favicon图标放到网站
阅读全文
摘要：CSS3的新特性 1. 新增CSS3特性有兼容性问题，ie9+才支持 2. 移动端支持优于PC端 3. 新增选择器和盒子模型以及其他特性 4. CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者id选择器 | 选择符 | 简介 | | | | | E[
阅读全文
摘要：html5新特性 【注意】这些新特性都有兼容性的问题，基本是IE9+以上版本的浏览器才支持，如果不考兼容性问题，可以大量使用这些新特性 1. html5新增的语义话标签 :头部标签 导航栏标签 内容标签 定义文档某个区域 侧边栏标签 尾部标签 【注意】 这种语义化标准主要是针对搜索引擎的 这些新标签
阅读全文
摘要：CSS用户界面样式 1. 鼠标样式currsor ~~~ li{ cursor：pointer； } ~~~ 设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状 | 属性值 | 描述 | | | | | default | 默认 | | pointer | 小手 | | move | 移动
阅读全文
摘要：精灵图 1. 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术 2. 精灵图（sprites）的使用 精灵技术主要针对背景图片。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为sprites精灵图或者雪碧图 移动背景图片位置，使用back
阅读全文
摘要：元素的显示与隐藏 1. 本质：让一个元素在页面中隐藏或显示出来 2. display：显示隐藏 用于设置一个元素应如何显示 display：none；隐藏对象 display：block；隐藏对象 【注意】 display隐藏元素后，不在占有原来的位置 3. visibility：显示隐藏 visi
阅读全文
摘要：定位 1. 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置 2. 定位模式 定位模式决定了元素的定位方式，它通过css的position属性来设置，其值可以分为四个： | 值 |
阅读全文
摘要：浏览器执行JS 1. 浏览器分成两部分：渲染引擎和JS引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit JS引擎：俗称JS解析器。用来读取网页中的JS代码，对其处理后运行，比如chrome浏览器的V8 【注意】 浏览器本身并不会执行JS代码
阅读全文
摘要：CSS浮动 1. 传统网页布局的三种方式 网页布局的本质——用来CSS来摆放盒子。把盒子摆放在相应的位置 CSS提供了三种传统的布局方式： 普通流（标准流） 所谓的标准流，就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、fo
阅读全文
摘要：圆角边框 1. border radius属性用于设置元素的外边框圆角 ~~~ border radius:length; ~~~ radius半径（圆半径）原理：圆与边框的交际形成圆角效果。 圆的做法 首先，做一个正方形的div 其次，让border radius的值等于div宽度的一般，或者等于
阅读全文
摘要：文字折叠效果 1. 效果展示 2. 实现过程 ~~~html H e l l o W o r l d ~~~ 填充内容 CSS布局 ~~~css { margin：0px； padding：0px; } body{ background color:aquamarine; width:100%; h
阅读全文
摘要：盒子模型 1. 页面布局的三大核心，盒子模型，浮动和定位 2. 网页布局过程 先准备好相关网页元素，网页元素基本都是盒子Box 利用CSS设置好盒子样式，然后放到相应位置 往盒子里面装内容 3. 盒子模型的组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的
阅读全文
摘要：CSS的三大特性 1. 层叠性 相同的选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突样式。层叠性主要解决样式冲突问题 层叠性原则 样式冲突，遵循的原则是就近原则，哪个样式里结构近，就执行那个样式 样式不冲突，不会层叠 2. 继承性 CSS中的继承性：子标签会继承父标签的某些样式，如文
阅读全文
摘要：css背景 1. 背景颜色 banckground clor属性定义元素的背景颜色 ~~~ background color：颜色值； ~~~ 一般情况下元素的背景颜色默认值是transparent（透明的） 2. 背景图片 background image属性描述了元素的背景图像。实际开发常见于L
阅读全文
摘要：CSS的元素显示模式 1. 什么是元素显示模式 作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素（标签）以什么样的方式进行显示，比如 自己独占一行，比如一行可以放多个 HTML元素一般分为块元素和行内元素两种类型 2. 块元素
阅读全文
摘要：CSS复合选择器 1. 后代选择器 后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代 ~~~ 元素1 元素2 {样式声明} ~~~ 【注意】 元素1 和元素2 中间用空格隔开 元素1
阅读全文
摘要：Emmet语法 1. Emmet语法前身是Zen coding，他使用缩写来提高html、cssde编写速度 2. 快速生成HTML结构语法 生成标签：直接输入标签名，按tab键 如果想要生成多个相同的标签，加上“ ”就可以了，比如 div\ 3 tab，就可以快速生成3个div标签 如果父子级关系
阅读全文
浙公网安备 33010602011771号