摘要：
猫眼电影 实现目标 实现代码 <!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial 阅读全文
摘要：
雪碧图与渐变 1. 雪碧图 解决图片闪烁的问题： 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片 这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图 雪碧 阅读全文
摘要：
背景 1. PS 的基本设置 工欲善其事，必先利其器 在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置 这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置 左侧工具栏 调成 2 列，更方便使用 右侧工具栏 不需要的视图统统关掉 修改单位为像素 由于一般默认的 阅读全文
摘要：
整体效果 实施目标 效果 代码 <!DOCTYPE html> <html lang=""> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia 阅读全文
摘要：
字体 1. 字体相关的样式 我们前面讲过字体的两个属性 color用来设置字体颜色 font-size字体的大小 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size 当然，字体的属性并不止这些 2. font-family font-family 字体族（字体 阅读全文
摘要：
定位的简介 需求分析 按照我们之前所学知识，可以怎么实现呢？ 应该来说不难，很容易实现 .box2 { width: 200px; height: 200px; background-color: yellow; /* 左外边距、上外边距 */ margin-left: 200px; margin- 阅读全文
摘要：
## referrer 图片引用保护协议,关闭它服务器端可显示网页图片 <meta name="referrer" content="never"> ## float(大局用浮动，细节微调用定位) 文字并不能随盒子的交叠而交叠，它始终显示在盒子不交叠的部分。 如果一个盒子设置了float那么文字就不 阅读全文
摘要： 
解决高度塌陷和外边距重叠（父随子margin-”仅限上下“移动）问题，after（完美解决float中的高度塌陷问题），befor（完美解决外边距重叠问题）。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
} 阅读全文
解决高度塌陷和外边距重叠（父随子margin-”仅限上下“移动）问题，after（完美解决float中的高度塌陷问题），befor（完美解决外边距重叠问题）。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
} 阅读全文
摘要：
浮动 1. 浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档 阅读全文
摘要：
盒模型补充 1. 盒子大小（box-size) 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing用来设置盒子尺寸的计算方式（设置 width 和 height 的作用） .box { width: 200px; height: 200px; background-co 阅读全文