HTML + CSS 实现猫眼电影静态页面

已于 2022-07-02 23:28:38 修改
阅读量4.7k 收藏 65
点赞数 3
分类专栏： html css 文章标签： html css 前端
于 2022-06-02 22:58:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49981930/article/details/125108118
版权
本文展示了如何使用HTML和CSS构建一个类似猫眼电影的静态页面，包括导航菜单、类型、地区和年代的选择区域，以及电影列表和分页功能。CSS样式定义了各个元素的布局和交互效果，如选中状态和鼠标悬停效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

HTML + CSS 实现猫眼电影静态页面

效果图：
在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在热映--猫眼电影</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/movie.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="main">
        <!-- 菜单 -->
        <nav class="nav">
            <a href="" class="selected">正在热映</a>
            <a href="">即将上映</a>
            <a href="">经典影片</a>
        </nav>

        <div class="container">
            <!-- 选择区 -->
            <div class="choose-area">
                <div class="choose-item clearfix">
                    <div class="left">类型：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li><a href="" class="selected">全部</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><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><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><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><a href="">纪录片</a></li>
                            <li><a href="">其他</a></li>
                        </ul>
                    </div>
                </div>

                <div class="choose-item clearfix">
                    <div class="left">地区：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <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><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><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><a href="">其他</a></li>
                        </ul>
                    </div>
                </div>

                <div class="choose-item clearfix no-line">
                    <div class="left">年代：</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li><a href="">全部</a></li>
                            <li><a href="">2022</a></li>
                            <li><a href="">2021</a></li>
                            <li><a href="">2020</a></li>
                            <li><a href="">2019</a></li>
                            <li><a href="">2018</a></li>
                            <li><a href="">2017</a></li>
                            <li><a href="">2016</a></li>
                            <li><a href="">2015</a></li>
                            <li><a href="">2014</a></li>
                            <li><a href="">2013</a></li>
                            <li><a href="">2012</a></li>
                            <li><a href="">2011</a></li>
                            <li><a href="">2000-2010</a></li>
                            <li><a href="">90年代</a></li>
                            <li><a href="">80年代</a></li>
                            <li><a href="">70年代</a></li>
                            <li><a href="">更早</a></li>
                        </ul>
                    </div>
                </div>
            </div>

             <!-- 电影列表 -->
            <div class="movies clearfix">
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/遇见你之后.jpg" alt="遇见你之后">
                        </a>
                    </div>
                    <div class="name">遇见你之后</div>
                    <div class="score">暂无评分</div>
                </div>

                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/我是真的讨厌异地恋.jpg" alt="我是真的讨厌异地恋">
                        </a>
                    </div>
                    <div class="name">
                        我是真的讨厌异地恋
                    </div>
                    <div class="score">
                        8.3
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/暗恋 橘生淮南.jpg" alt="暗恋·橘生淮南">
                        </a>
                    </div>
                    <div class="name">
                        暗恋·橘生淮南
                    </div>
                    <div class="score">
                        暂无评分
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/熊出没 重返地球.jpg" alt="熊出没·重返地球">
                        </a>
                    </div>
                    <div class="name">
                        熊出没·重返地球
                    </div>
                    <div class="score">
                        9.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/我要我们在一起.jpg" alt="我要我们在一起">
                        </a>
                    </div>
                    <div class="name">
                        我要我们在一起
                    </div>
                    <div class="score">
                        8.1
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/长津湖之水门桥.jpg" alt="长津湖至水门桥">
                        </a>
                    </div>
                    <div class="name">
                        长津湖之水门桥
                    </div>
                    <div class="score">
                        9.6
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/坏蛋联盟.jpg" alt="坏蛋联盟">
                        </a>
                    </div>
                    <div class="name">
                        坏蛋联盟
                    </div>
                    <div class="score">
                        9.1
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/哆啦A梦：大雄的宇宙小战争 2021.jpg" alt="哆啦A梦：大雄的宇宙小战争 2021">
                        </a>
                    </div>
                    <div class="name">
                        哆啦A梦：大雄的宇宙小战争 2021
                    </div>
                    <div class="score">
                        8.4
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="./img/花束般的恋爱.jpg" alt="花束般的恋爱">
                        </a>
                    </div>
                    <div class="name">
                        花束般的恋爱
                    </div>
                    <div class="score">
                        8.9
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pager">
                <a href="">上一页</a>
                <a href="" class="active">1</a><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a><a href="">6</a><a href="">7</a><a href="">8</a><a href="">9</a><a href="">10</a>
                <a href="">下一页</a>
            </div>
        </div>       
    </div>
</body>
</html>

movie.css代码

body{
    color: #333;
}

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

.main{
    line-height: 1.5;
}

.main .nav{
    height: 60px;
    background: #47464a;
    color: #999;
    text-align: center;
    line-height: 60px;
}

.main .nav a{
    margin: 0 38px;
}

.main .nav a:hover{
    color: #fff;
}

.main .nav a.selected{
    color: #ef4238;
}

.main .container{
    width: 1120px;
    margin: 0 auto;
}

.main .container .choose-area{
    border: 1px solid #e5e5e5;
    margin: 40px 0;
    font-size: 14px;
    line-height: 30px;
    padding: 0 30px;
}

