HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)

news2024/12/28 5:49:50

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有1个页面

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>电影网</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
	<div class="wrap">
		<div class="header base">
			<div class="logo">
				<img src="./img/logo.png">
			</div>
			<div class="search">
				<form>
					<input type="" name="" placeholder="我给你开过车">
					<button>搜索</button>
				</form>
			</div>
			<div class="links">
				<a href="">播放记录</a>
				<a href="">登录/注册</a>
			</div>
		</div>

		<div class="nav">
			<ul class=" base">
				<li class="on"><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 class="base banner">
			<img src="./img/ba.jpeg">
		</div>

		<div class="pian base">
			<div class="pian_tit">最新大片 <a href="">查看更多</a></div>
			<div class="pian_content">
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">马锡五断案</div>
							<div class="pian_desc">巡回庭审司法为民</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/6.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
			</div>
		</div>

		<div class="pian base">
			<div class="pian_tit">港台片场 <a href="">查看更多</a></div>
			<div class="pian_content">
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">马锡五断案</div>
							<div class="pian_desc">巡回庭审司法为民</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/6.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
			</div>
		</div>

		<div class="pian base">
			<div class="pian_tit">欧美片场 <a href="">查看更多</a></div>
			<div class="pian_content">
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">马锡五断案</div>
							<div class="pian_desc">巡回庭审司法为民</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/6.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
			</div>
		</div>



		<div class="pian base">
			<div class="pian_tit">独家片场 <a href="">查看更多</a></div>
			<div class="pian_content">
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">马锡五断案</div>
							<div class="pian_desc">巡回庭审司法为民</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/3.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/2.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/1.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/4.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/5.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
				<div class="pian_item">
					<a href="">
						<div class="pian_img"><img src="./img/6.jpeg"></div>
						<div class="pian_info">
							<div class="pian_name">绝战香炉寺</div>
							<div class="pian_desc">坚毅少年复仇之路</div>
						</div>
					</a>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="base">
				<ul class="footer_nav">
					<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>
					<li><a href="">友情链接</a></li>
				</ul>
			</div>
		</div>
		<div class="footer_bom">
			<div class="base">
				<span class="bb">CopyRight © 2017</span>
				<span>电影频道节目中心官方网站| 京ICP证100935</span>
			</div>
		</div>
	</div>
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1499703.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flink ExecuteGraph构建源码解析

文章目录 前言ExecutionGraph中的主要抽象概念源码核心代码入口源码核心流程&#xff1a; 前言 在JobGraph构建过程中分析了JobGraph的构建过程&#xff0c;本文分析ExecutionGraph的构建过程。JobManager(JobMaster) 根据 JobGraph 生成 ExecutionGraph。ExecutionGraph是JobG…

keepalived原理以及lvs、nginx跟keeplived的运用

keepalived基础 keepalived的原理是根据vrrp协议&#xff08;主备模式&#xff09;去设定的 vrrp技术相关原理 状态机&#xff1b; 优先级0~255 心跳线1秒 vrrp工作模式 双主双备模式 VRRP负载分担过程 vrrp安全认证&#xff1a;使用共享密匙 keepalived工具介绍 keepal…

