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