html5练习

最新推荐文章于 2021-09-25 14:56:19 发布
最新推荐文章于 2021-09-25 14:56:19 发布
阅读量1k 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： html5 font-face css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ztt_1119/article/details/42430281
版权

点击下载


下面是示例效果：


    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Festival of Ornament</title>
<style type="text/css">
@font-face {
 font-family: BorderWeb;
 src:url(fonts/Aldo_Open.otf);
}
@font-face {
 font-family: Runic;
 src:url(fonts/3Dumb.ttf);
}
@font-face {
 font-family: Kingston;
 src:url(fonts/Aldo_Open.otf);
}
*{background:#FFF}
.king { FONT-SIZE: 45pt; FONT-FAMILY: "Kingston" }
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.border2 { FONT-SIZE: 35px; COLOR:black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
.locale { FONT-SIZE: 40px; COLOR: black; FONT-FAMILY: "Runic" }
.bullet { FONT-SIZE: 50px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.corner { FONT-SIZE: 70px; COLOR: black; FONT-FAMILY: "BorderWeb" }
a { FONT-SIZE: 10px; COLOR: black; FONT-FAMILY: Verdana; TEXT-DECORATION: none }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
	<tbody>
		<tr>
			<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
			<td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
		</tr>
		<tr>
			<td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">A</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">a</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">B</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">b</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">C</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">c</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">d</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">D</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">e</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">E</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">f</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">F</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">G</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">g</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">H</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">h</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">I</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">i</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">j</span></td>
			<td align="middle" bgcolor="khaki"><span class="king">J</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">k</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">K</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">l</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">L</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">M</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">m</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">N</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">n</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">O</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">o</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td align="middle" bgcolor="black" height="70"><span class="border2">8<br />7</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">p</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">P</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">q</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">Q</span></td>
			<td valign="bottom" align="middle" bgcolor="olive"><span class="king">r</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="king">R</span></td>
			<td align="middle" bgcolor="khaki"><span class="border">7<br />8</span></td>
			<td align="middle" bgcolor="black"><span class="border2">8<br />7</span></td>
		</tr>
		<tr>
			<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">5</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki" height="35"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="khaki"><span class="border">78</span></td>
			<td valign="bottom" align="middle" bgcolor="olive" colspan="2" rowspan="2"><span class="corner">6</span></td>
		</tr>
		<tr>
			<td valign="bottom" align="middle" bgcolor="black" height="35"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
			<td valign="bottom" align="middle" bgcolor="black"><span class="border2">87</span></td>
		</tr>
		<tr>
			<td height="15"></td>
		</tr>
		<tr>
			<td valign="top" colspan="10">
				<div class="event" align="center">FESTIVAL OF ORNAMENT</div>
				<div class="locale" align="center">UNIVERSITY OF CARDIFF <span class="bullet">4</span> JUNE 16 – 28</div>
			</td>
		</tr>
	</tbody>
</table>
</body>
</html>



清月晨光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5：HTML5练习
02-16
HTML5 HTML5练习
HTML5旋转 放大 综合练习
qq_39923392的博客
11-04 329
第一周周考模拟<style> /*这是写的一些样式*/ body{ margin: auto; background-image: url(img/qweqeqeq.jpg); } #bg{ margin: auto;
HTML5练习 - 表单练习
有时四月会降雪的博客
02-29 929
HTML5 练习题 - 表单练习 效果展示 HTML <form> <fieldset> <!-- caption --> <legend>学生档案</legend> <!-- userName --> <label for="userNam...
html5入门练习（一）
syl011002的博客
09-25 530
表单练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl.
html5基础练习作品集
02-19
一些简单的HTML5的网页设计，有些比较欠缺代码，有些比较完整，dell的那个页面比较有参考意义
html5 练习代码
04-23
html5 练习代码 入门学习使用 简单实用
简单html5练习.zip
07-22
初学html5
HTML5练习.rar
11-07
HTML5练习.rar
HM16:html5练习作业
04-08
HM16HTML5动手分配wk06练习结果摘要：通过听这堂课，我学习了很多东西，例如制作桌子，动画，转换成各种形式等，为此我很兴奋地添加了自己的圣诞树和根据我将其发送给我，我将进行练习并为下一次作业做准备。
html5字体练习
01-05
本案例是关于css3中@font-face的练习，可正常运行，提供了三种字体，可供学习使用。
自己的html5 css3练习（新手）
10-31
自己的html5 css3练习 对于新手来说的有参考价值，老手勿下，内容页还是比较丰富。
动画H5
adminFanj的博客
10-08 484
html> html> head lang="en"> meta charset="UTF-8"> title>Titletitle> style> span.change:hover{ color: red; font-size:50px ; } a.change:hover
html5新功能练习
tianxieliuhong的博客
11-26 295
1.Canvas
HTML5练习4
weixin_30537451的博客
05-27 195
1、菜单条 主要代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .a1 { background-color:#F00; width:100px; ...
HTML5 练习网站
weixin_30701521的博客
07-29 302
http://codepen.io/picks/3/ 转载于:https://www.cnblogs.com/facial/p/5717317.html
【html5每日练习】 html5 canvas "米"
boia
04-09 1271
上一篇画了一条斜线，估计大家画了线以后都在想着如何去画网上面内些奇妙的动画，你一定会想:内些效果是怎么画出来的呢。但是我在这里告诉一下大家，心急吃不了热豆腐，每个人都是从基础一步步走过来的，从不懂到精通是需要一个漫长的步骤的，你越急，学的速度反而会很慢，所以这一篇还是画线有关的，有多条线画出一个“米字”，如果你对上一篇的JS代码已经懂得画，你可以不要看我的代码，自己写出来，先贴效图 代码不一
HTML5-SVG练习
xionghui2007的博客
01-14 703
今天练习了多个SVG绘制图形模型 截图： 代码： HTML5-SVG练习 //SVG 指可伸缩矢量图形 (Scalable Vector Graphics) //SVG 用于定义用于网络的基于矢量的图形 //SVG 使用 XML 格式定义图形 //SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 //SVG 是万维网联盟的标准 //与其
HTML5 Canvas基础练习
Elliotbaird的博客
05-04 778
使用HTML5中的canvas来创建图形，创建矩形，渐变，图像裁剪，阴影：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Canvas绘图</title> </head> <body> <canvas id="canvas" width="800" he
HTML5练习，实现图片在两DIV中相互拖放效果
oxgos的博客
03-09 1366
08_HTML5中的拖放效果   div { width:300px; height:300px; border:1px solid black; } #d1 { float:left; } #d2 { float:right; }           /* * 使用HTML5中的拖放API实现拖放功能 * * 源元素事件 - drags
html 练习题和答案
最新发布
07-07
HTML 练习题和答案 1. 编写一个 HTML 文件，并在其中添加一个段落标签（），在段落中写下你的姓名和年龄。 答案： ```html <html> 练习题 我的姓名是张三，年龄是20岁。 </html> ``` 2. 创建一个 HTML ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值