Not much to say, just go to the code. This was written in the previous learning stage. I may not write it perfectly, but it looks good, because it is not the final version, and no JS code is added, so it has no dynamic function, only simple jumps and the like. I will send out another copy when I add JS.
If there is a bug, it is for reference only, and I am afraid of losing it when I send it out. I will save it so that I can have a place to look at it later haha~
my page:
<!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">
<title>我的页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/wode.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 头部头像处 -->
<header>
<img src="./img/wode/logo.png" alt="">
<div>
<p>Weixiu95</p>
<p><span>V1</span> 青铜会员</p>
</div>
<a href="./login.html">></a>
</header>
<!-- 第二部分:想看点击处 -->
<section>
<a href="">
<i></i>
<p>想看 <span>0</span></p>
</a>
<a href="">
<i></i>
<p>看过 <span>0</span></p>
</a>
<a href="">
<i></i>
<p>影评 <span>0</span></p>
</a>
<a href="">
<i></i>
<p>话题 <span>0</span></p>
</a>
</section>
<!-- 第三部分:订单处 -->
<article>
<div>
<p>我的订单</p>
<a href="">全部 <span>></span></a>
</div>
</article>
<article class="order">
<a href="">
<i></i>
<p>未消费</p>
</a>
<a href="">
<i></i>
<p>待付款</p>
</a>
<a href="">
<i></i>
<p>待评价</p>
</a>
<a href="">
<i></i>
<p>退款</p>
</a>
</article>
<!-- 第四部分:消息等功能 -->
<section class="function">
<div>
<p>我的消息</p>
<a href="">></a>
</div>
<div>
<p>我的收藏</p>
<a href="">></a>
</div>
<div>
<p>会员中心</p>
<a href="">></a>
</div>
<div>
<p>我的成就</p>
<a href="">></a>
</div>
</section>
<!-- 第五部分:尾部导航 -->
<footer>
<a href="./reying.html"><i></i></a>
<a href="./cinema.html"><i></i></a>
<a href="./found.html"><i></i></a>
<a href=""><i></i></a>
</footer>
</body>
</html>
@charset "UTF-8";
@font-face {
src: url("../fonts/Bodoni-16-Bold-Italic-10.otf");
font-family: "No1";
}
body {
background-color: #f5f5f5;
}
body a {
text-decoration: none;
}
body header {
background-color: #d33f36;
padding: 0.7rem 0.7rem;
display: flex;
align-items: center;
color: white;
}
body header img {
height: 1.9rem;
margin-right: 0.5rem;
}
body header div {
flex-grow: 1;
}
body header div p {
font-size: 0.45rem;
margin: 0;
letter-spacing: 0.02rem;
}
body header div p:nth-child(2) {
margin-top: 0.08rem;
font-size: 0.3rem;
}
body header div p span {
font-family: "No1";
letter-spacing: 0.05rem;
}
body header a {
font-weight: lighter;
color: white;
font-family: "宋体";
font-size: 0.64rem;
}
body section {
padding: 0.45rem 0.3rem;
background-color: white;
display: flex;
border-bottom: 1px solid #e4e4e4;
margin-bottom: 0.45rem;
}
body section a {
width: 25%;
font-size: 0;
color: black;
text-align: center;
}
body section a:not(:last-child) {
border-right: 1px solid #e4e4e4;
}
body section a i {
width: 0.7rem;
height: 0.6rem;
display: inline-block;
background-image: url("../img/wode/icon.png");
background-size: 5rem 3rem;
margin-bottom: 0.25rem;
}
body section a p {
font-size: 0.35rem;
letter-spacing: 0.01rem;
margin: 0;
}
body section a:nth-child(2) i {
background-position: -0.88rem 0;
}
body section a:nth-child(3) i {
background-position: -1.84rem 0;
}
body section a:nth-child(4) i {
background-position: -2.8rem 0;
}
body article {
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background-color: white;
padding: 0.5rem 0.6rem;
}
body article div {
display: flex;
justify-content: space-between;
align-items: center;
}
body article div p {
font-size: 0.43rem;
margin: 0;
}
body article div a {
color: #999999;
font-size: 0.4rem;
}
body article div a span {
font-family: "宋体";
font-weight: bold;
font-size: 0.5rem;
}
body .order {
padding: 0.4rem 0.3rem;
background-color: white;
display: flex;
margin-bottom: 0.45rem;
}
body .order a {
width: 25%;
font-size: 0;
color: black;
text-align: center;
}
body .order a i {
width: 0.7rem;
height: 0.6rem;
background-position: 0 -0.78rem;
display: inline-block;
background-image: url("../img/wode/icon.png");
background-size: 5rem 3rem;
margin-bottom: 0.25rem;
}
body .order a p {
font-size: 0.35rem;
margin: 0;
letter-spacing: 0.01rem;
}
body .order a:nth-child(2) i {
background-position: -1rem -0.8rem;
}
body .order a:nth-child(3) i {
background-position: -1.84rem -0.78rem;
}
body .order a:nth-child(4) i {
background-position: -2.82rem -0.77rem;
}
body .function {
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
background-color: white;
display: block;
padding: 0;
margin-bottom: 2.19rem;
}
body .function div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0.6rem;
}
body .function div:not(:last-child) {
border-bottom: 1px solid #e4e4e4;
}
body .function div p {
font-size: 0.43rem;
margin: 0;
}
body .function div a {
color: #999999;
font-family: "宋体";
font-weight: bold;
font-size: 0.5rem;
margin-right: -1.07rem;
}
body footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 0.22rem 1.1rem;
position: fixed;
bottom: 0;
width: 76%;
overflow: hidden;
}
body footer a {
font-size: 0;
}
body footer a i {
width: 0.74rem;
height: 1.3rem;
background-position: 0 -1.53rem;
display: inline-block;
background-image: url("../img/wode/icon.png");
background-size: 5rem 3rem;
}
body footer a:nth-child(2) i {
background-position: -0.95rem -1.55rem;
}
body footer a:nth-child(3) i {
background-position: -2.05rem -4.53rem;
}
body footer a:nth-child(4) i {
background-position: -2.99rem -4.54rem;
}
log in page:
<!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">
<title>登录页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/login.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部登录提示 -->
<header>
<a href="./wode.html"><img src="./img/login/fanhuijiantou.gif" alt=""></a>
<div>
<p>登录</p>
<a href="./reg.html">忘记密码</a>
</div>
</header>
<!-- 第二部分:登录框 -->
<article>
<img src="./img/login/maotou.png" alt="">
<form action="#" method="get">
<p class="greet">欢迎登录猫眼电影~</p>
<div>
<p>
<label for="useranme">用户名:</label>
<input type="text" id="useranme" name="username" placeholder="邮箱 / 手机号 / 用户名" required>
</p>
<p>
<label for="pwd"><span>密</span>码:</label>
<input type="password" id="pwd" name="password" placeholder="密码" required>
</p>
</div>
<button>登录</button>
<div class="other">
<a href="./reg.html">立即注册</a>
<a href="">手机号快捷登录 <span>></span></a>
</div>
</form>
</article>
<!-- 第三部分:第三方账号登录 -->
<footer>
<div class="san">
<p>············</p>
<h2>第三方账号登录</h2>
<p>············</p>
</div>
<section>
<div>
<a href=""><img src="./img/login/weixin.gif" alt="微信logo"></a>
<p>微信</p>
</div>
<div>
<a href=""><img src="./img/login/QQ.gif" alt="QQlogo"></a>
<p>QQ</p>
</div>
<div>
<a href=""><img src="./img/login/weibo.gif" alt="微博logo"></a>
<p>微博</p>
</div>
<div>
<a href=""><img src="./img/login/baidu.gif" alt="百度logo"></a>
<p>百度</p>
</div>
</section>
</footer>
</body>
</html>
I will put the scss code directly later, which is shorter and more intuitive.
@font-face {
src: url("../fonts/SourceHanSansCN-Light.otf");
font-family: "No1";
}
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部登录提示
header {
background-color: #db413a;
padding: 0.43rem 0.5rem;
display: flex;
align-items: center;
color: white;
a {
font-size: 0;
img {
height: 0.55rem;
padding: 0.2rem;
padding-left: 0;
padding-right: 0.47rem;
margin: 0.3rem;
border-right: 1px solid #a8261d;
margin: 0;
}
}
div {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: space-between;
padding: 0 0.5rem;
font-size: 0.48rem;
letter-spacing: 0.02rem;
a {
color: white;
font-size: 0.47rem;
}
p {
margin: 0;
}
}
}
// 第二部分:登录框
article {
text-align: center;
letter-spacing: 0.02rem;
padding: 0.76rem 0 1.09rem;
img {
height: 1.8rem;
border: 0.1rem solid #e8e8e8;
border-radius: 50%;
}
form {
.greet {
font-size: 0.35rem;
color: #989898;
text-align: left;
// font-family: "No1";
margin-left: 0.5rem;
}
div {
background-color: white;
p {
display: flex;
font-size: 0.46rem;
border-bottom: 1px solid #e4e4e4;
padding: 0.53rem 0.5rem;
margin: 0;
label[for="pwd"] {
span {
letter-spacing: 0.5rem;
}
}
::-webkit-input-placeholder {
color: #cbcbcb;
}
input {
border: 0;
width: 7rem;
padding-left: 0.67rem;
}
&:not(:last-child) {
border-top: 1px solid #e4e4e4;
}
}
}
button {
width: 9.5rem;
height: 1.35rem;
margin: 0.7rem 0;
font-size: 0.46rem;
border-radius: 0.3rem;
color: white;
background-color: #f14e40;
border: 0;
}
.other {
font-size: 0.38rem;
display: flex;
justify-content: space-between;
padding: 0 0.5rem;
background-color: #f5f5f5;
a {
color: #f44e3e;
&:nth-child(2) {
span {
font-family: "宋体";
font-weight: bolder;
}
}
}
}
}
}
// 第三部分:第三方账号登录
footer {
padding-bottom: 0.8rem;
.san {
display: flex;
align-items: center;
justify-content: center;
h2 {
font-size: 0.4rem;
font-weight: normal;
margin: 0 0.26rem;
color: #9a9a9a;
letter-spacing: 0.02rem;
}
p {
font-size: 0.1rem;
margin: 0;
letter-spacing: 0.15rem;
color: #cbcaca;
}
}
section {
display: flex;
padding: 0.68rem 1.65rem 0;
justify-content: space-between;
text-align: center;
div {
a {
img {
width: 1.21rem;
}
}
p {
font-size: 0.36rem;
margin: 0;
}
}
}
}
}
registration page:
<!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">
<title>注册页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/reg.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部注册提示 -->
<header>
<a href="./login.html"><img src="./img/reg/fanhuijiantou.gif" alt=""></a>
<p>注册</p>
</header>
<!-- 第二部分:输入框 -->
<article>
<div>
<p>输入手机号</p>
<p>···</p>
<p>输入验证码</p>
<p>···</p>
<p>设置密码</p>
</div>
<form action="./login.html" method="get">
<p>
<label for="phone">手机号:</label>
<input type="text" id="phone" name="phoneNum" placeholder="请输入您的手机号" required>
</p>
<button>获取验证码</button>
<div class="other">
<input type="checkbox" name="xuan" id="xuan" value="xuan" required>
<label for="xuan" class="xuan1"></label>
<label for="xuan">我已阅读并同意<a href="">猫眼网用户协议</a></label>
</div>
</form>
</article>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部登录提示
header {
background-color: #db413a;
padding: 0.43rem 0.5rem;
display: flex;
align-items: center;
color: white;
a {
font-size: 0;
img {
height: 0.55rem;
padding: 0.2rem;
padding-left: 0;
padding-right: 0.47rem;
margin: 0.3rem;
border-right: 1px solid #a8261d;
margin: 0;
}
}
p {
padding: 0 0.5rem;
font-size: 0.48rem;
letter-spacing: 0.02rem;
margin: 0;
flex-grow: 1;
}
}
// 第二部分:输入框
article {
div {
display: flex;
justify-content: space-between;
padding: 0.5rem 0.5rem;
font-size: 0.38rem;
font-weight: 500;
align-items: center;
p {
color: #989898;
margin: 0;
&:nth-child(1) {
color: #d64543;
}
&:nth-child(2) {
background: linear-gradient(to right, #d64543, #989898);
-webkit-background-clip: text;
color: transparent;
font-size: 0.75rem;
letter-spacing: 0.1rem;
}
&:nth-child(4) {
font-size: 0.75rem;
letter-spacing: 0.1rem;
}
}
}
form {
text-align: center;
p {
display: flex;
font-size: 0.46rem;
background-color: white;
margin: 0;
padding: 0.53rem 0.5rem;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
letter-spacing: 0.03rem;
input {
border: 0;
width: 7rem;
padding-left: 0.67rem;
}
::-webkit-input-placeholder {
color: #cbcbcb;
}
}
button {
width: 9.5rem;
height: 1.35rem;
margin: 0.7rem 0 0;
font-size: 0.46rem;
border-radius: 0.3rem;
color: white;
background-color: #eed6a9;
border: 0;
}
button:hover {
background-color: #f14e40;
}
.other {
display: flex;
justify-content: flex-start;
color: #707070;
position: relative;
letter-spacing: 0.03rem;
label[for="xuan"] {
font-size: 0.37rem;
a {
color: #0f9ce9;
}
}
.xuan1 {
position: absolute;
width: 0.37rem;
height: 0.37rem;
background: transparent;
border: 0.038rem solid #979797;
border-radius: 50%;
}
.xuan1:hover {
width: 0.48rem;
height: 0.48rem;
border: 0;
background-image: url("../img/reg/lvduigou.jpg");
background-size: 100% 100%;
}
input[type="checkbox"] {
visibility: hidden;
margin-left: 0.28rem;
}
}
}
}
}
Discovery page:
<!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">
<title>发现页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/found.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部 -->
<header>
<nav>
<form action="" method="get">
<label for="sousuo"><img src="./img/found/sousuo2.png" alt=""></label>
<input type="text" name="sousuo" id="sousuo" placeholder="找影视剧、影人、影院">
</form>
</nav>
<section>
<div>
<a href=""><img src="./img/found/fx1.jpg" alt=""></a>
<p>今日Top10</p>
</div>
<div>
<a href=""><img src="./img/found/fx2.jpg" alt=""></a>
<p>影视快讯</p>
</div>
<div>
<a href=""><img src="./img/found/fx3.jpg" alt=""></a>
<p>好片推荐</p>
</div>
<div>
<a href=""><img src="./img/found/fx4.jpg" alt=""></a>
<p>预告片速递</p>
</div>
<div>
<a href=""><img src="./img/found/fx5.jpg" alt=""></a>
<p>大咖来了</p>
</div>
<div>
<a href=""><img src="./img/found/fx6.jpg" alt=""></a>
<p>美图</p>
</div>
<div>
<a href=""><img src="./img/found/fx7.jpg" alt=""></a>
<p>周边商城</p>
</div>
<div>
<a href=""><img src="./img/found/fx8.jpg" alt=""></a>
<p>实时票房</p>
</div>
</section>
</header>
<!-- 第二部分:新闻 -->
<article>
<p>今天</p>
<section>
<a href=""><p><span>今日大爆料:</span> 博君一肖不日官宣,圈内隐婚已久,浓情蜜意,羡煞旁人……</p></a>
<div>
<img src="./img/found/bx1.jpg" alt="">
<img src="./img/found/bx2.jpg" alt="">
<img src="./img/found/bx3.jpg" alt="">
</div>
<aside>
<span>王八星动向</span>
<div>
<img src="./img/found/eye.png" alt="">
<span>100w+ </span>
<img src="./img/found/xiaoxi.png" alt="">
<span>100w+</span>
</div>
</aside>
</section>
<section class="other">
<img src="./img/found/双人.jpg" alt="">
<div>
<a href="">
<p>小情侣婚后首秀出镜,万千王八为之疯狂!</p>
</a>
<aside>
<span>百香果基地</span>
<div>
<img src="./img/found/eye.png" alt="">
<span>100w+ </span>
<img src="./img/found/xiaoxi.png" alt="">
<span>100w+</span>
</div>
</aside>
</div>
</section>
<section>
<a href=""><p><span>今日大爆料:</span> 博君一肖不日官宣,圈内隐婚已久,浓情蜜意,羡煞旁人……</p></a>
<div>
<img src="./img/found/bx1.jpg" alt="">
<img src="./img/found/bx2.jpg" alt="">
<img src="./img/found/bx3.jpg" alt="">
</div>
<aside>
<span>王八星动向</span>
<div>
<img src="./img/found/eye.png" alt="">
<span>100w+ </span>
<img src="./img/found/xiaoxi.png" alt="">
<span>100w+</span>
</div>
</aside>
</section>
<section class="other">
<img src="./img/found/双人.jpg" alt="">
<div>
<a href="">
<p>小情侣婚后首秀出镜,万千王八为之疯狂!</p>
</a>
<aside>
<span>百香果基地</span>
<div>
<img src="./img/found/eye.png" alt="">
<span>100w+ </span>
<img src="./img/found/xiaoxi.png" alt="">
<span>100w+</span>
</div>
</aside>
</div>
</section>
</article>
<!-- 第三部分:尾部导航 -->
<footer>
<a href="./reying.html"><i></i></a>
<a href="./cinema.html"><i></i></a>
<a href=""><i></i></a>
<a href="./wode.html"><i></i></a>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部
header {
background-color: white;
border-bottom: 1px solid #e4e4e4;
nav {
background-color: #d33f36;
padding: 0.33rem 0.3rem;
form {
background-color: white;
margin: auto;
text-align: center;
box-sizing: border-box;
font-size: 0;
width: 10rem;
border-radius: 0.5rem;
height: 0.83rem;
padding-top: 0.21rem;
padding-bottom: 0.21rem;
label {
margin: 0;
img {
height: 0.39rem;
}
}
input {
border: 0;
width: 5rem;
font-size: 0.38rem;
}
::-webkit-input-placeholder {
color: #aeaeae;
}
}
}
section {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding: 0.46rem 0.5rem;
justify-content: space-evenly;
div {
text-align: center;
margin-right: 0.55rem;
&:not(:nth-child(n+5)) {
margin-bottom: 0.4rem;
}
a {
img {
height: 1.3rem;
}
}
p {
font-size: 0.33rem;
margin: 0;
color: #646464;
}
}
}
}
// 第二部分:新闻
article {
border-bottom: 1px solid #e4e4e4;
margin-bottom: 2rem;
p {
font-size: 0.37rem;
margin-left: 0.37rem;
color: #646464;
}
section {
padding: 0.42rem 0.44rem;
background-color: white;
border-top: 1px solid #e4e4e4;
a {
p {
font-size: 0.45rem;
letter-spacing: 0.02rem;
color: black;
margin-left: 0;
margin: 0;
margin-bottom: 0.3rem;
}
span {
font-weight: bold;
}
}
div {
display: flex;
justify-content: space-between;
margin-bottom: 0.3rem;
img {
width: 3.21rem;
height: 2.42rem;
}
}
aside {
display: flex;
justify-content: space-between;
vertical-align: middle;
span {
font-size: 0.3rem;
color: #646464;
}
div {
margin-bottom: 0;
img {
height: 0.3rem;
width: 0.42rem;
margin-right: 0.1rem;
}
}
}
}
.other {
display: flex;
img {
width: 3.21rem;
height: 2.42rem;
}
div {
display: inline-block;
margin-bottom: 0;
margin-left: 0.32rem;
font-size: 0;
vertical-align: bottom;
p{
margin-bottom: 0.6rem;
}
aside {
display: flex;
justify-content: space-between;
span {
font-size: 0.3rem;
color: #646464;
}
div {
margin-bottom: 0;
img {
height: 0.3rem;
width: 0.42rem;
margin-right: 0.1rem;
}
}
}
}
}
}
// 第三部分:尾部导航
footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 0.22rem 1.1rem;
position: fixed;
bottom: 0;
width: 79.5%;
overflow: hidden;
a {
font-size: 0;
i {
width: 0.74rem;
height: 1.2rem;
background-position: 0 -1.55rem;
display: inline-block;
background-image: url("../img/daiying/icon100.png");
background-size: 5.6rem 5.1rem;
}
&:nth-child(2) {
i {
background-position: -0.95rem -1.55rem;
}
}
&:nth-child(3) {
i {
background-position: -2.1rem -2.78rem;
}
}
&:nth-child(4) {
i {
background-position: -3.04rem -2.75rem;
}
}
}
}
}
Theater page:
<!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">
<title>影院页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/cinema.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部导航 -->
<header>
<section>
<div>
<div>
<p>成都</p>
<a href="">></a>
</div>
</div>
<p>影院</p>
<aside>
<a href=""><img src="./img/cinema/yingyuanloudou.jpg" alt=""> </a>
<a href=""><img src="./img/cinema/fangdajing.jpg" alt=""></a>
</aside>
</section>
</header>
<!-- 第二部分:banner -->
<nav>
<img src="./img/cinema/yingyuandatu.jpg" alt="">
</nav>
<!-- 第三部分:影院 -->
<article>
<section>
<aside>
<a href="./screens.html">博肖影视城(百香果市店)<p><span>23.9</span>元起</p></a>
<p>王八区西大街95号土匪广场A栋2楼</p>
<div>
<p>座</p>
<p>团</p>
<p>改签</p>
<p>小吃</p>
<p>折扣卡</p>
</div>
<div class="last">
<p>惠</p>
<p>诛仙、无名等两部影片特惠</p>
</div>
</aside>
<p>950m</p>
</section>
<section>
<aside>
<a href="./screens.html">博肖影视城(百香果市店)<p><span>23.9</span>元起</p></a>
<p>王八区西大街95号土匪广场A栋2楼</p>
<div>
<p>座</p>
<p>团</p>
<p>改签</p>
<p>小吃</p>
<p>折扣卡</p>
</div>
<div class="last">
<p>惠</p>
<p>诛仙、无名等两部影片特惠</p>
</div>
</aside>
<p>950m</p>
</section>
<section>
<aside>
<a href="./screens.html">博肖影视城(百香果市店)<p><span>23.9</span>元起</p></a>
<p>王八区西大街95号土匪广场A栋2楼</p>
<div>
<p>座</p>
<p>团</p>
<p>改签</p>
<p>小吃</p>
<p>折扣卡</p>
</div>
<div class="last">
<p>惠</p>
<p>诛仙、无名等两部影片特惠</p>
</div>
</aside>
<p>950m</p>
</section>
<section>
<aside>
<a href="./screens.html">博肖影视城(百香果市店)<p><span>23.9</span>元起</p></a>
<p>王八区西大街95号土匪广场A栋2楼</p>
<div>
<p>座</p>
<p>团</p>
<p>改签</p>
<p>小吃</p>
<p>折扣卡</p>
</div>
<div class="last">
<p>惠</p>
<p>诛仙、无名等两部影片特惠</p>
</div>
</aside>
<p>950m</p>
</section>
</article>
<!-- 第四部分:搜索 -->
<section class="suo">
<form action="" method="get">
<!-- <img src="./img/cinema/difang.png" alt=""> -->
<input type="text" name="sou" id="sou" placeholder="成都市博肖家园百香果街道">
<!-- <img src="./img/cinema/huifu.png" alt=""> -->
</form>
</section>
<!-- 第五部分:尾部导航 -->
<footer>
<a href="./reying.html"><i></i></a>
<a href=""><i></i></a>
<a href="./found.html"><i></i></a>
<a href="./wode.html"><i></i></a>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部导航
header {
background-color: #d33f36;
padding: 0.4rem 0.28rem 0.23rem;
font-size: 0.43rem;
color: white;
section {
display: flex;
padding: 0 0.1rem 0;
justify-content: space-between;
align-items: center;
div {
display: flex;
div {
padding: 0.24rem 0.1rem;
p {
margin: 0;
padding-bottom: 0.07rem;
margin-right: 0.16rem;
}
a {
color: white;
font-family: "黑体";
// 让字体旋转
-webkit-transform: rotate(90deg);
margin-right: 0;
}
}
}
p{
font-size: 0.54rem;
margin: 0;
}
a {
img {
height: 0.6rem;
width: 0.6rem;
}
}
}
}
// 第二部分:banner
nav{
font-size: 0;
img{
height: 2.26rem;
}
}
// 第三部分:影院
article{
margin-bottom: 2rem;
section{
padding: 0.46rem 0.44rem;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e4e4e4;
aside{
a{
font-size: 0.51rem;
color: black;
display: flex;
text-align: center;
margin-bottom: 0.1rem;
p{
margin: 0;
font-size: 0.38rem;
margin-top: auto;
margin-bottom: auto;
margin-left: 0.2rem;
span{
color: #f34b3b;
font-size: 0.43rem;
}
}
}
P{
font-size: 0.36rem;
margin: 0;
margin-bottom: 0.2rem;
}
div{
display: flex;
p{
margin-right: 0.1rem;
padding: 0.05rem 0.05rem;
box-sizing: border-box;
font-size: 0.28rem;
border-radius: 0.1rem;
&:nth-child(-n+2){
border:0.02rem solid #6a939d;
color: #6a939d;
}
&:nth-child(-n+4):nth-child(n+3){
background-color: #86c7ee;
color: white;
}
&:nth-child(5){
background-color: #fdba4d;
color: white;
}
}
}
.last{
p{
&:nth-child(1){
border: 0;
background-color: #f98370;
color: white;
width: 0.5rem;
height: 0.5rem;
text-align: center;
margin-bottom: 0;
}
&:nth-child(2){
font-size: 0.34rem;
border: 0;
color: #999999;
margin-bottom: 0;
}
}
}
}
p{
font-size: 0.4rem;
color: #999999;
letter-spacing: 0.01rem;
}
}
}
//第四部分:搜索
.suo{
position: fixed;
bottom: 1.7rem;
right: 0.3rem;
border-radius: 0.3rem;
form{
// display: flex;
// justify-content: center;
// img{
// width: 0.47rem;
// height: 0.47rem;
// }
input{
font-size: 0.38rem;
width: 10rem;
text-align: center;
border: 0;
background-color: rgba($color: #8f8e8e, $alpha: 0.15);
border-radius: 0.3rem;
letter-spacing: 0.02rem;
}
::-webkit-input-placeholder {
color: #969696;
}
}
}
// 第五部分:尾部导航
footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 0.22rem 1.1rem;
position: fixed;
bottom: 0;
width: 79.5%;
overflow: hidden;
a {
font-size: 0;
i {
width: 0.74rem;
height: 1.2rem;
background-position: 0 -1.55rem;
display: inline-block;
background-image: url("../img/daiying/icon100.png");
background-size: 5.6rem 5.1rem;
}
&:nth-child(2) {
i {
background-position: -0.95rem -2.75rem;
}
}
&:nth-child(3) {
i {
background-position: -2.07rem -1.55rem;
}
}
&:nth-child(4) {
i {
background-position: -3.04rem -2.75rem;
}
}
}
}
}
Hot page:
<!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">
<title>热映页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/reying.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部导航 -->
<header>
<section>
<div>
<div>
<p>成都</p>
<a href="">></a>
</div>
</div>
<div class="kuai">
<div class="dai"> 热映 </div>
<a href="./daiying.html">
<div>待映</div>
</a>
<a href="">
<div>找片</div>
</a>
</div>
<a href=""><img src="./img/reying/fangdajing.jpg" alt=""></a>
</section>
</header>
<!-- 第二部分:banner -->
<nav>
<img src="./img/reying/冰雨火长.jpg" alt="">
</nav>
<!-- 第三部分:购票 -->
<article>
<section>
<div>
<img src="./img/reying/诛仙.jpg" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<div>
<p>诛仙 </p>
<img src="./img/reying/2D.png" alt="">
</div>
<p>观众<span> 7.6</span></p>
<p>天地不仁,以万物为刍狗!</p>
<p>今天105家影院放映1005场</p>
</div>
<a href="./details.html">
<p> 购票</p>
</a>
</div>
</section>
<aside>
<div>资讯</div>
<p>少年张小凡的"命运之路"!</p>
</aside>
<aside>
<div>资讯</div>
<p>肖战首次担任荧屏大梁主角,戏份出彩!</p>
</aside>
<div class="xiaozi">
<div>
<img src="./img/reying/诛仙.jpg" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<div>
<p>诛仙 </p>
<img src="./img/reying/2D.png" alt="">
</div>
<p>观众<span> 7.6</span></p>
<p>天地不仁,以万物为刍狗!</p>
<p>今天105家影院放映1005场</p>
</div>
<a href="./details.html">
<p> 购票</p>
</a>
</div>
</div>
<div class="xiaozi">
<div>
<img src="./img/reying/诛仙.jpg" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<div>
<p>诛仙 </p>
<img src="./img/reying/2D.png" alt="">
</div>
<p>观众<span> 7.6</span></p>
<p>天地不仁,以万物为刍狗!</p>
<p>今天105家影院放映1005场</p>
</div>
<a href="./details.html">
<p> 购票</p>
</a>
</div>
</div>
</article>
<!-- 第四部分:尾部导航 -->
<footer>
<a href=""><i></i></a>
<a href="./cinema.html"><i></i></a>
<a href="./found.html"><i></i></a>
<a href="./wode.html"><i></i></a>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部导航
header {
background-color: #d33f36;
padding: 0.4rem 0.28rem 0.23rem;
font-size: 0.43rem;
color: white;
section {
display: flex;
padding: 0 0.1rem 0;
margin-bottom: 0.1rem;
justify-content: space-between;
align-items: center;
div {
display: flex;
div {
padding: 0.24rem 0.1rem;
p {
margin: 0;
padding-bottom: 0.07rem;
margin-right: 0.16rem;
}
a {
color: white;
font-family: "黑体";
// 让字体旋转
-webkit-transform: rotate(90deg);
margin-right: 0;
}
}
}
.kuai {
width: 5.76rem;
// height: 0.96rem;
background-color: #b42019;
border-radius: 0.3rem;
.dai {
margin: auto;
background-color: white;
border-radius: 0.3rem;
color: #b42019;
}
a {
color: white;
margin: 0 0.51rem;
div {
margin: auto;
}
}
}
a {
img {
height: 0.6rem;
width: 0.6rem;
}
}
}
}
// 第二部分:banner
nav {
font-size: 0;
img {
height: 2.26rem;
}
}
// 第三部分:购票
article {
margin-bottom: 2rem;
section {
display: flex;
background-color: white;
padding: 0.37rem 0.3rem 0.1rem;
div {
margin-right: 0.35rem;
img {
height: 3rem;
width: 2.2rem;
}
a {
position: relative;
left: 0.75rem;
top: 0.4rem;
div {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
box-sizing: border-box;
border: 0.03rem solid white;
background-color: rgba($color: #000000, $alpha: 0.15);
bottom: 1.8rem;
font-size: 0.55rem;
text-align: center;
vertical-align: middle;
color: white;
}
}
}
.zi {
display: flex;
justify-content: space-between;
padding: 0;
flex-grow: 1;
border-bottom: 1px solid #e4e4e4;
.wenzi {
width: 4rem;
div {
display: flex;
align-items: center;
p {
font-size: 0.5rem;
margin: 0;
margin-top: 0.3rem;
margin-bottom: 0.2rem;
}
img {
width: 1.38rem;
height: 0.5rem;
}
}
p {
&:nth-child(2) {
font-size: 0.35rem;
margin: 0;
margin-bottom: 0.2rem;
color: #999999;
span {
font-size: 0.4rem;
color: #feb600;
}
}
&:nth-child(n+3) {
color: #646464;
font-size: 0.33rem;
margin: 0;
}
}
}
a {
width: 1.44rem;
height: 0.8rem;
border: 0.02rem solid #109de8;
box-sizing: border-box;
border-radius: 0.15rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 0.6rem 0.8rem;
p {
font-size: 0.35rem;
margin: 0;
color: #109de8;
}
}
}
}
aside {
display: flex;
background-color: white;
justify-content: center;
height: 1.17rem;
align-items: center;
border-bottom: 1px solid #e4e4e4;
div {
font-size: 0.32rem;
border: 0.01rem solid #ff9900;
color: #ff9900;
border-radius: 0.1rem;
margin-right: 0.27rem;
padding: 0.1rem 0.14rem;
}
p {
font-size: 0.35rem;
margin: 0;
}
}
.xiaozi {
display: flex;
background-color: white;
padding: 0.37rem 0.3rem 0.1rem;
border-bottom: 1px solid #e4e4e4;
div {
margin-right: 0.35rem;
img {
height: 3rem;
width: 2.2rem;
}
a {
position: relative;
left: 0.75rem;
top: 0.4rem;
div {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
box-sizing: border-box;
border: 0.03rem solid white;
background-color: rgba($color: #000000, $alpha: 0.15);
bottom: 1.8rem;
font-size: 0.55rem;
text-align: center;
vertical-align: middle;
color: white;
}
}
}
.zi {
display: flex;
justify-content: space-between;
padding: 0;
flex-grow: 1;
.wenzi {
width: 4rem;
div {
display: flex;
align-items: center;
p {
font-size: 0.5rem;
margin: 0;
margin-top: 0.3rem;
margin-bottom: 0.2rem;
}
img {
width: 1.38rem;
height: 0.5rem;
}
}
p {
&:nth-child(2) {
font-size: 0.35rem;
margin: 0;
margin-bottom: 0.2rem;
color: #999999;
span {
font-size: 0.4rem;
color: #feb600;
}
}
&:nth-child(n+3) {
color: #646464;
font-size: 0.33rem;
margin: 0;
}
}
}
a {
width: 1.44rem;
height: 0.8rem;
border: 0.02rem solid #109de8;
box-sizing: border-box;
border-radius: 0.15rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 0.6rem 0.8rem;
p {
font-size: 0.35rem;
margin: 0;
color: #109de8;
}
}
}
}
}
// 第四部分:尾部导航
footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 0.22rem 1.1rem;
position: fixed;
bottom: 0;
width: 79.5%;
overflow: hidden;
a {
font-size: 0;
i {
width: 0.74rem;
height: 1.2rem;
background-position: 0 -2.72rem;
display: inline-block;
background-image: url("../img/daiying/icon100.png");
background-size: 5.6rem 5.1rem;
}
&:nth-child(2) {
i {
background-position: -0.95rem -1.55rem;
}
}
&:nth-child(3) {
i {
background-position: -2.07rem -1.55rem;
}
}
&:nth-child(4) {
i {
background-position: -3.04rem -2.75rem;
}
}
}
}
}
Pages to be screened:
<!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">
<title>待映页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/daiying.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部导航 -->
<header>
<section>
<div>
<div>
<p>成都</p>
<a href="">></a>
</div>
</div>
<div class="kuai">
<a href="./reying.html">
<div>热映</div>
</a>
<div class="dai"> 待映 </div>
<a href="">
<div>找片</div>
</a>
</div>
</section>
<form action="#" method="get">
<label for="sou"><img src="./img/daiying/sousuo2.png" alt=""></label>
<input type="text" name="sou" id="sou" placeholder="找影视剧、影人、影院">
</form>
</header>
<!-- 第二部分:预告片推荐 -->
<article>
<p>预告片推荐
<p>
<section>
<div>
<img src="./img/daiying/玉骨遥.png" alt="">
<aside>
<div>
<p>玉骨遥</p>
<p>情深入骨版预告</p>
</div>
<a href="">
<div>▶</div>
</a>
</aside>
</div>
<div>
<img src="./img/daiying/热烈.png" alt="">
<aside>
<div>
<p>热烈</p>
<p>Round贴片预告火热来袭!</p>
</div>
<a href="">
<div>▶</div>
</a>
</aside>
</div>
<div>
<img src="./img/daiying/那片海.png" alt="">
<aside>
<div>
<p>梦中的那片海</p>
<p>首支预告,见证青春…</p>
</div>
<a href="">
<div>▶</div>
</a>
</aside>
</div>
<div>
<img src="./img/daiying/无名.png" alt="">
<aside>
<div>
<p>无名</p>
<p>"国民老公"叶秘即将上线!</p>
</div>
<a href="">
<div>▶</div>
</a>
</aside>
</div>
</section>
</article>
<!-- 第三部分:近期最受期待 -->
<section class="qidai">
<p>近期最受期待
<p>
<aside>
<div class="ying">
<p>22年待定</p>
<div>
<div>
<img src="./img/daiying/无名.jpg" alt="">
<div><img src="./img/daiying/心.png" alt=""></div>
</div>
<p>无名</p>
<span>140,536人想看</span>
</div>
</div>
<div class="ying">
<p>8月5日</p>
<div>
<div>
<img src="./img/daiying/热烈长.jpg" alt="">
<div><img src="./img/daiying/心.png" alt=""></div>
</div>
<p>热烈</p>
<span>69,315人想看</span>
</div>
</div>
<div class="ying">
<p>9月22日</p>
<div>
<div>
<img src="./img/daiying/维和.JPG" alt="">
<div><img src="./img/daiying/心.png" alt=""></div>
</div>
<p>维和防暴队</p>
<span>183,417人想看</span>
</div>
</div>
<div class="ying">
<p>10月5日</p>
<div>
<div>
<img src="./img/daiying/长空.JPG" alt="">
<div><img src="./img/daiying/心.png" alt=""></div>
</div>
<p>长空之王</p>
<span>52,864人想看</span>
</div>
</div>
<div class="ying">
<p>11月30日</p>
<div>
<div>
<img src="./img/daiying/青春.JPG" alt="">
<div><img src="./img/daiying/心.png" alt=""></div>
</div>
<p>中国青年:我和…</p>
<span>10,154人想看</span>
</div>
</div>
</aside>
</section>
<!-- 第四部分:8月28日 -->
<article class="time">
<p>8月25日 周四
<p>
<aside>
<div>
<img src="./img/daiying/无名.jpg" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<section class="zi">
<div class="wenzi">
<p>无名</p>
<p><span>140,536</span>人想看</p>
<p>任重,致远,光芒,尤现!</p>
<p>主演:梁朝伟、王一博</p>
</div>
<div class="xiangkan">
<img src="./img/daiying/xin.png" alt="">
<p> 想看</p>
</div>
</section>
</aside>
</article>
<!-- 第五部分:9月以后 -->
<article class="yihou">
<p>9月以后
<p>
<aside>
<section>
<div>
<img src="./img/daiying/热烈长.jpg" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<p>热烈</p>
<p><span>69,315</span>人想看</p>
<p>因为热爱,所以热烈!</p>
<p>主演:黄渤、王一博</p>
</div>
<a href="">
<p> 预售</p>
</a>
</div>
</section>
<section>
<div>
<img src="./img/daiying/维和.JPG" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<p>维和防暴队</p>
<p><span>183,417</span>人想看</p>
<p>致敬中国维和警察!</p>
<p>主演:黄景瑜、王一博</p>
</div>
<a href="">
<p> 预售</p>
</a>
</div>
</section>
<section>
<div>
<img src="./img/daiying/长空.JPG" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<p>长空之王</p>
<p><span>52,864</span>人想看</p>
<p>以信仰之名,不负热血军魂!</p>
<p>主演:王一博、胡军</p>
</div>
<a href="">
<p> 预售</p>
</a>
</div>
</section>
<section>
<div>
<img src="./img/daiying/青春.JPG" alt="">
<a href="">
<div>▶</div>
</a>
</div>
<div class="zi">
<div class="wenzi">
<p>我和我的青春</p>
<p><span>10,154</span>人想看</p>
<p>青春逢盛世,奋斗正当时!</p>
<p>主演:张艺兴、王一博</p>
</div>
<a href="">
<p> 预售</p>
</a>
</div>
</section>
</aside>
</article>
<!-- 第六部分:尾部导航 -->
<footer>
<a href=""><i></i></a>
<a href="./cinema.html"><i></i></a>
<a href="./found.html"><i></i></a>
<a href="./wode.html"><i></i></a>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部导航
header {
background-color: #d33f36;
padding: 0.4rem 0.28rem 0.23rem;
font-size: 0.43rem;
color: white;
section {
display: flex;
padding: 0 0.1rem 0;
margin-bottom: 0.46rem;
div {
display: flex;
margin-right: 0.45rem;
div {
padding: 0.24rem 0.1rem;
p {
margin: 0;
padding-bottom: 0.07rem;
margin-right: 0.16rem;
}
a {
color: white;
font-family: "黑体";
// 让字体旋转
-webkit-transform: rotate(90deg);
margin-right: 0;
}
}
}
.kuai {
width: 5.76rem;
// height: 0.96rem;
background-color: #b42019;
border-radius: 0.3rem;
.dai {
margin: auto;
background-color: white;
border-radius: 0.3rem;
color: #b42019;
}
a {
color: white;
margin: 0 0.51rem;
div {
margin: auto;
}
}
}
}
form {
width: 10rem;
background-color: white;
border-radius: 0.5rem;
margin: auto;
padding: 0.24rem 0;
text-align: center;
label {
img {
height: 0.45rem;
vertical-align: middle;
}
}
input[type="text"] {
border: 0;
letter-spacing: 0.03rem;
}
::-webkit-input-placeholder {
color: #aeaeae;
}
}
}
//第二部分:预告片推荐
article {
p {
font-size: 0.4rem;
// font-weight: bold;
margin: 0.23rem 0.36rem;
}
section {
display: flex;
overflow: scroll;
background-color: white;
padding-top: 0.4rem;
padding-left: 0.42rem;
padding-bottom: 0.17rem;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
div {
&:not(:last-child) {
margin-right: 0.2rem;
}
img {
width: 4.58rem;
height: 2.56rem;
}
aside {
margin: 0;
position: relative;
div {
position: absolute;
bottom: 0.25rem;
padding-bottom: 0.07rem;
padding-left: 0.2rem;
width: 4.4rem;
background-color: rgba($color: #000000, $alpha: 0.15);
p {
font-size: 0.31rem;
margin: 0;
color: white;
&:nth-child(1) {
font-size: 0.34rem;
}
}
}
a {
div {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
box-sizing: border-box;
border: 0.03rem solid white;
background-color: rgba($color: #000000, $alpha: 0.15);
left: 3.5rem;
bottom: 1.8rem;
font-size: 0.55rem;
text-align: center;
vertical-align: middle;
color: white;
}
}
}
}
}
}
// 第三部分:近期最受期待
.qidai {
p {
font-size: 0.4rem;
margin: 0.23rem 0.36rem;
}
aside {
display: flex;
overflow: scroll;
background-color: white;
padding-top: 0.3rem;
padding-left: 0.42rem;
padding-bottom: 0.2rem;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
.ying {
&:not(:last-child) {
margin-right: 0.2rem;
}
p {
margin-top: 0;
margin-left: 0;
margin-right: 0;
font-size: 0.4rem;
}
div {
font-size: 0;
div {
height: 3.45rem;
overflow: hidden;
margin-bottom: 0.2rem;
img {
height: 3.45rem;
width: 2.54rem;
}
div {
height: 0.8rem;
width: 0.8rem;
background-color: rgba($color: #000000, $alpha: 0.3);
position: relative;
bottom: 3.4rem;
img {
height: 0.5rem;
width: 0.5rem;
position: absolute;
top: 0.18rem;
left: 0.15rem;
}
img:hover {
background-image: url("../img/daiying/xin1.png");
background-size: 100% 100%;
}
}
}
p {
font-size: 0.33rem;
margin: 0;
}
span {
font-size: 0.31rem;
color: #989898;
}
}
}
}
}
// 第四部分:8月28日
.time {
p {
font-size: 0.4rem;
margin: 0.23rem 0.36rem;
}
aside {
display: flex;
background-color: white;
padding: 0.37rem 0.3rem 0.1rem;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
div {
margin-right: 0.35rem;
img {
height: 3rem;
width: 2.2rem;
}
a {
position: relative;
left: 0.75rem;
top: 0.4rem;
div {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
box-sizing: border-box;
border: 0.03rem solid white;
background-color: rgba($color: #000000, $alpha: 0.15);
bottom: 1.8rem;
font-size: 0.55rem;
text-align: center;
vertical-align: middle;
color: white;
}
}
}
.zi {
display: flex;
justify-content: space-between;
padding: 0;
flex-grow: 1;
border: 0;
.wenzi {
p {
font-size: 0.5rem;
margin: 0;
margin-top: 0.4rem;
margin-bottom: 0.2rem;
&:nth-child(2) {
font-size: 0.3rem;
margin: 0;
margin-bottom: 0.2rem;
color: #999999;
span {
font-size: 0.33rem;
color: #feb600;
}
}
&:nth-child(n+3) {
color: #646464;
font-size: 0.3rem;
margin: 0;
margin-bottom: 0.03rem;
}
}
}
.xiangkan {
width: 1.82rem;
height: 0.8rem;
border: 0.02rem solid #ff482b;
box-sizing: border-box;
border-radius: 0.15rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 0.9rem 0.45rem;
img {
height: 0.32rem;
width: 0.32rem;
}
img:hover {
background-image: url("../img/daiying/red.png");
background-size: 100% 100%;
}
p {
font-size: 0.35rem;
margin: 0;
color: #ff482b;
}
}
}
}
}
// 第五部分:9月以后
.yihou {
aside {
margin-bottom: 2rem;
section {
display: flex;
background-color: white;
padding: 0.37rem 0.3rem;
&:not(:last-child) {
border-bottom: 0;
}
div {
margin-right: 0.35rem;
img {
height: 3rem;
width: 2.2rem;
}
a {
position: relative;
left: 0.75rem;
top: 0.4rem;
div {
position: absolute;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
box-sizing: border-box;
border: 0.03rem solid white;
background-color: rgba($color: #000000, $alpha: 0.15);
bottom: 1.8rem;
font-size: 0.55rem;
text-align: center;
vertical-align: middle;
color: white;
}
}
}
.zi {
display: flex;
justify-content: space-between;
padding: 0;
flex-grow: 1;
.wenzi {
p {
font-size: 0.5rem;
margin: 0;
margin-top: 0.4rem;
margin-bottom: 0.2rem;
&:nth-child(2) {
font-size: 0.3rem;
margin: 0;
margin-bottom: 0.2rem;
color: #999999;
span {
font-size: 0.33rem;
color: #feb600;
}
}
&:nth-child(n+3) {
color: #646464;
font-size: 0.3rem;
margin: 0;
margin-bottom: 0.03rem;
}
}
}
a {
width: 1.44rem;
height: 0.8rem;
border: 0.02rem solid #109de8;
box-sizing: border-box;
border-radius: 0.15rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
margin: 0.6rem 0.8rem;
p {
font-size: 0.35rem;
margin: 0;
color: #109de8;
}
}
}
}
}
}
// 第六部分:尾部导航
footer {
display: flex;
justify-content: space-between;
border-top: 1px solid #d5d5d5;
background-color: #f5f5f5;
padding: 0.22rem 1.1rem;
position: fixed;
bottom: 0;
width: 79.5%;
overflow: hidden;
a {
font-size: 0;
i {
width: 0.74rem;
height: 1.2rem;
background-position: 0 -2.72rem;
display: inline-block;
background-image: url("../img/daiying/icon100.png");
background-size: 5.6rem 5.1rem;
}
&:nth-child(2) {
i {
background-position: -0.95rem -1.55rem;
}
}
&:nth-child(3) {
i {
background-position: -2.07rem -1.55rem;
}
}
&:nth-child(4) {
i {
background-position: -3.04rem -2.75rem;
}
}
}
}
}
Details page:
<!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">
<title>详情页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/details.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部影片 -->
<header>
<nav>
<a href="./reying.html"><img src="./img/details/xiangqingjiantou.jpg" alt=""></a>
<a href=""><img src="./img/details/xiangqingfenxiang.jpg" alt=""></a>
</nav>
<section>
<img src="./img/details/诛仙.jpg" alt="">
<aside>
<p>诛仙</p>
<p>Jade Dynasty</p>
<div>
<img src="./img/details/star_icon03.png" alt="">
<p class="fen"> 7.6</p>
</div>
<p>(680,260人评)</p>
<p>古装 爱情 奇幻 <span>2D IMAX</span></p>
<p>中国 大陆 / 101分钟</p>
<p>2019.09.13上映></p>
</aside>
</section>
<div class="dianji">
<a href="">
<img src="./img/details/心.png" alt="">
<p> 想看</p>
</a>
<a href="">
<img src="./img/details/星.png" alt="">
<p> 评分</p>
</a>
</div>
</header>
<!-- 第二部分:影片简介 -->
<article>
<p>
草庙村被屠,少年张小凡双亲离世,被青云门大竹峰收留。机缘巧合之下,他习得佛门天音功法,又意外获得魔教法器烧火棍,踏上强者之路的同时,也让他陷入了巨大的危机。至魔法器的现世,与陆雪琪、碧瑶、田灵儿三个女生间命运的交错,都让他原本单纯的人生轨迹充满变数。一个勇者驳斥命运的传奇之旅就此展开......
</p>
</article>
<!-- 第三部分:演员列表 -->
<article class="yanyuan">
<section>
<p>导演</p>
<img src="./img/details/导演.jpg" alt="">
</section>
<section>
<div>
<p>演员</p>
<a href="">全部></a>
</div>
<aside>
<img src="./img/details/肖战.jpg" alt="">
<img src="./img/details/李沁.jpg" alt="">
<img src="./img/details/孟美岐.jpg" alt="">
<img src="./img/details/唐艺昕.jpg" alt="">
<img src="./img/details/刘端端.jpg" alt="">
</aside>
</section>
</article>
<!-- 第四部分:尾部 -->
<footer>
<a href="./screens.html">立即购票</a>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部影片
header {
background-image: url("../img/details/xiangqingbeijing.jpg");
background-size: cover;
height: 8rem;
padding: 0 0.43rem;
box-sizing: border-box;
nav {
display: flex;
justify-content: space-between;
margin: 0;
a {
img {
height: 0.56rem;
}
}
}
section {
display: flex;
img {
height: 4.4rem;
width: 3.2rem;
border: 0.04rem solid white;
margin-right: 0.48rem;
}
aside {
p {
font-size: 0.35rem;
color: white;
margin: 0;
letter-spacing: 0.02rem;
&:nth-child(1) {
font-size: 0.7rem;
letter-spacing: 0.05rem;
}
&:nth-child(2) {
margin-top: 0.1rem;
margin-bottom: 0.1rem;
}
&:nth-of-type(3) {
font-size: 0.25rem;
color: #cec9c0;
margin-bottom: 0.2rem;
}
&:nth-of-type(n+4) {
color: #cec9c0;
margin-bottom: 0.15rem;
}
&:nth-of-type(4) {
span {
background-color: #837e78;
color: white;
font-size: 0.1rem;
padding: 0.05rem;
box-sizing: border-box;
}
}
}
div {
display: flex;
align-items: center;
img {
height: 0.4rem;
width: 2.3rem;
border: 0;
}
.fen {
font-size: 0.5rem;
color: #fdc700;
margin: 0;
}
}
}
}
.dianji {
display: flex;
margin-top: 0.45rem;
margin-bottom: 0.45rem;
justify-content: space-around;
a {
height: 0.8rem;
width: 4rem;
background-color: rgba($color: #545353, $alpha: 0.5);
border: 0.02rem solid white;
border-radius: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
img {
height: 0.4rem;
}
p {
font-size: 0.38rem;
color: white;
}
}
}
}
// 第二部分:影片简介
article {
background-color: white;
padding: 0.59rem 0.45rem;
border-bottom: 1px solid #e4e4e4;
margin-bottom: 0.5rem;
p {
font-size: 0.4rem;
text-indent: 2em;
margin: 0;
letter-spacing: 0.02rem;
line-height: 0.6rem;
}
}
// 第三部分:演员列表
.yanyuan {
display: flex;
margin-bottom: 0.8rem;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
padding-top: 0.3rem;
section {
margin-right: 0.34rem;
p {
font-size: 0.4rem;
text-indent: 0;
}
img {
height: 2.76rem;
width: 2.1rem;
margin-top: 0.2rem;
}
&:nth-child(2) {
div {
display: flex;
justify-content: space-between;
a {
font-size: 0.4rem;
color: #837e78;
}
}
aside {
overflow: scroll;
display: flex;
width: 7.8rem;
img {
margin-right: 0.17rem;
margin-top: 0.2rem;
}
}
}
}
}
// 第四部分:尾部
footer {
height: 1.5rem;
background-color: #f14e40;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
a {
color: white;
font-size: 0.5rem;
vertical-align: middle;
}
}
}
Auditorium page:
<!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">
<title>放映厅页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/screens.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部登录提示 -->
<header>
<a href="./cinema.html"><img src="./img/screens/fanhuijiantou.gif" alt=""></a>
<div>
<p>博肖影视城(百香果市店)</p>
<span>☆</span>
</div>
</header>
<!-- 第二部分:地址 -->
<nav>
<section>
<aside>
<a href="">博肖影视城(百香果市店)<p><span>8.0</span>分</p></a>
<p>王八区西大街95号土匪广场A栋2楼</p>
<div>
<p>改签</p>
<p>取票机</p>
<p>儿童优惠</p>
<p>可停车</p>
<p>WiFi</p>
</div>
</aside>
<div class="last">
<p>></p>
</div>
</section>
<div>
<a href=""><img src="./img/screens/ditu.jpg" alt=""></a>
<p class="ditu">地图</p>
</div>
</nav>
<!-- 第三部分:折扣卡和套餐 -->
<nav class="san">
<a href="">
<i></i>
<p>折扣卡</p>
</a>
<a href="">
<i></i>
<p>观影套餐</p>
</a>
</nav>
<!-- 第四部分:影片 -->
<nav class="ying">
<section>
<img src="./img/screens/诛仙.jpg" alt="">
<img src="./img/screens/热烈长.jpg" alt="">
<img src="./img/screens/陈情.jpg" alt="">
<img src="./img/screens/洛阳.jpg" alt="">
<img src="./img/screens/王牌.jpg" alt="">
<img src="./img/screens/余生.jpg" alt="">
</section>
<aside class="kuai">
<img src="./img/screens/sanjiao.png" alt="">
</aside>
<footer>
<section>
<a href="">诛仙<p><span>7.6</span>分</p></a>
<p>片长101分钟</p>
</section>
<div class="last">
<p>></p>
</div>
</footer>
</nav>
<!-- 第五部分:场次 -->
<article>
<section>
<p>购票享低价,首单更优惠,还送10元礼包</p>
<div class="qian">
<p>¥33元开卡 <span>></span></p>
</div>
</section>
<section>
<p>
今天8月30日
</p>
</section>
<aside>
<div class="left">
<div>
<p>17:30</p>
<p>19:07散场</p>
</div>
<div>
<p>国语2D</p>
<p>激光1号厅</p>
</div>
</div>
<div class="right">
<div>
<p><span>32</span>元</p>
<p>折扣卡:29元</p>
</div>
<a href="./seat.html">
<p>选座购票</p>
</a>
</div>
</aside>
<aside>
<div class="left">
<div>
<p>18:10</p>
<p>19:47散场</p>
</div>
<div>
<p>国语2D</p>
<p>激光2号厅</p>
</div>
</div>
<div class="right">
<div>
<p><span>32</span>元</p>
<p>折扣卡:29元</p>
</div>
<a href="./seat.html">
<p>选座购票</p>
</a>
</div>
</aside>
<aside>
<div class="left">
<div>
<p>18:50</p>
<p>20:27散场</p>
</div>
<div>
<p>国语2D</p>
<p>全景声厅(大)</p>
</div>
</div>
<div class="right">
<div>
<p><span>32</span>元</p>
<p>折扣卡:29元</p>
</div>
<a href="./seat.html">
<p>选座购票</p>
</a>
</div>
</aside>
<aside>
<div class="left">
<div>
<p>19:30</p>
<p>21:07散场</p>
</div>
<div>
<p>国语2D</p>
<p>激光3号厅</p>
</div>
</div>
<div class="right">
<div>
<p><span>32</span>元</p>
<p>折扣卡:29元</p>
</div>
<a href="./seat.html">
<p>选座购票</p>
</a>
</div>
</aside>
</article>
</body>
</html>
@font-face {
font-family: "N1";
src: url("../fonts/digital-7_mono.ttf");
}
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部提示
header {
background-color: #db413a;
padding: 0.43rem 0.5rem;
display: flex;
align-items: center;
color: white;
a {
font-size: 0;
img {
height: 0.55rem;
padding: 0.2rem;
padding-left: 0;
padding-right: 0.47rem;
margin: 0.3rem;
border-right: 1px solid #a8261d;
margin: 0;
}
}
div {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: space-between;
padding: 0 0.5rem;
font-size: 0.48rem;
letter-spacing: 0.02rem;
span {
color: white;
font-size: 0.7rem;
font-family: "黑体";
}
span:hover {
background-image: url("../img/screens/wujiaoxing2.png");
background-size: 100% 100%;
}
p {
margin: 0;
}
}
}
// 第二部分:地址
nav {
padding: 0.46rem 0.44rem;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e4e4e4;
section {
width: 8.6rem;
display: flex;
justify-content: space-between;
align-items: center;
aside {
a {
font-size: 0.45rem;
color: black;
display: flex;
text-align: center;
margin-bottom: 0.1rem;
p {
margin: 0;
font-size: 0.38rem;
margin-top: auto;
margin-bottom: auto;
margin-left: 0.2rem;
color: #ffb400;
span {
color: #ffb400;
font-size: 0.45rem;
}
}
}
P {
font-size: 0.36rem;
margin: 0;
margin-bottom: 0.2rem;
color: #999999;
}
div {
display: flex;
p {
margin-right: 0.1rem;
padding: 0.05rem 0.05rem;
box-sizing: border-box;
font-size: 0.28rem;
border-radius: 0.1rem;
border: 0.02rem solid #4a9eb1;
color: #4a9eb1;
}
}
}
.last {
border-right: 0.01rem solid #e4e4e4;
padding-right: 0.4rem;
height: 1.42rem;
p {
font-size: 0.5rem;
color: #999999;
letter-spacing: 0.01rem;
font-family: "宋体";
margin-bottom: 0;
}
}
}
div {
font-size: 0;
text-align: center;
a {
img {
width: 0.42rem;
margin-bottom: 0.1rem;
}
}
.ditu {
font-size: 0.33rem;
color: #999999;
letter-spacing: 0.01rem;
margin: 0;
}
}
}
// 第三部分:折扣卡和套餐
.san {
padding: 0;
a {
width: 50%;
height: 1.34rem;
display: flex;
justify-content: center;
align-items: center;
&:not(:nth-child(2)) {
border-right: 0.01rem solid #e4e4e4;
}
i {
height: 0.47rem;
width: 0.6rem;
background-image: url("../img/screens/icon100.png");
background-position: -2.6rem -3.91rem;
display: inline-block;
background-size: 5.6rem 5.1rem;
margin-right: 0.1rem;
}
&:nth-child(2) {
i {
background-position: -3.27rem -3.99rem;
width: 0.4rem;
}
}
p {
font-size: 0.4rem;
color: #727272;
margin: 0;
}
}
}
// 第四部分:影片
.ying {
background-image: url("../img/screens/xiangqingbeijing.jpg");
display: block;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin-bottom: 0.5rem;
section {
display: flex;
overflow: scroll;
width: 6.84rem;
margin: 0 0 0 auto;
img {
height: 3.23rem;
width: 2.21rem;
&:nth-child(1) {
height: 3.7rem;
width: 2.65rem;
border: 0.05rem solid white;
}
&:not(:last-child) {
margin-right: 0.56rem;
}
}
}
.kuai {
font-size: 0;
text-align: center;
margin-top: 0.3rem;
margin-bottom: 0;
img {
width: 0.7rem;
height: 0.3rem;
}
}
footer {
padding: 0.46rem 0.44rem;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
section {
display: inline-block;
margin: 0;
a {
font-size: 0.5rem;
color: black;
display: flex;
text-align: center;
margin-bottom: 0.1rem;
p {
margin: 0;
font-size: 0.38rem;
margin-top: auto;
margin-bottom: auto;
margin-left: 0.2rem;
color: #ffb400;
span {
color: #ffb400;
font-size: 0.45rem;
}
}
}
P {
font-size: 0.36rem;
margin: 0;
color: #999999;
}
}
.last {
p {
font-size: 0.8rem;
color: #999999;
letter-spacing: 0.01rem;
margin: 0;
font-family: "宋体";
}
}
}
}
// 第五部分:场次
article {
section {
height: 1.18rem;
background-color: #fef4c9;
color: #fd9c02;
&:not(:nth-child(2)) {
display: flex;
justify-content: space-between;
align-items: center;
}
padding: 0 0.42rem;
p {
font-size: 0.38rem;
margin: 0;
}
.qian {
margin: 0;
p {
margin: 0;
span {
font-size: 0.45rem;
font-family: "黑体";
}
}
}
&:nth-child(2) {
background-color: white;
color: #f6483a;
letter-spacing: 0.02rem;
p {
font-size: 0.45rem;
border-bottom: 0.06rem solid #f6483a;
width: 2.8rem;
height: 0.57rem;
padding-top: 0.32rem;
padding-bottom: 0.23rem;
}
}
}
aside {
display: flex;
background-color: white;
padding: 0.5rem 0.42rem;
justify-content: space-between;
border-top: 1px solid #e4e4e4;
.left {
display: flex;
align-items: flex-end;
div {
p {
margin: 0;
&:nth-child(1) {
font-size: 0.56rem;
font-family: "N1";
color: black;
}
font-size: 0.32rem;
color: #999999;
}
&:nth-child(2) {
margin-left: 0.5rem;
p {
&:nth-child(1) {
font-size: 0.36rem;
}
}
}
}
}
.right {
display: flex;
align-items: center;
div {
p {
&:nth-child(1) {
font-size: 0.29rem;
color: #dc3f3f;
span {
font-size: 0.48rem;
}
}
color: #ff9700;
font-size: 0.32rem;
margin: 0;
}
}
a {
color: #dc3f3f;
border: 0.03rem solid #dc3f3f;
margin-left: 0.5rem;
box-sizing: border-box;
padding: 0.15rem;
border-radius: 0.1rem;
text-align: center;
p {
font-size: 0.32rem;
margin: 0;
}
}
}
}
}
}
Seat selection page:
<!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">
<title>选座页面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/seat.css">
<script src="./auto-size.js"></script>
</head>
<body>
<!-- 第一部分:头部登录提示 -->
<header>
<a href="./cinema.html"><img src="./img/screens/fanhuijiantou.gif" alt=""></a>
<div>
<p>诛仙</p>
<a href=""><img src="./img/seat/fenxiang.jpg" alt=""></a>
</div>
</header>
<!-- 第二部分:影片标题 -->
<nav>
<section>
<aside>
<a href="">博肖影视城(百香果市店)</a>
<p>今天8月30日 <span>17:30</span> <span>国语2D</span> </p>
</aside>
<a href=""><p>换一场</p></a>
</section>
<section class="tu">
<div>
<i></i>
<p> 可选</p>
</div>
<div>
<i></i>
<p> 已售</p>
</div>
<div>
<i></i>
<p> 已选</p>
</div>
<div>
<i></i>
<p> 情侣座</p>
</div>
</section>
</nav>
<!-- 第三部分:选座区 -->
<article>
<!-- 3.1顶部 -->
<div><img src="./img/seat/jiguangyingmu.jpg" alt=""></div>
<!-- 3.2座位 -->
<aside>
<!-- 3.2.1左边数字 -->
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span> </span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
</section>
<!-- 3.2.2右边座位 -->
<p>银幕中央</p>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
</article>
<!-- 第四部分:选人数区 -->
<footer>
<p>推荐座位</p>
<section>
<span>1人</span>
<span>2人</span>
<span>3人</span>
<span>4人</span>
<span>5人</span>
</section>
</footer>
<!-- 第五部分:选座按钮 -->
<footer>
<p>一次最多选择五个座位</p>
<span>请先选座</span>
</footer>
</body>
</html>
body {
background-color: #f5f5f5;
a {
text-decoration: none;
}
// 第一部分:头部提示
header {
background-color: #db413a;
padding: 0.43rem 0.5rem;
display: flex;
align-items: center;
color: white;
a {
font-size: 0;
img {
height: 0.55rem;
padding: 0.2rem;
padding-left: 0;
padding-right: 0.47rem;
margin: 0.3rem;
border-right: 1px solid #a8261d;
margin: 0;
}
}
div {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: space-between;
padding: 0 0 0 0.5rem;
font-size: 0.48rem;
letter-spacing: 0.02rem;
a {
img {
border: 0;
padding-right: 0;
}
}
p {
margin: 0;
}
}
}
// 第二部分:影片标题
nav {
padding: 0.42rem 0.5rem;
background-color: white;
border-bottom: 1px solid #e4e4e4;
// 2.1标题
section {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e4e4e4;
padding-bottom: 0.42rem;
aside {
a {
font-size: 0.45rem;
color: black;
display: flex;
text-align: center;
margin-bottom: 0.1rem;
border: 0;
padding: 0;
}
P {
font-size: 0.36rem;
margin: 0;
color: #666666;
span {
color: #999999;
&:nth-child(2) {
color: #f6483a;
}
}
}
}
a {
font-size: 0.33rem;
color: #666666;
letter-spacing: 0.01rem;
margin: 0;
border: 0.02rem solid #d8d8d8;
padding: 0.2rem;
box-sizing: border-box;
border-radius: 0.5rem;
p {
margin: 0;
}
}
}
// 2.2图
.tu {
padding-bottom: 0;
border: 0;
padding-top: 0.34rem;
justify-content: space-around;
div {
font-size: 0;
display: flex;
align-items: center;
i {
height: 0.43rem;
width: 0.45rem;
background-image: url("../img/seat/icon100.png");
background-size: 5.6rem 5.1rem;
background-position: -1.3rem -4.56rem;
display: inline-block;
}
&:nth-child(2) {
i {
background-position: -1.8rem -4.56rem;
}
}
&:nth-child(3) {
i {
background-position: -2.3rem -4.56rem;
}
}
&:nth-child(4) {
i {
width: 0.9rem;
background-position: -2.8rem -4.56rem;
}
}
p {
font-size: 0.4rem;
color: #666666;
margin: 0;
}
}
}
}
// 第三部分:选座区
article {
// 3.1顶部
div {
font-size: 0;
text-align: center;
img {
height: 0.63rem;
}
}
// 3.2座位
aside {
display: flex;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
justify-content: center;
// 3.2.1左边数字
section {
width: 0.45rem;
height: 7.2rem;
background-color: #c4c3c3;
font-size: 0;
padding: 0.3rem 0.08rem;
box-sizing: border-box;
border-radius: 0.3rem;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 0.4rem;
span {
font-size: 0.3rem;
line-height: 0.55rem;
color: white;
}
}
p {
font-size: 0.28rem;
padding: 0.08rem 0.17rem;
color: #979797;
border: 0.01rem solid #cac9c9;
background-color: #f5f5f5;
border-radius: 0.1rem;
position: fixed;
}
// 3.2.2右边座位
div {
margin: auto;
ul {
display: flex;
padding-left: 0;
li {
background-image: url("../img/seat/zuowei1.png");
height: 0.43rem;
width: 0.48rem;
background-size: contain;
margin: 0 0.13rem 0.13rem 0;
}
li:hover {
background-image: url("../img/seat/zuowei2.1.png");
}
&:nth-child(1) {
li {
&:nth-child(1) {
background-image: none;
}
}
}
&:nth-child(5) {
li {
background-image: none;
}
}
&:nth-child(6) {
li {
&:nth-child(-n+8):nth-child(n+7) {
background-image: url("../img/seat/zuowei3.png");
}
}
}
&:nth-child(-n+11):nth-child(n+6) {
li {
&:nth-child(-n+11):nth-child(n+10) {
background-image: none;
}
}
}
}
}
}
}
// 第四部分:选人数区
footer {
padding: 0 0.4rem;
background-color: white;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
p {
font-size: 0.4rem;
margin: 0;
padding-top: 0.29rem;
padding-bottom: 0.29rem;
}
section {
font-size: 0;
display: flex;
justify-content: space-between;
margin-bottom: 0.29rem;
span {
font-size: 0.37rem;
border: 0.01rem solid #d8d8d8;
padding: 0.15rem 0.55rem;
border-radius: 0.1rem;
}
span:hover {
background-color: #4ab200;
color: white;
}
}
// 第五部分:选座按钮
&:nth-of-type(2) {
padding: 0.23rem 0.44rem;
display: flex;
justify-content: space-between;
align-items: center;
border: 0;
p {
font-size: 0.38rem;
margin: 0;
color: #646464;
letter-spacing: 0.02rem;
}
span {
font-size: 0.47rem;
background-color: #f5ddb0;
padding: 0.3rem 1.2rem;
box-sizing: border-box;
border-radius: 0.3rem;
color: white;
letter-spacing: 0.02rem;
font-weight: bold;
}
span:hover {
background-color: #db413a;
color: white;
}
}
}
}