静态网页设计——电影推荐网(HTML+CSS+JavaScript)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV1NK411x7oK/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:对好看的电影进行推荐。

主要内容

1、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。
在这里插入图片描述
代码:

<ul style="width: 1000%;"><li style="margin-right: 10px;"><div style="margin-right: 10px;"><a href="#" target="_blank"><img src="images/1.jpg"></a><span>叶问4:完结篇</span></div><div style="margin-right: 10px;"><a href="#" target="_blank"><img src="images/2.jpg"></a><span>只有芸知道</span></div><div style="margin-right: 10px;"><a href="#" target="_blank"><img src="images/3.jpg"></a><span>迪丽丽的奇幻巴黎</span></div><div style="margin-right: 10px;"><a href="#" target="_blank"><img src="images/4.jpg"></a><span>误杀</span></div>	</li></ul>
2、电影推荐

该页面使用html+css设计结构和样式,将图片img标签设计成排列整齐的卡片,有些还是卡片超链接,鼠标放上去卡片或者卡片上的文字会变色。
在这里插入图片描述

代码:

</div>
<div class="post_body">
<h2 class="post_t"><a href="zs1.html" target="_blank">误杀</a></h2>
<p class="post_p">李维杰与妻子阿玉来泰打拼17年,膝下育有两个女儿,年届四十的他靠开设网络公司为生,为人也颇得小镇居民的好感,而这一切美好却被突如其来的不速之客打破。这个充斥走私,贩毒活动的边陲小镇,各种权力交织碾压公平正义。</p>
<p class="post_meta">
浏览量:0&nbsp;发布日期:2020/7-14 15:21:27</p>
</div>
</div>
3、详细电影介绍

该页面使用p标签和人span标签嵌入许多文本,将关于网站主题的介绍全部写到网页中,文字排版根据字数来进行,使用不会出现不协调的情况。在文字旁边,使用img标签嵌入一些图片,使得网页整体更加的美观。
在这里插入图片描述

代码:

<div class="dycon">
<p>导演: 米歇尔·欧斯洛</p>
<p>主演: 普鲁内尔·查尔斯·安布隆 / 恩佐·拉齐托 / 纳塔莉·德赛 / 布鲁诺·帕维奥 / 杰里米·洛佩兹</p>
<p>类型: 动画</p>
<p>地区: 法国 / 比利时 / 德国</p>
</div>
<div class="dyimg">
<div class="th"><img src="images/3.jpg"></div>
</div>
4、联系我们

该页面使用了form表单技术,可以填写并且提交文字信息,密码会被****字符代替,不会泄露密码,其他的名字则直接用明文的input标签。
在这里插入图片描述

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV1NK411x7oK/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。

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

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

相关文章

【亚马逊云科技】使用Helm 3为Amazon EKS部署Prometheus+Grafana监控平台

文章目录 1. 创建Kubernetes命名空间2. 添加Prometheus社区helm chart3. 安装prometheus4. 检查Prometheus Pod运行状况5. 检查Prometheus Service部署情况6. 修改服务访问端口类型7. 访问Prometheus数据收集情况8. 访问Grafana9. 设置数据源10. 查看Kubernetes各类性能可视化参…

c/c++运算符优先级【一文搞懂】【大白讲解】

C运算符优先级教程 我们知道&#xff0c;在数学运算中&#xff0c;有 “先乘除后加减” 的运算规则&#xff0c;在我们程序语言中一样有运算符的优先级问题&#xff0c;来决定我们运算的顺序问题&#xff0c;这就是运算符的优先级。 即所谓运算符的优先级&#xff0c;指的是在…

【linux笔记】top、ps

【linux笔记】top命令 top&#xff08;Table of process&#xff09;是动态变化的。而ps是静态的。 PID — 进程id USER — 进程所有者 PR — 进程优先级 NI — nice值。负值表示高优先级&#xff0c;正值表示低优先级 VIRT — 进程使用的虚拟内存总量&#xff0c;单位kb。VI…

2023年全国职业院校技能大赛软件测试—测试计划模板参考文档

ERP(资源协同)管理平台测试计划 目录 ERP(资源协同)管理平台测试计划 1. 概述

DevOps|产研运协作工具链上的皇冠-项目管理工具

项目管理工具可以说是产研运工具链上最耀眼的明星&#xff0c;也是产研工作最重要的一环&#xff08;没有之一&#xff09;。为什么这样说&#xff1f;对于我们每个角色&#xff08;产品、研发、测试、运维、运营、客服等&#xff09;我们都可以有各自的专业工具来支撑&#xf…

C语言实例_string.h库函数功能及其用法详解

一、前言 在计算机编程中&#xff0c;字符串处理是一项常见而重要的任务。C语言的string.h头文件提供了一系列函数和工具&#xff0c;用于对字符串进行操作和处理。这些函数包括字符串复制、连接、比较、查找等功能&#xff0c;为开发人员提供了强大的字符串处理能力。本文将对…

