猫眼APP热映
作者：互联网
<!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/reying.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>
<!-- 图片 -->
<img src="./IMG/reyingdatu.jpg" alt="">
<!-- 主体 -->
<article>
<section>
<div class="jieshao no_border">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
<i></i>
</div>
<section>
<p>观众<span>6.5</span></p>
<p>专业<span>6.5</span></p>
</section>
<p>蓝灯在初上，福安豪杰谜团</p>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="./xuanzuo.html" class="red">购票</a>
</div>
</div>
</div>
</section>
<!-- 资讯 -->
<div>
<!-- 上 -->
<div>
<div>
<span>资讯</span>
</div>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
<!-- 下 -->
<div>
<div>
<span>资讯</span>
</div>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
</div>
<section>
<div class="jieshao">
<a href="./xiangqing.html"><img src="./IMG/zhouwu1.jpg" alt=""></a>
<!-- 图片右侧 -->
<div>
<!-- 左文字 -->
<div>
<!-- 1 -->
<div>
<p>但丁密码</p>
<i></i>
</div>
<section>
<p>观众<span>6.5</span></p>
<p>专业<span>6.5</span></p>
</section>
<p>蓝灯在初上，福安豪杰谜团</p>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="./xuanzuo.html" class="red">购票</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>
<section>
<p>观众<span>6.5</span></p>
<p>专业<span>6.5</span></p>
</section>
<p>蓝灯在初上，福安豪杰谜团</p>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="./xuanzuo.html" class="red">购票</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>
<section>
<p>观众<span>6.5</span></p>
<p>专业<span>6.5</span></p>
</section>
<p>蓝灯在初上，福安豪杰谜团</p>
<p>蓝灯在初上，福安豪杰谜团汤姆汉克</p>
</div>
<!-- 右 -->
<div>
<a href="./xuanzuo.html" class="red">购票</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>
</a>
</ul>
</footer>
<!-- 底部黑色 -->
<div class="bottom"></div>
</body>
</html>
.rey {
>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 {
>img {
width: 10.8rem;
margin-top: 3.6rem;
}
>article {
margin-bottom: 3.5rem;
>section {
.no_border {
border: 0;
}
}
// 资讯
>div:nth-of-type(1) {
background-color: white;
>div {
display: flex;
align-items: center;
>div {
margin-right: 0.3rem;
>span {
font-size: 0.25rem;
display: inline-block;
color: #ff9700;
border: 2px solid #ff9700;
padding: 0rem 0.07rem 0.02rem;
border-radius: 5px;
margin-left: 1.6rem;
vertical-align: 0.07rem;
}
}
p {
padding: 0.2rem 0;
font-size: 0.3rem;
color: #626262;
flex: 1;
border-top: 2px solid #eaeaea;
border-bottom: 2px solid #eaeaea;
}
}
>div:nth-of-type(2) {
>p {
border: 0;
}
border-bottom: 2px solid #eaeaea;
}
}
}
}
标签：热映,福安,APP,6.5,谜团,rem,蓝灯,border,猫眼 来源： https://blog.csdn.net/V________/article/details/110389267