Python实现霍德里克-普雷斯科特(Hodrick-Prescott,HP)过滤器模型和UC-ARIMA模型(hpfilter算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 霍德里克-普雷斯科特&#xff08;Hodrick-Prescott, HP&#xff09;过滤器模型&#xff1a; HP滤波器是…

数据结构算法第二套试卷小题

1.哈夫曼树 在哈夫曼树中&#xff0c;每个非叶子节点都有两个子节点&#xff08;因为哈夫曼树是一种二叉树&#xff09;&#xff0c;而叶子节点没有子节点。如果用二叉链表作为存储结构&#xff0c;每个节点需要包含两个指针域&#xff0c;分别指向其左孩子和右孩子。因此&…

SystemVerilog构造、包

包 包提供了一种共享不同构造的附加方式。他们的行为与VHDL包。包可以包含函数、任务、类型和枚举。的语法包是&#xff1a; package package_name; items endpackage : package_name 最终的package_name不是必需的&#xff0c;但它使代码更易于阅读。包是import命令在其他…

渗透测试——信息收集

信息收集 前言 信息收集是在做渗透时找尽可能的多的信息&#xff0c;为之后的渗透做铺垫。信息收集的方法有很多 比如&#xff0c;页面、真实的IP、域名/子域名、敏感目录/文件、端口探测、CMS指纹识别、操作系统识别 1. 页面信息收集 拿到域名后&#xff0c;从网站的url中…

c++ 二分查找(迭代与递归)

二分搜索被定义为一种在排序数组中使用的搜索算法&#xff0c;通过重复将搜索间隔一分为二。二分查找的思想是利用数组已排序的信息&#xff0c;将时间复杂度降低到O(log N)。 二分查找算法示例 何时在数据结构中应用二分查找的条件&#xff1a; 应用二分查找算法&#xff1a;…

Java程序员如何通过跳槽薪资翻倍,java多态面试题

Spring 面试题 1、不同版本的 Spring Framework 有哪些主要功能&#xff1f; 2、什么是 Spring Framework&#xff1f; 3、列举 Spring Framework 的优点。 4、Spring Framework 有哪些不同的功能&#xff1f; 5、Spring Framework 中有多少个模块&#xff0c;它们分别是什…

一文搞懂所有 VAE 模型

目录 收起 1 引言 2 符号术语 2.1 AE中的符号 2.2 VAE中的符号 3 基础自编码器 3.1 Autoencoder 3.2 Denoising Autoencoder 随着Stable Diffusion和Sora等技术在生成图像和视频的质量与帧率上取得显著提升&#xff0c;能够在一个低维度的压缩空间进行计算变得越发重要…

【数据结构与算法】二分查找题解(二)

这里写目录标题 一、81. 搜索旋转排序数组 II二、167. 两数之和 II - 输入有序数组三、441. 排列硬币四、374. 猜数字大小五、367. 有效的完全平方数六、69. x 的平方根 一、81. 搜索旋转排序数组 II 中等 已知存在一个按非降序排列的整数数组 nums &#xff0c;数组中的值不必…

7-18 彩虹瓶(Python)

彩虹瓶的制作过程&#xff08;并不&#xff09;是这样的&#xff1a;先把一大批空瓶铺放在装填场地上&#xff0c;然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里。 假设彩虹瓶里要按顺序装 N 种颜色的小球&#xff08;不妨将顺序就编号为 1 到 N&#xff09;。现在工…

vue3+elementPlus:el-table-column表格列动态设置单元格颜色

:cell-style属性 //html<el-tableempty-text"暂无数据":data"datalist.table":max-height"height"row-key"id"border:cell-style"cellStyle"> <el-table>//js //动态设置单元格颜色 const cellStyle ({ row, c…

矢量数据库简单介绍:在 Postgres使用 pg_vector

矢量数据库简单介绍&#xff1a;在 Postgres使用 pg_vector 作为向人工智能大规模转变的一部分&#xff0c;矢量数据库越来越受欢迎。它们也称为矢量化数据库&#xff0c;在人工智能领域发挥着至关重要的作用&#xff0c;因此了解它们的工作原理非常重要。为此&#xff0c;我们…

某准网招聘接口逆向之WebPack扣取

​​​​​逆向网址 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20v 逆向链接 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vc2VhcmNoP3BhZ2VOdW09MSZxdWVyeT1weXRob24mdHlwZT01 逆向接口 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vYXBpX3RvL3NlYXJjaC9qb2IuanNvbg 逆向过程 请求方式&#xff1a;GET 参数构成…

FPGA高端项目:FPGA基于GS2971的SDI视频接收+纯verilog图像缩放+多路视频拼接,提供8套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收HLS图像缩放HLS多路视频拼接应用本方案的SDI接收OSD多路视频融合叠加应用本方案的SDI接收HLS多路视频融合叠加应用本方案的SDI接收GTX…

基于Redis自增实现全局ID生成器(详解)

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P48 - P49 目录 全局ID生成器介绍 基于Redis自增实现全局ID 实现代码 全局ID生成器介绍 背景介绍 当用户在抢购商品时&#xff0c;就会生成订单并保存到数据库的某一张表中&#…

Python 读取写入excel文件

使用Python读取和写入excel的xlsx、xls文件 目录 读取xlsx文件 安装三方库 引入三方库 读取数据 打开文件 表名 最大行数 最大列数 读取一张表 读取整个文件 返回xls整体内容 安装三方包 读取内容 写入xls文件 引入三方库 创建文件并写入数据 报错及解决 报错…

SSL 证书,了解一下常识

公司的网站、应用怎么才能保证在互联网上安全运行&#xff0c;不被攻击、盗取数据呢&#xff1f; 创业必经之路&#xff0c;一步一步走就对了&#xff0c;可能没赶上红利期&#xff0c;但不做就等于0。 概述 SSL 证书&#xff08;SSL Certificates&#xff09;又称数字证书&am…

3/7—21. 合并两个有序链表

代码实现&#xff1a; 方法1&#xff1a;递归 ---->难点 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* mergeTwoLists(struct ListNode *list1, struct ListNode *list2) {/*1.如果l1为…

Vivado使用记录(未完待续)

一、Zynq开发流程 二、软件安装 三、软件使用 字体大小修改&#xff1a;Setting、Font 四、Vivado基本开发流程 1、创建工程 Quick Start 组包含有 Create Project&#xff08;创建工程&#xff09;、 Open Project&#xff08;打开工程&#xff09;、 Open Example Project&…