.main .container .choose-area .choose-item{
    margin: 1em 0;
    border-bottom: 1px dotted #e5e5e5;
}

.main .container .choose-area .choose-item.no-line{
    border: none;
}

.main .container .choose-area .choose-item .left{
    float: left;
    color: #999;
}

.main .container .choose-area .choose-item .right{
    float: left;
    width: 1010px;
}

.main .container .choose-area .choose-item .right li{
    float: left;
    margin: 0 9px;
    padding: 0 6px;
    /* padding: 3px 9px; */
}

.main .container .choose-area .choose-item .right li:hover{
    color: #ef4238;
}

.main .container .choose-area .choose-item .right li .selected{
    background: #ef4238;
    color: #fff;
    border-radius: 14px;
}


/* 电影列表 */

.main .container .movies .movie-item{
    float: left;
    width: 160px;
    margin: 10px 32px 10px 0;
}

.main .container .movies .movie-item:nth-child(6n){
    margin-right: 0;
}

.main .container .movies .movie-item .poster img{
    width: 160px;
    height: 200px;
}

.main .container .movies .movie-item .name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
    text-align: center;
}

.main .container .movies .movie-item .score{
    color: #ffb400;
    text-align: center;
    font-style: italic;
    line-height: 2.5;
}

.main .container .movies .movie-item .score::first-letter{
    font-size: 1.5em;
}

完整代码：HTML+CSS实现猫眼电影静态页面

html+css实现猫眼电影“榜单”静态页面
weixin_45762315的博客
11-17 6134
首页 首页...
html+css实现猫眼移动端“我的”静态页面
weixin_45762315的博客
11-17 1492
我的 laD842919168 V1 青铜会员 > <!-- 想看 --...
Vue2.5从零开发猫眼⑤——影院页开发
风里有诗句哈的博客
02-22 1172
Vue2.5从零开发猫眼系列以更新完毕 Vue2.5从零开发猫眼①——前言  Vue2.5从零开发猫眼②——项目开始前准备 Vue2.5从零开发猫眼③——启动页开发 Vue2.5从零开发猫眼④——Home页开发 Vue2.5从零开发猫眼⑤——影院页开发 Vue2.5从零开发猫眼⑥——个人中心组件开发 Vue2.5从零开发猫眼⑦——City组件开发 Vue2.5从零开发猫眼⑧——引入...
简单仿猫眼电影首页静态页面.rar
08-05
自己练习html和css时做的一个非常简单的仿猫眼电影首页的静态页面，内容是随便写的，主要是为了练习浮动，常规流布局等，仅供参考！
html+css猫眼PC静态页面（初学者）
05-08
html+css，含css的一些特效，适合前端初学者练习的静态网页。
仿猫眼官网静态页面（纯HTML）
苏樱的博客
05-13 2039
仿猫眼官网静态页面（纯HTML）准备工作正文HTMLCSS小结 准备工作 用到的图片如下，具体可以去官网下面截取（这里就不上传图片了，供参考） 界面效果 正文 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
HTML + CSS + 练习静态页面 + 实现豆瓣首页
06-30
在这个“HTML + CSS + 练习静态页面 + 实现豆瓣首页”的项目中，我们将深入理解这两门技术，并通过实践来提升技能。 HTML是网页内容的标记语言，用于定义网页的元素结构。例如，`<html>`标签表示整个文档，`<head>`...
静态网页-猫眼电影
m0_51757444的博客
05-11 970
静态页面-猫眼官网（部分）练习float
html css网页制作成品——猫眼电影 WEB静态网页作业模板 大学生个人主页博客网页代码 dw个人网页作业成品
qq__3200628753的博客
12-26 560
1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑
仿猫眼电影PC端首页htmlcss开发源码
04-14
仿猫眼电影PC端首页开发源码，有html、css，过程中用到的图片时随机拿的，如果有需要的朋友可以之后自己下载编辑，
基于vue+node.js制作猫眼电影基本网页
06-16
适用于在校大学生，软件工程等课程学习 可以当作课堂作业，或毕业设计项目等参考 猫眼电影的简易版页面
微信小程序猫眼电影
05-19
微信小程序猫眼电影
HTML + CSS +JQuery +css3+bootstrap实现猫眼电影静态页面
最新发布
qq_55720611的博客
01-12 625
jquery判断输入框内是否有内容。简便jquery选座图js。
HTML+CSS大作业 关于制作网页主题网站设计——猫眼电影(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
qq_524614081的博客
06-16 1160
HTML5期末大作业：关于制作网页主题网站设计——猫眼电影(9页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作
HTML css浮动练习——猫眼电影网页
coising的博客
01-18 1587
浮动练习——简单的静态猫眼电影页面制作 1.reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big
模仿猫眼电影静态网页展示
weixin_30794851的博客
05-12 1538
转载于:https://www.cnblogs.com/ybzwj/p/9030038.html
爬取猫眼电影top100的代码
black_hole6的博客
10-04 1484
废话不说，代码附上：   #encoding:utf-8 import requests import re import json from multiprocessing import Pool #多线程模块 #获取网页源代码 def get_one_page(url): #添加头信息 headers = {'User-Agent':'Mozilla/...
17HTML5期末大作业：国外影视网站设计——橙色国外电影(13页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
11-23 1372
HTML5期末大作业：国外影视网站设计——橙色国外电影(13页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值