<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo1</title>
<style>
* { margin: 0; padding: 0; font-size: 14px; } li { list-style: none; margin-top: 10px; } .box { width: 980px; margin: auto; padding: 0 20px; margin-top: 20px; box-sizing: border-box; }
.logo-nav { width: 148px; } .nav { padding-bottom: 10px; border-bottom: 3px solid #1678be; } .nav .logo { float: left; } .nav .nav-text { float: right; }
.nav-text a { color: #000; text-decoration: none; } .info-box { height: 440px; width: 100%; margin-top: 20px; } .info-box .logo-swiper { width: 100%; }
.info-box .right .title-h1 { text-align: center; } .info-box .right .info { padding: 10px; font-size: 16px; box-sizing: border-box; overflow: auto; }
.comment-box .item { height: 105px; margin-top: 20px; position: relative; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.comment-box .portrice { position: absolute; width: 62px; } .comment-box .userInfo { position: absolute; left: 80px; }
.comment-box .userInfo .userName { display: inline-block; color: darkorange; font-size: 17px; }
.comment-box .userInfo .date { display: inline-block; margin-left: 30px; font-size: 14px; color: #999; }
.comment-box .text { position: absolute; left: 80px; top: 50px; height: 20px; font-size: 14px; }
.comment-box .from { position: absolute; left: 80px; top: 70px; color: coral; font-size: 14px; } .new-film-box { margin-bottom: 15px; }
.film-list .item img { float: left; margin-right: 10px; width: 10%; } .hot-film-box { margin-bottom: 20px; border-bottom: 3px solid #2FA2ED; padding-bottom: 20px; }
.hot-film-box .left { float: left; width: 600px; } .hot-film-box .right { float: right; width: 200px; height: 100%; } .hot-film-box .right img { width: 100%; }
.hot-film-box .left .info { margin-top: 15px; line-height: 20px; } .bottom-box { text-align: center; border-top: 1px solid #ddd; box-sizing: border-box; padding: 15px 100px; }
.b-nav a { text-decoration: none; } .bottom-box .tip { margin-top: 12px; line-height: 28px; } .red { color: red; } .blue { color: blue; } .italic { font-style: italic; }
</style>
</head>
<body>
<div class="box">
<div class="nav">
<img class="logo-nav" src="./images/logo.jpg" alt="LOGO">
<div class="nav-text">
<a href="#">电影世界首页 |</a>
<a href="#">登录 |</a>
<a href="#">注册 |</a>
<a style="color: red;" href="#">收藏</a>
</div>
</div>
<div class="info-box">
<img class="logo-swiper" src="./images/banner.jpg" alt="首页图片">
<div style="clear: both;"></div>
</div>
<div class="new-film-box">
<h2 style="font-size: 17px;" class="title">最新电影</h2>
<div style="border: 2px solid #2FA2ED;margin: 10px 0 5px 0"></div>
<ul class="film-list">
<li class="item">
<img src="./images/img_01.jpg" />
</li>
<li class="item">
<img src="./images/img_02.jpg" />
</li>
<li class="item">
<img src="./images/img_03.jpg" />
</li>
<li class="item">
<img src="./images/img_04.jpg" />
</li>
<li class="item">
<img src="./images/img_05.jpg" />
</li>
<li class="item">
<img src="./images/img_06.jpg" />
</li>
<li class="item">
<img src="./images/img_07.jpg" />
</li>
<li class="item">
<img src="./images/img_08.jpg" />
</li>
<li class="item">
<img src="./images/img_09.jpg" />
</li>
</ul>
<div style="clear:both;"></div>
</div>
<div class="hot-film-box">
<h2 style="font-size: 17px;" class="title">热门电影介绍</h2>
<div style="border: 2px solid #ddd;margin: 10px 0 5px 0"></div>
<div class="film-info">
<div class="left">
<div class="top-info">
<a style="color: red;" href="#">西游降魔篇</a>
<a href="#">高清视频在线观看</a>
<a href="#">爱奇艺</a>
</div>
<div class="info">
<p>上映时间：2013年2月10日<br>
导演：<span class="red">周星驰 郭子健</span><br>
发行公司：安乐影片<br>
<span class="blue">主演：</span><a href="#">黄渤</a> <a href="#">文章</a> <a href="#">舒淇</a> <a href="#">周秀娜</a> <a href="#">释行宇</a> <a href="#">罗志祥</a> <a href="#">何文辉</a> <a href="#">李尚正</a><br>
片长：110分钟<br>
<span class="red italic">类型：冒险 奇幻 喜剧</span><br>
定价：<span class="red">150元</span><br>
简介 ：受气的唐僧、暴戾的孙悟空、帅气的猪八戒、妩媚的沙僧，完全颠覆
版西游记，周星驰时隔15年自编自导再战西游。 这是个妖魔横行的世界，百
姓苦不堪言。年轻的驱魔人玄奘以“舍小我，成大我”的大无畏精神，历尽
艰难险阻，依次收复水妖、猪妖以及妖王之王孙悟空为徒，并用“爱”将他
们感化......</p>
</div>
</div>
<div class="right">
<img src="./images/moviebanner.jpg">
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="comment-box">
<img class="comment-icon" src="./images/comment.jpg" />
<div style="height: 2px;background:#ddd;margin-top:5px;"></div>
<ul class="comment-list">
<li class="item">
<img class="portrice" src="./images/pic01.jpg" />
<div class="content-box">
<div class="userInfo">
<p class="userName">影迷无敌001</p>
<p class="date">2020-1-2 15:38:37</p>
</div>
<p class="text">请剧情党们不要太较真电影对魔兽历史的更改，毕竟翻拍的电影，多少会有些出入，我们看的是情怀，哈哈。。。</p>
<p class="from">来自:大众点评网友</p>
</div>
</li>
<li class="item">
<img class="portrice" src="./images/pic02.jpg" />
<div class="content-box">
<div class="userInfo">
<p class="userName">时光不老</p>
<p class="date">2015-3-2 15:05:37</p>
</div>
<p class="text">个人认为小时代毫无看点，看了不到半小时就要睡着了，我已无力吐槽，建议大家还是去读原著吧！！！ </p>
<p class="from">来自:星光影院网友</p>
</div>
</li>
<li class="item">
<img class="portrice" src="./images/pic03.jpg" />
<div class="content-box">
<div class="userInfo">
<p class="userName">cocoke</p>
<p class="date">2016-2-14 10:38:36</p>
</div>
<p class="text">星爷的每一部电影都很经典，重复地看过很多遍，每次都有更深刻的理解和更深的感悟，同样期待《美人鱼》。
来自：美团网网友</p>
<p class="from">来自:美团网网友</p>
</div>
</li>
</ul>
</div>
<div class="bottom-box">
<p class="b-nav">
<a href="#"> 公司简介 |</a>
<a href="#"> 关于我们 |</a>
<a href="#"> 联系我们 |</a>
<a href="#"> 友情链接 |</a>
<a href="#"> 招聘信息 |</a>
<a href="#"> 产品答疑</a>
</p>
<p class="tip"><span class="red">免责声明：</span>本网站内容收集于互联网，电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p>
</div>
</div>
</body>
</html>