• 【大二-紫牛系列-待删除】HTML5 响应式网页设计

  • 主讲人:刘锐坷

    章节数:8

    学习时长:32课时

    学习人数:18033

  • 评分:

    5.00

    (40人评分)

课程简介

随着互联网的发展,网页浏览不再局限于个人电脑中进行,还在其他终端设备上进行,如平板电脑、手机和大屏幕电脑等。因此,需要网页为响应式自适应设计不同设备的显示效果。HTML5+CSS3提供了很多的新特性来设计丰富多彩效果的自适应布局的网页。第 1章介绍了在网页布局中常用的 4 种布局结构,并介绍各种块布局结构的应用场所。第 2 章介绍了响应式布局、媒体查询、弹性布局以及多列布局。首先理解响应式布局的概念,介绍使用视口(Viewport)和媒体查询(Media Query)技术实现响应式布局的方法。第 3 章介绍了使用 CSS3 的新特性实现边框圆角和阴影,并且还介绍了图片边框和渐变背景,在渐变背景中介绍线性渐变和径向渐变,最后介绍背景图像的开始位置和裁剪媒体查询等图片样式属性的使用。第 4 章介绍了使用 CSS3 的新特性增强互动效果,包括过渡和动画的使用,CSS3 的变换属性,其中变换包含平移、缩放、旋转和倾斜;同时还介绍各种变换的语法和使用方式。第 5 章介绍了从零开始设计和实现商城首页页面。首先了解项目需求并规划项目总体结构,在通过分析 MGP 游戏商城首页,设计页面内容结构和实现初步原型结构,通过网页栅格布局设计,最后实现商城首页页面结构。第 6 章介绍了 CSS 样式命名规则,重点介绍了 BEM 命名规则,然后将分别介绍首页页眉的 Logo、导航栏和功能区分析和实现。第 7 章介绍了使用 CSS 样式设计首页广告栏,重点介绍 position 属性的应用,还介绍了通过 div-dl-dt-dd 布局块结构实现图文混排来设计首页热销优惠部分和首页头条新闻列表,使用 div-ul-li 布局块结构设计首页内容主导航栏。第8 章介绍了对页面优化适应手机、平板电脑和普通电脑显示的需求。

章节目录