静态网页设计——科幻电影分享(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

相关文章

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Spring Boot Maven 插件如何构建可执行 JAR 的核心配置

《SpringBootMaven插件如何构建可执行JAR的核心配置》SpringBoot核心Maven插件,用于生成可执行JAR/WAR,内置服务器简化部署,支持热部署、多环境配置及依赖管理... 目录前言一、插件的核心功能与目标1.1 插件的定位1.2 插件的 Goals(目标)1.3 插件定位1.4 核

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Java堆转储文件之1.6G大文件处理完整指南

《Java堆转储文件之1.6G大文件处理完整指南》堆转储文件是优化、分析内存消耗的重要工具,:本文主要介绍Java堆转储文件之1.6G大文件处理的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言文件为什么这么大?如何处理这个文件?分析文件内容(推荐)删除文件(如果不需要)查看错误来源如何避

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

SpringBoot整合(ES)ElasticSearch7.8实践

《SpringBoot整合(ES)ElasticSearch7.8实践》本文详细介绍了SpringBoot整合ElasticSearch7.8的教程,涵盖依赖添加、客户端初始化、索引创建与获取、批量插... 目录SpringBoot整合ElasticSearch7.8添加依赖初始化创建SpringBoot项

JAVA覆盖和重写的区别及说明

《JAVA覆盖和重写的区别及说明》非静态方法的覆盖即重写,具有多态性;静态方法无法被覆盖,但可被重写(仅通过类名调用),二者区别在于绑定时机与引用类型关联性... 目录Java覆盖和重写的区别经常听到两种话认真读完上面两份代码JAVA覆盖和重写的区别经常听到两种话1.覆盖=重写。2.静态方法可andro

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.