Web前端应用开发技术 课件 06 消防控制界面CSS设计.pptxVIP

Internet+ Education Solutions第二章 CSS开发基础任务6 消防控制界面CSS设计目录ContentsCSS响应式设计网格视图媒体查询响应式图片Education SolutionsInternet+任务目标通过CSS设计消防控制响应式界面15:34 /CSS响应式设计响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。可以让一个网站兼容多个终端，而不是为每个终端做一个特定的版本。15:34 /CSS响应式设计响应式Web 设计– Viewport设置Viewport一个常用的针对移动网页优化过的页面的viewport meta 标签大致如下：meta name=viewport content=width=device-width, initial-scale=1.0width：控制viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的CSS 的像素）。height：和width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放。15:34 /网格视图很多网页都是基于网格设计的，这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。（12列，宽度100%）15:34 /网格视图创建一个响应式网格视图。* {box-sizing: border-box;} 首先确保所有的HTML 元素都有box-sizing 属性且设置为border-box。确保边距和边框包含在元素的宽度和高度间。12 列的网格系统可以更好的控制响应式网页。首先可以计算每列的百分比: 100% / 12 列= 8.33%。在每列中指定class， class=“col-” 用于定义每列有几个span 。15:34 /网格视图本例演示响应式页面设计25%75%15:34 /响应式图片width 属性width 属性设置为 100%，图片会根据上下范围实现响应式功能：img {width: 100%;height: auto;}注意：图片会比它的原始图片大。max-width 属性max-width 属性设置为 100%, 图片永远不会大于其原始大小：img {max-width: 100%;height: auto;}15:34 /响应式图片background-size 属性设置为 contain背景图片将按比例自适应内容区域。图片保持其比例不变background-size 属性设置为 100% 100%背景图片将延展覆盖整个区域background-size 属性设置为 cover背景图像被扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此背景图像的某些部分无法显示在背景定位区域中。15:34 /界面设计HTML文档创建1网页可视区域设置2内容根据浏览器视口的高度和宽度变化3风扇加入animation动画，并匀速循环播放415:34 /网页可视区域设置 width：控制viewport 的大小，可以指定的一个值，如device- width 为设备的宽度（单位为缩放为 100% 时的CSS 的像素）。 initial-scale：初始缩放比例，也即是当页面第一次load 的时候缩放比例。 meta name=viewport content=width=device- width, initial-scale=1.015:34 /响应式设计内容根据浏览器视口的高度和宽度变化/*响应式单位：vw和vh，根据浏览器视口的高度和宽度变化*/.container{ position: relative; float:left; width:30vw; height:40vh; margin:20px; padding:10px;text-align: center; color:#fff;border-radius: 5px;}15:34 /风扇设置风扇加入animation动画，并匀速循环播放/*风扇加入animation动画，并匀速循环播放*/#fanContainer img{-webkit-animation: rotate linear 3s infinite;animation: rotate linear 3s infinite;}15:34 /任务调试chrome浏览