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

界面原型

利用div和table布局实现电影票的布局
小技巧包括:圆角样式、横向合并单元格、纵向合并单元格
【小白学前端】化腐朽为神奇-HTML+CSS3实现电影票(day01-3)_第1张图片

代码实现

<!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>影厅:89</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>座号:45</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>

你可能感兴趣的:(front-end,大前端,html,css,css3)