Web程序设计-实验01 HTML与CSS基础

【实验主题】

影视详情页设计

【实验任务】

1、浏览并分析多个影视详情页面(详见参考资源,建议自行搜索更多影视网站)的主要元素构成和版面设计,借鉴并构思预期效果。

2、新建 index.html文件,合理运用HTML标记编写影视详情页面。

1)页面至少包含影视名称、海报、导演主演类型年份等基本信息、剧情介绍、观影的超链接(注意,不是视频本身)等。

2)欢迎自行设计添加更多页面元素,建议底部增加评论区——包含若干条影评和一个填写影评的表单。

3)不必考虑页面整体布局,即不需要设计页眉、导航、边栏和页脚。

3、新建 style.css 文件,运用 CSS语言对影视详情页图文排版。

1)网页中至少运用CSS的文本、文字、背景、浮动等样式属性和超链接伪类。

2)合理设计配色方案,合理选择背景图片。

【效果图】

有GPT帮助的成分

 

 

【index.html 文件】 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>星际穿越</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="container"><div class="movie-details"><div class="poster"><img src="./image/poster.jpg" alt="电影海报"></div><div class="content"><h1 class="title">星际穿越 Interstellar (2014)</h1><div class="info"><p class="rating">评分:9.4</p><p class="director">导演:<a href="https://movie.douban.com/celebrity/1054524/">克里斯托弗·诺兰</a></p><p class="actors">主演:<a href="https://movie.douban.com/celebrity/1040511/">马修·麦康纳</a> / <ahref="https://movie.douban.com/celebrity/1048027/">安妮·海瑟薇</a> /<a href="https://movie.douban.com/celebrity/1000225/">杰西卡·查斯坦</a> / <ahref="https://movie.douban.com/celebrity/1267954/">麦肯吉·弗依</a> / <ahref="https://movie.douban.com/celebrity/1022593/">卡西·阿弗莱克</a> / <ahref="https://movie.douban.com/celebrity/1054509/">迈克尔·凯恩</a> / <ahref="https://movie.douban.com/celebrity/1054443/">马特·达蒙</a>/ <a href="https://movie.douban.com/celebrity/1325862/">提莫西·查拉梅</a> /<a href="https://movie.douban.com/celebrity/1036407/">艾伦·伯斯汀</a> / <ahref="https://movie.douban.com/celebrity/1027824/">约翰·利思戈</a></p><p class="genre">类型: 剧情 / 科幻 / 冒险</p><p class="duration">时长:169分钟</p><button style="font-size: 20px" type="button"><az href="https://v.youku.com/v_show/id_XODkzNzA4ODM2.html?lang=%E8%8B%B1%E8%AF%AD&spm=a2hje.13141534.1_4.d_1_1&scm=20140719.apircmd.239009.video_XODkzNzA4ODM2"target="_blank">立即观看</a></button></div></div></div><div class="description"><h2>电影描述</h2><p>近未来的地球黄沙遍野,小麦、秋葵等基础农作物相继因枯萎病灭绝,人类不再像从前那样仰望星空,放纵想象力和灵感的迸发,而是每日在沙尘暴的肆虐下倒数着所剩不多的光景。在家务农的前NASA宇航员库珀(马修·麦康纳Matthew McConaughey 饰)接连在女儿墨菲(麦肯吉·弗依 Mackenzie Foy饰)的书房发现奇怪的重力场现象,随即得知在某个未知区域内前NASA成员仍秘密进行一个拯救人类的计划。多年以前土星附近出现神秘虫洞,NASA借机将数名宇航员派遣到遥远的星系寻找适合居住的星球。在布兰德教授(迈克尔·凯恩Michael Caine 饰)的劝说下,库珀忍痛告别了女儿,和其他三名专家教授女儿艾米莉亚·布兰德(安妮·海瑟薇 Anne Hathaway 饰)、罗米利(大卫·吉雅西 David Gyasi饰)、多伊尔(韦斯·本特利 Wes Bentley 饰)搭乘宇宙飞船前往目前已知的最有希望的三颗星球考察。</p><p>他们穿越遥远的星系银河,感受了一小时七年光阴的沧海桑田,窥见了未知星球和黑洞的壮伟与神秘。在浩瀚宇宙的绝望而孤独角落,总有一份超越了时空的笃定情怀将他们紧紧相连……</p></div><div class="description"><h2>演职表</h2></div><div class="gallery"><div class="profile"><a href="https://movie.douban.com/celebrity/1054524/"><img src="./image/person1.jpg" alt="Person 1"><h5>克里斯托弗·诺兰</h5><p>导演</p></a></div><div class="profile"><a href="https://movie.douban.com/celebrity/1040511/"><img src="./image/person2.jpg" alt="Person 2"><h5>马修·麦康纳</h5><p>饰 库珀 Cooper</p></a></div><div class="profile"><a href="https://movie.douban.com/celebrity/1048027/"><img src="./image/person3.jpg" alt="Person 3"><h5>安妮·海瑟薇</h5><p>饰 布兰德 Brand</p></a></div><div class="profile"><a href="https://movie.douban.com/celebrity/1000225/"><img src="./image/person4.jpg" alt="Person 4"><h5>杰西卡·查斯坦</h5><p>饰 墨菲(成年) Murph</p></a></div><div class="profile"><a href="https://movie.douban.com/celebrity/1267954/"><img src="./image/person5.jpg" alt="Person 5"><h5>麦肯吉·弗依</h5><p>饰 墨菲(10岁)</p></a></div><div class="profile"><a href="https://movie.douban.com/celebrity/1022593/"><img src="./image/person6.jpg" alt="Person 6"><h5>卡西·阿弗莱克</h5><p>饰 汤姆(成年)</p></a></div></div><h2>影视评论区</h2><!-- 影评展示部分 --><div id="reviews"><div class="review"><p class="rating">评分:5星</p><p>这部电影真的很棒,故事讲述了希望和自由的力量。</p></div><div class="review"><p class="rating">评分:4星</p><p>非常有创意的电影,让人深思。</p></div><!-- 更多影评 --></div><!-- 影评提交表单 --><form action="/submit_review" method="post"><label for="rating">评分:</label><select id="rating" name="rating"><option value="5">5星</option><option value="4">4星</option><option value="3">3星</option><option value="2">2星</option><option value="1">1星</option></select><label for="review">影评:</label><textarea id="review" name="review" rows="4" required></textarea><input type="submit" value="提交影评"></form></div></body>
</html>

