大学生html电影网页设计作业成品 我喜欢的电影榜单题材网页制作代码 简单静态网页模板下载

作品介绍:

大学生网页设计水平DIV CSS布局制作,主题为我的喜欢的电影榜单,作品包括1个首页和6个电影介绍子页面,共7个页面。整体设置了网页背景图片。


作品演示:

首页顶部使用CSS3制作了LOGO鼠标经过放大效果,下方为6部电影封面图,点击可以进入电影介绍的子页面。

共6个子页面,每个电影子页面都根据电影海报大图的色调制作了不同颜色的导航栏目,通过导航可以返回首页或者进入其他子页面。每个电影子页面都包括导航、海报大图、电影介绍、以及四张电影海报图。电影介绍子页面底部还简单制作了电影评价表单。


文件目录:

根目录下的html文件为网页源代码文件,双击可直接浏览器打开,也可以用任意html编辑器修改;

css文件夹中为样式源代码文件;

images文件夹中为网页中所使用的图片图文。


代码下载:

网页作品整体文件打包下载地址 stu-works.com/html/dianying/486.html

电影网页设计模板代码 大学生电影网站设计与制作 html电影网页作业成品 - STU网页作业​大学生电影网站设计与制作html网页成品采用DIV CSS布局制作,主题为我的喜欢的电影榜单,作品包括1个首页和6个电影介绍子页面,整体设置了网页背景图片,电影介绍子页面底部还简单制作了电影评价表单https://www.stu-works.com/html/dianying/486.html

  • 2
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
<!DOCTYPE html> <!-- 定义文档类型为HTML5 --> <html> <!-- 开始HTML文档 --> <head> <!-- head标签中包含了文档的元数据及外部链接信息 --> <meta charset="UTF-8"> <!-- 定义文档使用的字符编码为UTF-8 --> <title>电影评分榜单</title> <!-- 定义网页标题 --> <style> /* 样式表用于定义网页的外观和布局 */ body { background-color: #f0f8ff; /* 设置网页背景色为浅蓝色 */ font-family: Arial, Helvetica, sans-serif; /* 设置网页字体为Arial, Helvetica 或sans-serif */ } h1 { color: #0066cc; /* 设置标题文字颜色为深蓝色 */ text-align: center; /* 设置标题居中对齐 */ } table { margin: auto; /* 设置表格居中对齐 */ border-collapse: collapse; /* 设置单元格边框合并 */ width: 80%; /* 设置表格宽度为80% */ } td, th { border: 1px solid #ddd; padding: 8px; /* 设置单元格内边距为8px */ text-align: center; /* 设置单元格文字居中对齐 */ } th { background-color: #0066cc; color: white; /* 设置表头背景色为深蓝色,文字颜色为白色 */ } </style> </head> <body> <!-- body标签中包含了可见的网页内容 --> <h1>电影评分榜单</h1> <!-- 网页标题,为一级标题 --> <table> <!-- 定义表格 --> <thead> <!-- 定义表头 --> <tr> <!-- 定义表头行 --> <th>电影名称</th> <!-- 定义表头单元格,显示电影名称 --> <th>评分</th> <!-- 定义表头单元格,显示电影评分 --> </tr> <!-- 表头行结束 --> </thead> <!-- 表头结束 --> <tbody> <!-- 定义表格主体内容 --> <tr> <!-- 定义表格行 --> <td>阿凡达</td> <!-- 定义表格单元格,显示电影名称 --> <td>9.0</td> <!-- 定义表格单元格,显示电影评分 --> </tr> <!-- 表格行结束 --> <tr> <td>泰坦尼克号</td> <td>8.5</td> </tr> <tr> <td>复仇者联盟</td> <td>8.8</td> </tr> <tr> <td>星球大战</td> <td>8.7</td> </tr> </tbody> <!-- 表格主体内容结束 --> </table> <!-- 表格结束 --> </body> <!-- body结束 --> </html> <!-- HTML文档结束 -->

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

STU网页设计

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

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

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

打赏作者

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

抵扣说明:

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

余额充值