静态网页设计——科幻电影分享(HTML+CSS+JavaScript)

2024-01-04 16:44

本文主要是介绍静态网页设计——科幻电影分享(HTML+CSS+JavaScript),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!

使用技术:HTML+CSS+JS
主要内容:该网站意在分享我喜欢的科幻题材电影,向浏览者介绍历年来的优秀科幻作品。

主要内容

该网站首页运用了简单的css样式和列表制作了侧面的抽屉样式导航栏,运用JavaScrip实现了图片的轮播效果和左右点击切换。子网站通过<iframe>标签插入哔哩哔哩网站的在线视频。

1、首页

首页最上方使用几个无序列表,修改css样式,展示成菜单的形式。菜单往下使用img标签插入一张动态的图片,体现视觉的碰撞感。动态图片下面,使用js代码实现了一个轮播图,自定的循环展示科幻电影的图片。
在这里插入图片描述

在主页的右侧,用无序列表li实现了一个动态的菜单,鼠标移动上去时,会弹出子菜单项,如图:
在这里插入图片描述
在这里插入图片描述

css效果代码如下:

/*基础设定*/
*{margin: 0;padding: 0;}
body{font-family: '黑体';font-size: 16px;color: #464141;width: 1000px;margin: 0 auto; background: #1F1F1F;
}
/*版心*/
.w{width:1000px;margin:0 auto;background:#000000;height: 120px;border-radius: 15px;
}
.logo{float: left;margin: 0px 80px 0 0;height: 80px;
}
.w li{margin: 40px 0 0 0;margin-left: 50px;list-style-type: none;font-size : 20pt;float: left;color:#B9B9B9;
}
.w li:hover{color:#B9B9B9;background:#3A3939;
}.w a {
color:#ABABAB;
font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
text-decoration:none; /*CSS下划线效果:无下划线*/
}
.w a:hover {
color:#ABABAB;
text-decoration:none; /*CSS下划线效果:无下划线*/
border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/
}/*头部*/
.head{height: 120px;line-height: 70px;text-align: center;font-family: '微软雅黑';
}
.head strong{font-size: 30px;font-weight: normal;
}
.head em{font-size: 13px;font-style: normal;	
}
/*分类*/.head2{width: 1000px;margin: 0 auto;text-align: center;
}
.head2 p{line-height: 30px;font-size: 30px;color:aliceblue;opacity:0.5;
}.head2 p:hover
{opacity:1;
}.shouhou{text-align: center;margin: 0 auto;
}
h4{font-size: 30px;margin: 0 auto;text-indent: 2em;
}
h5{text-indent: 2em;line-height: 26px;font-size: 14px;
}.box{position: relative;
}
.box-img{position: absolute;left: 0;top: 0;opacity: 0;transition: all 1s;
}.box-img:nth-child(1){opacity: 1;
}.box-left{position: absolute;width: 35px;height: 50px;
color: #585858;top: 170px;text-align: center;font-size: 28px;line-height: 45px;}
.box-left:hover
{color: aliceblue;background: #474445;
}
.box-right{position: absolute;width: 35px;height: 50px;color: #585858;top: 170px;text-align: center;font-size: 28px;line-height: 45px;left: 565px;
}
.box-right:hover
{color: aliceblue;background: #474445;
}.box-zhiding{position: absolute;top: 310px;left: 500px;
}.box-zhiding>ul{padding:0;magin:0;list-style: none;
}.box-zhiding li{width: 14px;height: 14px;border-radius: 100%;background-color: #ccc;float: left;margin-right: 10px;
}.box-zhiding li:hover{background-color: aliceblue;
}.pinglun{width:1000px;margin:0 auto;background:#000000;height: 337.5px;
}
.pinglun img{height:337.5px;float: right;
}
.pinglun p{float: right;
}.last2{width:1000px;margin:0 auto;background:#000000;height: 120px;border-radius:60px;top:1000px;position: absolute;
}
.last2 p{margin-left: 400px;margin-top: 20px;
}.caidan{background: #000000 none repeat scroll 0 0;color: #e6e6e6;line-height: 30px;width: 140px;border-bottom: 1px solid #000000;position: fixed;top: 200px;right: 50px;
}
.caidan-box{border-bottom: 1px solid #666;color: aliceblue;
}
.caidan-box-item{height: 0;overflow: hidden;background-color: #544949;margin: 0;padding-left: 20px;transition: 0.5s;
}.caidan:hover .caidan-box:hover .caidan-box-item{height: 100px;
}
.candan li{color:#B9B9B9;
}
.caidan li:hover{color:#B9B9B9;background:#3A3939;
}
.candan-box-item a {color:aliceblue;
text-decoration:none;
}.caidan a {
color:#ccc;
font-weight:Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
text-decoration:none; /*CSS下划线效果:无下划线*/	
}
.caidan a:hover {
color:#ccc;
text-decoration:none; /*CSS下划线效果:无下划线*/
border-bottom: 1px #0099CC dotted /*CSS加一个只有下边的框 边框为虚线*/
}.about{width: 1000px;margin: 0 auto; top:650px;position: absolute;
}
.about-txt{position: absolute;left: 350px;top:10px;color:#B6B6B6;
}

点击子菜单的话,通过a标签跳转到其他具体电影的详细界面,如图:
在这里插入图片描述

2、具体科幻电影详细界面

最上方通过iframe标签,将视频给加载到自己的网页中。最下方通过p标签对科幻电影进行纤细的描述。
在这里插入图片描述

页面结构HTML代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>流浪地球</title><link type="text/css" rel="stylesheet" href="css/首页.css">
</head><body><div class="w"><!--头部开始了嗷--><img class="logo" src="IMG/logo.png"><ul ><li ><a href="首页.html">首页</a></li><li><a href="热映.html">热映</a></li><li><a href="经典.html">经典</a></li><li><a href="预告片.html">即将上映</a></li><li><a >观众影评</a></li><li><a href="高分佳作.html">高分佳作</a></li></ul><div class="head"></div><iframe src="https://player.bilibili.com/player.html?aid=51244853&cid=89711698&page=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe></div><div class="about"><div class="about-img"><img src="IMG/liu.jpg"></div><div class="about-txt"><p class="txt-title"><strong>流浪地球</strong></p><p class="txt-txt">编剧: 龚格尔 / 严东旭 / 郭帆 / 叶俊策 / 杨治学 / 吴荑 / 叶濡畅 / 沈晶晶 / 刘慈欣</p><p class="txt-txt">主演: 屈楚萧 / 吴京 / 李光洁 / 吴孟达 / 赵今麦 / </p><p class="txt-txt">类型: 科幻 / 冒险 / 灾难</p><p class="txt-txt">制片国家/地区:中国大陆</p><p class="txt-txt">上映日期: 2019-02-05(中国大陆)</p><p class="txt-txt">片长: 125分钟</p><br class="txt-txt"/><hr class="txt-txt"/><br class="txt-txt"/><p class="txt-txt "><em>近未来,科学家们发现太阳急速衰老膨胀,短时间内包括地球在内的整个太阳系都将被太阳所吞没。为了自救,人类提出一个名为“流浪地球”的大胆计划,即倾全球之力在地球表面建造上万座发动机和转向发动机,推动地球离开太阳系,用2500年的时间奔往另外一个栖息之地。中国航天员刘培强(吴京 饰)在儿子刘启四岁那年前往国际空间站,和国际同侪肩负起领航者的重任。转眼刘启(屈楚萧 饰)长大,他带着妹妹朵朵(赵今麦 饰)偷偷跑到地表,偷开外公韩子昂(吴孟达 饰)的运输车,结果不仅遭到逮捕,还遭遇了全球发动机停摆的事件。为了修好发动机,阻止地球坠入木星,全球开始展开饱和式营救,连刘启他们的车也被强征加入。在与时间赛跑的过程中,无数的人前仆后继,奋不顾身,只为延续百代子孙生存的希望……</em></p></div></div></body>
</html>

总结

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

这篇关于静态网页设计——科幻电影分享(HTML+CSS+JavaScript)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/569951

相关文章

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys