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闪回点，不需要开启数据库闪回。…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）
考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...