517.神偷奶爸2动漫主题网页大学生期末大作业 Web前端网页制作 html+css

仙女网页制作

于 2024-10-03 13:34:52 发布

阅读量980

点赞数 36

分类专栏： Web网页设计实例动漫文章标签：前端 html jquery css javascript html5 css3

本文链接：https://blog.csdn.net/A240307/article/details/142691295

版权

Web网页设计实例同时被 2 个专栏收录

512 篇文章 26 订阅

订阅专栏

动漫

32 篇文章 0 订阅

订阅专栏

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css，div+css布局，代码简单，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含10个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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=gb2312" />
<title>神偷奶爸</title>
<link href="css/css.css" type=text/css rel=stylesheet>
</head>
<body style="background:url(images/bj1.jpg) top center no-repeat;">
<div class="main">
<div class="index_con">
<h2>神偷奶爸2</h2>
<p>《神偷奶爸2》是一部2013年上映的3D电脑动画电影。该影片由照明娱乐公司制作并由环球影片公司发行，是2010年电影《卑鄙的我》的续集。电影由皮艾尔-柯芬与克里斯-雷纳德导演，辛柯-保罗与肯-多利欧编剧。影片在上映后受到了观众的欢迎，并且连续两周成为美国票房榜首位。</p>
<p></p>
<p></p>
<p></p>
</div>
</div>
<div class="clear"></div>

<div class="nav">
<ul>
<li><a href="index.html">首页</a> </li>
<li><a href="about.html">关于电影</a> </li>
<li><a href="jieshao.html">角色介绍 </a> </li>
<li><a href="shangying.html">上映时间 </a></li>
<li><a href="ziliao.html">资料介绍 </a></li>
<li><a href="huojiang.html">获奖情况 </a></li>
<li><a href="pingjia.html">影片评价 </a></li>
<li><a href="yuanchuang.html">原创动画 </a></li>
</ul>
</div>

<div class="clear"></div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

* { margin:0; padding:0; font-family:Verdana, Geneva, sans-serif;}
IMG { border:none;}
ul,li{ list-style:none; list-style-type:none;}
A { COLOR: #257ec0; TEXT-DECORATION: none}
A:hover { COLOR: #ff7202; TEXT-DECORATION: underline}
.center{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}

.main{ width:100%; height:auto; min-height:700px; margin:30px auto; font-size:16px; color:#eee; line-height:26px;}

.index_con{width:500px; height:auto; padding:30px; margin:auto; position:absolute; margin:10%; background-color:rgba(0,0,0,0.5);}
.index_con h2{ font-size:34px; line-height:46px;}
.index_con p{ font-size:14px; line-height:26px; text-indent:2em;}

.jieshao_con{width:900px; height:auto; padding:30px; margin:auto; position:absolute; margin:6%; background-color:rgba(0,0,0,0.5);}
.jieshao_con h2{ font-size:22px; line-height:32px;}
.jieshao_con p{ font-size:14px; line-height:24px; text-indent:2em;}

.jieshao_main{width:900px; height:400px; overflow-y:scroll; }
.jieshao_div{width:760px; height:auto; margin:auto;}
.jieshao_div_t{width:760px; height:40px; font-size:18px; line-height:38px; margin:auto;}
.jieshao_div_l{ width:250px; height:auto; float:left; }
.jieshao_div_l img{ width:250px;}
.jieshao_div_r{ width:500px; height:auto; float:left;padding-left:10px; font-size:14px;color:#eee; line-height:26px;}
.jieshao_div_r p{font-size:14px;color:#eee; line-height:26px;}

.jieshao_list{width:900px; height:auto; margin:auto;}
.jieshao_list ul{}
.jieshao_list li{ float:left; margin:10px 20px;}
.jieshao_list img{ width:240px; height:140px;}

.jieshao_xia{width:760px; height:50px; margin:auto; text-align:left; color:#fff; line-height:50px; font-size:18px;}
.jieshao_xia a{color:#fff; line-height:50px; font-size:26px;}

...