目录
欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js： 导航菜单、图片轮翻、三级页面、下拉菜单、Banner、留言表单等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含11个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
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=utf-8" />
<title>新知三联书店有限公司</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="top">
<div class="logo">
<img src="img/logo.png" />
</div>
<div class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="index.html">首页</a></li>
<li class="nav_menu-item"><a href="#">三联简介</a>
<ul class="nav_submenu">
<li class="nav_submenu-item"> <a href="jianjie.html">三联简介</a></li>
<li class="nav_submenu-item"> <a href="chuangshiren.html">书店创始人</a></li>
<li class="nav_submenu-item"> <a href="lishi.html">历史足迹</a></li>
<li class="nav_submenu-item"> <a href="rongyu.html">三联荣誉</a></li>
</ul> </li>
<li class="nav_menu-item"><a href="tushu.html">三联图书</a></li>
<li class="nav_menu-item"><a href="xinwen.html">三联新闻</a></li>
<li class="nav_menu-item"><a href="mendian.html">三联门店</a></li>
<li class="nav_menu-item"><a href="lianxi.html">联系我们</a></li>
</ul>
</div>
</div>
<div class="main">
<div class="banner">
<img src="img/banner.jpg" />
</div>
<!--box1开始--->
<div class="bx01">
<div class="bx01-left">
<h2>竭诚为读者服务</h2>
<h1><a href="#">公告动态</a></h1>
<ul>
<li><a href="#"><p>创刊93年，复刊24年，这本杂志何以"精品"？</p></a></li>
<li><a href="#"><p>三联书店获"2020年度北京市版权保护示范单位"称号</p></a></li>
<li><a href="#"><p>聚焦"一带一路"文明交流，助力中国学术世界发声</p></a></li>
<li><a href="#"><p>"后疫情时代"，互助式自助如何破局？</p></a></li>
</ul>
</div>
<div class="bx01-right">
<img src="img/img1.jpg" />
</div>
</div>
<div class="bx02">
<div class="bx02-left">
<div class="box" id="box">
<div class="inner">
<!--轮播图-->
<ul>
<li><a href="#"><img src="img/lunbo1.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/lunbo4.jpg" alt="" /></a></li>
</ul>
<ol class="bar">
</ol>
<!--左右焦点-->
<div id="arr">
<span id="left"> < </span>
<span id="right"> > </span>
</div>
</div>
</div>
</div>
<div class="bx02-right">
<p>2019年8月21日至25日，在第26届北京国际图书博览会上，《三联生活周刊》入选"庆祝中华人民共和国成立70周年精品期刊展"，作为优秀期刊之一在图书博览会上展出。本次"精品期刊展"共设四大主题。分别是"新中国获奖期刊""期刊主题宣传好文章""致敬创刊70周年""中国期刊记忆"，共计展出1099种期刊。而每个主题展区，都会发现一本《三联生活周刊》。可以说，在我国期刊业70年的历程中，《三联生活周刊》始终是参与者之一。</p>
</div>
</div>
<div class="bx03">
</div>
<div class="chuanc">
<div class="left">
<div class="tit">
<span><img src="img/ico01.png" /></span>
<h2>书店荣誉</h2>
<span><img src="img/ico02.png" /></span>
</div>
<div class="wensd">
<p>生活・读书・新知三联书店是一家具有悠久历史和光荣传统的出版机构。建店八十余年来，始终秉承"竭诚为读者服务"的宗旨，恪守"人文精神，思想智慧"的理念，坚持"一流、新锐"的标准，以出版人文科学和社会科学图书为主，出版物涉及哲学、历史、文学、艺术、经济、政治、法律和社会生活等领域，在知识界和广大读者中享有盛誉，被誉为"中国知识分子的精神家园"。</p>
</div>
</div>
<div class="right">
<img src="img/cc01.jpg" />
<img src="img/cc02.jpg" />
<img src="img/cc03.jpg" />
<img src="img/cc04.jpg" />
</div>
</div>
<div class="klink">
快速链接
</div>
<div class="link">
...
2.CSS
代码如下（节选示例）：
body {
margin: 0 auto;
font-size: 12px;
font-family: "微软雅黑";
line-height: 22px;
background: #eef0f3;
}
div,p,input,ul,li,h1,h2,h3 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
margin: 0;
padding: 0;
}
.top {
width: 1400px;
height: 137px;
background: #2C3F61;
margin: 0 auto;
}
.logo {
width: 450px;
margin-right: 50px;
float: left;
height: 90px;
margin-left: 30px;
margin-top: 26px;
}
.nav {
width: 860px;
height: 50px;
color: #70142a;
float: left;
margin-top: 50px;
}
.nav a {
display: block;
padding: 0 16px;
line-height: inherit;
cursor: pointer;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
.nav a:hover {
color: #FFF;
}
.nav_menu {
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
}
.nav_menu-item {
display: inline-block;
position: relative;
width: 140px;
text-align: center;
}
.nav_menu-item:hover {
background-color: #1a2a47;
}
.nav_menu-item:hover .nav_submenu {
display: block;
}
.nav_submenu {
font-weight: 300;
text-transform: none;
display: none;
position: absolute;
width: 140px;
background-color: #1a2a47;
text-align: left;
}
.nav_submenu-item:hover {
background: #1a3f81;
}
.banner {
height: 460px;
width: 1400px;
}
.main {
width: 1400px;
height: auto;
overflow: hidden;
margin: 0 auto;
background: #FFF;
}
...
3.JS
代码如下（节选示例）：
function my$(id) {
return document.getElementById(id);
}
//获取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根据li个数，创建小按钮
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//为按钮注册mouseover事件
liObj.οnmοuseοver=function () {
//先清除所有按钮的样式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,2000);
//左右焦点实现点击切换图片功能
box.οnmοuseοver=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.οnmοuseοut=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,2000);
};
right.οnclick=onmouseclickHandle;
function onm ouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.οnclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
标签：Web,网页,555,pic,olObj,nav,var,children From： https://blog.csdn.net/A240307/article/details/143223004