Python实现大数据量对比

Python实现大数据量对比有以下几种方法&#xff1a; 并行计算&#xff1a;利用多线程或多进程并行处理数据&#xff0c;加快对比速度。Python中可以使用multiprocessing模块实现多进程&#xff0c;并发地对数据进行处理。 分布式计算&#xff1a;将数据分布到多台机器上进行计…

计算机中的数据运算

放上计算机中的数据的表示方法 计算机中的数据表示方法-CSDN博客 补码的运算&#xff1a; 连同符号位一起相加&#xff0c;符号位产生的进位自然丢掉&#xff0c;这里要特别注意机器数的位数&#xff0c;计算数的位数决定了可以存放的数据的大小&#xff0c;加减产生的数据的…

电商数据api接口商品详情API接口及代码展示案例

电商平台API接口中的商品详情API接口在电商平台中扮演着非常重要的角色。其主要作用及重要性包括以下几点&#xff1a; 实现商品信息的动态更新&#xff1a;通过商品详情API&#xff0c;电商平台上的商品信息可以实现实时的更新。这样能够保证用户看到的信息是准确的&#xff…

Spring boot封装rocket mq 教程

1、rocket mq版本 5.1.3 2、pom引入rocket mq依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-client-java</artifactId><version>5.0.4</version></dependency> 3、发送MQ消息工具类 impor…

1002 写出这个数

读入一个正整数 n&#xff0c;计算其各位数字之和&#xff0c;用汉语拼音写出和的每一位数字。 输入格式&#xff1a; 每个测试输入包含 1 个测试用例&#xff0c;即给出自然数 n 的值。这里保证 n 小于 10100。 输出格式&#xff1a; 在一行内输出 n 的各位数字之和的每一…

ATTCK视角下的信息收集:主机发现

目录 1、利用协议主动探测主机存活 利用ICMP发现主机 利用ARP发现主机 利用NetBIOS协议发现主机 利用TCP/UDP发现主机 利用DNS协议发现主机 利用PRC协议发现主机程序 2、被动主机存活检测 利用Browser主机探测存活主机 利用ip段探测主机存活 利用net命令探测主机存活…

【软件测试】学习笔记-测试覆盖率

测试覆盖率通常被用来衡量测试的充分性和完整性&#xff0c;从广义的角度来讲&#xff0c;测试覆盖率主要分为两大类&#xff0c;一类是面向项目的需求覆盖率&#xff0c;另一类是更偏向技术的代码覆盖率。 需求覆盖率 需求覆盖率是指测试对需求的覆盖程度&#xff0c;通常的做…

UAV | 多算法在多场景下的无人机路径规划(Matlab)

近年来&#xff0c;无人机(unmanned aerial vehicle&#xff0c;UAV)由于其灵活度高、机动性强、安全风险系数小、成本低等特点&#xff0c;被广泛应用于搜索巡逻、侦察监视、抢险救灾、物流配送、电力巡检、农业灌溉等军用或民用任务。路径规划是无人机执行任务的关键&#xf…

第34期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

数据结构之绪论

一个著名公式&#xff1a; 程序数据结构算法 非数值计算&#xff1a;无法用数学的公式或方程来描述 描述非数值计算问题的数据模型不是数学方程&#xff0c;而是诸如表&#xff0c;树和图之类的具有逻辑关系的数据 数据结构&#xff1a;是一门研究非数值计算的程序设计中计算机…

pyqt6 + pycharm 搭建+使用入门

首先安装PyQt6和PyQt6-tools。使用如下命令&#xff1a; pip install PyQt6 PyQt6-tools 但是运行后会报如下错误&#xff1a; 这个时候按照提示执行命令升级pip即可 python.exe -m pip install --upgrade pip 配置pycharm&#xff1a; 打开pycharm&#xff0c;进入setting&am…

基于SpringBoot的在线问卷调查系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的在线问卷调查系统,java…

大事务提交优化

经常性的报死锁异常&#xff0c;经常性的主从延迟......通过报错信息按图索骥&#xff0c;发现代码是这样的。 这是一段商品发布的逻辑&#xff0c;我们可以看到参数校验、查询、最终的insert以及update全部揉在一个事务中。遇到批量发布商品的时候就经常出现问题了&#xff0c…

css实现一个斑马条纹动画,实现一个理发店门口的小转转,进度条动画同理!

css实现一个斑马条纹动画&#xff0c;实现一个理发店门口的小转转 前置基础知识 css背景background的重复渐变属性repeating-linear-gradient() 该属性类似于linear-gradient(),但他会在整个方向上重复渐变以覆盖整个容器 一、先写一个普通渐变例子linear-gradient() &…