电影排行案例

最新推荐文章于 2024-06-02 21:27:33 发布
最新推荐文章于 2024-06-02 21:27:33 发布
阅读量593 收藏 1
点赞数 1
分类专栏： CSS常见小案例 文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/127374609
版权

第一步:构建HTML框架

简介：本文用最通俗的语言，一步步教会大家CSS构建电影排行榜。
首先构建HTML框架，本框架主要由表格构成，使用的标签为table，thead，th，tbody，tr，td。
如果大家HTML不牢固，请看我的这篇博客:https://blog.csdn.net/qq_51447496/article/details/127158655

第一步：构建HTML框架

构建框架：
对于这个框架需要一个个的小组件来写

1.1构建表头

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
    </table>
</body>

运行结果：
在这里插入图片描述

1.2构建表身

 <!-- 构建tbody  -->
        <tbody>
            <!-- 这是每一行的模块 -->
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
           
        </tbody>

运行结果：
在这里插入图片描述

完整的表身：

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.png"></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.png"></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.png"></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/down.png"></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.png"></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.png"></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

在这里插入图片描述

第二步：CSS渲染

这里的渲染比较简单

<!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>Document</title>
    <style>
        /* 设置整体表格的大小 */
        table {
            width: 500px;
            height: 200px;
        }

        /* 设置每个表头的高度 */
        th {
            height: 35px;
        }

        table,
        td,
        th {
            /* 设置边框 */
            border: 1px solid blue;
            
            /* 合并相邻的边框 */
            border-collapse: collapse;

            /* 设置文字大小 */
            font-size: 14px;

            /* 设置文本居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- align="center"设置表格在中间 -->
    <!-- boder设置表格边框 -->
    <!-- cellpadding设置文字内部边距 使得文字处于表格中间位置 -->
    <!-- cellspacing设置表格框线之间的间距 -->
    <table align="center" border="1" cellpadding="20" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键字</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七天</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="images/down.png"></td>
                <td>345</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="images/down.png"></td>
                <td>124</td>
                <td>675432</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="images/up.png"></td>
                <td>212</td>
                <td>7654</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="images/down.png"></td>
                <td>23</td>
                <td>75645</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="images/down.png"></td>
                <td>121</td>
                <td>7676</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="images/down.png"></td>
                <td>576576</td>
                <td>1231421</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="images/down.png"></td>
                <td>234</td>
                <td>7686</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

运行结果：
在这里插入图片描述

极客李华
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
电影排行榜
qq_57755314的博客
07-15 283
开发工具：DW 关键技术：JavaScript 作者：晨疯 撰写时间：2021/07/08 1、先康康效果 2、HTML中写一个盒子接受li的内容，css添加样式，具体如下： 3、主要部分：JavaScript （1）写一个二维数组，①这个是电影的序号，②电影的标题 ③电影的图片，④电影的大体的描述。 （2）⑤声明一个空值，然后获取ul的标签； （3）写一个for in循环，在里面创建li标签，然后再将上面的二维数组的值，拼接到创建的li标签中 ...
TOP250：仿豆瓣电影排行榜TOP250-Vue
02-09
vue-day11 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
【精讲】vue2框架开发项目（内含css、HTML、js内容均有详细注释）影片排名榜
m0_59505309的博客
08-06 1402
【精讲】vue2框架开发项目（内含css、HTML、js内容均有详细注释）影片排名榜
电影网站排行榜HTML版
08-18
本程序是可以自动生成HTML最少每十分钟自动生成一次可以达到自动更新，也可以每天自动重置数据，本程序是惊云网站排行榜美化版~修复了多个错误 管理登陆:user/admin.asp 用户名:11 密 码:22
python+vue+elementui电影个性化推荐系统django协同过滤算法
QQ3166678367的博客
09-05 369
设计电影个性化推荐系统，推荐服务能够挖掘用户信息、电影项目信息间隐藏的关联性,从而发现用户的潜在兴趣,将用户可能感兴趣的影视片推荐给用户，通过计算机技术与网络技术能够为人们提供更多的便利与服务。3. 对于不同影片，用户可为影片添加上标签，并且可增添删除相关标签，标签的作用类似于分类，用户根据个人感想对影片加上不同标签，方便用户对影片的查询。4. 观影之后，用户可在评论栏内查看其它用户对该影片的评论，并可在评论内写下自己的想法，同时也可以被其他用户查看和参考，方便用户之间信息交流。
v-for的练习，渲染电影列表（可以实现简单的排序）
z3436的博客
02-15 1021
使用v-for来简单的渲染出信息（带排序）
电影网站排行榜HTML版_movhtml
08-27
电影网站排行榜HTML版_movhtml，可作为版进行二次开发。
豆瓣电影爬虫案例
12-13
利用爬虫技术,爬取豆瓣电影科幻电影前34名个电影详细信息,和保存电影剧照的代码
5.电影数据案例分析.ipynb
07-10
pandas电影数据分析，从1000部电影中获取评分的平均分、导演的人数、呈现rating，runtime的分布情况、统计电影分类(genre)的情况，如需免费获取，请留下邮箱地址。
Python电影爬虫数据统计展示案例
08-28
Python电影爬虫数据统计展示案例，主要以豆瓣电影TOP250 https://movie.douban.com/top250 为例，我们需要抓取每一部电影的名字，电影的描述信息（包括导演、主演、电影类型等等），电影的评分，以及电影中最经典...
电影排行top250爬虫案例源码.py
04-02
电影排行top250爬虫案例源码，仅用于学习，请勿用于非法用途
Spark 案例测试数据
09-11
Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据Spark 案例测试数据...
jQuery实现电影排行榜
weixin_45736498的博客
03-23 366
电影排行榜 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排行榜</title> <style> *{ margin: 0; padd...
Vue实现仿豆瓣电影
ybbgrain的历程
06-20 3948
前言 这次用Vue实现豆瓣电影，然后上网上查阅了很多资料，这些东西基本上都加载不出来（原因大概是豆瓣的API接口更新了一下，所以以网的API好像都不能用了），而我又是第一次学Vue别人的拿来看不懂，没办法，自己做了个简版的。 如下图所示。 实现的页面有： 首页 详情页 榜单 查看评论 我的页面 这里例举首页和详情页的图大家参考。 项目结构 补充：其中的bottom是底部导航，header是头部样式，spinner是加载动画，star是显示星级评分。 运行方式 先：npm in
做一个超级简单的电影排行榜
Li13610030857的博客
08-18 684
首先：是我们HTML部分：代码如下图所示， 接下来就到了CSS部分了，在CSS部分中最重要的的两个类分别是：content和conrrnt,其中content的作用主要是将图片和文字隐藏起来，而conrrnt则的将隐藏的图片和文字显示出来。具体代码如下图所示： 最后就到了JavaScript部分：首先你要引入jQuery的js文件，然后声明一个匿名函数，在函数里写两个on的监听事件，第一个监听鼠标移入时执行添加类，第二个则是当鼠标移出时执行删除类的事件。 这是我所学到的
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 484
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 473
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Typescript高级: 深入理解extends keyof语法
最新发布
Wang的专栏
06-02 565
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
Python爬虫案例
04-07
当然，我可以给你介绍一些Python爬虫的案例。以下是几个常见的Python爬虫案例：...5. 豆瓣电影Top250排行榜：使用Python的requests库和BeautifulSoup库可以爬取豆瓣电影Top250排行榜的电影信息，例如电影名称、评分等。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客李华

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值