316.龙猫动漫主题网页 大学生期末大作业 Web前端网页制作 html5+css+js

目录

一、网页概述

二、网页文件

 三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

六、更多推荐

---

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

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

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

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

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

---

一、网页概述

本实例应用html5+css+js：导航菜单、图片轮翻、注册页面、登录页面等。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

---

二、网页文件

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

---

 三、网页效果

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

---

四、代码展示

1.html

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#333;background-color:#eae6db;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#9ca09f;
}

.container{width:1040px;margin:0 auto;overflow:hidden;background-color:#9ca09f;
}

.header{float:left;width:1040px;height:100px;line-height:100px;font-size:42px;text-align:center;
}
.header a{color:#fff;
}

.nav{float:left;width:1040px;height:40px;line-height:40px;font-size:14px;font-weight:bold;
}
.nav a{margin:0 24px 0 20px;color:#fff;
}

.wrapper{float:left;width:1000px;margin:5px 0 10px 20px;padding-bottom:20px;background-color:#fff;border-radius:5px;overflow:hidden;
}

.focus{float:left;width:960px;height:440px;position:relative;margin:20px 0 15px 20px;
}
.focus_image{float:left;width:960px;height:440px;list-style:none;
}
.focus_image li{float:left;width:960px;height:440px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:960px;height:440px;
}
.focus_button{position:absolute;width:100px;height:45px;bottom:15px;right:390px;padding-top:20px;list-style:none;
}
.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;
}
.focus_button li.on{background-color:#9ca09f;
}

.line{float:left;width:960px;margin:15px 0 0 20px;
}
.line img{float:left;width:306px;height:220px;margin-top:5px;
}
.line h3{float:right;width:630px;height:30px;line-height:30px;font-size:16px;
}
.line p{float:right;width:630px;line-height:25px;
}

.list{float:left;width:306px;margin:20px 0 0 20px;
}
.list h3{float:left;width:306px;height:30px;line-height:30px;font-size:16px;
}
.list img{float:left;width:306px;height:210px;margin-top:8px;
}
.list p{float:left;width:306px;line-height:25px;margin-top:8px;
}
.list span{float:left;width:306px;line-height:25px;margin-top:1px;
}

.info{float:left;width:1000px;padding-bottom:10px;
}
.info h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;font-weight:bold;color:#9ca09f;text-align:center;
}
.info img{float:left;width:304px;height:475px;margin:20px 0 0 20px;
}
.info dl{float:left;width:309px;margin:15px 0 0 20px;
}
.info dl dt{float:left;width:80px;height:40px;line-height:40px;border-bottom:1px dotted #cccccc;
}
.info dl dd{float:left;width:224px;height:40px;line-height:40px;border-bottom:1px dotted #cccccc;
}

.text{float:left;width:1000px;padding-bottom:10px;
}
.text h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;font-weight:bold;color:#9ca09f;text-align:center;
}
.text img{float:left;width:900px;margin:20px 0 10px 50px;
}
.text p{float:left;width:900px;line-height:27px;margin-left:50px;font-size:13px;text-indent:25px;
}

.person{float:left;width:1000px;padding-bottom:10px;
}
.person h2{float:left;width:1000px;height:30px;line-height:30px;margin-top:20px;font-size:16px;color:#9ca09f;text-align:center;
}
.person article{float:left;width:470px;margin:20px 0 0 20px;padding-bottom:20px;background-color:#fcfcfc;border-radius:5px;overflow:hidden;
}
.person article img{float:left;width:120px;height:120px;margin:20px 0 0 20px;
}
.person article h3{float:left;width:290px;height:25px;line-height:25px;margin:15px 0 0 20px;
}
.person article p{float:left;width:290px;line-height:25px;margin-left:20px;
}

...

3.JS

代码如下（节选示例）：

window.οnlοad=function()
{
    function getIdName(id,tagName)
    {
        if(tagName!=0)
        {
            return document.getElementById(id).getElementsByTagName(tagName);
        }
        else
        {
            return document.getElementById(id);
        }
    }
    
    function rotation(json)
    {
        var that;
        var start=0;
        var index=0;
        var timer=null;
        var option={
            li:"li",        //默认用li包裹
            wrapperId:"",    //最外面 id
            imageId:"",        //图片外面id
            buttonId:"",    //按钮外面id
            ms:4000            //多少毫秒切换一张,默认4000毫秒
        }
        
        for(var i in option)
        {
            if(json[i]!=undefined)
            {
                option[i]=json[i];
            }
        }
        
        var wrapper=getIdName(option.wrapperId,0);
        var images=getIdName(option.imageId,option.li);
        var buttons=getIdName(option.buttonId,option.li);
        
        function scrollImage(that)
        {
            if(that>=0)
            {
                index=that;
            }
            else
            {
                if(start==0)
                {
                    index++;
                }
                else
                {
                    index--;
                    start=0;
                }
            }
            
            if(index>=buttons.length) index=0;
            
            if(index<0) index=buttons.length-1;
            
            for(var j=0;j             {
                images[j].className="";
                buttons[j].className="";
            }
            
            images[index].className="current";
            buttons[index].className="on";
        }
        
        images[index].className="current";
        buttons[index].className="on";
        
        for(var i=0;i         {
            buttons[i].index=i;
            
            buttons[i].οnclick=function()
            {
                that=this.index;
                scrollImage(that);
            }
        }
        
        timer=setInterval(scrollImage,option.ms);    
        
        wrapper.οnmοuseοver=function()
        {
            clearInterval(timer);
        }
        
        wrapper.οnmοuseοut=function()
        {
            timer=setInterval(scrollImage,option.ms);
        }
    }
    

...

---

五、总结

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

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

---

六、更多推荐

【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!

您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。