单元9 使用 CSS3 定位布局页面_第1页
单元9 使用 CSS3 定位布局页面_第2页
单元9 使用 CSS3 定位布局页面_第3页
单元9 使用 CSS3 定位布局页面_第4页
单元9 使用 CSS3 定位布局页面_第5页
已阅读5页,还剩9页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

制作课程层叠角标01任务要求按照效果图在已有的HTML文件基础上,实现如下效果使用浮动将课程水平排列至一行设置三种右上角上层状态标志HOT、UPAGRADE、NEW,分别设置对应的样式效果使用绝对定位方式进行角标位置任务实施对已完成的页面内容进行备份并修改使用浮动将课程水平排列至一行使用::after选择器设定3种不同的角标的样式内容设定课程单元相对定位设定课程单元中的角标对应元素绝对定位,并设定偏移量,使角标定位在课程单元右上角绝对定位实现登录页面居中02任务要求使用绝对定位的方式实现登陆页面中的主要内容元素在页面水平居中且垂直居中任务实施将确定的表单内容区域进行绝对定位,但不设定相关四个方向上的偏移量设定。在为以绝对定位的元素设定四个方向的外边距为auto。这是在不使用js或flex弹性布局的时的一种绝对定位的特殊用法。固定定位置顶按钮03任务要求将已完成课程播放页面整理为一个页面class.html将指定按钮固定到页面右下方,距离右下角显示区域边缘附近。将通用头部内容区域通过粘性定位固定到页面顶部效果图任务实施将已完成的页面内容复制备份并修改制作锚点链接作为置顶按钮为header添加id属性,作为锚点目标将置顶按钮定位在窗口可视区域右下角粘性定位页面通用头部04任务要求将页面通用头部在任务9.3的基础上,实现header部分的粘性定位,定位于页面顶部。并滚动垂直滚动条验证效果是否正确。效果图任务实施将已完成的页面

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论