响应式Web开发项目化教程（HTML5+CSS3） 课件 项目9 制作个人信息页面

项目9制作个人信息页面·制作个人信息页面·栅格系统·弹性盒布局学习目标掌握了解理解了解利用栅格系统进行响应式设计。1掌握弹性盒布局的各个属性用法，能使用弹性布局进行页面设计。2理解弹性盒布局在响应式设计中的应用，能够通过弹性布局来制作响应式网站。3目录9.1项目描述9.2前导知识9.3项目分析9.4项目实践9.5项目总结9.1项目描述本书在前面的单元中讲解了通过百分比布局加上媒体查询等方式来进行屏幕适配，这其实是一种响应式设计，遵循响应式设计的原则意味着你的网站并非固定为单一尺寸，不管采用什么类型的设备，页面都会做出响应并正确调整尺寸，确保一切看起来美观又清晰。因此，响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。本章利用栅格系统和弹性盒布局实现了一个个人信息页面的响应式设计。9.1项目描述个人信息网页大屏幕效果图9.1项目描述个人信息网页中等屏幕效果图9.1项目描述个人信息网页小屏幕效果图栅格系统9.2.1什么是栅格系统？9.2前导知识栅格系统9.2.1什么是栅格系统？9.2前导知识响应式可以响应的前提有两点：页面布局具有规律性；元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的。之前我们知道，要让网站根据浏览器的大小来改变页面元素的大小，就不能将列宽设为固定的像素，而是应当使用百分比来确定列的宽度。栅格系统中有一些动态调整的纵列，当窗口变小时，它们将自动顺延到下一行。栅格系统9.2.19.2前导知识【例9-1】例9-1演示了栅格系统在响应式设计中的应用，当屏幕宽度大于500px的时候，导航、文章和侧边栏排成一行，当屏幕宽度缩小至500px以内时候，它们自动顺延到下一行。弹性盒布局9.2.29.2前导知识什么是弹性盒布局？弹性盒布局9.2.29.2前导知识2009年，W3C提出了一种新的方案——Flex布局，可以简便、完整、响应式地实现各种页面布局。Flex是FlexibleBox的缩写，意为"弹性盒布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，目前，它已经得到了所有浏览器的支持，这意味着，Flex布局将成为未来布局的首选方案。弹性盒布局9.2.29.2前导知识flexbox是一整个模块，并非单一的一个属性，它涉及的东西比较多，包括一系列属性。其中一些属性是用在容器（父元素，即容器）上的其他一些属性则是用在子元素（项目）上的flexcontainerflexitem弹性盒布局9.2.29.2前导知识1.display属性2.felx-flow属性3.justify-content属性4.align-item属性5.order属性6.flex属性7.align-self属性弹性盒布局9.2.29.2前导知识display属性用来定义flex容器，容器是行内元素或者块元素取决于给定的值。为了创建flex容器，我们把一个容器的display属性值改为flex

或者

inline-flex。使用方式如下：display属性.container{ display:flex;/*或者inline-flex*/}弹性盒布局9.2.29.2前导知识【例9-2】例9-2中，第10行display:flex;设置container为flex布局，第21行margin:auto;让item水平垂直都居中弹性盒布局9.2.29.2前导知识felx-flow属性是flex-direction和flex-wrap这两个属性的简写。flex-direction属性决定item的排列方向flex-wrap决定了item单行还是多行排列弹性盒布局9.2.29.2前导知识flex-direction属性.container{display:flex;flex-direction:row|row-reverse|column|column-reverse;}弹性盒布局9.2.29.2前导知识flex-wrap属性.container{display:flex;flex-wrap:nowrap|wrap|wrap-reverse;}弹性盒布局9.2.29.2前导知识flex-flow属性.container{display:flex;flex-flow:<flex-direction>||<flex-wrap>;}felx-flow属性是flex-direction和flex-wrap这两个属性的简写。弹性盒布局9.2.29.2前导知识【例9-3】在例9-3中增加了item的宽度，由于flex-wrap的默认值是nowrap，子元素会进行缩放以适应容器，所以在第13行调整flex-wrap的值为wrap之后，会让每个item多行排列。弹性盒布局9.2.29.2前导知识justify-content属性.container{ justify-content:flex-start|flex-end|center|space-between|space-around;}justify-content属性定义了项目在主轴上的对齐方式，也就是说，浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。弹性盒布局9.2.29.2前导知识【例9-4】例9-4是一个响应式的导航条，在浏览器宽度在800px以上的大屏幕时候，导航条靠右对齐，所以在第15行设置justify-content:flex-end;导航条在中等大小的屏幕上居中显示弹性盒布局9.2.29.2前导知识align-items属性.container{ align-items:flex-start|flex-end|center|baseline|stretch;}align-items属性定义项目在交叉轴上如何对齐。align-items属性将所有直接子节点上的align-self值设置为一个组，align-self属性设置项目在其包含块中在垂直方向上的对齐方式。弹性盒布局9.2.29.2前导知识【例9-5】在例9-5中，第12-13行的justify-content和align-items属性设置了子元素水平和垂直方向的排列方式弹性盒布局9.2.29.2前导知识order属性.item{ order:<integer>;}默认情况下，弹性布局中，子元素按照文档流出现的先后顺序排列。order属性可以控制在伸缩容器内的显示顺序。order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。弹性盒布局9.2.29.2前导知识【例9-6】例9-6实现了一种常用的页面布局，当大屏幕的媒体查询时，重新设置导航、文章和侧边栏、页脚的order属性值大小，重排侧边栏和文章的顺序弹性盒布局9.2.29.2前导知识flex属性.item{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}flex属性是flex-grow,flex-shrink

和flex-basis的简写，默认值为01auto。后两个属性可选，该属性有两个快捷值：auto(11auto)和none(00auto)。弹性盒布局9.2.29.2前导知识flex-grow属性如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。.item{ flex-grow:<number>;/*default0*/}弹性盒布局9.2.29.2前导知识flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。.item{ flex-shrink:<number>;/*default1*/}弹性盒布局9.2.29.2前导知识flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值，则项目将占据固定空间。.item{ flex-basis:<length>;|auto;/*defaultauto*/}弹性盒布局9.2.29.2前导知识【例9-7】例9-7实现了另一种常用的页面布局，当大屏幕的媒体查询时，重新设置侧边栏1、文章、侧边栏2、页脚的order属性值大小，重排项目顺序，本例中用到了flex属性来分配项目大小弹性盒布局9.2.29.2前导知识align-self属性.item{ align-self:auto|flex-start|flex-end|center|baseline|stretch;}align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。页面结构分析9.3.19.3项目分析个人信息页面结构图样式分析9.3.29.3项目分析1.整个section在页面中应该设置为100%，并加上视口meta_viewport。2.使用弹性盒对页面进行布局，设置容器row的布局为flex，分别对应项目#aside1、#aside2、#aside3作为该容器的三个子元素。3.初始状态可以从小屏幕开始，#aside1、#aside2、#aside3都是flex：1100%，三个项目垂直排列。当屏幕放大到中等屏幕时，设置媒体查询，让#aside1在第一行，#aside2和#aside3在第二行排列。当屏幕放大到大屏幕时，设置媒体查询，让三个aside在一行排列。样式分析9.3.29.3项目分析4．在每个aside内部还可以使用flex布局，比如第一个aside里div.contact的每个item又可以设置成flex进行横向布局。5.#aside2部分表单里面加上非空校验和邮箱格式校验。6.给#aside3部分的ul设置点击样式修改。制作页面结构9.4.19.4项目实践学习完前面的内容，下面来动手实践一下