一直有点模模糊糊的。为什么有的图片在不同屏幕下显示的效果不一样，有的清楚，有的模糊，有的大有的小

今天我要彻底给他搞明白

不牵扯太多的概念，主要是让自己理解

● 屏幕分辨率

简单理解，就是横着竖着能放多少像素点。

比如320 * 640 就是横着最多放320个点，竖着能放640个点。

本小节基本要求：

• 会使用webstorm开发工具
• 至少明白html与css的作用

要点：

1. <ul><li>首页</li><li>xxxx</li>.....</ul>标签的使用

CSS3 加入的 @media 媒体查询使得无需修改内容，便可使样式应用于某些特定的设备范围。媒体查询像是样式表的 if 语句，通过判断表达式的真假来执行特定的分支 （加载特定的样式）。

链接伪类选择器(重点)

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

一口气学会弹性盒子布局：纵向导航布局。

1. HUAWEI FreeClip 耳夹耳机。

2. 开始纵向导航布局，HTML 结构是外面一个大盒子，里面一个无序列表，看下效果。

3. 首先让列表固定宽高，并加一个背景颜色，看下效果。

4. 开始弹性布局，把列表变成弹性盒子，看下效果，这里的 LI 没宽度所以被压缩而不是溢出。

今天给大家带来的是一个正方形，从下往上的每个不规则的递增的效果。大家可以看一下右转圈，可以用在加载一些项目中，感觉这个反正是挺好看的，所以今天给大家拿出来看看。

选一选，看一下代码，我用的是开发工具是asperxp，用app的。

·首先定义了六块六个方块，虽然它在不停的动，但是可以明显可以看到是六块缩小、放大、缩小、放大一种效果。

·看一下css2，首先定义了一个整体的位置，然后进行了旋转和平移，把它变成了一个竖向。

十天学会html+css，第六天横向导航。

今天的学习目标是这部分横向导航菜单。

·找到中间盒子，在里面添加ul列表，结构跟昨天的纵向导航菜单一样。文本内容快速添加，看下效果。

·然后从外到内依次写css样式，ul的高度跟上一层一样，默认样式黑点去掉，看下效果。

·给 li添加左浮动，让它们从纵向排列变成横向排列。在给a标签写css样式之前，别忘了要添加这句代码。

前言

张鑫旭的《CSS世界》这本书，强烈推荐前端er仔细阅读下，里面详细说明了许多不怎么被注意的