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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

场景问题: VisualVM工具Profiler JDBC不是真实执行的SQL

1. 问题 诡异的问题表象&#xff1a; 前端反馈分页接口的Total字段一直为0 使用Visualvm中的 Profiler 注入到应用后&#xff0c;查看JDBC监控得到了分页接口执行的SQL&#xff0c;复制出来执行是55. 此时还没有注意到 IN 的范围中有一个特别的值 NULL &#x1f928; 2. 排查…

vscode如何远程到linux python venv虚拟环境开发?(python虚拟环境、vscode远程开发、vscode远程连接)

文章目录 1. 安装VSCode2. 安装扩展插件3. 配置SSH连接4. 输入用户名和密码5. 打开远程文件夹6. 创建/选择Python虚拟环境7. 安装Python插件 Visual Studio Code (VSCode) 提供了一种称为 Remote Development 的功能&#xff0c;允许用户在远程系统、容器或甚至 Windows 子系统…

【微信小程序】基本语法

目录 一、列表渲染&#xff08;包括wx:for改变默认&#xff09; 二、事件冒泡和事件捕获 三、生命周期 一、列表渲染&#xff08;包括wx:for改变默认&#xff09; 1、列表渲染(wx-for、block 改变默认wx:for item等) <view> {{msg}} </view> //渲染跟普通vu…

泛型 --java学习笔记

什么是泛型 定义类、接口、方法时&#xff0c;同时声明了一个或者多个类型变量&#xff08;如&#xff1a;<E>&#xff09;&#xff0c;称为泛型类、泛型接口&#xff0c;泛型方法、它们统称为泛型 可以理解为扑克牌中的癞子&#xff0c;给它什么类型它就是什么类型 如…

设计模式—适配器模式

概念: 适配器模式&#xff08;有时候也称包装样式或者包装&#xff09;将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起&#xff0c;做法是将类自己的接口包裹在一个已存在的类中。 本章代码: 小麻雀icknn/设计模式练习 - Gi…

开源的前端思维导图库介绍

在开源社区中&#xff0c;有许多优秀的思维导图库可供开发者使用。这些库通常具有丰富的功能和灵活的API&#xff0c;可以满足不同需求的前端开发。以下是一些流行的开源前端思维导图库&#xff0c;以及它们的特点和区别。 1. **MindMap** 特点&#xff1a; - 基于原生…

【数据结构】二、线性表:4.循环链表的定义及其基本操作(循环单链表,循环双链表的初始化、判空、判断头结点、尾结点、插入、删除)

文章目录 4.循环链表4.1循环单链表4.1.1初始化4.1.2判断单链表是否为空4.1.3判断p结点是否为循环单链表的表尾结点 4.2循环双链表4.2.1初始化4.2.2判断循环链表是否为空4.2.3判断结点p是否为循环双链表的表尾结点4.2.4双链表的插入4.2.5双链表的删除 4.循环链表 4.1循环单链表…

十堰网站建设公司华想科技具有10年的网站制作经验

2018年已经结束了。 华翔科技收到了很多客户的咨询&#xff0c;他们都有一个共同的问题&#xff1a;建一个网站需要多少钱&#xff1f; 但是&#xff0c;我们都会问&#xff1a;您有什么具体需求吗&#xff1f; 大多数人的答案是否定的&#xff0c;他们只是想打听一下价格。 十…

《JAVA与模式》之模板方法模式

系列文章目录 文章目录 系列文章目录前言一、模板方法模式的结构二、模板方法模式中的方法三、使用场景四、模板方法模式在Servlet中的应用前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了…

【MySQL 系列】MySQL 起步篇

MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域&#xff0c;MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版&#xff0c;社区版完全免费&#xff0c;并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0c;我们还可以根…

基于springboot的大学生智能消费记账系统的设计与实现(程序+数据库+文档)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

c++ 11 新特性 不同数据类型之间转换函数之const_cast

一.不同数据类型之间转换函数const_cast介绍 const_cast是C11中引入的一种类型转换操作符&#xff0c;用于修改类型的const或volatile属性。const_cast的主要用途是移除对象的常量性&#xff0c;它是唯一具有此能力的C风格的转型操作符。在C11中&#xff0c;const_cast可以完成…

HarmonyOS—配置编译构建信息

在进行应用/服务的编译构建前&#xff0c;需要对工程和编译构建的Module进行设置。API Version 9、API Version 8与API Version 4~7的构建体系不同&#xff0c;因此在设置编译构建信息时也存在差异&#xff1a; API Version 9&#xff1a;需要对构建配置文件、构建脚本、应用依…

中医舌苔笔记

目录 一.不适合舌诊的情况吃了有色东西的食物不要看舌象&#xff0c;晨起不要看舌象尽量不要在饭后半小时内看舌象尽量不要在有色灯光下看舌象吃了某些抗生素、某些化学添加剂后不要看舌象。月经期不要看舌象 二.舌诊顺序三.舌诊脏腑部位分属图四.看舌是看什么&#xff1f;舌体…

世界的本质是旋转(5)-在复平面上驱动软件无线电SDR发射BPSK波形

在上一篇文章中&#xff0c;我们介绍了复平面、拍照采样的一些思维实验。从本节开始&#xff0c;转入现实应用&#xff0c;通过控制复平面向量的位置&#xff0c;实现一个完整的BPSK全双工通信通道。 发射方&#xff1a;通过控制复平面向量在各个时刻的位置来携带信息的技术&a…

qml 怎么将ChartView 的 background 图层的边距设置为 0

qml的ChartView有个background图层,background图层默认是有边距的,而且这个边距是没有属性与方法可以修改的,假如我要创建两个ChartView,让他们纵向紧挨着,实际结果如图: 代码如下: ColumnLayout {id: mainColumnanchors.fill: parentanchors.leftMargin: 10spacing: 0…

网络原理初识

一、IP地址 概念 IP 地址主要用于标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单说&#xff0c; IP 地址用于定位主机 的网络地址 。 就像我们发送快递一样&#xff0c;需要知道对方的收货地址&#xff0c;快递员才能将包裹送到目的地。 二、…

k8s-生产级的k8s高可用(1) 24

高可用集群 实验至少需要三个master&#xff08;控制节点&#xff09;&#xff0c;一个可以使外部可以访问到master的load balancer&#xff08;负载均衡&#xff09;以及一个或多个外部节点worker&#xff08;也要部署高可用&#xff09;。 再克隆三台主机 清理并重启 配置两…

C++惯用法之RAII思想: 资源管理

C编程技巧专栏&#xff1a;http://t.csdnimg.cn/eolY7 相关系列文章 C智能指针的自定义销毁器(销毁策略) 目录 1.概述 2.RAII的应用 2.1.智能指针 2.2.文件句柄管理 2.3.互斥锁 3.注意事项 3.1.禁止复制 3.2.对底层资源使用引用计数法 3.3.复制底部资源(深拷贝)或者转移…

2024新版微信小程序登录注册功能的实现,授权登录,退出,缓存讲解,小程序个人中心的实现,修改头像 图片上传功能的实现 新版登陆注册,头像上传,修改昵称

新版小程序授权登录注册获取头像昵称文档 一&#xff0c;无法获取用户的微信头像和昵称 最近好多同学在学习石头哥小程序课程的时候&#xff0c;遇到了下面这样的问题&#xff0c;在小程序授权获取用户头像和昵称时&#xff0c;获取到的是下面这样的。 到底是什么原因导致的…