html电影网页设计代码-html电影从你的全世界路过(4页)

最新推荐文章于 2025-05-23 09:55:47 发布

web网页作品设计

最新推荐文章于 2025-05-23 09:55:47 发布

阅读量623

点赞数 25

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

本文链接：https://blog.csdn.net/qq_40486643/article/details/144213211

版权

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

36 篇文章

订阅专栏

📒 web网页设计期末课程大作业: html电影从你的全世界路过(4页)

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

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

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

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

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

一、📖 作品介绍

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

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

二、🌐 效果演示

请添加图片描述

三、🪓 代码实现

🧱 HTML结构代码

代码如下（示例）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" />
<title>从你的全世界路过</title>
</head>

<body>
<div class="con">
  <div class="head">
    <div class="logo">
      <h1>从你的全世界路过电影</h1>
    </div>
    <div class="nav">
      <ul>
       <li><a href="index.htm">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
        <li><a href="page1.htm">角色介绍</a></li>
        <li><a href="page2.htm">幕后花絮</a></li>
        <li><a href="page3.htm">影片评价
</a></li>
       
     
    
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
  <div class="lunbo"><a href="#"><img src="images/d1.jpg"  width="1024"/></a></div>
  <div class="clear"></div>
  <div class="main">
    <h2>角色介绍</h2>
    <ul>
       <li><img src="images/s1.jpg" width="170" height="240" /><p>陈末 | 演员 邓超</p>
         <p>电台DJ，被称为全城最贱，每天和王牌DJ小容针锋相对，直到他相遇了最神秘的幺鸡。陈末不知道幺鸡是有目的而进入他的生活，更不知道他的生活和工作将因为幺鸡而变得大有不同。</p>
         <p>小人物。</p>
       </li>
        <li><img src="images/s2.jpg" width="170" height="240" /><p>幺鸡 | 演员 张天爱</p>
          <p>和陈末搭档的电台实习DJ，在工作与生活中相互依靠，彼此依赖而渐渐互生情愫，同时也改变了二人的人生轨迹。阴差阳错的失误让《从你的全世界路过》这个曾经的王牌节目再次焕发生机，而她来到这里实习的原因却一直深埋心底。</p>
        </li>
         <li><img src="images/s3.jpg" width="170" height="240" /><p>茅十八 | 演员 杨洋</p>
           <p>陈末的表弟，喜欢倒腾电器的技术宅男，在陈末口中是一个没有梦想的发明家。茅十八在发明的路途上老是闯祸，继而吸引了人民警察荔枝的注意，两人在不断追赶过程中谈起了恋爱。他把一辈子的智商都用在了谈恋爱上，想要给女友荔枝最好的生活，之后在稻城亚丁求婚成功。</p>
         </li>
          <li><img src="images/s4.jpg" width="170" height="240" /><p>荔枝 | 演员 白百何</p>
            <p>女警，充满正义感的她爽朗真诚。喜欢发明却总是闯祸的茅十八引起了她的注意，荔枝常常满大街追着茅十八跑。荔枝喜欢上了茅十八，继而大胆追求示爱。这对欢喜冤家为彼此生命增添了许多欢乐。</p>
          </li>
           <li><img src="images/s5.jpg" width="170" height="240" /><p>猪头 | 演员 岳云鹏</p>
             <p>陈末的发小、大学同学，无业游民一个，被陈末称为&quot;全城最傻&quot;。为了赚钱买房，家教、黑车、饭馆他都干过，什么能赚钱就干什么。他拼命攒钱，就是希望能给女友燕子最好的生活，在他心里没有什么比燕子更重要。</p>
           </li>
          
    </ul>
    
  </div>
  <div class="clear"></div>
  <div class="foot">
    <p>版权所有：釜山行电影</p>
    <p>All Rights Reserved</p>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

🏠 CSS样式代码

代码如下（示例）：

/*----------------------common-------------------------*/
*{ margin:0; padding:0; font-family:Microsoft YaHei;}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}
.center{ text-align:center;}
.em{ text-indent:2em;}
.p5{ padding:5px;}
.pl50{ padding-left:50px;}
body{
	background-attachment: fixed;
	background-color: #000;
	background-image: url(../images/bj.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
/*----------------foot-----------------*/
.foot{ width:960px; height:50px; margin:10px auto; padding-top:10px; border-top:3px solid #600; text-align:center; font-size:14px; line-height:24px; color:#666;}
.foot{
	font-size: 14px;
	line-height: 24px;
	color: #CCC;
}
.con .main p img {
	float: right;
}
.con .main ul li {
	float: left;
	list-style-type: none;
	padding-left: 10px;
}
.con .main span {
	width: 300px;
	height: 200px;
	display: block;
	float: left;
	padding-left: 10px;
	padding-right: 5px;
	line-height: 30px;
}
.con .main ul li {
	float: left;
	height: auto;
	width: 170px;
	padding-left: 12px;
}
.con .main ul li p {
	font-size: 12px;
	color: #000;
}

四、📁 目录结构

├── css
│ ├── dem.css
│ ├── me.css
│ └── style.css
├── images
│ ├── 1.jpg
│ ├── Thumbs.db
│ ├── bj.jpg
│ ├── d1.jpg
│ ├── d3.jpg
│ ├── q1.jpg
│ ├── q10.jpg
│ ├── q11.jpg
│ ├── q12.jpg
│ ├── q2.jpg
│ ├── q3.jpg
│ ├── q4.jpg
│ ├── q5.jpg
│ ├── q6.jpg
│ ├── q7.jpg
│ ├── q8.jpg
│ ├── q9.jpg
│ ├── s1.jpg
│ ├── s2.jpg
│ ├── s3.jpg
│ ├── s4.jpg
│ └── s5.jpg
├── index.htm
├── music
│ ├── Thumbs.db
│ └── music.mp3
├── page1.htm
├── page2.htm
└── page3.htm

五、💡 博主建议

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