目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js： 导航菜单、图片轮翻、注册、登录等，带网页设计报告。适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>蜡笔小新网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotation.js"></script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<a href="index.html"><img src="images/header.jpg"/></a>
</div>
<div class="nav">
<a href="index.html">小新首页</a>
<a href="view1.html">剧情简介</a>
<a href="view2.html">野原一家</a>
<a href="view3.html">美伢亲戚</a>
<a href="view4.html">广志亲戚</a>
<a href="view5.html">老师同学</a>
<a href="view6.html">创作背景</a>
<a href="view7.html">作品评价</a>
<a href="register.html">影迷注册</a>
<a href="login.html">影迷登录</a>
</div>
<div class="main">
<div id="focus" class="focus">
<ul id="focus_image" class="focus_image" >
<li class="current">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</li>
<li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
</ul>
<ul id="focus_button" class="focus_button">
<li class="on"></li>
<li></li>
</ul>
</div>
<div class="line">
<a href="view1.html"><img src="images/view1.jpg"/></a>
<h3><a href="view1.html">剧情简介</a></h3>
<p><a href="view1.html">《蜡笔小新》讲述了日本5岁小男孩野原新之助，在日常生活中与家人、老师、同学、邻居、路人等之间所发生的故事。野原新之助是一个年仅5岁，正在幼儿园上学的小男孩。他家住在春日部的市郊，家里有爸爸妈妈，还有一条名叫小白的小狗，随后又加入了新的成员妹妹野原葵。小新他内心早熟，喜欢欣赏并向美女搭讪。最初小新与父亲广志和母亲美伢组成一个三人家族。随后又添加了流浪狗小白，日子频繁琐碎却不乏温馨感动。随着故事展开，又加入了新的成员妹妹野原葵。小新是一个有点调皮的小孩，他喜欢别出心裁，富于幻想。小新不仅深受小朋友的喜爱，也非常受到大人欢迎。小新最大的魅力在于他以儿童的纯真眼光略带调侃地看待世界。他的那些大人说来平淡无奇，而从儿童口里说出来令人捧腹大笑的语言，也是人们喜爱小新的重要原因。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.1.jpg"/></a>
<h3><a href="view2.html">野原新之助</a></h3>
<p><a href="view2.html">住在春日部郊区某住宅区一栋二层小平房。B型。喜欢漂亮的姐姐和辣妹。性格是我行我素、口无遮拦、早熟、不太积极、容易吃醋、无厘头、腹黑、难进入状况，且行事风格总是超乎逻辑，与父母住在一起。擅长的技能是“屁股外星人”“大象”。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.2.jpg"/></a>
<h3><a href="view2.html">野原美伢</a></h3>
<p><a href="view2.html">野原美伢，29岁。熊本出身。家庭主妇。广志之妻，小新、小葵之母。21岁与老公野原广志相识，24岁产下儿子野原新之助，29岁产下女儿野原向日葵。好面子，不认输，善良。脾气暴躁（对帅哥很温柔），做得一团糟、犯错有时死不承认，弱点是受不了别人的甜言蜜语。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.3.jpg"/></a>
<h3><a href="view2.html">野原广志</a></h3>
<p><a href="view2.html">脚有异常的气味。每天，公司里忙于工作，在家里新之助和美伢任意驱使，神态稍微疲劳方式。但是是家里的顶梁柱。20岁时于双叶商社就职，担任双叶商事第一营业部营业二课担任系长。而且一直没有升职和加薪，让美伢天天说他太悲惨了。是一个地道的上班族。</a></p>
</div>
<div class="item">
<a href="view2.html"><img src="images/view2.4.jpg"/></a>
<h3><a href="view2.html">野原向日葵</a></h3>
<p><a href="view2.html">昵称小葵，是主人公野原新之助的妹妹。刘海有三个圈儿。她和妈妈一样，喜欢帅哥和亮晶晶的东西，未满一岁，一个顽皮可爱的女孩子。有时候为了想做自己喜欢的事，有时会调皮然后“嫁祸”给小新，虽然导致哥哥被妈妈骂，但小葵其实很喜欢哥哥。</a></p>
</div>
<div class="list">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h3><a href="view6.html">创作背景</a></h3>
<p><a href="view6.html">臼井仪人画的是四格，这东西一是不好拍成动画，二是吸引不了大范围的观众，勉强到1990年，推出了一个新连载，讲述一个色色的小孩子日常生活的故事，连载在双叶社的成人漫画杂志上，第二年被拍成动画，没想到一炮而红，一时间到处都是小新热。</a></p>
</div>
<div class="list">
<a href="view7.html"><img src="images/view7.jpg"/></a>
<h3><a href="view7.html">作品评价</a></h3>
<p><a href="view7.html">《蜡笔小新》原本定位为成人漫画，因为在早期有许多关于性暗示的描述，然而在动画化后，受到影响逐渐转变为适合全家观赏的作品，而排除了性暗示的表现。虽然仍算做成人漫画，但内容变成为男女共赏的家庭喜剧。（凤凰网评）</a></p>
</div>
</div>
<div class="footer">
Copyright @ 2021 xiaoxin.com All Rights Reserved. 蜡笔小新网 版权所有
</div>
</div>
</div>
</body>
</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;
}
a{color:#666;text-decoration:none;cursor:pointer;
}
a:hover{color:#ea5a63;
}
.container{float:left;width:100%;background-color:#fbece7;
}
.wrapper{width:1000px;margin:0 auto;overflow:hidden;
}
.header{float:left;width:1000px;
}
.header img{float:left;width:1000px;
}
.nav{float:left;width:1000px;height:40px;line-height:40px;font-size:14px;font-weight:bold;background-color:#ea5a63;
}
.nav a{margin:0 20px 0 20px;color:#fff;
}
.main{float:left;width:1000px;padding-bottom:20px;background-color:#fff;
}
.focus{float:left;width:960px;height:380px;position:relative;margin:20px 0 15px 20px;
}
.focus_image{float:left;width:960px;height:380px;list-style:none;
}
.focus_image li{float:left;width:960px;height:380px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:960px;height:380px;
}
.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:#ea5a63;
}
.line{float:left;width:960px;margin:15px 0 0 20px;
}
.line img{float:left;width:400px;height:240px;margin-top:5px;
}
.line h3{float:right;width:530px;height:30px;line-height:30px;font-size:16px;
}
.line p{float:right;width:530px;line-height:27px;
}
.item{float:left;width:470px;margin:30px 0 0 20px;
}
.item img{float:left;width:200px;height:195px;
}
.item h3{float:right;width:250px;height:30px;line-height:30px;font-size:16px;
}
.item p{float:right;width:250px;line-height:27px;margin-top:3px;
}
.list{float:left;width:470px;margin:30px 0 10px 20px;
}
.list img{float:left;width:470px;
}
.list h3{float:left;width:470px;height:30px;line-height:30px;margin-top:8px;font-size:16px;
}
.list p{float:left;width:470px;line-height:25px;margin-top:5px;
}
.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:#ea5a63;text-align:center;
}
.text img{float:left;width:900px;margin:20px 0 10px 50px;
}
.text p{float:left;width:900px;line-height:28px;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:#ea5a63;text-align:center;
}
.person article{float:left;width:960px;margin:20px 0 0 20px;
}
.person article img{float:left;width:120px;height:120px;margin:3px 0 0 20px;border:1px solid #f1f1f1;
}
.person article h3{float:left;width:780px;height:30px;line-height:30px;margin-left:20px;
}
.person article p{float:left;width:780px;line-height:27px;margin:5px 0 0 20px;
}
.into{float:left;width:1000px;padding-bottom:30px;
}
.into form{float:left;margin:100px 0;
}
...
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<buttons.length;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.length;i++)
{
buttons[i].index=i;
buttons[i].οnclick=function()
{
that=this.index;
scrollImage(that);
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
标签：568,Web,蜡笔小新,float,height,width,20px,margin,left From： https://blog.csdn.net/A240307/article/details/143374689