【style.css 文件】

.container {width: 800px;margin: 0 auto;padding: 20px;background-color: #f2f2f2;font-family: Arial, Helvetica, sans-serif;}.movie-details {padding: 20px;display: flex;
}.poster {flex: 0 0 200px;margin-right: 20px;
}.poster img {width: 100%;height: auto;
}.content {flex: 1;
}.title {font-size: 24px;font-weight: bold;margin-bottom: 10px;
}.info {margin-top: 20px;
}.info p {margin-bottom: 5px;
}.rating {font-weight: bold;
}.genre,
.duration {font-style: italic;
}.info a {text-decoration: none;color: black;
}
.info a:hover {color: rgb(170, 170, 255);
}.description {margin-top: 20px;
}.description h2 {font-size: 20px;font-weight: bold;
}.description p {text-indent: 2em;line-height: 25px;margin-top: 10px;font-size: 16px;
}.gallery {display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));gap: 20px;padding: 20px;
}.profile {text-align: center;
}.profile img {width: 100%;height: auto;/* border-radius: 50%; *//* Commented out to make the images rectangular */
}.profile h3 {margin: 10px 0;
}.profile p {font-size: 0.9em;color: #555;
}button {background-color: rgb(179, 255, 182);border: none;
}h2 {color: rgb(0, 119, 34);
}.profile a {text-decoration: none;color: rgb(102, 102, 153)
}.review {border-bottom: 1px solid #ccc;padding: 20px;
}.review:last-child {border-bottom: none;
}.rating {color: #f5a623;
}form {margin-top: 20px;
}input[type="text"],
textarea {width: 100%;margin-bottom: 10px;padding: 10px;
}input[type="submit"] {background-color: #007bff;color: white;padding: 10px 20px;border: none;cursor: pointer;
}input[type="submit"]:hover {background-color: #0056b3;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络——MAC地址和IP地址

目录 前言 引入 MAC地址与IP地址 IP地址和MAC地址是什么&#xff1f;如何起作用的&#xff1f; MAC地址如何表示与确定网卡在网络中的确定位置&#xff1f; DHCP协议自动帮我们配置 操作系统是如何知道对方的MAC地址的&#xff1f; 前言 本博客是博主用于复习计算机网络…

【回溯】Leetcode 17. 电话号码的字母组合【中等】

电话号码的字母组合 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 **输入&#xff1a;**digits “23” 输出&am…

uniapp登录拦截白名单使用

1、创建uni.promisify.adaptor.js文件 // 根目录新建 uni.promisify.adaptor.js // 路由白名单 const list [/, /pages/stroke/stroke]; //创建路由拦截&#xff0c;这里只判断一般跳转 uni.addInterceptor(switchTab, {invoke(res) {console.log(res);//存在token就跳转if (…

LLM大语言模型助力DataEase小助手,新增气泡地图,DataEase开源数据可视化分析平台v2.5.0发布

2024年4月8日&#xff0c;DataEase开源数据可视化分析平台正式发布v2.5.0版本。 这一版本的功能升级包括&#xff1a;新增DataEase小助手支持&#xff0c;通过结合智能算法和LLM&#xff08;即Large Language Model&#xff0c;大语言模型&#xff09;能力&#xff0c;DataEas…

【Py/Java/C++三种语言OD2023C卷真题】20天拿下华为OD笔试之【回溯】2023C-找到它【欧弟算法】全网注释最详细分类最全的华为OD真题题解

有LeetCode算法/华为OD考试扣扣交流群可加 948025485 可上全网独家的 欧弟OJ系统 练习华子OD、大厂真题 绿色聊天软件戳 od1336了解算法冲刺训练 文章目录 题目描述与示例题目描述输入描述输出描述示例一输入输出 示例二输入输出 解题思路状态更新和回滚写在横向遍历for循环内的…

M语言前景

M语言作为一种编程语言&#xff0c;其前景可能受到多个因素的影响&#xff0c;包括其应用领域、社区支持、市场需求等。目前&#xff0c;M语言在多个领域都有应用&#xff0c;如智能机器人开发、语音识别系统、图像处理技术、大数据分析、云计算等&#xff0c;这显示出其多功能…

使用Python进行网站爬虫和数据分析

在网络数据的获取和分析过程中&#xff0c;网站爬虫技术是一种常见且有效的手段。本文将介绍如何使用Python编程语言&#xff0c;结合常用的爬虫库和数据分析工具&#xff0c;实现对网站数据的抓取和分析。 1. 准备工作 在开始之前&#xff0c;确保您已经安装了Python解释器&a…

智能加湿器中应用的数字温度传感芯片

随着经济的发展和人民生活水平的提高&#xff0c;人们对生活质量和健康的要求愈来愈高。空气加湿器就是这样慢慢的走进全球的很多家庭当中&#xff0c;成为干燥地区家庭不可缺少的一种小型家电产品。空气加湿器在我国仍属于新兴产物&#xff0c;加大对空气加湿器的研究与开发的…

【how2j练习题】HTML DOM部分阶段练习

练习1 <!-- 验证账号是否已经存在 那么就在js使用简单的验证规则&#xff1a; 如果账号是以a或者A开头的&#xff0c;那么就提示已经存在了。 --> <!-- 1.需要一个输入框和一个按钮 2.按钮上绑上一个事件。 3.编写事件&#xff0c;并输出答案 --><html><…

服务器感染了.rmallox勒索病毒,如何确保数据文件完整恢复?

引言&#xff1a; 随着网络技术的发展&#xff0c;勒索病毒已经成为当今数字时代的一大威胁。近期出现的.rmallox勒索病毒更是引发了广泛关注。本文将深入探讨.rmallox勒索病毒的特点&#xff0c;并提供一系列应对这一威胁的高效策略。如果受感染的数据确实有恢复的价值与必要…

如何打造高度柔性动态的智能仓储物流解决方案?

近年来&#xff0c;仓储物流行业步入自动化系统集成时代&#xff0c;以货架为存储主体的方式逐步发展成为了自动化储方式&#xff0c;核心设备也由货架转变为机器人货架&#xff0c;形成系统集成物流存储体系。河北沃克根据客户需求精准发力&#xff0c;推出了新一代海格里斯智…

TSINGSEE青犀边缘计算AI智能分析网关V4客流统计算法的配置步骤及使用

TSINGSEE青犀AI智能分析网关V4内置了近40种AI算法模型&#xff0c;支持对接入的视频图像进行人、车、物、行为、烟火等实时检测分析&#xff0c;上报识别结果&#xff0c;并能进行语音告警播放。硬件支持RTSP、GB28181协议、以及厂家私有协议接入&#xff0c;可兼容市面上常见的…

十六、计算机视觉-Scharr算子 和 Laplacian算子

文章目录 一、Scharr算子二、Laplacian算子 一、Scharr算子 Scharr算子和Sobel算子原理都一样&#xff0c;它是由Scharr在2002年提出的一种改进的Sobel算子。Scharr算子的优点在于它相对于Sobel算子有更好的旋转不变性和更小的边缘响应误差。 我们看下Scharr算子的水平卷积核&…

SpringBoot + Redisson 限流

Aspect Component public class LimitInterceptor {Autowiredprivate RedissonClient redissonClient;Value("${stnet.api.limit}")private boolean limit;/***配置织入点***/Pointcut("annotation(com.st.microservice.plugin.sso.annotation.Limit)")pub…

MySQL:主键,事件,索引的基础用法(10)

主键 指定某个字段作为主键&#xff0c;这个字段内容无法为空&#xff0c;而且他的内容不能重复作为唯一的标识 主键还有自增和非自增&#xff0c;比如你创建了一个表&#xff0c;你设置了自增&#xff0c;他就会按编号依次自动加一 我创建了一个名为tarro的数据库&#xff…

2813: 【算法思想】【双指针】无重复最长子串

题目描述 给定一个字符串&#xff0c;找出不含有重复字符的 最长子串 的长度。&#xff08;注意&#xff1a;必须是一个子串&#xff0c;不是子序列&#xff09; 输入 一个字符串 输出 最长子串 的长度 示例&#xff1a; 给定 "abcabcbb" &#xff0c;没有重复字…

element-ui使用记录

element-ui的组件名就是类名 样式穿透&#xff08;用来修改没有类名的子组件样式&#xff09; 例如修改头部具名插槽的样式&#xff08;但是无法定位该元素&#xff09; 查看最后生成的html结构中对应的结构&#xff08;这里的头部有类名&#xff0c;可以直接对该类名进行样…

C语言—每日选择题—Day69

第一题 1、以下程序的输出结果是&#xff08; &#xff09; int main() {char arr[2][4];strcpy (arr[0],"you");strcpy (arr[1],"me");arr[0][3]&;printf("%s \n",arr);return 0; } A: you&me B: you C: me D: err 答案及解析 A 这里重…

FFmpeg: 简易ijkplayer播放器实现--03UI界面设计

文章目录 UI设计流程图UI设计界面点击播放功能实现 UI设计流程图 UI设计界面 主界面 控制条 播放列表 画面显示 标题栏 设置界面 提示框 点击播放功能实现 槽函数实现&#xff1a; connect(ui->ctrlBarWind, &CtrlBar::SigPlayOrPause, this, &Main…

zookeeper解析

目录 zookeeper定义 zookeeper定义 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目 Zookeeper工作机制 zookeeper从设计模式角度来理解&#xff1a; 是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它负责存储和管理大家都关心…