web网页设计作业-电影设计-爱影评在线电影(10页面)

最新推荐文章于 2025-04-03 15:30:48 发布

web网页作品设计

最新推荐文章于 2025-04-03 15:30:48 发布

阅读量728

点赞数 19

分类专栏： html影视网页制作【code.weylin.cn】文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/qq_40486643/article/details/144350074

版权

html影视网页制作【code.weylin.cn】专栏收录该内容

36 篇文章

订阅专栏

📒 web网页设计期末课程大作业:电影设计-爱影评在线电影(10页面)

大学生个人网页设计 HTML个人网页制作 web个人网站模板简单静态HTML个人网页作品

该首页代码采用了DIV盒子的布局方法，展示了盒子嵌套、浮动、边距、边框和背景等属性的运用。外部大盒子实现居中，内部布局为左右中结构，底部则是横向浮动排列。代码中涵盖了大学前端学习的知识点和布局技巧，CSS代码量丰富且细致，通过hover效果实现过渡和鼠标滑过效果。此外，页面中使用表格和表单来补充功能，方便新手学习。某些源码页面未使用JS，需者可自行添加。

涵盖个人、电影、美食、动漫、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、摄影、文化、家乡、鲜花、礼品、汽车等多个网页设计主题，能够满足大学生在网页大作业中的需求！

页面结构： 分为页头、菜单导航栏（最好支持下拉）、主要内容区域和页脚四大部分。
页面链接： 所有页面应互相超链接，支持三级页面，整体结构为5-10个页面。
样式统一： 页面样式需统一且布局正常，使用Div+CSS技术确保无错乱。
美观的菜单： 菜单设计应美观且醒目，二级菜单可正常弹出和跳转。
JS特效： 需要有如定时和手动切换的图片轮播等JS特效。
多媒体元素： 页面中应包含多媒体元素，如GIF、视频和音乐，并运用表单技术。
清爽美观： 页面设计应清新、优雅，避免雷同。

整体上，不仅要能展示用户需求的内容，还需确保良好的布局、优雅的界面、恰当的配色以及多样的表现形式。

目录导航

