【小白学前端】化腐朽为神奇-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-4）
功能需求实现地球旋转,本质是一张图片,在网页中图片都是矩形没有直接提供圆形,CSS3提供了圆角样式,非常方便的解决了这个问题. 先准备一个正方形的图片,然后设置其当圆角超过图片半径时,自然就成为一个 ...
小白学前端——让新手头疼的num++和++num问题
不知道大家刚开始学js的时候,有没有为num++和++num的问题头疼过,反正我是一遇到这个问题就会错,但是今天仔细看了一下,其实真的很简单,真是怪自己之前不用心. 首先,先看一下下面的代码: 这个就 ...
跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
【小白学前端】JS案例：表单全选取消全选
要求: 1.点击全选按钮,可以选中所有产品前的选择框: 2.再点击一次,取消全选 3.每个产品可以单独选中取消 4.每个产品都选中时,全选框自动选中 5.取消一个产品的选择时,全选框自动取消 HTML ...
小白学前端——关于html,css,js分号使用问题
这个是也是我不是很清楚,但其实很简单,很基础的问题. 我在听<JavaScript高级程序设计>这本书的时候,那个讲书的老师提到了这个问题. html:html里面分号不是必须有的,但是写 ...
从0到1，小白的前端摸索之路，属于你的成功之道！
0基础,一年自学经验,8个offer,包括头条.去哪儿.猫眼.斗鱼.趣店.趣头条等,总价值180W 朋友们,大家好! 我是白小白,目前是一名电子科技大学信通学院的大四学生.回想起自己正式涉足前端的学习 ...
从0到1，小白的前端摸索之路
0基础,一年自学经验,8个offer,包括头条.去哪儿.猫眼.斗鱼.趣店.趣头条等,总价值180W 掘金的朋友们,大家好! 我是白小白,目前是一名电子科技大学信通学院的大四学生.回想起自己正式涉足前端 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
c++局部对象是什么_小白学Web前端难点是什么 JS进阶知识点有哪些
小白学Web前端难点是什么?JS进阶知识点有哪些?JavaScript是前端小白学习的难点,但又是前端工程师必须要掌握的技能.很多同学反映JavaScript知识点多而杂,不知道如何下手,下面就给大家 ...

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

界面原型

代码实现

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

最新文章

热门文章