如何用HTML+CSS+JavaScript实现一个简单的电影网站页面
做一个页面，首先我们要先规划好怎样布局，我做的时候，先用div标签将页面的每个部分做好了布局，之后通过position来设置具体的盒子布局，之后再添加盒子的内容。话不多说，上源码。HTML部分<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="main.css" type="t
·
做一个页面，首先我们要先规划好怎样布局，我做的时候，先用div标签将页面的每个部分做好了布局，之后通过position来设置具体的盒子布局，之后再添加盒子的内容。
话不多说，上源码。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="lunbot.js"></script>
<meta charset="UTF-8">
<title>天堂电影院</title>
</head>
<body>
<div class="aaa">
<div class="top">
<ul>
<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><input type="text" placeholder="请输入名字进行搜索"/></li>
<li><input type="submit" value="搜索"></li>
</ul>
</div>
<div class="main">
<div class="shouye">
<ul class="lunbo" id="banner"></ul>
</div>
<div class="movie">
<div>
<span style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">热门电影</span>
<a href="#" style="text-decoration: none"><p>更多</p></a>
</div>
<table>
<tr>
<td>
<img src="picture/R-C.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
<td>
<img src="picture/movie1.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
<td><img src="picture/R-C.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
<td>
<img src="picture/R-C.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
<td>
<img src="picture/R-C.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
<td>
<img src="picture/R-C.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</td>
</tr>
</table>
</div>
<div class="dsj">
<div>
<p style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">热门电视剧</p>
<a href="#" style="text-decoration: none"><p>更多</p></a>
</div>
<ul>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/e4222e1810e6dc56ba5f4af3120ecfa2.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/dcdf65b774c31215daf457f4817b77af.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
</ul>
</div>
<div class="dm">
<div>
<p style="font-style: italic;color: darkred;font-weight: bold;font-size: 18px">高分动漫</p>
<a href="#" style="text-decoration: none"><p>更多</p></a>
</div>
<ul>
<li><img src="picture/dm1.webp">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/dm2.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/20140723104326705543.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/e4222e1810e6dc56ba5f4af3120ecfa2.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
<li><img src="picture/dcdf65b774c31215daf457f4817b77af.jpg">
<div class="wordStyle">
<p>《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。</p>
</div>
</li>
</ul>
</div>
<div class="phb">
<p style="font-weight: bold;font-size: 20px;color: brown;font-style: italic">热门点播排行</p>
<ol>
<li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP1</p><a href="#" style="text-decoration: none"><strong><i>浴血黑帮</i></strong></a></li>
<li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP2</p><a href="#" style="text-decoration: none"><strong><i>星游记</i></strong></a></li>
<li><p style="font-weight: bolder;color: firebrick;font-size: 20px">TOP3</p><a href="#" style="text-decoration: none"><strong><em>战士</em></strong></a></li>
<li><a href="#" style="text-decoration: none"><em><b>阿甘正传</b></em></a></li>
</ol>
</div>
</div>
<div class="Dbottom">
版权所有：.....
</div>
</div>
</body>
</html>CSS部分
*{
margin: 0;
padding: 0;
}
.top{
/* 设置宽度高度背景颜色 */
height: auto; /*高度改为自动高度*/
width:100%;
margin-left: 0;
background:rgb(189, 181, 181);
position: fixed; /*固定在顶部*/
top: 0;/*离顶部的距离为0*/
margin-bottom: 5px;
z-index: 10;
}
.top ul{
/* 清除ul标签的默认样式 */
width: auto;/*宽度也改为自动*/
list-style-type: none;
white-space:nowrap;
overflow: hidden;
margin-left: 5%;
/* margin-top: 0; */
padding: 0;
}
.top li {
float:left; /* 使li内容横向浮动，即横向排列 */
margin-right:2%; /* 两个li之间的距离*/
position: relative;
overflow: hidden;
}
.top li a{
/* 设置链接内容显示的格式*/
display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
color:white;
text-align: center;
padding: 3px;
overflow: hidden;
text-decoration: none; /* 去除下划线 */
}
.top li a:hover{
/* 鼠标选中时背景变为黑色 */
background-color: palevioletred;
}
/*.top ul li ul{*/
/* !* 设置二级菜单 *!*/
/* margin-left: -0.2px;*/
/* background:rgb(189, 181, 181);*/
/* position: relative;*/
/* display: none; !* 默认隐藏二级菜单的内容 *!*/
/*}*/
/*.top ul li ul li{*/
/* !* 二级菜单li内容的显示 *!*/
/* float:none;*/
/* text-align: center;*/
/*}*/
/*.top ul li:hover ul {*/
/* !* 鼠标选中二级菜单内容时 *!*/
/* display: block;*/
/*}*/
.main{
width: 100%;
min-height: 2000px;
background-color: skyblue;
}
.Dbottom{
width: 100%;
height: 40px;
background-color: seashell;
text-align: center;
}
.shouye{
width: 100%;
height: 450px;
background-image: url("picture/beij2.jpg");
position: relative;
z-index: 9;
}
.movie{
width: 78%;
height: 280px;
}
.movie div:first-child {
display: flex;
align-items: center;
justify-content: space-between;/*两端对齐*/
border: 1px solid rgb(189, 181, 181);
background-color: paleturquoise;
}
.movie img{
height: 240px;
}
.movie table {
width: 100%;
border: 1px solid rgb(189, 181, 181);/*边框*/
background-color: darkolivegreen;
}
.movie table tr {
display: flex;
}
.movie table td {
width: 20%;
display: flex;
align-items: center;/*居中*/
justify-content: space-around;/*拉手对齐*/
position: relative;
}
.wordStyle {
width: 160px;
position: absolute;
display: none;
top: 0px;
}
.wordStyle p{
color: white;
font-weight: bold;
}
.movie img:hover {
filter: blur(2px);
}
.movie img:hover + div {
display: block;
}
.dsj img:hover {
filter: blur(2px);
}
.dsj img:hover + div {
display: block;
}
.dm img:hover {
filter: blur(2px);/*虚化*/
}
.dm img:hover + div {
display: block;
}
.dsj{
width: 78%;
height: 280px;
}
.dsj div:first-child/*防止选到文字div*/ {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgb(189, 181, 181);
background-color: paleturquoise;
}
.dsj img{
height: 240px;
}
.dsj ul{
display: flex;
border: 1px solid rgb(189, 181, 181);
background-color: darkolivegreen;
}
.dsj ul li{
width: 20%;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;/*让文字用positio定位到这一格*/
}
.dm{
width: 78%;
height: 280px;
}
.dm div:first-child{
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgb(189, 181, 181);
background-color: paleturquoise;
}
.dm img{
height: 240px;
}
.dm ul{
display: flex;
border: 1px solid rgb(189, 181, 181);
background-color: darkolivegreen;
}
.dm ul li{
width: 20%;
display: flex;
align-items: center;
justify-content: space-around;
position: relative;/*让文字用positio定位到这一格*/
}
.phb{
width: 20%;
position: absolute;/*相对于上一个使用position属性的标签根据top,right,left,bottom进行定位，如果没有父类则相对于整个浏览器*/
right: 0;
top: 450px;
}
.main li a:hover{
background-color: pink;
}
.lunbo {
height: 200px;
width: 1000px;
padding: 0;
position: absolute;
/* 水平居中 */
left: 50%;
margin-left: -500px;
/* 垂直居中 */
top: 50%;
margin-top: -130px;
list-style: none;
}
/* 移入到轮播图区域把鼠标形状变成‘手’ */
.lunbo:hover {
cursor: pointer;
}
.lunbo li {
position: absolute;
left: 0;
/* 过渡属性，让轮播图切换更自然 */
transition: 0.4s;
}JavaScript部分
window.onload = () => {
lunBo();
}/*页面加载时要执行的函数*/
function lunBo(){
//1.获取ul
var cur_ul = document.getElementById('banner')
// 2.创建一个数组实例
var arr = new Array();
// 用js来创建li、img元素，有多少张图片要轮播就循环多少次
for (i = 1; i <= 3; i++) {
// 创建li元素
var cur_li = document.createElement('li')
// 创建img元素
var cur_img = document.createElement('img')
// 给img元素设置src、width、height属性
// 这里src是轮播图的路径
// 在img文件夹下的图片命名为1.jpg、2.jpg、3.jpg....才可以这样写
cur_img.src = 'picture/' + i + '.jpg';
cur_img.style.width = '600px';
cur_img.style.height = '280px';
// 把img元素插入到创建的li里面
cur_li.appendChild(cur_img);
// 然后在把li插入到ul里面
cur_ul.appendChild(cur_li);
// 然后给ul元素设置事件，鼠标移进来停止轮播
cur_ul.onmouseenter = function () {
// 停止setInterval执行的代码
clearInterval(timer)
}
// 鼠标移出ul又继续轮播图片
cur_ul.onmouseleave = function () {
// 指定时间执行代码
timer = setInterval(get_next, 2000)
}
// 当创建完一个li（li里已经有img元素）就把li添加到arr数组里
// arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li
// 相当于对象的浅拷贝，指针指向问题
arr.push(cur_li)
}
// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作
// 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码
// 我们要三张图片进行展示， 左 中 右
var len = arr.length - 1;
imgLocation();
// 封装轮播图函数
// 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大
// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播
function get_next() {
var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素
arr.pop();//删除掉最后一个li元素
arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面
// 然后重新给arr数组里的li元素设置z-index和scale
for (var i = 0; i < arr.length; i++) {
arr[i].style.zIndex = 1;
arr[i].style.transform = 'scale(1)';
}
// 这步就是展示arr的后两张图片，和前一个步骤的一样
imgLocation();
}
// 用js创建左箭头
var pre_img = document.createElement('img');
pre_img.src = 'picture/左箭头.jpg';//左箭头图片
pre_img.style.position = 'absolute';
pre_img.style.top = "30px";
pre_img.style.left = "-400px";
pre_img.style.margin = "0";
pre_img.style.zIndex = "100";
cur_ul.appendChild(pre_img);
// 用js创建右箭头
var next_img = document.createElement('img')
next_img.src = 'picture/右箭头.jpg';//右箭头的图片
next_img.style.position = 'absolute';
next_img.style.top = "30px";
next_img.style.right = "-400px";
next_img.style.margin = "0";
next_img.style.zIndex = "100";
cur_ul.appendChild(next_img);
// 给左箭头点击绑定事件
pre_img.onclick = function () {
get_pre();
}
// 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用
next_img.onclick = function () {
get_next();
}
// 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。
// 先取出arr数组第一个li，在把这个li放到最后即可
function get_pre() {
var give_up = arr[0];
arr.shift();//取出来最后一张图片
arr.push(give_up);//把最后一张图片放到第一张
for (var i = 0; i < arr.length; i++) {
arr[i].style.zIndex = 1;
arr[i].style.transform = 'scale(1)'
}
imgLocation();
}
function imgLocation() {
// 这是取得左边图片并调整位置
arr[len - 2].style.left = '-200px';
// 这是取得中间图片并调整位置
arr[len - 1].style.left = '200px';
// 这是取得右边图片并调整位置
arr[len].style.left = '600px';
// 然后中间图片调用scale使其变大
arr[len - 1].style.transform = 'scale(1.3)';
// 使中间图片覆盖两边图片
arr[len - 1].style.zIndex = "2";
}
}总结
以上就是我的网页代码，第一次写，可能界面不怎么样，有些地方也是学习别人的，需要可以拿去用。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献1条内容
所有评论(0)