大二学生web期末大作业 在线电影网站 HTML+CSS+JS

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/239786

(title-电影网页设计)]

截图演示

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

    
    
    
    



    

        
        
        
        

            

                
首页
                
购票
                
影院
                
社区
            
        
        
        

            
            
            

        
        
        

            

                登录
                注册
            
            

                
                    
                    
                
                
                

                    
个人中心
                    
退出登录
                
            
        

            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
            
        
    

正在热映（20部） 更多

• 8.0 冰雪奇缘2 选座购票
• 8.5 吹哨人 选座购票
• 4

  吹哨人

  900人想看
• 5

  大约在冬季

  800人想看
• 6

  吹哨人

  700人想看
• 7

  天·火

  600人想看
• 8

  一生有你

  550人想看
• 9

  冰雪奇缘2

  450人想看

• 关于叮当
• 加入我们
• 联系我们
• 隐私政策
• 问题反馈

Copyright © 2019 叮当电影

CSS代码

@charset "UTF-8";

/*******************************************************************/
/* 底部 - 页脚 */
.footer {
    height: 100px;
    width: 100%;
    overflow: hidden;
    background-color: #2d3237;
    color: #778088;
}

.footer a {
    color: #778088;
}

.footer .link-nav {
    float: left;
    margin: 20px 0;
}

.footer .link-nav a:hover {
    color: #FF8D1B;
}

.footer .sns {
    float: right;
    margin-top: 30px;
}

.footer .link-nav li {
    display: inline-block;
    margin-right: 20px;
}

.footer .copyright {
    margin-top: 10px;
}

.footer .sns a.icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-left: 10px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all .2s ease;
}

.footer .sns a.icon:hover {
    width: 42px;
    height: 42px;
    background-color: #FF8D1B;
    border: 1px solid #FF8D1B;
}

.footer .sns .sina-icon {
    background-image: url("../imgs/icons/sina-icon.png");
}

.footer .sns .wechat-icon {
    background-image: url("../imgs/icons/wechat_icon.png");
}

.footer .sns .rss-icon {
    background-image: url("../imgs/icons/rss-icon.png");
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app