📒 web网页设计期末课程大作业:电影设计-爱影评在线电影(10页面)
一、📖 作品介绍
二、🌐 效果演示
- 请添加图片描述 ![请添加图片描述](https://i-blog.csdnimg.cn/direct/8880cefc92964f3e955bb60075542d65.jpeg)
三、🪓 代码实现
- 🧱 HTML结构代码
- 🏠 CSS样式代码
四、📁 目录结构
五、💡 博主建议
六、🎁 更多作品

一、📖 作品介绍

网页作品简介： 该设计达到了HTML网页设计A++水平，部分支持手机和PC的响应式布局。
网页作品编辑： 此作品为学生网页设计类型，代码采用简单的学生水平的HTML+CSS布局制作。下载后可使用任何HTML编辑软件（如：DW、HBuilderX、Vscode、Sublime Text、Webstorm、Notepad++等）进行编辑和修改。
网页作品布局： 整体采用响应式布局，包含LOGO、导航、主体内容等布局。子页面有多种布局方式，兴趣爱好内容使用图片列表展示，成绩页面插入了表格，联系我们页面则使用了左对齐的图片布局。
网页作品技术： 使用DIV+CSS制作网页，包含背景图、音乐、视频、Flash、滚动文字、CSS特效、鼠标悬停效果、导航变色、表单提交及评论留言功能，并通过JavaScript进行表单验证（确保提交时表单不能为空）。

提示：以下是本篇文章正文内容，下面案例可供参考

二、🌐 效果演示

三、🪓 代码实现

🧱 HTML结构代码

代码如下（示例）：

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>电视剧排行榜</title> 
  <meta name="keywords" content="" /> 
  <meta name="description" content="" /> 
  <link href="css/style.css" type="text/css" rel="stylesheet" /> 
  <meta http-equiv="x-ua-compatible" content="ie=7" /> 
  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
  <script type="text/javascript" src="js/common.js"></script> 
 </head> 
 <body> 
  <div class="top"> 
   <div class="w"> 
    <span>欢迎来到爱影评www.aiyingping.com最专业的剧情介绍网站</span> 
   </div> 
  </div> 
  <div id="header"> 
   <div class="w"> 
    <div class="logo"> 
     <a href="index.html" title="首页-爱影评,电视剧情网">爱影评</a> 
    </div> 
    <div id="search"> 
     <div class="ser"> 
      <form action="/e/search/index.php" method="post" name="searchform" id="searchform"> 
       <input type="text" id="kw" name="keyboard" class="search-input" value="请在此处输入影片片名或演员名称。" onfocus="if(this.value=='请在此处输入影片片名或演员名称。'){this.value='';}" onblur="if(this.value==''){this.value='请在此处输入影片片名或演员名称。';};" /> 
       <input type="submit" name="submit" class="sub" value="" /> 
       <input type="hidden" name="show" value="title,player" /> 
       <input type="hidden" name="tempid" value="1" /> 
       <input type="hidden" name="tbname" value="movie" /> 
      </form> 
     </div> 
     <p>热门搜索：<a href="/e/search/result/?searchid=47" target="_blank">清潭洞丑闻</a>&nbsp;<a href="/e/search/result/?searchid=27" target="_blank">神雕侠侣</a>&nbsp;<a href="/e/search/result/?searchid=78" target="_blank">狎鸥亭白夜</a>&nbsp;<a href="/e/search/result/?searchid=19" target="_blank">二炮手</a>&nbsp;<a href="/e/search/result/?searchid=17" target="_blank">匹诺曹</a>&nbsp;<a href="/e/search/result/?searchid=65" target="_blank">何以笙箫默</a><br /></p> 
    </div> 
    <p class="plus"><a href="ranking_list.html" class="ph">排行榜</a><a href="/new.html" class="dq">最近更新</a><a href="javascript:void(0)" rel="nofollow" id="addFavorite" class="sc">收藏我们</a></p> 
   </div> 
  </div> 
  <div class="menu"> 
   <div class="w"> 
    <a href="index.html" titile="爱影评,电视剧情网">首页</a> 
    <a href="list.html">电视剧剧情</a> 
    <a href="/movie/">电影剧情</a> 
    <a href="list.html">动漫剧情</a> 
    <a href="list.html" rel="nofollow">内地剧情</a> 
    <a href="list.html" rel="nofollow">港台剧情</a> 
    <a href="list.html" rel="nofollow">日韩剧情</a> 
    <a href="list.html" rel="nofollow">欧美剧情</a> 
    <a href="list.html" rel="nofollow">泰印剧情</a> 
    <a href="stars.html">明星库</a> 
    <a href="news.html">影视动态</a> 
   </div> 
  </div> 
  <!--/header--> 
  <div id="main"> 
   <div class="banner"> 
    <script src="js/thea1.js"></script> 
   </div> 
   <div class="toplist"> 
    <div class="pside"> 
     <ul> 
      <div class="title">
        分类检索 
      </div> 
      <li class="curr"><a href="ranking_list.html">电视剧</a></li> 
      <li><a href="/hot-movie.html">电影</a></li> 
      <li><a href="/hot-anime.html">动漫</a></li> 
      <li><a href="/new.html">最近更新300条</a></li> 
     </ul> 
     <div class="sidead"> 
      <script src="js/thea4.js"></script> 
     </div> 
    </div> 
    <div class="hotcon"> 
     <div class="htitle"> 
      <h3>电视剧排行榜</h3> 
     </div> 
     <div class="hotbox hotlist"> 
      <p class="bti"> 
       <s>
         排名 
       </s><em>名称</em><em class="mx">明星</em><i>点击量</i></p> 
      <ul> 
       <li><span>510</span><em>柴崎幸,东山纪之</em><i class="on">1</i><a href="/tv/321.html" target="_blank">某某妻</a></li> 
       <li><span>509</span><em>黄渤,倪大红,袁泉,孙坚,尹铸胜</em><i class="on">2</i><a href="/tv/107.html" target="_blank">锋刃</a></li> 
       <li><span>506</span><em>樊少皇,刘思彤,刘一,贾晓晨</em><i class="on">3</i><a href="/tv/327.html" target="_blank">兄弟们上</a></li> 
       <li><span>457</span><em>张歆艺,袁弘,袁文康,刘冠翔,武强,叶青,</em><i>4</i><a href="/tv/41.html" target="_blank">解忧公主</a></li> 
       <li><span>442</span><em>野村万斋,二宫和也,松岛菜菜子,杏,玉木</em><i>5</i><a href="/tv/298.html" target="_blank">东方快车谋杀案</a></li> 
       <li><span>440</span><em>生田斗真,小栗旬,上野树里</em><i>6</i><a href="/tv/356.html" target="_blank">无间双龙</a></li> 
       <li><span>426</span><em>郑柔美,吴智昊,金东昱</em><i>7</i><a href="/tv/357.html" target="_blank">下女们/侍女们</a></li> 
       <li><span>398</span><em>刘俊相,柳好贞,李准,高雅星</em><i>8</i><a href="/tv/472.html" target="_blank">听到传闻</a></li> 
       <li><span>395</span><em>小宋佳,张嘉译,胡歌,张歆怡,黄志忠,文</em><i>9</i><a href="/tv/49.html" target="_blank">四十九日&middot;祭</a></li> 
       <li><span>377</span><em>弗莱迪&middot;福克斯,卢克&middot;纽伯里</em><i>10</i><a href="/tv/330.html" target="_blank">香蕉第一季</a></li> 
       <li><span>362</span><em>霍建华,贾青,王庆祥,李健,刘一含</em><i>11</i><a href="/tv/105.html" target="_blank">镖门</a></li> 
       <li><span>362</span><em>田中麗奈,若村麻由美</em><i>12</i><a href="/tv/359.html" target="_blank">美人圈套~残花缭乱</a></li> 
       <li><span>345</span><em>范冰冰,张丰毅,李治廷,李晨,张钧甯,张</em><i>13</i><a href="/tv/98.html" target="_blank">武媚娘传奇</a></li> 
       <li><span>339</span><em>李光洁,马苏,李健,傅晶,代旭,何泓姗</em><i>14</i><a href="/tv/59.html" target="_blank">团圆饭</a></li> 
       <li><span>339</span><em>苏永康,廖碧儿,陈柏宇,杨淇,高皓正</em><i>15</i><a href="/tv/310.html" target="_blank">童话恋曲201314</a></li> 
       <li><span>335</span><em>尹孙河,徐道英,尹熙锡,朴谭熙</em><i>16</i><a href="/tv/317.html" target="_blank">恍惚的邻居</a></li> 
       <li><span>334</span><em>西岛秀俊,香川照之</em><i>17</i><a href="/tv/331.html" target="_blank">流星旅行车</a></li> 
       <li><span>332</span><em>白百何,陆毅,江疏影,赵子琪,张子萱,白</em><i>18</i><a href="index.html" target="_blank">长大</a></li> 
       <li><span>328</span><em>范冰冰,乐珈彤,沈晓海,李解</em><i>19</i><a href="detail.html" target="_blank">爱情宝典</a></li> 
       <li><span>323</span><em>杨立新,刘蓓,陈佩斯,李文玲,白玉</em><i>20</i><a href="/tv/329.html" target="_blank">好大一个家</a></li> 
       <li><span>314</span><em>芦芳生,王媛可,倪虹洁,庹宗华,奇道,郭</em><i>21</i><a href="/tv/47.html" target="_blank">第二次人生</a></li> 
       <li><span>314</span><em>刘烨,陈宝国,倪大红,王庆祥,程煜,董勇,</em><i>22</i><a href="/tv/61.html" target="_blank">北平无战事</a></li> 
       <li><span>308</span><em>weir,Aump</em><i>23</i><a href="/tv/297.html" target="_blank">炫</a></li> 
       <li><span>306</span><em>张子健,淳于珊珊,曲栅栅,梁凯,韩含,于</em><i>24</i><a href="/tv/460.html" target="_blank">神探包青天</a></li> 
       <li><span>305</span><em>张一山,杨旸,战菁一,刘威,尹铸胜,郭柏</em><i>25</i><a href="/tv/326.html" target="_blank">烽火战歌之杀寇决</a></li> 
       <li><span>303</span><em>陈赫,王传君,姜妍,张子萱,赵圆瑗,刘萌</em><i>26</i><a href="index.html" target="_blank">医馆笑传</a></li> 
       <li><span>302</span><em>陈晓,陈妍希,张馨予,郑国霖,杨明娜,毛</em><i>27</i><a href="/tv/56.html" target="_blank">新神雕侠侣2014</a></li> 
       <li><span>302</span><em>全智允,白成铉</em><i>28</i><a href="/tv/358.html" target="_blank">做梦的代表</a></li> 
       <li><span>301</span><em>余少群,孙耀琦,惠英红,赵文瑄,张晓晨</em><i>29</i><a href="/tv/406.html" target="_blank">隋唐英雄5之薛刚反唐</a></li> 
       <li><span>300</span><em>井上真央，大泽隆夫</em><i>30</i><a href="/tv/314.html" target="_blank">花燃</a></li> 
       <div class="cr"></div> 
      </ul> 
     </div> 
     <!--/hotbox--> 
    </div> 
    <div class="cr"></div> 
   </div> 
  </div> 
  <!--/footer--> 
  <div id="footer"> 
   <div class="help"> 
    <div class="w"> 
     <ul> 
      <li> <b>电视节目指南</b> <p><a href="javascript:;" rel="nofollow">正在播出</a></p><p><a href="javascript:;" rel="nofollow">热门节目</a></p><p><a href="javascript:;" rel="nofollow">分类预告</a></p><p><a href="javascript:;" rel="nofollow">一周节目指南</a></p> </li> 
      <li> <b>相关推荐</b> <p><a href="javascript:;" rel="nofollow">图片写真</a></p><p><a href="javascript:;" rel="nofollow">影评/短评</a></p><p><a href="javascript:;" rel="nofollow">剧情</a></p><p><a href="javascript:;" rel="nofollow">预告片</a></p> </li> 
      <li> <b>关于我们</b> <p><a href="about.html" rel="nofollow">关于我们</a></p><p><a href="map.html">站点地图</a></p><p><a href="/hz.html" rel="nofollow">站长合作</a></p><p><a href="/contact.html" rel="nofollow">联系我们</a></p> </li> 
      <li> <b>帮助中心</b> <p><a href="javascript:;" rel="nofollow">站长工具</a></p><p><a href="/help.html" rel="nofollow">帮助说明</a></p><p><a href="javascript:;" rel="nofollow">讨论区</a></p> </li> 
      <li class="wx"> <b>关注微信</b> <p class="wxcode"><i></i></p><p>扫描二维码 下载客户端</p> </li> 
      <li class="wb"> <b>关注微博</b> <p><a href="javascript:;" rel="nofollow">新浪微博</a></p><p><a href="javascript:;" rel="nofollow">腾讯微博</a></p> </li> 
     </ul> 
    </div> 
   </div> 
   <!--/link--> 
   <div class="foot"> 
    <p>Copyright &copy; 2014-2015 爱影评 www.aiyingping.com All rights reserved</p> 
    <p>湘ICP备14016065号-2</p> 
    <script type="text/javascript">
    

</script> 
    <script type="text/javascript">
    

</script> 
   </div> 
  </div>  
 </body>
</html>

🏠 CSS样式代码

代码如下（示例）：

/* CSS Document by QQ 415204 */ 
body, div, iframe, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, table, th, td, 
form, input, button, select, textarea {margin: 0;padding: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;}
ol, ul {list-style: none;}
img {border: 0;}
a:link,a:visited {color:#505050;text-decoration:none;}
a:hover {color:#0FA7EA;text-decoration:none;}
body {font-size:12px;color:#505050;font-family:'微软雅黑','Microsoft Yahei', Tahoma,Verdana;background:#f0f0f0;_background-image:url(about:blank);_background-attachment:fixed;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }
h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;}
.cr {clear:both;height:0px;overflow:hidden;}
.fl {float:left;}
.fr {float:right;}
.mt10 {margin-top:10px;}
.mt8 {margin-top:8px;}
.hidden,.ins {display:none}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}

.w,.foot,#main,.location{width:1000px;margin:0 auto;}
.bold {font-weight:bold;}
#header {height:90px;background:#fff}
.ins {display:none}
/* 公供 */
.top {height:34px;line-height:34px;color:#797979;background:#F7F7F7;border-bottom:1px solid #EDEDED}
.top span {float:left;}
.top p {float:right}
.logo {float:left;widtH:220px;height:90px;}
.logo a,.logo a:visited {width:210px;line-height:180px;height:60px;overflow:hidden;display:block;margin-top:15px;background:url(../images/logo.gif) no-repeat}

#search{float:left;widtH:420px;margin-top:16px;padding-left:60px;}
.ser {height:30px;widtH:416px;border:2px solid #E1E1E1}
.ser input {float:left;background:none;widtH:358px;line-height:30px;height:30px;padding-left:10px;border:none;color:#D8D8D8;font-size:14px}
.ser .sub {widtH:48px;height:30px;background:url(../images/i.png) no-repeat 16px -44px;padding:0; cursor:pointer;border:none;font-weight:bold}

四、📁 目录结构

五、💡 博主建议

第一，明确学习目标
在进行学习时，无论是通过阅读、参加课程还是参与线下活动，都要设定清晰的目标。思考你想要解决的问题或希望实现的具体目标，这样能够更有针对性地进行学习。
第二，从实战中学习
单纯的理论学习往往难以记忆和应用，因此实践是关键。初学者可以通过模仿和重写已有的代码来加深理解。实战经验不仅能巩固基础，还能快速提升技能。
第三，建立个人知识体系
知识无穷无尽，面对浩瀚的书籍和信息，我们需要理清思路，避免迷失。每一个知识点都有其特定的背景和边界，通过归纳和整理，可以形成自己的知识体系，帮助更好地理解和应用。
第四，将所学应用于实践
学到的知识必须与实际工作和生活结合起来。每天学习的新知识应当与现实情况联系，通过实践来验证和深化理解。热爱学习是值得赞扬的，但能有效应用知识的人才是真正有价值的。