HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)
🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 三、代码目录
- 四、网站代码
- 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.想要获取本文源码,点击前往吧
相关文章:
HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…...
大数据系列之:Flink Doris Connector,实时同步数据到Doris数据库
大数据系列之:Flink Doris Connector,实时同步数据到Doris数据库 一、版本兼容性二、使用三、Flink SQL四、DataStream五、Lookup Join六、配置通用配置项接收器配置项查找Join配置项 七、Doris 和 Flink 列类型映射八、使用Flink CDC访问Doris的示例九、…...
LabVIEW VI 多语言动态加载与运行的实现
在多语言应用程序开发中,确保用户界面能够根据用户的语言偏好动态切换是一个关键需求。本文通过分析一个LabVIEW程序框图,详细说明了如何使用LabVIEW中的属性节点和调用节点来实现VI(虚拟仪器)界面语言的动态加载与运行。此程序允…...
Unity引擎基础知识
目录 Unity基础知识概要 1. 创建工程 2. 工程目录介绍 3. Unity界面和五大面板 4. 游戏物体创建与操作 5. 场景和层管理 6. 组件系统 7. 脚本语言C# 8. 物理引擎和UI系统 学习资源推荐 Unity引擎中如何优化大型游戏项目的性能? Unity C#脚本语言的高级编…...
练习题- 探索正则表达式对象和对象匹配
正则表达式(Regular Expressions)是一种强大而灵活的文本处理工具,它允许我们通过模式匹配来处理字符串。这在数据清理、文本分析等领域有着广泛的应用。在Python中,正则表达式通过re模块提供支持,学习和掌握正则表达式对于处理复杂的文本数据至关重要。 本文将探索如何在…...
Java集合提升
1. 手写ArrayList 1.1. ArrayList底层原理细节 底层结构是一个长度可以动态增长的数组(顺序表)transient Object[] elementData; 特点:在内存中分配连续的空间,只存储数据,不存储地址信息。位置就隐含着地址。优点 节…...
uniapp 微信小程序生成水印图片
效果 源码 <template><view style"overflow: hidden;"><camera device-position"back" flash"auto" class"camera"><cover-view class"text-white padding water-mark"><cover-view class"…...
ElasticSearch相关知识点
ElasticSearch中的倒排索引是如何工作的? 倒排索引是ElasticSearch中用于全文检索的一种数据结构,与正排索引不同的是,正排索引将文档按照词汇顺序组织。而倒排索引是将词汇映射到包含该词汇的文档中。 在ElasticSearch中,倒排索…...
css 文字图片居中及网格布局
以下内容纯自已个人理解,直接上代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序
解决ImportError: DLL load failed while importing _rust: 找不到指定的程序 python使用库cryptography 当 from cryptography.hazmat.bindings._rust import exceptions as rust_exceptions 时,会报错: ImportError: DLL load failed while importin…...
集合-List去重
1.利用Set去重 @Test public void distinctList() {List<String> oldList = new ArrayList<>();oldList.add("a");oldList.add("a");oldList.add("b");oldList.add("c");oldList.add("d");List<String> …...
ST-LINK USB communication error 非常有效的解决方法
文章目录 一、检查确定是ST-LINK USB communication error的问题二、关闭文件,打开keil软件所在文件夹,找到STLink文件夹,找到该应用程序双击 一、检查确定是ST-LINK USB communication error的问题 二、关闭文件,打开keil软件所在…...
探索CSS的:future-link伪类:选择指向未来文档的链接
CSS(层叠样式表)是Web设计中用于描述网页元素样式的语言。随着CSS4的提案,引入了许多新的选择器,其中之一是:future-link伪类。然而,需要注意的是,:future-link伪类目前还处于提议阶段,并没有在…...
【C++】序列与关联容器(三)map与multimap容器
【C】序列与关联容器(三)map与multimap容器 一、map二、multiset / multimap 一、map 树中的每个结点的类型是一个std::pair //pair的类型是<const key,value> pair是一个包含两个指针的结构体,第一个指针指向该节点的key,…...
ActiveMQ、RabbitMQ、Kafka、RocketMQ在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式的区别
ActiveMQ、RabbitMQ、Kafka、RocketMQ这四款消息队列在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式等方面各有其特点和差异。以下是对这些方面的详细比较: 1. 优先级队列 ActiveMQ:支持优先级队列,可以在发送消息时指定…...
首款会员制区块链 Geist 介绍
今天,Pixelcraft Studios 很高兴地宣布即将推出 Geist,这是一个由 Base、Arbitrum、Alchemy 以及 Aavegotchi 支持的全新 L3。 Geist 之前的代号为 “Gotchichain”,是首个专为游戏打造的会员专用区块链。 为什么选择 Geist? …...
CANoe软件中Trace窗口的筛选栏标题不显示(空白)的解决方法
文章目录 问题描述原因分析解决方案扩展知识总结问题描述 不知道什么情况,CANoe软件中Trace窗口的筛选栏标题突然不显示了,一片空白。现象如下: 虽然不影响CANoe软件的使用,但是观感上非常难受,对于强迫症患者非常不友好。 原因分析 按照常规思路,尝试了: 1、重启CAN…...
日期类代码实现-C++
一、目标 通过前面对类和对象的介绍我们可以自己通过C代码初步实现一个简单的日期类。 实现的主要操作有: 1.日期类的构造函数 2.日期类的拷贝构造函数(在头文件中实现) 3.日期类的比较运算符重载 4.日期类的计算运算符重载 5.流插入运…...
【问题记录+总结】VS Code Tex Live 2024 Latex Workshop Springer模板----更新ing
目录 Summary 道阻且长 少即是多 兵马未动粮草先行 没有万能 和一劳永逸 具体问题具体分析 心态 Detail 1、关于模板[官网] 2、settings.json 3、虫和杀虫剂 4、擦 换成Tex Studio都好了。。。 Summary 道阻且长 某中意期刊,只有Latex。之前只简单用过…...
Linux运维_Bash脚本_源码安装Go-1.21.11
Linux运维_Bash脚本_源码安装Go-1.21.11 Bash (Bourne Again Shell) 是一个解释器,负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件,并于 1989 年发布的免费软件,作为 Sh (Bourne Shell) 的替代品。 您可以在 Linux 和…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
