小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）
Posted 长安紫薯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）相关的知识，希望对你有一定的参考价值。
界面原型
利用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>
以上是关于小白学前端化腐朽为神奇-HTML+CSS3实现电影票（day01-3）的主要内容，如果未能解决你的问题，请参考以下文章
小白学前端化腐朽为神奇-HTML+CSS3实现圆头像（day02-1）
小白学前端化腐朽为神奇-HTML+CSS3实现课程页（day02-3）
小白学前端化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）
小白学前端化腐朽为神奇-Bootstrap实现表单美化（day02-6）