【小白学前端】化腐朽为神奇-HTML+CSS3实现电影票（day01-3）

最新推荐文章于 2024-02-28 08:08:50 发布

长安紫薯

最新推荐文章于 2024-02-28 08:08:50 发布

阅读量1.3k

点赞数 1

分类专栏： front-end 大前端文章标签： html css css3

本文链接：https://blog.csdn.net/nutony/article/details/116477981

版权

front-end 大前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

界面原型

利用div和table布局实现电影票的布局
小技巧包括：圆角样式、横向合并单元格、纵向合并单元格
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>太平洋影城</title>
		<style>
			td{
				border: 1px solid;
				border-color: darkgoldenrod;
				margin-top: 2px;
				padding: 5px;
				border-radius: 10px;
			}
			.no{
				/* border: 1px red solid; */
				color: #B8860B;	/* 16进制,0~9,a,b,c,d,e,f RGB */
				padding-left: 240px;
			}
			div{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div><img src="img/tpy.png"/></div>
		<div class="no">无副卷无效</div>
		<table border="0">
			<tr>
				<td colspan="2">
					<div>店名：太平洋影城（王府井店）</div>
					SHOP NAME
				</td>
			</tr>
			<tr>
				<td>
					<div>影厅：8楼9厅</div>
					HALL 需租3D眼镜
				</td>
				<td>
					<div>时间：</div>
					TIME 01-03 17:40
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div>片名：底气最后的夜晚（数字中文3D）</div>
					MOVIE
				</td>
			</tr>
			<tr>
				<td>
					<div>座号：4排5座</div>
					SEAT
				</td>
				<td rowspan="2">
					<div>票价：27.50</div>
					PRICE<br/>
					<div>服务费：2</div>
					SERVICE CHANGE
				</td>
			</tr>
			<tr>
				<td>
					<div>票类：网络售票</div>
					TYPE
				</td>
			</tr>
			<tr>
				<td>
					<div>售票时间：01-03 13:58</div>
					TICKET HOURS
				</td>
				<td>
					<div>工号：悦影汇网售</div>
					STAFF NO
				</td>
			</tr>
			<tr>
				<td colspan="2">
				<div style="float: left"><img src="img/qr.png" ></div>
				<div style="padding: 50px 0px 0px 160px;"> 影票一经出售，<br/>概不退换</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div>票号：182391723971293871</div>
					NO
				</td>
			</tr>
		</table>
	</body>
</html>