2017.9.21 HTML学习总结---多媒体播放系统设计
1.题目:整个页面被划分三个子窗口,上面窗口为页面功能提示区,
下左部分为不同类型播放的功能选项,下右部分为播放系统显示播放信息窗口.
(1)网页设计框架:
<html><head><title>多媒体播放系统</title></head><frameset rows="80",*"><frame src="ch02_top.html"name="top" scorlling="no"><frameset cols="140,*"><frame src="ch02_7_left.html" name="left" scorlling="no"><frame src="ch02_7_right.html" name="right" scorlling="no"></frameset></frameset> </html>
(2)最上方的显示标题
<html><head><title>页面标题</title> </head> <body> <center><h1>多媒体播放系统</h1></center></body></html>
(3)左边的显示操作菜单
<html><head><titile>菜单页面</title> </head><body><br><br><br><br><p><a href="imgTag.html" target="right">图象显示</a></p><p><a href="viwTag.html" target="right">视频播放</a></p> <p><a href="soundTag.html" target="right">音乐播放</a></p> </body> </html>
(4)右边显示标题
<html> <head><title>信息显示页面</title></head> <body background=“imge/2.jpg”></body></html>
(5)图像显示页面
<html><head><title>插入图象</title></head> <body> 小鸭!<img src="data:image/xy.git" alt="小鸭" width="200" height="100"align="left"> </body> </html>
(6)音乐播放界面
<html> <head><title>音乐无限</title></head> <body><br> <br> <h2 align="center">笔记</h2> <img align=“left” src="data:image/周笔畅.jpg" width="200" height="200" alt="歌手.周笔畅"> <bgsound src="data:image/笔记.mp3" loop="1"> </body></html>
(7)视频播放页面
<html><head><title>插入视频</title></head> <body> backkom熊<br><br> <img dynsrc="data:image/Backkom.wvm" loop="3"> </body></html>
2.CSS样式表的定义与使用
2.1 CSS由三个基本部分----对象,属性,值组成。在这其中“对象”是最重要的有个专门的名称-------选择器
它的基本语法是:selector{属性:属性值;属性:属性值.........}
说明:样式表的定义实际就是定义CSS选择器,由于CSS选择器有3种类型,决定其值定义方式也是有三种
·css的选择器分为以下三种:
(1)标记选择器:通过HTML标签定义选择器
基本语法:引用样式的对象{标签属性:属性值;标签属性:属性值........}
例如:
/*在<h1></h1>和<h2></h2>标签内的文本居中显示,并采用蓝色字体的样式表*/h1,h2{text-align:center;color:blue;} //定义标记h1,h2的选择器
<h1>中国</h1> //使用选择器,在页面中以标题1的字体居中、蓝色字体显示
<h2>北京天安门</h2> 使用选择器,在页面中以标题2的字体居中、蓝色字体显示
(2)类别选择器:使用class定义选择器;
* 注明:若要为同一元素创建不同的样式或为不同元素创建相同的样式,可以使用css类选择器,css类有两种格式,定义时在各自类的名称前加一个点号。
例如:基本语法:标签名,类名{标签属性:属性值;标签属性:属性值;.....}
格式一:/*
两个不同的段落,若要使一个段落向右对齐,一个段落居中对齐,则先定义两个类别选择器
*/
p.center{text-align:center;}
p.right{text-align:right;}
然后在不同的段落里,只要在html标记里加入上面定义的类<p class="right">这个段落向右看齐</p><p class="center">这个段落居中看齐</p>
例如:.类名{标签属性:属性值;标签属性:属性值..........}
该格式的类使所有class属性值为该类名的标签都遵守该类所定义的样式.text{font-family:宋体;color:red} //定义类别选择器
<p class="text">段落文本</p> //p标记引用类别选择器text
<h1 class="text">标题文本</h1> //h1标记引用类别选择器text
该定义功能:在pp标签对上分别使用text类使标签对中的文本字体为宋体,颜色为红色
(3)ID选择器:使用id定义选择器;
·属性是希望要设置的属性,并且每个属性都有一个值,属性和值被冒号分开,属性之间用分号间隔,并有花括号包括
基本语法:#id 名称{标签属性:属性值;标签属性:属性值......}
例如:
注意:使用该样式表时,需要将该样式的网页内容前加一个id=“id名称”。#sample{font-family:宋体;font-size:60pt} //首先定义id选择器
<p id=sample>段落标记文本</p> //使用id选择器,使标签内的文本以sample样式显示
2.2 样式表的使用
在HTML中使用css有四种方式:行内式、内嵌式、链接式、导入式。
(1)行内式:不需要定义选择器,利用style属性直接为元素设置样式,只对当前的标签起作用
例如:
<p style="color:#0000FF";font-size:20px;text-decoration:underline;>正文内容1</p>
(2)内嵌式:利用<style></style>标签对,将样式表定义在headhead标签对之间,内嵌式样表的作用范围是整个HTML文档;
例如:
<html><head><title>页面标题</title><style type="text/css">p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}.info{font-size:12px;color:red;}//定义两个选择器:标签选择器p和类选择器 </style></head><body><p>这是第一行内容......</p><p class="info">这是第二行正文内容......</p><!--使用选择器:第一行,标签选择器使用;第二行,类选择器使用 --></body>
</html>
转载于:https://www.cnblogs.com/qichunlin/p/7570102.html
2017.9.21 HTML学习总结---多媒体播放系统设计相关推荐
- 2017年6月份学习总结,读书《5个高效工作习惯,让你跟「瞎忙」划清界限》
2017年6份学习总结,创建日期:2017-07-03 20:46:25,有删减: 文章是这文:https://mp.weixin.qq.com/s/wzxNbPiy0-JCTBShlKwoaQ,以下 ...
- GSMA SGP.21协议学习
GSMA SGP.21协议学习 1简介 1.1概述 本文档提供了一种体系结构方法,作为所有市场中设备的远程SIM配置的建议解决方案.体系结构的主要目标是为设备的远程SIM配置提供必要的凭据以获取移动网 ...
- 飞桨PaddlePaddle-百度架构师手把手带你零基础实践深度学习——21日学习总结
飞桨PaddlePaddle-百度架构师手把手带你零基础实践深度学习--21日学习总结 写在前面的话 纯新手小白,第一次接触深度学习方面的应用.感谢飞桨提供的这次学习机会.之前有学习到深度学习的理论方 ...
- 【限时】21天学习挑战赛 - 经典算法
学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩:迟一天就多一天平庸的困扰.各位小伙伴,如果您: 想系统/深入学习某技术知识点- 一个人摸索学习很难坚持,想组团高效学习- 想写博客但无从下手,急 ...
- 古月ROS入门21讲学习笔记
古月ROS入门21讲学习笔记 1.VMware+Ubuntu18.04+ROS安装 2.Linux命令 3.ROS是什么 ROS中的通信机制 ROS的开发工具 ROS的应用功能 ROS中的生态系统 老 ...
- 古月居ROS入门21讲学习笔记P9
古月居ROS入门21讲学习笔记P9 工作空间(workspace) 创建工作空间 创建功能包 实操 创建工作空间 创建功能包 老师在B站的原视频 链接: [古月居]古月·ROS入门21讲 | 一学就会 ...
- ScalersTalk 机器学习小组第 21 周学习笔记(深度学习-10)
ScalersTalk 机器学习小组第 21 周学习笔记(深度学习-10) Scalers点评:机器学习小组是成长会的内部小组,这是成长会机器学习小组第21周学习笔记,也是深度学习第10次的复盘笔记 ...
- 3星|《财经天下周刊》2017年21期:海外购几乎是亚马逊中国的最后一根救命稻草...
财经天下周刊 双周刊 2017年21期 第一次看这份杂志.总体评价3星,有一些参考价值. 以下是本期一些内容的摘抄: 1:微软高层亲口宣布放弃WP系统,不过是为早就"脑死亡"的WP ...
- 回望2017,基于深度学习的NLP研究大盘点
回望2017,基于深度学习的NLP研究大盘点 雷锋网 百家号01-0110:31 雷锋网 AI 科技评论按:本文是一篇发布于 tryolabs 的文章,作者 Javier Couto 针对 2017 ...
最新文章
- MPB:中科院城环所杨军组-​​淡水浮游细菌群落采集、过滤与保存
- 开源中国 Maven 库
- SpringSecurity入门01(含源码)
- KVM — Overview
- MySQL使用命令备份和还原数据库
- 编码实现字符串转整型的函数(实现函数atoi的功能)
- 哔哩哔哩注册--表单练习
- python 素描化图像_python实现图片素描效果
- 【做题记录】统计区间(哈希/扫描线)
- 400 bad request的原因意思和解决方法
- 【Go语言】集合与文件操作
- warning C4251编译警告解决办法
- Silverlight for Windows Phone 7开发系列(1):环境搭建
- Oracle 使用 PL/SQL Developer 生成 AWR 报告
- 5G物理信道个数和调制方式
- 赛季更新服务器维修,12月30日第一赛季结束 夺神之权服务器停机维护公告
- 忆龙2009:梦幻魔方V1.2.1.1正式发布
- 华为云等保解决方案,全流程等保服务,帮助企业守护信息安全
- 【操作系统】CPU(处理器)调度
- python目标检测给图画框,bbox画到图上并保存