目录
2019-02-20_194727.png
一、课程目标
通过HTML、CSS技术，实现QQ音乐页面设计、美化、导航功能，让学生体会到软件开发的功能实现以及乐趣价值所在。
2019-02-20_195351.png
二、课程概要
2019-02-20_195543.png
- 开发环境
1.操作系统：Windows操作系统
2.屏幕分辨率：1440*900
3.开发工具：Sublime Text3、HBuilder、记事本等
4.浏览器：Chrome等现代浏览器
三、实现步骤
- 实现页面骨架
HTML骨架
HTML骨架效果图.png
- HTM L概述
- 超文本标记语言（Hyper Text Markup Language）
- 包含标记的文本文件
- 以htm或者html为扩展名
- 通过浏览器解析标记来显示页面
- 简单文本编辑器即可，记事本、Sublime等
- 淘宝，京东等都是网页
- 标记
- HTML文档是由HTML标记及内容组成的文本文件
HTML标记的组成
①通常成对出现，在开始标记和结束之间的文本是内容
②大小写无关，<b>和<B>表示的意思是一样的
2019-02-20_202808.png
- HTM L骨架
- HTML页面基本构成
- HTML文件通常由文档头、正文两部分构成；在外层以<html>······</html>标识为Html文件
使用Sublime编写一个最基本的HTML页面
2019-02-21_081407.png
<img>标记的作用和使用
2019-02-21_094021.png
<video>标记的作用和使用
2019-02-21_094223.png
<a>标记的作用和使用
2019-02-21_094336.png
2019-02-21_094434.png
- 完成页面美化
页面美化（CSS样式）
2019-02-21_094719.png
- CSS概述
1.CSS-级联样式表单(Cascading Style Sheet)，网页表现与内容分离的一种样式设计语言。
2.对WEB页面进行外观控制的机制
3.将页面的内容和表现分离CSS样式使用方式:
1.通过外部样式文件对页面进行控制
2.外部的样式文件通过HTML的link元素连接到HTML文档中
2019-02-21_122544.png
CSS基本语法
选择符 {属性1:属性值1;属性2:属性值2;....}
① 选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用
② 属性：样式的关键字
③ 属性值：描述样式的值；
④ 格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔
2019-02-21_123352.png
- 选择符分类
① 普通选择符
② 类选择符
③ id选择符完成案例的CSS样式
2019-02-21_123732.png
CSS样式效果
2019-02-21_123918.png
页面导航(DIV布局)—效果图
2019-02-21_124125.png
DIV布局
- DIV概述
① 放置内容的容器
② 用于大面积，大区域的块状排版
③ div本身与样式没有任何关系
④ 样式需要编写CSS来实现案例的DIV划分
2019-02-21_125536.png
2019-02-21_125630.png
导航栏的实现
2019-02-21_125810.png
2019-02-21_125827.png
页面主体的实现
① 每个<div class=“images”>中放4张图片链接。
② 使用换行标记调整元素间距。
2019-02-21_130129.png
四、总结延伸
2019-02-21_130346.png
- 案例的延伸----斗鱼网
2019-02-21_130521.png
- 案例的延伸----熊猫TV
2019-02-21_130541.png
- 附录1：浮动布局
使用浮动调整导航条的图标位置
给左边和右边的图标分别加上不同的class
2019-02-21_131043.png
设置两种class的浮动属性
2019-02-21_131131.png
- 附录2：盒子模型
使用盒子模型调整图标的间距
盒模型
① 将所有元素都放置在一个盒子中，然后通过对这个盒子的外观控制来实现整个页面的外观控制
② 一个盒模型包括4个区
—> 内容（content）
—> 内边距（padding）
—> 边框（border）
—> 外边距（margin）
2019-02-21_131432.png
2019-02-21_131512.png
网友评论