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.mzph.cn/news/728480.shtml

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

相关文章

Vue3_2024_6天【回顾上篇watch常见的前三种场景】另两种待补

Vue3_2024_6天【回顾上篇watch常见的前三种场景】另两种待补

第一种情况&#xff1a;监视【ref】定义&#xff08;基本数据类型&#xff09; 1.引入watch2.格式&#xff1a;watch&#xff08;基本数据类型数据&#xff0c;监视变化的回调函数&#xff09; 注意点&#xff1a; 2.1.watch里面第一个参数&#xff0c;是数据~~【监视的基本类…
阅读更多...
[Buuctf] [MRCTF2020] Xor

[Buuctf] [MRCTF2020] Xor

运行 1.查壳 32位exe文件&#xff0c;没有壳 2.用32位IDA打开 找到main函数&#xff0c;F5查看伪代码&#xff0c;但是这里会弹出一个窗口 函数分析失败&#xff01;&#xff01; 这里我在看别人的题解时发现一种玄学方式解决了这个问题 窗口里面弹出了一个地址401095&…
阅读更多...
LVS+Keepalived 高可用负载均衡集群

LVS+Keepalived 高可用负载均衡集群

一. 高可用集群的相关知识 1.1 高可用&#xff08;HA&#xff09;集群和普通集群的比较 ① 普通集群 普通的群集的部署是通过一台度器控制调配多台节点服务器进行业务请求的处理&#xff0c;但是仅仅是一台调度器&#xff0c;就会存在极大的单点故障风险&#xff0c;当该调度…
阅读更多...
蓝桥杯备赛之二分专题

蓝桥杯备赛之二分专题

常用的算法二分模板 1. 在数组a[]中找大于等于x的第一个数的下标 //int ans lower_bound(a, a n, x) - a //相当于下方 int l 0, r n - 1; while(l < r) {int mid l r >> 1;if(a[mid] > x) r mid;else l mid 1; } cout << r;2. 在数组a[]中找大于…
阅读更多...
qml中toolbox控件、ComboBox控件、PlainText实现及美化

qml中toolbox控件、ComboBox控件、PlainText实现及美化

