<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/reset.css">
<link rel="stylesheet" href="./CSS/public.css">
<link rel="stylesheet" href="./CSS/daiying.css">
<script src="./JS/auto-size.js"></script>
<title>待映</title>
</head>
<body>
<!-- 渐变 -->
<!-- div1 -->
<div class="top"></div>
<header class="dai_reYing">
<select name="" id="">
<optgroup label="四川">四川</optgroup>
<option value="成都" selected>成都</option>
<option value="绵阳">绵阳</option>
<optgroup label="浙江">浙江</optgroup>
<option value="杭州">杭州</option>
<option value="温州">温州</option>
</select>
<div>
<nav>
<ul>
<li class="rey"><a href="./reying.html">热映</a></li>
<li class="daiy"><a href="./daiying.html">待映</a></li>
<li><a href="#3">找片</a></li>
</ul>
</nav>
</div>
<label for="sousuo"><img src="./IMG/fangdajing.jpg" alt=""></label>
</header>
<!-- 搜索框 -->
<form class="select">
<input type="text" id="sousuo" required>
<label for="sousuo">
<span><i></i>找影视剧、影人、影院</span>
</label>
</form>
<!-- 主体 -->
<article>
<section>
<p>预告片推荐</p>
<div>
<img src="./IMG/yugao1.jpg" alt="">
<img src="./IMG/yugao2.jpg" alt="">
<img src="./IMG/yugao1.jpg" alt="">
</div>
</section>
<section>
<p>近期最受期待</p>
<div>
<figure>
<p>16年待定</p>
<img src="./IMG/qidai1.jpg" alt="">
<figcaption>
三生三世十里桃花
</figcaption>
<p>210666人想看</p>
</figure>
<figure>
<p>16年待定</p>
<img src="./IMG/qidai1.jpg" alt="">
<figcaption>
三生三世十里桃花
</figcaption>
<p>210666人想看</p>
</figure>
<figure>
<p>16年待定</p>
<img src="./IMG/qidai1.jpg" alt="">
<figcaption>
三生三世十里桃花
</figcaption>
<p>210666人想看</p>
</figure>
<figure>
<p>16年待定</p>
<img src="./IMG/qidai1.jpg" alt="">
<figcaption>
三生三世十里桃花
</figcaption>
<p>210666人想看</p>
</figure>
<figure>
<p>16年待定</p>
<img src="./IMG/qidai1.jpg" alt="">
<figcaption>
三生三世十里桃花
</figcaption>
<p>210666人想看</p>
</figure>
</div>
</section>
<section>
<p>10月26日 周三</p>
<div class="jieshao">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
</div>
<!-- 2 -->
<div>
<span>42886</span><span>人想看</span>
</div>
<p>蓝灯在初上,福安豪杰谜团</p>
<p>蓝灯在初上,福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="" class="red"><i></i>想看</a>
</div>
</div>
</div>
</section>
<section>
<p>10月26日 周五</p>
<div class="jieshao">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
<i></i>
</div>
<!-- 2 -->
<div>
<span>42886</span><span>人想看</span>
</div>
<p>蓝灯在初上,福安豪杰谜团</p>
<p>蓝灯在初上,福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="" >预售</a>
</div>
</div>
</div>
<div class="jieshao">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
<i></i>
</div>
<!-- 2 -->
<div>
<span>42886</span><span>人想看</span>
</div>
<p>蓝灯在初上,福安豪杰谜团</p>
<p>蓝灯在初上,福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="">预售</a>
</div>
</div>
</div>
<div class="jieshao">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
<i></i>
</div>
<!-- 2 -->
<div>
<span>42886</span><span>人想看</span>
</div>
<p>蓝灯在初上,福安豪杰谜团</p>
<p>蓝灯在初上,福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="">预售</a>
</div>
</div>
</div>
</section>
</article>
<footer>
<ul>
<a href="./reying.html" class="reying"><li></li></a>
<a href="./yingyuan.html" class="yingyuan"><li></li></a>
<a href="./faxian.html" class="faxian"><li></li></a>
<a href="./my.html" class="my"><li></li></a>
</ul>
</footer>
<!-- 底部黑色 -->
<div class="bottom"></div>
</body>
</html>
@mixin f__ce {
display: flex;
align-items: center;
}
@mixin f_be_sta {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
@mixin f_be_ce {
display: flex;
justify-content: space-between;
align-items: center;
}
.daiy {
>a {
color: #b42019!important;
background-color: white;
}
}
footer>ul> .reying>li {
display: inline-block;
width: 0.77rem;
height: 1.14rem;
background-image: url("../IMG/icon100.png");
background-size: 5.6rem 5.1rem;
background-position: 0rem -2.77rem!important;
}
body {
>article {
margin-top: 3.7rem;
margin-bottom: 3.5rem;
>section:nth-of-type(1),>section:nth-of-type(2) {
>p:nth-child(1) {
font-size: 0.36rem;
padding: 0.2rem 0.45rem;
}
>div {
padding: 0.37rem 0 0.37rem 0.45rem;
background-color: white;
@include f__ce;
width: 10.3rem;
overflow-x: scroll;
&::-webkit-scrollbar {
display: none;
}
>img {
width: 4.55rem;
margin-right: 0.3rem;
}
>figure {
font-size: 0.36rem;
width: 2.53rem;
box-sizing: border-box;
margin-right: 0.3rem;
>p:nth-of-type(1) {
margin-bottom: 0.3rem;
padding: 0 0.1rem;
}
>img {
height: 3.45rem;
}
>figcaption {
margin: 0.27rem 0 0.15rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 0.1rem;
}
>p:nth-of-type(2) {
font-size: 0.32rem;
color: #989898;
padding: 0 0.1rem;
}
}
}
}
>section:nth-of-type(n+3) {
>p:nth-child(1) {
font-size: 0.36rem;
padding: 0.2rem 0.45rem;
}
}
}
}