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仔细阅读下，里面详细说明了许多不怎么被注意的

一、前言

近期用户提了个需求，需要打印一个文档，要求其中部分页横向排版部分页面纵向排版，这个在之前的通用打印导出pdf类中是不具备的，通用的打印导出pdf只能统一设置一个排版方式，要么横向要么纵向，而如果要指定某一页横向还是纵向，需要单独的处理。为什么之前设计的类不支持单独指定页面，主要是为了方便用户使用，并不需要复杂的设置，而且面对的应用场景都是统一的日志类、信息类，这些数据基本上要么统一是横向要么统一是纵向排版，不需要精确到某一页什么排版，而且传入数据内容集合以后是自动分页处理的，也无法动态切换排版方式。一般是特殊的报表内容才可能需要指定页不同的排版方式，比如医疗上面用的报表，个人信息纵向排版，体检信息中的心电图横向排版看到更清晰。