如何用HTML+CSS+JavaScript实现一个简单的电影网站页面

做一个页面,首先我们要先规划好怎样布局,我做的时候,先用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";
    }
}

总结

以上就是我的网页代码,第一次写,可能界面不怎么样,有些地方也是学习别人的,需要可以拿去用。

  • 2
    点赞
  • 15
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

编程彦祖

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值