版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《Web应用技术》物联网Web应用技术项目三CSS样式任务三空气质量监测界面样式CSS基本样式CSS定位方式CSS盒子模型回顾1.网页如何根据设备的大小自动调整内容？2.网页可视区域宽度如何设置?任务引入任务描述:空气质量监测界面样式的设计与程序编写任务教学目标：理解响应式的设计原理；理解网页的可视区域；掌握响应式网格视图。任务概要教学内容认识响应式设计网页的可视区域CSS网络视图空气质量监测界面设计一二三四认识响应式设计知识点一响应式设计响应式Web设计让网页能在所有设备上友好显示。响应式Web设计只使用HTML和CSS，它不是一个程序或Javascript脚本。（一）优化用户体验友好的用户体验是网页可以在任何设备上展示和操作，设备包括桌面系统设备，平板电脑，iPhone等手机等。网页应该根据设备的大小自动调整内容。网页的可视区域知识点二响应式设计viewport是用户网页的可视区域。viewport翻译为中文可以叫做“视区”。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。（一）设置Viewport一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下：<metaname="viewport"content="width=device-width,initial-scale=1.0">}viewportmeta属性：width，控制viewport的大小，指定的一个值，如600特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）；Height，和width相对应，指定高度；initial-scale，初始缩放比例，也即是当页面第一次load的时候缩放比例；maximum-scale，允许用户缩放到的最大比例；minimum-scale，允许用户缩放到的最小比例；user-scalable，用户是否可以手动缩放。CSS网格视图知识点三CSS网格视图很多网页都是基于网格设计的，这说明网页是按列来布局的。CSS网格视图响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。（一）创建响应式网格视图创建一个响应式网格视图，首先确保所有的HTML元素都有box-sizing属性且设置为border-box；确保边距和边框包含在元素的宽度和高度间：*{box-sizing:border-box;}（二）简单的响应式网页实例<!DOCTYPEhtml><html><head> ......<style>
*{
box-sizing:border-box;
}
.header{
......
}
.menu{
......
}
.main{
......
}</style></head><body><divclass="header">
<h1>Chania</h1></div><divclass="menu">
<ul>
<li>TheFlight</li>
</ul></div><divclass="main">
<h1>TheCity</h1></div></body></html>包含两列（二）简单的响应式网页实例.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;}[class*="col-"]{float:left;padding:15px;border:1pxsolidred;}12列的网格系统可以更好的控制响应式网页。计算每列的百分比：100%/12列=8.33%。在每列中指定class，class="col-"用于定义每列有几个span：所有的列向左浮动，间距（padding）为15px<divclass="row"><divclass="col-3">...</div><divclass="col-9">...</div></div>每一行使用<div>包裹。所有列数加起来应为12空气质量监测界面设计知识点四（一）设计空气质量监测界面CSS样式/*选择全部元素*/*{ box-sizing:border-box;/*响应式网格视图*/ padding:0; margin:0;}1.设置全部元素CSS样式（一）设计空气质量监测界面CSS样式.row{ width:500px; height:200px; margin:40pxauto; padding:15px; text-align:center; background-color:#FFDAB9; color:#808080;}2.设置网格视图row样式设置row样式参数宽度500，高度200；外边距，上下边距为40，左右边距为浏览器边距；内边距为15；文本居中显示；背景颜色为#FFDAB9；文本颜色为#808080。。（二）设计温湿度环境监测界面CSS样式.header{ background-color:#87CEEB; color:#ffffff; padding:15px;}3.设置header样式设置header样式参数背景颜色为#87CEEB；文本颜色为#ffffff；内边距为15。（二）添加空气质量监测页面内容<head>
<!--设置可视区域--> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metacharset="utf-8"> <title>空气质量监测</title> <linkrel="stylesheet"href="../css/style.css"/></head>1.在head中设置可视区域、引入css文件（三）添加空气质量监测页面内容<body><divclass="header"> <h2>PM2.5监测</h2></div><divclass="row"><div> <p>PM2.5:<strong>20</strong>μg/m³<p> <p>空气质量:<strong>优</strong></p> <p>当前时间:<strong>12:33</strong></p></div></div> </body>添加“header”二级标题“PM2.5监测”；添加row内容：段落内容：PM2.5：20μg/m³空气质量：优当前时间：12:332.在body中添加空气质量监测页面内容（三）添加空气质量监测页面内容3.运行效果（三）添加空气质量监测页面内容3.运行效果如何设置可视区域"viewport"？如何设置网格视图的宽度？思考问题本任务学习了CSS响应式设计。包括如下内容：1.认识响应式设计；2.网页的可视区域；3.CSS网格视图。任务小结1.
个人介绍HTML页面.
页面标题:xxx自我介绍
页面内容：
使用di
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 考研数学试题及答案分析
- 2025年智能穿戴健康数据技术验证方案
- 2026年咳喘相关测试题及答案
- 2026年blili测试题及答案
- 2026年造价工程专项测试题及答案
- 2026年动作描写测试题及答案
- 2026年甘肃中考物理测试题及答案
- 2026年接地系统检测试题及答案
- 2026年执法能力测试题目及答案
- 2026年均衡教育测试题及答案
- 10KV高压配电设备预防性试验安全措施培训
- 骨科疼痛患者的疼痛护理人文关怀
- 2026年北京市房山区六级数学下册期末考试试卷及答案
- 2025年北京市初二地生会考真题试卷(+答案)
- 社保待遇追缴工作方案
- 雨课堂学堂在线学堂云《兽医外科学与手术学（扬州）》单元测试考核答案
- 2026黑龙江省机场管理集团招聘笔试参考题库及答案解析
- 物理 第九章 浮力课件2025-2026学年沪科版八年级物理全册
- 2026贵州高速公路集团秋招面笔试题及答案
- 药物不良反应的实时监测与预警：临床用药安全
- 公共卫生委员会培训课件
评论
0/150
提交评论