电影时间首页(HTML+css)

使用HTML+css制作的一个简单的电影时间首页

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>电影时间首页</title>
	</head>

	<body>
		<!--header begin-->
		<div style="height: 63px;">
			<img src="img/logo.jpg" alt=" 电影时间" align="left" />
			<p align="right">电影时间首页&nbsp; &nbsp; |&nbsp; &nbsp;登陆&nbsp; &nbsp; |&nbsp; &nbsp; 注册&nbsp; &nbsp; |&nbsp; &nbsp;
				<font color="red">收藏</font>
			</p>
		</div>
		<hr color="#23aaea" 1>
		<!--header end-->
		<!--banner begin-->
		<div><img src="img/banner.jpg" /></div>
		<!--banner end-->
		<!--newmovie begin-->
		<div>
			<h2>最新电影</h2>
			<hr color- "#23aaea" />
			<img src="img/img_01.jpg" width="92" height="130" />
			<img src="img/img_02.jpg" width="92" height="130" />
			<img src="img/img_03.jpg" width="92" height="130" />
			<img src="img/img_04.jpg" width="92" height="130" />
			<img src="img/img_05.jpg" width="92" height="130" />
			<img src="img/img_06.jpg" width="92" height="130" />
			<img src="img/img_07.jpg" width="92" height="130" />
			<img src="img/img_08.jpg" width="92" height="130" />
			<img src="img/img_09.jpg" width="92" height="130" />
		</div>
		<!--newmovie end-->
		<!--hotmovie begin-->
		<div style="height: 358px;">
			<h2>热门电影介绍</h2>
			<hr color="#CCC" size="3" < fontsize="4" color="red">
			<ins>西游降魔篇</ins>
			</font>
			<font size="4" color="blue">
				<ins>高清视频在线观看&nbsp;爱奇艺</ins>
			</font>
			<img src="img/moviebanner.jpg" alt="电影时间" align="right" />
			<p align="left">
				<font>上映时间: 2013年2月10日</font><br />
				<font>导演:
					<font>导演:
						<font color="red">周星驰&nbsp;&nbsp;郭子健</font>
					</font><br>
					<font>发行公司: 安乐影片</font>
					<br />
					<font color="blue">主演: <ins>黄渤</ins>&nbsp;<ins>文章</ins>&nbsp;<ins>舒淇
</ins>&nbsp;<ins>周秀娜</ins>&nbsp;<ins>释行字</ins>&nbsp;<ins>罗志祥</ins>&nbsp;<ins>何文辉
</ins>&nbsp;<ins>李尚正</ins></font>
					<br />
					<font>片长:110分钟</font>
					br />
					<font color="red">类型:<em>百险奇幻喜剧</em></font>
					<br />
					<font>定价:
						<font color="red"><strong>150元</strong></font>
					</font>
					<br />
					<font>简介:受气的唐僧、暴戾的孙悟空、帅气的猪八戒、妩媚的沙僧,完全颠覆<br />版西游记,周 星驰时隔15年自编自导再战西游。这是个妖魔横行的世界,百
						<br/>姓苦不堪言。年轻的驱魔人玄奘以“含小我,成 大我”的大无畏精神,历尽
						<br />艰难险阳,依次收复水妖、猪妖以及妖王之王孙悟空为徒,并用“爱”将他<br />们 感化......
					</font>
			</p>
		</div>
		<hr color="#23aaea" />
		<!--hotmovie end-->
		<!--comment begin-->
		<div>
			<img src="img/comment.jpg" alt="网友评论" />
			<hr color=" #cCc " size="1" />
			<div>
				<img src="img/pic01.jpg" alt="" align="left" hspace="10" />
				<div>
					<p>
						<font color=" #F60 ">悲伤玉米排骨汤</font>&nbsp; &nbsp; &nbsp; &nbsp;
						<font size="2 " color="#999 ">2023-6-12 15:38: 37</font>
					</P>
					<p>
						<font size="2 ">请剧情党们不要太较真电影对魔兽历史的更改,毕竟翻拍的电影,多少会有些 出入,我们看的是情怀,哈哈。
						</font>
						<br />
						<font color="#F60 " size="2 ">
							来自:大众点评网友
						</font>
					</p>
				</div>
				<hr color=".CCC " size="1" />
			</div>
			<div>
				<img src="img/pic02.jpg" align="left" hspace="10" />
				<div>
					<P>
						<font color="#F60">拐只鱼养着</font>&nbsp; &nbsp; &nbsp;&nbsp;
						<font size="2" color="#999">2023-1-21 15:05:37</font>
					</p>
					<p>
						<font size="2">个人认为小时代毫无看点,看了不到半小时就要睡着了,我已无力吐槽,建议 大家还是去读原著吧!!!
						</font>
						<br />

						<font color="#F60" size="2">
							来自:星光影院网友
						</font>
					</p>
				</div>
				<hr color="#ccc" size="1" />
			</div>
			<div>
				<img src=" img/pic03.jpg "  align="left" hspace="10 " />
				<div>
					<p>
						<font color="#F60">美丽阳光</font>&nbsp; &nbsp; &nbsp; &nbsp;
						<font size="2 " color="#999 ">2023-12-14 10:38:36</font>
					</P>
					<p>
						<font size="2 ">星爷的每一部电影都很经典,重复地看过很多遍,每次都有更深刻的理解和更 深的感悟,同样期待《美人鱼》 </font>
						<br />
						<font color="#F60 " size="2  ">
							来自:美团网网友
						</font>
					</p>
				</div>
				<hr color="#ccc" size="1" />
			</div>
		</div>
		<!--comment end-->
		<!--footer begin-->
		<div>
			<p align=" center ">
				<font color="blue ">公司简介&nbsp; &nbsp;|&nbsp; &nbsp;关于我们&nbsp; &nbsp;| &nbsp;&nbsp; 联系我们&nbsp; &nbsp;| &nbsp;&nbsp;友情链接 &nbsp; &nbsp;|&nbsp; &nbsp; 招聘信息&nbsp; &nbsp;| &nbsp; &nbsp;产品答疑</font>
			</P>
			<p align="center ">
				<font color="red ">免责声明:</font>本网站内容收集于互联网,电影时光网不承担任何由于内容的合法性及健康性所引起的争议和法律责任。</p>
			<p align="center ">欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。</p>
		</div>
		<!--footer engo


	</body>
