代码效果图
复制下面代码粘贴到预览网站预览 点击我跳转预览网站
完整代码
<!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>
<style>
/* 公共样式 */
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
body {
width: 960px;
margin: auto;
}
h3 {
height: 50px;
font-size: 20px;
line-height: 50px;
}
h4 {
margin-bottom: 20px;
}
.red {
color: red;
}
.zs {
color: #cfa780;
}
.hs {
color: #cecece;
}
.comment_title {
font-size: 23px;
color: #cfa780;
margin-right: 20px;
}
/* 头部模块样式 */
.header_top {
height: 63px;
border-bottom: 3px solid #079fe2;
}
.header_left {
float: left;
}
.header_right {
float: right;
}
.header_right a {
margin-right: 10px;
}
.header_img {
width: 960px;
height: 440px;
margin-top: 6px;
}
/* 主要内容模块样式 */
.nav {
padding-top: 6px;
border-top: 3px solid #079fe2;
}
.introduce {
height: 300px;
padding: 10px 0;
border-bottom: 3px solid #079fe2;
border-top: 3px solid gray;
}
.introduce_text {
float: left;
width: 548px;
}
.introduce_img {
float: right;
margin-left: 124px;
}
/* 评论模块样式 */
.comment_img {
padding-top: 3px;
}
.comment_user {
height: 100px;
padding: 10px;
border-top: 1px solid gray;
}
.comment_tx {
margin-top: 10px;
}
.comment_right {
margin-left: 6px;
}
.comment_user div {
float: left;
}
/* 关于我们模块 */
.bottom {
border-top: 1px solid gray;
padding: 10px;
text-align: center;
}
.bottom_about a{
margin-right: 10px;
}
</style>
</head>
<body>
<!-- 头部模块 -->
<header>
<div class="header_top">
<img src="https://s1.ax1x.com/2023/04/28/p9198m9.jpg" class="header_left">
<div class="header_right">
<a href="">电影时间首页</a>|
<a href="">登陆</a>|
<a href="">注册</a>|
<a href="">收藏</a>
</div>
</div>
<div class="header_img"><img src="https://s1.ax1x.com/2023/04/28/p919JT1.jpg"></div>
</header>
<div class="main">
<h3>最新电影</h3>
<div class="nav">
<img src="https://s1.ax1x.com/2023/04/28/p919h6g.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p919jcF.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CA1O.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CEcD.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CenH.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CmBd.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CnHA.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CKAI.jpg">
<img src="https://s1.ax1x.com/2023/04/28/p91CQ4P.jpg">
</div>
<h3>热门电影介绍</h3>
<div class="introduce">
<div class="introduce_text">
<h4><span class="red">西游降魔篇</span>高清视频在线观看 爱奇艺</h4>
<p>上映时间：2013年2月10日</p>
<p>导演：<span class="red">周星驰 郭子健</span></p>
<p>发行公司：安乐影片</p>
<p>主演：黄渤 文章 舒淇 周秀娜 释行宇 罗志祥 罗志祥 李尚正</p>
<p>片长：110分钟</p>
<p class="red">类型：冒险 奇幻 喜剧</p>
<p>定价：<span class="red">150元</span></p>
<p>简介 ：受气的唐僧、暴戾的孙悟空、帅气的猪八戒、妩媚的沙僧，完全颠覆
版西游记，周星驰时隔15年自编自导再战西游。 这是个妖魔横行的世界，百
姓苦不堪言。年轻的驱魔人玄奘以“舍小我，成大我”的大无畏精神，历尽
艰难险阻，依次收复水妖、猪妖以及妖王之王孙悟空为徒，并用“爱”将他
们感化......</p>
</div>
<img src="https://s1.ax1x.com/2023/04/28/p91C338.jpg" class="introduce_img">
</div>
</div>
<!-- 评论模块 -->
<div class="comment">
<img src="https://s1.ax1x.com/2023/04/28/p91CGjg.jpg" class="comment_img">
<div class="comment_user">
<div class="comment_tx"><img src="https://s1.ax1x.com/2023/04/28/p91CNHs.jpg"></div>
<div class="comment_right">
<p class="hs"><span class="comment_title">影迷无敌001</span> 2016-6-12 15:38:37</p><br>
<p>请剧情党们不要太较真电影对魔兽历史的更改，毕竟翻拍的电影，多少会有些出入，我们看的是情怀，哈哈。。。</p>
<p class="zs">来自:大众点评网友</p>
</div>
</div>
<div class="comment_user">
<div class="comment_tx"><img src="https://pic2.imgdb.cn/item/644bcb430d2dde57777254d7.jpg"></div>
<div class="comment_right">
<p class="hs"><span class="comment_title">时光不老</span>2015-3-2 15:05:37</p><br>
<p>个人认为小时代毫无看点，看了不到半小时就要睡着了，我已无力吐槽，建议大家还是去读原著吧！！！</p>
<p class="zs">来自：星光影院网友</p>
</div>
</div>
<div class="comment_user">
<div class="comment_tx"><img src="https://www.helloimg.com/images/2023/04/28/oqxEDb.jpg"></div>
<div class="comment_right">
<p class="hs"><span class="comment_title">cocoke</span>2016-2-14 10:38:36</p><br>
<p>星爷的每一部电影都很经典，重复地看过很多遍，每次都有更深刻的理解和更深的感悟，同样期待《美人鱼》。</p>
<p class="zs">来自：美团网网友</p>
</div>
</div>
</div>
<!-- 关于我们模块 -->
<div class="bottom">
<p class="bottom_about">
<a href="">公司简介</a>|
<a href="">关于我们</a>|
<a href="">联系我们</a>|
<a href="">友情链接</a>|
<a href="">招聘信息</a>|
<a href="">产品答疑</a>
</p>
<p>免责声明：本网站内容收集于互联网，电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。</p>
<p>欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报</p>
</div>
</body>
</html>
评论 (1)