昨天我们在《使用HTML添加表格3(间距与颜色)——零基础自学网页制作》(目录在结尾)中学习了设置单元格以及其中内容的空间间距和背景颜色。
其中添加列向单元格背景颜色只需要修改对应的<tr>标签中的style属性,而修改行向标签需要修改不同<tr></tr>标签中的<td>标签的style属性,这样操作起来就非常的麻烦,那有没有简便的修改行向单元格背景颜色的方法呢?
当然有!
开发团队给出了<colgroup><col></col></colgroup>这样的组合来解决这个问题,下面让我们详细学习。
<colgroup></colgroup>标签是一个给行向单元格打组的标签,在页面中不会显示。
<col></col>标签是来具体设置行向单元格数量和颜色的标签。
示例代码如下:
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>
这段代码添加到"第一个页面.html"当中就可以,具体代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果如图:
因为第一列和最后一列只有一行所以,也都变红了。
其中span的数量代表行数。
如果把span等号后面的数改成2,因为表格只有两行,所以整个表格都红了。
表格嵌套
我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。
代码示例如下:我们把"一列一行"分割成列向两个单元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>
使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
这段代码替换文字"一列一行"即可。
页面效果如图所示:
留个思考题,大家可以思考一下行向分割单元格怎么写。
今天的内容结束了。
全部示例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一个网页</title>
</head>
<body>
<h1>第一个网页</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
学到这里,相信大家已经有独立读懂HTML代码说明的能力了,明天我会为大家讲解16进制颜色表示方法。之后会给大家推荐html代码参考手册的链接。如果您是零基础的话,学完16进制颜色表示方法后,基本上就可以无障碍的阅读html代码参考手册了,如果阅读起来还是有困难,请继续看后面我为大家讲解一些常用元素及属性的文章,已及html中特殊符号的输入方法,全部做完后再结束这套教程。
如果您有任何疑问或不解欢迎关注并私信我。
HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
一、项目背景】
createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。它基于容器进行展示,其中根容器是stage(舞台)对象。
今天教大家用EaselJs、TweenJs结合做一个颜色配对游戏。
【二、项目准备】
1、去下方网站:
http://www.createjs.cc/
然后下载EaselJs、TweenJs这两个模块。
2、软件:Dreamweaver
【三、项目目标】
随机产生4种颜色,让下方的色块通过鼠标移动,匹配上方的颜色框。如果上方颜色框与下方色块颜色相同。全部色块匹配完成则为成功。
【四、项目实现】
1、导入EaselJs、TweenJs模块。
<script src="js/easeljs-0.7.1.min.js"></script>
<script src="js/tweenjs-0.5.1.min.js"></script>
2、body 创建画布canvas 设置画布大小,画布添加描边 ,id属性。
<canvas id="canvas" width="600" height="400" style="border: black solid 1px"></canvas>
3、创建shapes.js文件。定义一个初始化init()方法 ,创建stage对象。
function init() {
stage = new createjs.Stage("canvas");
}
4、定义画图形方法buildShapes(),调用createjs.Shape()方法 用graphics绘制描边正方形。填充颜色。
function buildShapes() {
var colors = ['blue', 'red', 'green', 'yellow'];
var i, shape, slot;
for (i = 0; i < 4; i++) {
//slots 描边正方形
slot = new createjs.Shape();
slots.push(slot);
//shapes 正方形
shape = new createjs.Shape();
shape.graphics.beginFill(colors[i]);
shape.graphics.drawRect(0, 0, 100, 100);
shape.regX = shape.regY = 50;
shape.key = i;
shapes.push(shape);
}
}
5、设置正方形x,y的位置, for循环随机填充颜色,添加在stage上。
slot.graphics.beginStroke(colors[i]);
slot.graphics.beginFill(createjs.Graphics.getRGB(255, 255, 255, 1));
slot.graphics.drawRect(0, 0, 100, 100);
slot.regX = slot.regY = 50;
slot.key = i;
slot.y = 80;
slot.x = (i * 130) + 100;
stage.addChild(slot);
6、定义setShapes方法,for循环随机产生一个r值,添加到shapes。产生移动的正方形。添加到舞台(stages)上。
function setShapes() {
var i, r, shape;
var l = shapes.length;
for (i = 0; i < l; i++) {
r = Math.floor(Math.random() * shapes.length);
shape = shapes[r];
shape.homeY = 320;
shape.homeX = (i * 130) + 100;
shape.y = shape.homeY;
shape.x = shape.homeX;
stage.addChild(shape);
shapes.splice(r, 1);
}
}
7、添加鼠标事件。控制正方形移动。
shape.addEventListener("mousedown", startDrag);
8、定义开始游戏方法startGame,设置游戏的帧数,添加监听事件。
function startGame() {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function (e) {
stage.update();
});
}
9、判断游戏方法startDrag(e)
1)获取当前鼠标的坐标。
var shape = e.target;
2)让鼠标的坐标等于填充正方形的坐标。
stage.addEventListener('stagemousemove', function (e) {
shape.x = e.stageX;
shape.y = e.stageY;
});
3)hitTest方法。测试图像是否与颜色相同的框有交集,判断颜色是否相同。
if (slot.hitTest(pt.x, pt.y)) {
shape.removeEventListener("mousedown",startDrag);
score++;
createjs.Tween.get(shape).to({x:slot.x, y:slot.y}, 200, createjs.Ease.quadOut).call(checkGame);
console.log('h');
}
else {
}
4)TweenJs设置动画效果。
createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200, createjs.Ease.quadOut);
10、定义赢的方法checkGame ,用score分别代表四种颜色色块,判断score的值。
function checkGame(){
if(score == 4){
alert('You Win!');
}
}
11、在init()中,调用方法,实现效果
buildShapes();
setShapes();
startGame();
【五、效果展示】
1、f12运行到chrome浏览器。
2、拖动随机颜色块,匹配颜色框。
3、四个颜色块匹配完成 弹框 (胜利)!!
【六、总结】
1、本文主要介绍了createjs中EaselJs、TweenJs的用法,以及对stage是如何创建的,在stage上怎么去绘制图形。在页面上如何去呈现stage。
2、就本项目中的难点,重点,提供了详细的讲解和提供有效的解决方案。
3、大家可以尝试了解createjs的其他模块,官网上有对应的API文档供大家学习。
4、按照操作步骤,自己尝试去做。自己实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
5、需要本文源码的小伙伴,后台回复“颜色配对”四个字,即可获取。
****看完本文有收获?请转发分享给更多的人****
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
lt;marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=left></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间
<!>字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
<!>区断标记
<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中
<!>连结格式
<base href=位址>(预设好连结路径)
<a href=位址></a>外部连结
<a href=位址 target=_blank></a>外部连结(另开新视窗)
<a href=位址 target=_top></a>外部连结(全视窗连结)
<a href=位址 target=页框名></a>外部连结(在指定页框连结)
<!>贴图/音乐
<img src=图片位址>贴图
<img src=图片位址 width=180>设定图片宽度
<img src=图片位址 height=30>设定图片高度
<img src=图片位址 alt=提示文字>设定图片提示文字
<img src=图片位址 border=1>设定图片边框
<bgsound src=MID音乐档位址>背景音乐设定
<!>表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
<!>分割视窗
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<! - - ... - -> 注解
<a href target> 指定超连结的分割视窗
<a href=#锚的名称> 指定锚名称的超连结
<a href> 指定超连结
<a name=锚的名称> 被连结点的名称
<address>....</address> 用来显示电子邮箱地址
<b> 粗体字
<base target> 指定超连结的分割视窗
<basefont size> 更改预设字形大小
<bgsound src> 加入背景音乐
<big> 显示大字体
<blink> 闪烁的文字
<body text link vlink> 设定文字颜色
<body> 显示本文
<br> 换行
<caption align> 设定表格标题位置
<caption>...</caption> 为表格加上标题
<center> 向中对齐
<cite>...<cite> 用於引经据典的文字
<code>...</code> 用於列出一段程式码
<comment>...</comment> 加上注解
<dd> 设定定义列表的项目解说
<dfn>...</dfn> 显示"定义"文字
<dir>...</dir> 列表文字标签
<dl>...</dl> 设定定义列表的标签
<dt> 设定定义列表的项目
<em> 强调之用
<font face> 任意指定所用的字形
<font face> 任意指定所用的字形
<font size> 设定字体大小
<form action> 设定户动式表单的处理方式
<form method> 设定户动式表单之资料传送方式
<frame marginheight> 设定视窗的上下边界
<frame marginwidth> 设定视窗的左右边界
<frame name> 为分割视窗命名
<frame noresize> 锁住分割视窗的大小
<frame scrolling> 设定分割视窗的卷轴
<frame src> 将html档加入视窗
<frameset cols> 将视窗分割成左右的子视窗
<frameset rows> 将视窗分割成上下的子视窗
<frameset>...</frameset> 划分分割视窗
<h1>~<h6> 设定文字大小
<head> 标示文件资讯
<hr> 加上分格线
<html> 文件的开始与结束
<i> 斜体字
<img align> 调整图形影像的位置
<img alt> 为你的图形影像加注
<img dynsrc loop> 加入影片
<img height width> 插入图片并预设图形大小
<img hspace> 插入图片并预设图形的左右边界
<img lowsrc> 预载图片功能
<img src border> 设定图片边界
<img src> 插入图片
<img vspace> 插入图片并预设图形的上下边界
<input type name value> 在表单中加入输入栏位
<isindex> 定义查询用表单
<kbd>...</kbd> 表示使用者输入文字
<li type>...</li> 列表的项目 ( 可指定符号 )
<marquee> 跑马灯效果
<menu>...</menu> 条列文字标签
<meta name="refresh" content url> 自动更新文件内容
<multiple> 可同时选择多项的列表栏
<noframe> 定义不出现分割视窗的文字
<ol>...</ol> 有序号的列表
<option> 定义表单中列表栏的项目
<p align> 设定对齐方向
<p> 分段
<person>...</person> 显示人名
<pre> 使用原有排列
<samp>...</samp> 用於引用字
<select>...</select> 在表单中定义列表栏
<small> 显示小字体
<strike> 文字加横线
<strong> 用於加强语气
<sub> 下标字
<sup> 上标字
<table border=n> 调整表格的宽线高度
<table cellpadding> 调整资料栏位之边界
<table cellspacing> 调整表格线的宽度
<table height> 调整表格的高度
<table width> 调整表格的宽度
<table>...</table> 产生表格的标签
<td align> 调整表格栏位之左右对齐
<td bgcolor> 设定表格栏位之背景颜色
<td colspan rowspan> 表格栏位的合并
<td nowrap> 设定表格栏位不换行
<td valign> 调整表格栏位之上下对齐
<td width> 调整表格栏位宽度
<td>...</td> 定义表格的资料栏位
<textarea name rows cols> 表单中加入多少列的文字输入栏
<textarea wrap> 决定文字输入栏是自动否换行
<th>...</th> 定义表格的标头栏位
<title> 文件标题
<tr>...</tr> 定义表格美一行
<tt> 打字机字体
<u> 文字加底线
<ul type>...</ul> 无序号的列表 ( 可指定符号 )
<var>...</var> 用於显示变数
*请认真填写需求信息,我们会在24小时内与您取得联系。