徐州建设安全监督网站,快速网站建设公司,深圳定做网站,关于网页设计的论文范文【实验主题】
影视详情页设计
【实验任务】
1、浏览并分析多个影视详情页面#xff08;详见参考资源#xff0c;建议自行搜索更多影视网站#xff09;的主要元素构成和版面设计#xff0c;借鉴并构思预期效果。
2、新建 index.html文件#xff0c;合理运用HTML标记编写…【实验主题】
影视详情页设计
【实验任务】
1、浏览并分析多个影视详情页面详见参考资源建议自行搜索更多影视网站的主要元素构成和版面设计借鉴并构思预期效果。
2、新建 index.html文件合理运用HTML标记编写影视详情页面。
1页面至少包含影视名称、海报、导演主演类型年份等基本信息、剧情介绍、观影的超链接注意不是视频本身等。
2欢迎自行设计添加更多页面元素建议底部增加评论区——包含若干条影评和一个填写影评的表单。
3不必考虑页面整体布局即不需要设计页眉、导航、边栏和页脚。
3、新建 style.css 文件运用 CSS语言对影视详情页图文排版。
1网页中至少运用CSS的文本、文字、背景、浮动等样式属性和超链接伪类。
2合理设计配色方案合理选择背景图片。
【效果图】
有GPT帮助的成分 【index.html 文件】
!DOCTYPE html
htmlheadmeta charsetutf-8title星际穿越/titlelink relstylesheet typetext/css hrefstyle.css/headbodydiv classcontainerdiv classmovie-detailsdiv classposterimg src./image/poster.jpg alt电影海报/divdiv classcontenth1 classtitle星际穿越 Interstellar (2014)/h1div classinfop classrating评分9.4/pp classdirector导演a hrefhttps://movie.douban.com/celebrity/1054524/克里斯托弗·诺兰/a/pp classactors主演a hrefhttps://movie.douban.com/celebrity/1040511/马修·麦康纳/a / ahrefhttps://movie.douban.com/celebrity/1048027/安妮·海瑟薇/a /a hrefhttps://movie.douban.com/celebrity/1000225/杰西卡·查斯坦/a / ahrefhttps://movie.douban.com/celebrity/1267954/麦肯吉·弗依/a / ahrefhttps://movie.douban.com/celebrity/1022593/卡西·阿弗莱克/a / ahrefhttps://movie.douban.com/celebrity/1054509/迈克尔·凯恩/a / ahrefhttps://movie.douban.com/celebrity/1054443/马特·达蒙/a/ a hrefhttps://movie.douban.com/celebrity/1325862/提莫西·查拉梅/a /a hrefhttps://movie.douban.com/celebrity/1036407/艾伦·伯斯汀/a / ahrefhttps://movie.douban.com/celebrity/1027824/约翰·利思戈/a/pp classgenre类型 剧情 / 科幻 / 冒险/pp classduration时长169分钟/pbutton stylefont-size: 20px typebuttonaz hrefhttps://v.youku.com/v_show/id_XODkzNzA4ODM2.html?lang%E8%8B%B1%E8%AF%ADspma2hje.13141534.1_4.d_1_1scm20140719.apircmd.239009.video_XODkzNzA4ODM2target_blank立即观看/a/button/div/div/divdiv classdescriptionh2电影描述/h2p近未来的地球黄沙遍野小麦、秋葵等基础农作物相继因枯萎病灭绝人类不再像从前那样仰望星空放纵想象力和灵感的迸发而是每日在沙尘暴的肆虐下倒数着所剩不多的光景。在家务农的前NASA宇航员库珀马修·麦康纳Matthew McConaughey 饰接连在女儿墨菲麦肯吉·弗依 Mackenzie Foy饰的书房发现奇怪的重力场现象随即得知在某个未知区域内前NASA成员仍秘密进行一个拯救人类的计划。多年以前土星附近出现神秘虫洞NASA借机将数名宇航员派遣到遥远的星系寻找适合居住的星球。在布兰德教授迈克尔·凯恩Michael Caine 饰的劝说下库珀忍痛告别了女儿和其他三名专家教授女儿艾米莉亚·布兰德安妮·海瑟薇 Anne Hathaway 饰、罗米利大卫·吉雅西 David Gyasi饰、多伊尔韦斯·本特利 Wes Bentley 饰搭乘宇宙飞船前往目前已知的最有希望的三颗星球考察。/pp他们穿越遥远的星系银河感受了一小时七年光阴的沧海桑田窥见了未知星球和黑洞的壮伟与神秘。在浩瀚宇宙的绝望而孤独角落总有一份超越了时空的笃定情怀将他们紧紧相连……/p/divdiv classdescriptionh2演职表/h2/divdiv classgallerydiv classprofilea hrefhttps://movie.douban.com/celebrity/1054524/img src./image/person1.jpg altPerson 1h5克里斯托弗·诺兰/h5p导演/p/a/divdiv classprofilea hrefhttps://movie.douban.com/celebrity/1040511/img src./image/person2.jpg altPerson 2h5马修·麦康纳/h5p饰 库珀 Cooper/p/a/divdiv classprofilea hrefhttps://movie.douban.com/celebrity/1048027/img src./image/person3.jpg altPerson 3h5安妮·海瑟薇/h5p饰 布兰德 Brand/p/a/divdiv classprofilea hrefhttps://movie.douban.com/celebrity/1000225/img src./image/person4.jpg altPerson 4h5杰西卡·查斯坦/h5p饰 墨菲(成年) Murph/p/a/divdiv classprofilea hrefhttps://movie.douban.com/celebrity/1267954/img src./image/person5.jpg altPerson 5h5麦肯吉·弗依/h5p饰 墨菲(10岁)/p/a/divdiv classprofilea hrefhttps://movie.douban.com/celebrity/1022593/img src./image/person6.jpg altPerson 6h5卡西·阿弗莱克/h5p饰 汤姆(成年)/p/a/div/divh2影视评论区/h2!-- 影评展示部分 --div idreviewsdiv classreviewp classrating评分5星/pp这部电影真的很棒故事讲述了希望和自由的力量。/p/divdiv classreviewp classrating评分4星/pp非常有创意的电影让人深思。/p/div!-- 更多影评 --/div!-- 影评提交表单 --form action/submit_review methodpostlabel forrating评分/labelselect idrating nameratingoption value55星/optionoption value44星/optionoption value33星/optionoption value22星/optionoption value11星/option/selectlabel forreview影评/labeltextarea idreview namereview rows4 required/textareainput typesubmit 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[typetext],
textarea {width: 100%;margin-bottom: 10px;padding: 10px;
}input[typesubmit] {background-color: #007bff;color: white;padding: 10px 20px;border: none;cursor: pointer;
}input[typesubmit]:hover {background-color: #0056b3;
}
