话不多说，直接上代码。这是之前学的阶段时候写的了，我写的可能不算尽善尽美，但看着还好，因为不是最终版，没有加入JS代码，所以他没有动态功能，只有单纯的跳转之类的。等我把JS加入会再发一份出来的。
如有bug，仅供参考，发出来也是怕弄丢，存个地方为了我以后有个地方方便看哈哈~
我的页面：
<!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;
}
登录页面：
<!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>我后面都直接放scss代码了，更短更直观。
@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;
}
}
}
}
}注册页面：
<!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;
}
}
}
}
}发现页面：
<!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;
}
}
}
}
}影院页面：
<!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;
}
}
}
}
}热映页面：
<!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;
}
}
}
}
}待映页面：
<!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;
}
}
}
}
}详情页面：
<!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;
}
}
}放映厅页面：
<!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;
}
}
}
}
}
}选座页面：
<!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;
}
}
}
}