当前位置：首页 > news >正文

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

news 2025/9/15 5:26:42

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

文章目录

一、作品介绍
二、作品演示
三、代码目录
四、网站代码
- 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个页面。二、作品演示三、代…...

编程日记 2024/8/17 21:04:31

大数据系列之：Flink Doris Connector，实时同步数据到Doris数据库

大数据系列之：Flink Doris Connector，实时同步数据到Doris数据库一、版本兼容性二、使用三、Flink SQL四、DataStream五、Lookup Join六、配置通用配置项接收器配置项查找Join配置项七、Doris 和 Flink 列类型映射八、使用Flink CDC访问Doris的示例九、…...

编程日记 2024/8/17 21:00:26

LabVIEW VI 多语言动态加载与运行的实现

在多语言应用程序开发中，确保用户界面能够根据用户的语言偏好动态切换是一个关键需求。本文通过分析一个LabVIEW程序框图，详细说明了如何使用LabVIEW中的属性节点和调用节点来实现VI（虚拟仪器）界面语言的动态加载与运行。此程序允…...

编程日记 2024/8/17 20:56:20

Unity引擎基础知识

目录 Unity基础知识概要 1. 创建工程 2. 工程目录介绍 3. Unity界面和五大面板 4. 游戏物体创建与操作 5. 场景和层管理 6. 组件系统 7. 脚本语言C# 8. 物理引擎和UI系统学习资源推荐 Unity引擎中如何优化大型游戏项目的性能？ Unity C#脚本语言的高级编…...

编程日记 2024/8/17 20:55:19

练习题- 探索正则表达式对象和对象匹配

正则表达式（Regular Expressions）是一种强大而灵活的文本处理工具，它允许我们通过模式匹配来处理字符串。这在数据清理、文本分析等领域有着广泛的应用。在Python中，正则表达式通过re模块提供支持，学习和掌握正则表达式对于处理复杂的文本数据至关重要。本文将探索如何在…...

编程日记 2024/8/17 20:52:15

Java集合提升

1. 手写ArrayList 1.1. ArrayList底层原理细节底层结构是一个长度可以动态增长的数组（顺序表）transient Object[] elementData; 特点：在内存中分配连续的空间，只存储数据，不存储地址信息。位置就隐含着地址。优点节…...

编程日记 2024/8/17 20:50:12

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"…...

编程日记 2024/8/17 20:49:10

ElasticSearch相关知识点

ElasticSearch中的倒排索引是如何工作的？ 倒排索引是ElasticSearch中用于全文检索的一种数据结构，与正排索引不同的是，正排索引将文档按照词汇顺序组织。而倒排索引是将词汇映射到包含该词汇的文档中。在ElasticSearch中，倒排索…...

编程日记 2024/8/17 20:42:53

css 文字图片居中及网格布局

以下内容纯自已个人理解，直接上代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2024/8/17 20:41:52

解决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…...

编程日记 2024/8/17 20:39:50

集合-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> …...

编程日记 2024/8/17 20:38:49

ST-LINK USB communication error 非常有效的解决方法

文章目录一、检查确定是ST-LINK USB communication error的问题二、关闭文件，打开keil软件所在文件夹，找到STLink文件夹，找到该应用程序双击一、检查确定是ST-LINK USB communication error的问题二、关闭文件，打开keil软件所在…...

编程日记 2024/8/17 20:36:47

探索CSS的:future-link伪类：选择指向未来文档的链接

CSS（层叠样式表）是Web设计中用于描述网页元素样式的语言。随着CSS4的提案，引入了许多新的选择器，其中之一是:future-link伪类。然而，需要注意的是，:future-link伪类目前还处于提议阶段，并没有在…...

编程日记 2024/8/17 20:35:46

【C++】序列与关联容器（三）map与multimap容器

【C】序列与关联容器（三）map与multimap容器一、map二、multiset / multimap 一、map 树中的每个结点的类型是一个std::pair //pair的类型是<const key,value> pair是一个包含两个指针的结构体，第一个指针指向该节点的key，…...

编程日记 2024/8/17 20:33:44

ActiveMQ、RabbitMQ、Kafka、RocketMQ在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式的区别

ActiveMQ、RabbitMQ、Kafka、RocketMQ这四款消息队列在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式等方面各有其特点和差异。以下是对这些方面的详细比较： 1. 优先级队列 ActiveMQ：支持优先级队列，可以在发送消息时指定…...

编程日记 2024/8/17 20:32:42

首款会员制区块链 Geist 介绍

今天，Pixelcraft Studios 很高兴地宣布即将推出 Geist，这是一个由 Base、Arbitrum、Alchemy 以及 Aavegotchi 支持的全新 L3。 Geist 之前的代号为 “Gotchichain”，是首个专为游戏打造的会员专用区块链。为什么选择 Geist？ …...

编程日记 2024/8/17 20:29:58

CANoe软件中Trace窗口的筛选栏标题不显示（空白）的解决方法

文章目录问题描述原因分析解决方案扩展知识总结问题描述不知道什么情况，CANoe软件中Trace窗口的筛选栏标题突然不显示了，一片空白。现象如下：虽然不影响CANoe软件的使用，但是观感上非常难受，对于强迫症患者非常不友好。原因分析按照常规思路，尝试了： 1、重启CAN…...

编程日记 2024/8/17 20:24:51

日期类代码实现-C++

一、目标通过前面对类和对象的介绍我们可以自己通过C代码初步实现一个简单的日期类。实现的主要操作有： 1.日期类的构造函数 2.日期类的拷贝构造函数（在头文件中实现） 3.日期类的比较运算符重载 4.日期类的计算运算符重载 5.流插入运…...

编程日记 2024/8/17 20:19:46

【问题记录+总结】VS Code Tex Live 2024 Latex Workshop Springer模板----更新ing

目录 Summary 道阻且长少即是多兵马未动粮草先行没有万能和一劳永逸具体问题具体分析心态 Detail 1、关于模板[官网] 2、settings.json 3、虫和杀虫剂 4、擦换成Tex Studio都好了。。。 Summary 道阻且长某中意期刊，只有Latex。之前只简单用过…...

编程日记 2024/8/17 20:18:45

Linux运维_Bash脚本_源码安装Go-1.21.11

Linux运维_Bash脚本_源码安装Go-1.21.11 Bash (Bourne Again Shell) 是一个解释器，负责处理 Unix 系统命令行上的命令。它是由 Brian Fox 编写的免费软件，并于 1989 年发布的免费软件，作为 Sh (Bourne Shell) 的替代品。您可以在 Linux 和…...

编程日记 2024/8/17 20:17:43

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/8/31 5:08:06

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2025/9/13 17:48:18

遍历 Map 类型集合的方法汇总

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/9/8 22:31:18