</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的电影网站示例,使用 HTMLCSS 和 JavaScript 进行制作: HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>电影网站</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>电影网站</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">电影分类</a></li> <li><a href="#">最新电影</a></li> <li><a href="#">登录</a></li> </ul> </nav> </header> <section id="banner"> <h2>欢迎来到电影网站</h2> <p>观看最新电影,畅享视觉盛宴</p> <button>查看更多</button> </section> <section id="categories"> <h2>电影分类</h2> <ul> <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> </section> <section id="movies"> <h2>最新电影</h2> <div class="movie"> <img src="movie1.jpg" alt="电影1"> <h3>电影1</h3> <p>上映时间:2021-01-01</p> </div> <div class="movie"> <img src="movie2.jpg" alt="电影2"> <h3>电影2</h3> <p>上映时间:2021-02-01</p> </div> <div class="movie"> <img src="movie3.jpg" alt="电影3"> <h3>电影3</h3> <p>上映时间:2021-03-01</p> </div> <div class="movie"> <img src="movie4.jpg" alt="电影4"> <h3>电影4</h3> <p>上映时间:2021-04-01</p> </div> </section> <section id="subscribe"> <h2>订阅我们</h2> <p>订阅我们的电影资讯,获取最新电影信息和优惠活动</p> <form> <input type="email" placeholder="请输入您的邮箱地址"> <button>订阅</button> </form> </section> <footer> <p>版权所有 © 2021 电影网站</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS 代码: ```css * { margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; } nav ul { list-style: none; display: flex; } nav li { margin-right: 20px; } nav li:last-child { margin-right: 0; } nav a { color: #fff; } section { padding: 60px 40px; } #banner { background-image: url(banner.jpg); height: 500px; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; } #banner h2 { font-size: 60px; margin-bottom: 20px; } #banner p { font-size: 24px; margin-bottom: 40px; } #banner button { background-color: #fff; color: #333; border: none; padding: 20px 40px; font-size: 20px; cursor: pointer; } #categories ul { list-style: none; display: flex; justify-content: center; align-items: center; margin-bottom: 60px; } #categories li { margin-right: 20px; } #categories li:last-child { margin-right: 0; } #categories a { color: #333; font-size: 20px; } #movies { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .movie { width: 300px; margin-bottom: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .movie img { width: 100%; height: 400px; object-fit: cover; margin-bottom: 20px; } .movie h3 { font-size: 30px; margin-bottom: 20px; } .movie p { font-size: 18px; } #subscribe { text-align: center; margin-bottom: 60px; } #subscribe h2 { margin-bottom: 20px; } #subscribe p { font-size: 20px; margin-bottom: 40px; } form input[type="email"] { width: 300px; height: 40px; padding: 0 10px; margin-right: 20px; border: 1px solid #ccc; border-radius: 20px; outline: none; } form button { background-color: #333; color: #fff; border: none; padding: 10px 20px; border-radius: 20px; font-size: 20px; cursor: pointer; } footer { background-color: #333; color: #fff; text-align: center; padding: 20px 0; } ``` JavaScript 代码: ```javascript // 在此处添加 JavaScript 代码 // 可以实现页面交互效果,如点击按钮弹出提示框等 ``` 这只是一个简单的电影网站示例,你可以根据自己的需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值