498.大学生HTML5期末大作业 —【悬崖上的金鱼姬动漫主题网页(5页)】 Web前端网页制作 html5+css3

目录

一、网页简介

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

---

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

 5000+网页案例完整代码，主题涵盖30+种类型:

---

一、网页简介

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

---

二、网页文件

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

---

三、网页效果

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

---

四、代码展示

1.html

 
 
 

 

   

     
• 首页

     
• 剧情简介

     
• 角色介绍

     
• 精彩片段

     
• 图片鉴赏

   

 

  
 
 

   

     

     

       

崖上的波妞

       

《崖上的波妞》是由吉卜力工作室制作，宫崎骏执导、编剧，奈良柚莉爱、山口智子、长岛一茂等配音的长篇动画电影，于2008年7月19日在日本首映。、2020年12月31日在中国内地上映。该片讲述了深海里一心想变成人类的人鱼波妞与人类男孩宗介之间的故事。

     

   

   

     

       

图片鉴赏

     

     

       
• 

       
• 

       
• 

     

   

   

     

       

影片评价

     

     

《崖上的波妞》如同一道明媚如阳的色彩，使得其它同样角逐威尼斯电影节金狮奖的影片黯然失色。观看该片如同一次愉悦的旅行，从记忆中儿时幼儿园的彩虹图画中穿过，如梦似幻。宫崎骏准确而细腻地捕捉到了片中主角——这个五岁的小男孩宗介的心思。总之，《崖上的波妞》所展现出来的走向自然、天真，以及赋予海洋人格化的独特尝试，都使得该片成为一件难忘的艺术品。

     

       
• 

       
• 

       
• 

     

   

 

 
 

   

宫崎骏：《崖上的波妞》

 

...

2.CSS

代码如下（节选示例）：

/*通用类*/
* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0 auto;
    font-size: 14px;
    color: #333;
    position: relative;
}
img {
    border: none;
}
a {
    cursor: pointer;
    color: #333;
    text-decoration: none;
    outline: none;
}
ul {
    list-style-type: none;
}
em {
    font-style: normal;
}
.lt {
    float: left;
}
.rt {
    float: right;
}
div.clear {
    font: 0px Arial;
    line-height: 0;
    height: 0;
    overflow: hidden;
    clear: both;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/*wrapin 主体容器宽度*/
.wrapin {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
body {
    background: url(../images/bg.jpg) no-repeat fixed;
    background-size: cover;
    padding-top:30px;
    padding-bottom:30px;
}
header {
    height: 50px;
    background: #ffb161;
}
.nav li {
    line-height: 50px;
    float: left;
    width: 20%;
    text-align: center;
    font-size: 16px;
}
.nav li a {
    color: #173537;
}
.banner {
    display: block;
}
.banner img {
    width: 100%;
    display: block;
}
.con {
    padding: 15px;
    background: #fff;
}
.top {
    margin-bottom: 20px;
}
.top .pic {
    float: left;
    width: 240px;
}
.top .pic img {
    border: 1px solid #333;
    padding: 3px;
    width: 100%;
}
.top .text {
    float: right;
    width: 710px;
    line-height: 26px;
}
.top .text h2 {
    font-size: 18px;
}
.title {
    color: #2d1f16;
    line-height: 28px;
    margin: 10px 0;
}
.title h2 {
    font-size: 18px;
}
.tupian li {
    float: left;
    width: 31%;
    margin: 1%;
    height: 170px;
}
.tupian li img {
    border: 1px solid #333;
    width: 100%;
    height: 100%;
}
.pinglun {
    margin-bottom: 20px;
}
.pinglun .text {
    line-height: 26px;
}
footer {
    background: #ffb161;
    text-align: center;
    line-height: 50px;
}
.juese li {
    float: left;
    width: 50%;
    height: 270px;
    margin-bottom: 20px;
}
.juese li .pic {
    width: 40%;
    float: left;
    height: 270px;
}

...

---

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性； 

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

---

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流

---