1.参考电影网站网址:电影网
html代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影网站</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/movie.css">
</head>
<body>
<!-- welcome开始 -->
<div class="welcome">
<div class="container">
<p class="p1">欢迎来到万影网，我们因为电影而相聚。</p>
<p class="p2">
<a href="#">Ctrl+D</a>
<a href="#" class="a1">加入收藏夹</a>-
<a href="#" class="a2">保存到桌面</a>-
<a href="#" class="a3">传送口</a>
</p>
</div>
</div>
<!-- welcome结束 -->
<!-- 头部开始 -->
<div class="top container">
<!-- logo开始 -->
<div class="logo">
</div>
<!-- logo结束 -->
<div class="search">
<input type="text" placeholder="电影搜索" class="keyword">
<input type="submit" class="submit" value="搜索">
</div>
</div>
<!-- 头部结束 -->
<!-- 导航开始 -->
<div class="nav">
<div class="container">
<div class="menu">
<ul>
<li><a href="#" class="a1">万影网</a></li>
<li class="l2"><a href="#" class="a2">首页</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">连续剧</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">微电影</a></li>
<li><a href="#">搜索</a></li>
</ul>
</div>
</div>
</div>
<!-- 导航结束 -->
<!-- banner开始 -->
<div class="banner">
<div class="container">
<img src="./imgs/spider.jpg" alt="">
</div>
</div>
<!-- banner结束 -->
<!-- 热播电影开始 -->
<div class="hot-movie">
<div class="container">
<div class="title1">
<h3 class="h31">
热播电影
</h3>
</div>
<div class="movies1">
<ul class="movieu1">
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
<li><a href="#">
<img src="./imgs/h1.jpg" alt="">
</a>
<a href="#" class="a1">
诛仙电影版
</a>
<span> 评分： 5.9</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 热播电影结束 -->
<!-- 最新电影开始 -->
<div class="new-movie">
<div class="container">
<div class="new-movie-title">
<h3>
最新电影
</h3>
</div>
<div class="new-movie-content">
<ul>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
<li>
<a href="#" class="img">
<img src="./imgs/n3.jpg" alt="">
</a>
<p class="p1"><a href="#">响尾蛇之吻- <span class="sp1">0.0</span></a></p>
<p class="p2"><span>类型：
<a href="#">
<span class="sp2">喜剧片 </span>
<span class="sp3"> 动作 2023 中国</span>
</a></span>
</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新电影结束 -->
<!-- 更多电影开始 -->
<div class="more-movie">
<div class="container">
<a href="#">
<span>更多热门影片</span>
</a>
</div>
</div>
<!-- 更多电影结束 -->
<!-- 链接开始 -->
<div class="movie-link">
<div class="container">
<h3>
友情链接
</h3>
</div>
</div>
<div class="link1">
<div class="container">
<p>
<a href="#">最新电影</a>
<a href="#">微电影</a>
<a href="#">新万影网</a>
<a href="#">万影网</a>
</p>
</div>
</div>
<!-- 链接结束 -->
<div class="last">
<div class="container">
<p> 免责声明：影视均来源于互联网，视频版权属于原有版权商。</p>
<p>本网站仅提供WEB页面服务，并不提供影片资源存储，也不参与录制、上传，</p>
<p>若本站收录的节目无意侵犯了贵司版权，请给网页底部邮箱地址来信，我们会及时处理和回复，谢谢！
</p><br>
<p> ♥万影网 - Copyright © 2018-2019 -</p>
</div>
</div>
</body>
</html>css代码:
common.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
.container {
width: 960px;
margin: 0 auto;
}movie.css
.welcome .container {
height: 32px;
display: flex;
font-size: 12px;
color: #777;
justify-content: space-between;
line-height: 31px;
}
body {
font-size: 12px;
}
.welcome {
border-bottom: 1px solid #d3d2d2;
margin-bottom: 20px;
background-color: #fff;
}
.welcome .container a {
color: #777;
}
.welcome .container .a3 {
color: red;
}
.welcome .container .a2 {
color: red;
}
.top {
height: 55px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
}
.logo {
width: 200px;
height: 55px;
background-image: url(../imgs/logo.png);
background-size: contain;
background-repeat: no-repeat;
}
.search {
width: 239px;
height: 34px;
display: flex;
}
.search .keyword {
width: 185px;
height: 34px;
border: 1px solid #ccc;
padding-left: 20px;
line-height: 34px;
}
.search .submit {
width: 54px;
height: 34px;
background-color: #337ab7;
border: none;
color: #fff;
}
.search .submit:hover {
background-color: rgba(40, 96, 144);
;
}
.nav {
background-color: #07a7e1;
}
.nav .container {
height: 50px;
margin-top: 20px;
}
.nav .container .menu ul {
display: flex;
height: 50px;
align-items: center;
}
.nav .container .menu ul li a {
color: #fff;
}
.nav .container .menu ul li {
padding: 0 15px;
height: 50px;
line-height: 50px;
}
.nav .container .menu .a1 {
font-size: 18px;
}
.nav .container .menu ul li:nth-child(n+2):hover {
background-color: #0095bb;
}
.nav .container .menu ul li .a1:hover {
color: #5e5e5e;
}
.nav .container .menu .l2 {
background-color: #0095bb;
}
.banner {
height: 427px;
background-color: #f5f6f5;
}
.banner .container {
padding-top: 20px;
}
.banner .container img {
width: 100%;
height: 100%;
}
.hot-movie {
height: 330px;
padding-top: 20px;
background-color: #f5f6f5;
}
.hot-movie .container {
background-color: #fff;
}
.hot-movie .title1 {
height: 56px;
overflow: hidden;
}
.hot-movie .title1 h3 {
color: #000;
font-size: 18px;
padding-left: 20px;
border-left: 8px solid #00A6DE;
font-weight: 400;
margin-top: 13px;
}
.movies1 {
height: 255px;
padding: 10px;
}
.movies1 ul {
display: flex;
height: 255px;
}
.movies1 ul li {
width: 160px;
padding: 10px;
}
.movies1 ul li a {
display: block;
}
.movies1 ul li a img {
width: 100%;
height: 100%;
}
.movies1 ul li:hover {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.movies1 ul li .a1 {
font-size: 14px;
color: #333;
}
.movies1 ul li p {
font-size: 14px;
color: #333;
}
.movies1 ul li p span {
padding: 5px 15px 5px 5px;
background-color: #dfdfdf;
}
/* 最新电影开始 */
.new-movie {
padding-top: 20px;
background-color: #f5f6f5;
}
.new-movie .container {
background-color: #fff;
}
.new-movie .container .new-movie-title {
height: 56px;
overflow: hidden;
}
.new-movie .container .new-movie-title h3 {
/* padding-left: 10px;
height: 32px;
line-height: 32px;
border-left: 8px solid #00A6DE;
margin-top: 12px;
font-size: 18px;
color: #000;
font-weight: 400; */
color: #000;
font-size: 18px;
padding-left: 20px;
border-left: 8px solid #00A6DE;
font-weight: 400;
margin-top: 13px;
}
.new-movie .container .new-movie-content li {
width: 228px;
height: 351px;
padding: 10px;
margin-bottom: 10px;
}
.new-movie .container .new-movie-content li .img {
display: block;
width: 208px;
height: 285px;
padding: 2px;
border: 1px solid #ccc;
}
.new-movie .container .new-movie-content li .img img {
width: 100%;
height: 100%;
}
/* .new-movie .container .new-movie-content {
height: 1139px;
} */
.new-movie .container .new-movie-content ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.new-movie .container .new-movie-content li .p1 a {
color: #333;
font-size: 14px;
}
.new-movie .container .new-movie-content li .p1 .sp1 {
color: #ccc;
}
.new-movie .container .new-movie-content li .p2 {
color: #7e7e7e;
margin-top: 4px;
}
.new-movie .container .new-movie-content li .p2 a {
color: #7e7e7e;
margin-top: 4px;
}
.new-movie .container .new-movie-content li .sp2 {
color: #888;
background-color: #d8d8d8;
padding: 2px 4px;
}
.new-movie .container .new-movie-content li .sp3 {
padding-left: 5px;
color: #337ab7;
}
.new-movie .container .new-movie-content li:hover {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
/* 最新电影结束 */
/* 更多电影开始 */
.more-movie {
background-color: #f5f6f5;
}
.more-movie .container {
height: 34px;
background-color: #337ab7;
border-radius: 4px;
}
.more-movie .container a {
display: block;
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 34px;
}
.more-movie .container:hover {
background-color: #286090;
}
/* 更多电影结束 */
.movie-link {
background-color: #f5f6f5;
}
.movie-link .container {
height: 56px;
overflow: hidden;
background-color: #fff;
}
.movie-link .container h3 {
color: #000;
font-size: 18px;
padding-left: 20px;
border-left: 8px solid #00A6DE;
font-weight: 400;
margin-top: 13px;
}
.link1 {
margin-top: -10px;
margin-left: 5px;
background-color: #f5f6f5;
}
.link1 .container {
background-color: #fff;
}
.link1 p a {
font-size: 14px;
color: #337ab7;
margin-right: 10px;
background-color: #fff;
}
.link1 p a:hover {
color: #23527c;
text-decoration: underline;
}
.last {
height: 114px;
background-color: #eee;
}
.last .container {
height: 114px;
text-align: center;
padding: 20px 0;
}
.last .container p {
color: #666;
line-height: 16px;
}
4091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
