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

做一个页面，首先我们要先规划好怎样布局，我做的时候，先用div标签将页面的每个部分做好了布局，之后通过position来设置具体的盒子布局，之后再添加盒子的内容。

话不多说，上源码。

HTML部分

    
    
    
    



    

    

        
登录/注册
        
热门推荐
        
电影
.
        
电视剧
        
综艺
        
动漫
        

        

    
    

    

        

            
    

        

            热门电影
            
更多
        
        

            

                

                    
                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
                

                    
                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
                

                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
                

                    
                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
                

                    
                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
                

                    
                    

                        
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                    
                
            
        
    
    

        

            
热门电视剧
            
更多
        
        

            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
        
    
    

        

            
高分动漫
            
更多
        
        

            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
            

                

                    
《肖申克的救赎》是由弗兰克·德拉邦特编剧并执导的美国剧情片，由蒂姆·罗宾斯、摩根·弗里曼领衔主演。
                
            
        
    
    

        
热门点播排行
        

            
TOP1
浴血黑帮
            
TOP2
星游记
            
TOP3
战士
            
阿甘正传
        
    


    版权所有：.....

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";
    }
}

总结

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