摘要： “工欲善其事，必先利其器” Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试。我们现在只是使用html和css，我们先讲一下现在常用的调试。 2.1 怎样打开Chrome的开发者工具？ 直接在页面上点击右键，然后选择 “检查” 快捷键 F12 或者 ctrl 阅读全文

摘要： 为了提高网页制作的效率，布局时通常有以下的布局流程，具体如下： 1、必须确定页面的 版心（可视区） ， 我们测量可得知。【 公共类样式 】 2、分析页面中的 行模块 ，以及每个行模块中的 列模块 。其实页面布局，就是一行行罗列而成。 3、制作 HTML结构 。我们还是遵循，先有结构，后有样式的原则， 阅读全文

摘要： 建议遵循以下顺序： 1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 2. 自身属性：width / height / margin / padding / bo 阅读全文

摘要： 常见的图片格式 PS切图 可以 分为 利用切片工具切图 以及 利用PS的插件快速切图。 1). PS切片工具 ps切图片，分两大步： 1). 用切片选中图片 利用切片工具手动划出 图层菜单 新建基于图层的切片 利用辅助线 来切图 基于参考线的切片 2). 导出切片 文件菜单 存储为web设备所用格式 阅读全文

摘要： 浮动： 1、浮动的元素脱标。如果一个元素浮动了，那么，（1）将能够【无缝】并排了；（2）并且能够设置宽高了，无论它原来是个div还是个span，浮动即脱离标准流，inline、block是在标准流里用的。 2、浮动的元素互相贴靠。左浮动就会贴左边，右浮动贴右边，贴上一个兄弟元素的边。 3、浮动的元素 阅读全文

摘要： 开始就形成良好的书写规范，是你专业的开始。 空格规范 【强制】 选择器 与 { 之间必须包含空格。 示例： ~~~css .selector { } ~~~ 【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 示例： ~~~css font size: 12px 阅读全文

摘要： 语法: box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 前两个属性是必须写的，其余的可以省略。 h-shadow：值为正数时，阴影往右移动，反之，往左移动。 v-shadow：值为正数时，阴影往下移动，反之，往上移动。 blur：值0，就是纯 阅读全文

摘要： 语法： 其中每一个值可以为 数值或 百分比 的形式。 技巧： 让一个正方形 变成圆圈 ~~~ border radius: 50%; ~~~ 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用 用 高度的一半就好了。精确单位。 阅读全文

摘要： 盒子模型（CSS重点） css三大重点： css 盒子模型 、 浮动 、 定位 主题思路： 1.看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 看透网页布局的本质： 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 最后把网页元素放入盒子里 阅读全文

摘要： CSS注释规则： 例如： 阅读全文

摘要： 选择器相同，则执行层叠性 【权重相同，就根据就近原则】 选择器不同，就会出现优先级的问题。 如果选中了，那么以公式来计权重，谁大听谁的。 如果没选中，那么权重是0，因为继承的权重为0。 目标： 理解 能说出css样式冲突采取的原则 能说出那些常见的样式会有继承 应用 能写出CSS优先级的算法 能会计 阅读全文

摘要： 目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性，给页面元素添加背景样式 能设置不同的背景图片位置 【插入图片，不用设置img元素的父元素、自身元素大小，即可见，但是背景图要设置元素的宽高才可见。】 4.1 背景颜色(color) 语法： 4.2 背景图片(image 阅读全文

摘要： 目标 理解 能说出 行高 和 高度 三种关系 能简单理解为什么行高等于高度单行文字会垂直居中 应用 使用行高实现单行文字垂直居中 能会测量行高 3.1 行高测量 行高的测量方法： 3.2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度 阅读全文

摘要： 目标： 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式 什么是标签的显示模式？ 标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个 作用： 我们网页的标签非常多，再不同地方会 阅读全文

摘要： 重点： 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器 阅读全文

摘要： Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。 1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 2. 如果想要生成多个相同标签 加上 就可以了 比如 div 3 就可以快速生成3个div 3. 如果有父子级关系的标签 阅读全文

摘要： 此工具是我们的必备工具，以后代码出了问题 我们首先第一反应就是： “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。 菜单： 右击网页空白出 检查 通过开发人员工具小指针工具，查找页面元素 左侧是html页面结构，右侧是css样式 小技巧： 1. ctrl+滚轮 可以 放大开发者工 阅读全文

摘要： CSS字体样式属性、调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 font size:大小 作用： font size属性用于设置字号 ~~~css p { font 阅读全文

摘要： 1. CSS选择器作用（重点） 要把小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 选择器的作用 ​ 找到特定的HTML页面元素 一句话说出他们： ※※※※ CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来 必须记住的 css 就是 分两件事， 选对人， 做 阅读全文

摘要： typora copy images to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只 阅读全文