ZIPweb前端学生静态网页设计 实现2个漫威网页设计 html+css 7.36MB

qq_43770056

资源文件列表:

漫威.zip 大约有26个文件
  1. css/
  2. css/index.css 8.54KB
  3. css/newmsg.css 2.24KB
  4. css/style.css 2.95KB
  5. images/
  6. images/banner.png 1.23MB
  7. images/banner1.png 1.76MB
  8. images/bg.png 298.15KB
  9. images/bg2.png 409.97KB
  10. images/bg3.png 814B
  11. images/bg4.png 778B
  12. images/dc1.png 201.24KB
  13. images/dc2.png 180.93KB
  14. images/dc3.png 218.33KB
  15. images/kg1.jpg 165.03KB
  16. images/kg2.jpg 104.74KB
  17. images/kg3.jpg 183.79KB
  18. images/kg4.jpg 158.11KB
  19. images/kg5.jpg 245.5KB
  20. images/kg6.jpg 396.72KB
  21. images/logo.png 94.84KB
  22. images/lunbotu1.png 866.77KB
  23. images/sucai1.jpg 195.25KB
  24. images/tongrenxiang.png 823KB
  25. index.html 7.32KB
  26. newmsg.html 4.43KB

资源介绍:

在设计实现两个漫威主题的静态网页过程中，作为Web前端学生，你将深入应用HTML与CSS这两种基石技术，并可能涉及JavaScript以增强页面的交互性。这一实践不仅巩固了基础技能，还促进了对前端开发更深层次的理解，以下是具体的技术应用及其对开发者成长的帮助分析。 技术栈概览 HTML（HyperText Markup Language）: 构建网页的结构骨架，用于定义页面内容的类型和层级关系，比如段落、标题、图片、链接等。在漫威主题网页设计中，HTML用于组织英雄介绍、影片资讯、新闻更新等内容模块，为网页提供清晰的信息架构。 CSS（Cascading Style Sheets）: 负责网页的外观和布局，通过样式定义使网页美观且具有良好的阅读体验。在本项目中，CSS将被用来设计英雄人物的卡片样式、导航栏效果、背景图像、颜色搭配、响应式布局等，确保网页在不同屏幕尺寸上的适应性和视觉一致性。 响应式设计: 利用CSS的媒体查询和弹性布局（Flexbox或Grid），使网页能够在手机、平板和桌面电脑等不同设备上自适应展示，提升用户体验。 技术应用对开发的帮助 基础技能强化，仅用于个人学习
<!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/style.css" /> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <!-- 头部 --> <header> <nav> <!-- logo --> <div id="logo"> <img src="./images/logo.png" alt="logo" /> </div> <!-- 导航栏 --> <ul id="first_title"> <li> <a class="zixun" href="./index.html">首页</a> </li> <li> <a href="./newmsg.html" class="zixun">漫威历史</a> </li> </ul> <div id="title_sousuo"> <input type="text" value="关键词搜索" /> </div> </nav> </header> <!-- banner图片 --> <div id="banner"> <img src="./images/banner.png" alt="" /> </div> <!-- 公告 --> <div id="announcement"> <span>公告</span> <marquee direction="left"> 漫威漫画公司（Marvel Comics）与DC漫画公司（Detective Comics）并称美国两大漫画巨头，它创建于1939年，于1961年正式定名为Marvel，旧译为“惊奇漫画”，曾用名“时代漫画”（Timely Comics）、亚特拉斯漫画（Atlas Comics）。 </marquee> </div> <!-- 中间内容区域 --> <main> <!-- 介绍 --> <div id="mian_maid"> <!-- 首行左边内容 --> <div id="mian_maid_left"> <div class="contentl"> <ul class="wrapper"> <li><img src="./images/lunbotu1.png" /></li> </ul> <ul class="radius"></ul> <div class="prev"> <span> < </span> </div> <div class="next"> <span>></span> </div> </div> </div> <div id="mian_maid_right"> <h1>漫威介绍</h1> <p> Marvel公司的历史可以追溯到1939年。当时公司名为时代漫画（Timely Comics）。1951年更名为亚特拉斯漫画（Atlas Comics），而在1961年正式更名为Marvel Comics，并确定了正式的标记： 在漫画封面的左上角，设置一个长方框，里面有着当期主角的形象，下面是“Marvel Comics Group”的字样。 </p> </div> </div> <!-- 漫威漫画 --> <div id="mian_maid"> <div id="zhanshi"> <img src="./images/tongrenxiang.png" alt="" /> </div> <div id="mian_maid_news"> <img src="./images/sucai1.jpg" alt="" /> <ul id="news_list"> <h1>漫威漫画</h1> <li> <p> 1939年，一本叫作《Motion Pictures Funnies Weekly》的漫画在电影院作为赠品发行，Namor the Sub-Mariner（海王纳摩.麦肯齐）在其中初次登场。他是人类与鱼类的结合体，可以在水下生活。这是漫威的第一位超级英雄——比公司的成立还要早半年。之后，这个故事经过少许扩展，被重新收录在一个新出版的系列中。而这个新的漫画刊物的名字将成就一个漫画帝国的英名——《Marvel Comics》。 </p> </li> </ul> </div> </div> <!-- 漫威人物 --> <div id="diancang"> <h1>漫威人物</h1> <div id="diancang_list"> <ul> <li> <img src="./images/dc1.png" alt="" /> <p class="name">美国队长</p> <!-- 隐藏内容 --> <!-- <div id="yincangneirong"> <h2>美国队长</h2> <p> 美国队长（Captain America）是美国漫威漫画旗下多位超级英雄使用过的称号，共有多代，初代美国队长初次登场于《美国队长》（Captain America Comics）第1期（1941年3月），由乔·西蒙和杰克·科比联合创造，被视为美国精神的象征。 </p> </div> --> </li> <li> <img src="./images/dc2.png" alt="" /> <p class="name">雷神</p> <!-- <div id="yincangneirong"> <h2>雷神</h2> <p> 《雷神托尔》(作者斯科特·彼得森)内容介绍：托尔是天界之神奥丁的长子，他深得父亲的喜爱。一次，父亲奥丁送给他一把特别的锤子，只有真正的勇士才能举起它。经过各种努力，托尔终于举起了这把锤子，拥有了强大的能力。但是托尔却变得非常傲慢，并因此被父亲贬到了凡间。托尔该如何学会谦逊，成为合格的王位继承人。最终成为强大的雷神托尔呢？答案终将揭晓。 </p> </div> --> </li> <li> <img src="./images/dc3.png" alt="" /> <p class="name">钢铁侠</p> <!-- 隐藏内容 --> <!-- <div id="yincangneirong"> <h2>钢铁侠</h2> <p> 《钢铁侠》（Iron Man）是由美国漫威电影工作室出品的一部科幻冒险电影，改编自同名系列漫画，由乔恩·费儒执导，小罗伯特·唐尼及格温妮斯·帕特洛、杰夫·布里吉斯等主演。该作也是“漫威电影宇宙”系列的首部电影。该片于2008年4月30日在中国大陆上映、5月2日在美国上映。影片讲述了托尼·史塔克在一次绑架事件后改进了盔甲的功能，化身“钢铁侠”，以一个义务警察的身份保护了这个世界和平的故事。 </p> </div> --> </li> </ul> </div> </div> <!-- 更多作品 --> <div id="kaogu"> <h1>更多作品</h1> <ul id="kaogulist"> <li> <div id="kaogulist_img"> <img src="./images/kg1.jpg" alt="" /> </div> <p>毒液</p> </li> <li> <div id="kaogulist_img"> <img src="./images/kg2.jpg" alt="" /> </div> <p>蜘蛛侠</p> </li> <li> <div id="kaogulist_img"> <img src="./images/kg3.jpg" alt="" /> </div> <p>奇异队长</p> </li> <li> <div id="kaogulist_img"> <img src="./images/kg4.jpg" alt="" /> </div> <p>黑豹</p> </li> <li> <div id="kaogulist_img"> <img src="./images/kg5.jpg" alt="" /> </div> <p>绿巨人</p> </li> <li> <div id="kaogulist_img"> <img src="./images/kg6.jpg" alt="" /> </div> <p>黑寡妇</p> </li> </ul> </div> </main> <footer> <p>版权所有@漫威</p> </footer> </body> </html>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP深蓝沉稳雅致论文汇报总结通用PPT模版.pptx.zip1.6MB10月前
    ZIP实用毕业答辩、开题报告.pptx.zip1.67MB10月前
    ZIP时尚个人求职竞聘简历PPT模板.pptx.zip28.31MB10月前
    ZIP手绘粉笔效果毕业答辩.pptx.zip7.28MB10月前
    ZIPjQuery实现一个轮播图34.3KB10月前
    ZIP前端大作业 vue学生简易购物平台3.08MB10月前
    ZIP基于普中开发版的多功能闹钟200.25KB10月前
    ZIPstress-ng流程分析53.22KB9月前