一. 内容简介 qml中toolbox控件、ComboBox控件、PlainText实现及美化 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3pytorch 安装pytorch(http://t.csdnimg.cn/GVP23) 2.4QT 5.14.1 新版QT6.4,&#xff0c;6.5在线安装经常失败&#xff0c;而5.9版本…
阅读更多...
亚马逊运营要使用什么海外代理IP？

亚马逊运营要使用什么海外代理IP？

代理IP作为网络活动的有力工具&#xff0c;同时也是跨境电商的必备神器。亚马逊作为跨境电商的头部平台&#xff0c;吸引了大量的跨境电商玩家入驻&#xff0c;想要做好亚马逊&#xff0c;养号、测评都需要代理IP的帮助。那么应该使用什么代理IP呢&#xff1f;如何使用&#xf…
阅读更多...
JS-02-javaScript快速入门

JS-02-javaScript快速入门

一、javaScript代码的编写位置 JavaScript代码可以直接嵌在网页的任何地方&#xff0c;但是一般&#xff0c;我们用如下编写方式。 1-1、直接写到HTML文件中 通常我们都把JavaScript代码放到<head>中&#xff0c;由<script>...</script>包含的代码就是Java…
阅读更多...
【深度学习】1. 深度学习概述

【深度学习】1. 深度学习概述

感知器模型 人脑中的神经元:一个神经元通常具有多个树突&#xff0c;主要用来接受传入信息;而轴突只有一条&#xff0c;轴突尾端有许多轴突末梢可以给其他多个神经元传递信息。轴突末梢跟其他神经元的树突产生连接&#xff0c;从而传递信号。 而在计算机的神经网络中&#xff…
阅读更多...
985硕的4家大厂实习与校招经历专题分享（part2）

985硕的4家大厂实习与校招经历专题分享（part2）

我的个人经历&#xff1a; 985硕士24届毕业生&#xff0c;实验室方向:CV深度学习 就业&#xff1a;工程-java后端 关注大模型相关技术发展 校招offer: 阿里巴巴 字节跳动 等10 研究生期间独立发了一篇二区SCI 实习经历:字节 阿里 京东 B站 &#xff08;只看大厂&#xff0c;面试…
阅读更多...
Mysql - is marked as crashed and should be repaired

Mysql - is marked as crashed and should be repaired

概述 上周发生了一个Mysql报错的问题&#xff0c;今天有时间整理一下产生的原因和来龙去脉&#xff0c;Mysql的版本是5.5,发生错误的表存储引擎都是MyISAM,产生的报错信息是Table xxxxxx is marked as crashed and should be repaired。 定位问题 产生的后果是Nginx服务没有…
阅读更多...
C++入门知识点

C++入门知识点

文章目录 一、C的域作用限定符1.1全局域1.2限定域作用范围 二、C的命名空间域2.1单个命名空间的变量访问和单个不同命名空间的相同变量名的访问2.2命名空间的嵌套调用 三、C的流插入、流提取操作符四、C的缺省参数4.1函数的全缺省4.1函数的部分缺省 五、C的函数重载5.1函数重载…
阅读更多...
this关键字

this关键字

this关键字 this 是 Java 的一个关键字&#xff0c;表示某个对象 this 可以出现在构造方法、实例方法中&#xff0c;但不可以出现在类方法中 出现在构造方法中&#xff0c;代表使用该构造方法创建的对象出现在实例方法中&#xff0c;代表正在调用该方法的当前对象 一、构造…
阅读更多...
Docker-容器网络互联

Docker-容器网络互联

目录 1 前言 2 常用指令 3 实现容器互联 3.1 自定义网络 3.2 让容器连接创建的网络 3.2.1 容器创建后连接网络 3.2.2 容器创建时连接网络 3.3 尝试使用容器名访问(测试) 1 前言 在默认情况下&#xff0c;docker中的容器都是连接到一个虚拟的网桥上的&#xff0c;这为独…
阅读更多...
关于yolov8的DFL模块(pytorch以及tensorrt)

关于yolov8的DFL模块(pytorch以及tensorrt)

先看代码 class DFL(nn.Module):"""Integral module of Distribution Focal Loss (DFL).Proposed in Generalized Focal Loss https://ieeexplore.ieee.org/document/9792391"""def __init__(self, c116):"""Initialize a convo…
阅读更多...
【Web前端入门学习】—CSS

【Web前端入门学习】—CSS

目录 CSS简介CSS语法CSS三种导入方式CSS选择器元素选择器&#xff08;标签选择器&#xff09;类选择器ID选择器通用选择器子元素选择器后代选择器&#xff08;包含选择器&#xff09;并集选择器&#xff08;兄弟选择器&#xff09;伪类选择器伪元素选择器 CSS常用属性盒子模型网…
阅读更多...
电脑工作电压是多少你要看看光驱电源上面标的输入电压范围

电脑工作电压是多少你要看看光驱电源上面标的输入电压范围

要确定电脑的工作电压&#xff0c;必须查看电源上标注的输入电压范围。 国内法规规定民用220V电压范围为10%-15%&#xff0c;也就是说通信220V电压正常范围为187--242V&#xff0c;供电设备一般为180V。 --250V电压范围&#xff0c;即正常情况下电脑电源电压不低于187V即可工作…
阅读更多...
css相邻元素边框重合问题，解决方案

css相邻元素边框重合问题，解决方案

1、如下图所示&#xff0c;在给元素设置边框后&#xff0c;相邻元素会出现重合的问题 2、解决方案 给每个元素设置margin-top以及margin-left为负的边框 <div style"width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;"><div style"border…
阅读更多...
【数据结构】二、线性表：5.静态链表的定义及其基本操作（定义、初始化、插入、查找、删除、遍历、长度、特点）

【数据结构】二、线性表：5.静态链表的定义及其基本操作（定义、初始化、插入、查找、删除、遍历、长度、特点）

文章目录 5.静态链表5.1定义5.2初始化5.3插入5.4查找5.5删除5.6遍历5.7长度5.8特点 5.静态链表 静态链表是使用数组来模拟链表结构的一种数据结构&#xff0c;用数组的方式实现的链表。 它与传统链表的区别在于&#xff0c;静态链表使用数组保存节点&#xff0c;每个节点包括…
阅读更多...
mac系统Idea登录codeium不跳转，报错faild download language server

mac系统Idea登录codeium不跳转，报错faild download language server

问题描述 idea通过插件中心安装Codeium以后&#xff0c;登录无法正常跳转到登录页&#xff0c;等待一段时间&#xff0c;右下角图标报错**“faild download language server”** 解决方案 根据上面的报错&#xff0c;是没有成功下载“language_server_macos_x64“&#xff0…
阅读更多...
CSAPP-程序的机器级表示

CSAPP-程序的机器级表示

文章目录 概念扫盲思想理解经典好图安全事件 概念扫盲 1.汇编代码使用文本格式&#xff0c;相较于汇编的二进制可读性更好 2.程序内存包括&#xff1a;可执行的机器代码、操作系统需要的信息、管理过程调用和返回的运行时栈、用户分配的内存块 3.链接器为函数调用找到匹配的可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023