504. 兰花印布公司网页大学生期末大作业 Web前端网页制作 html+css+js

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

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

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

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

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

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

一、网页概述

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

二、网页文件

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

三、网页效果

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

四、代码展示

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" />

$(function(){

   /* $("ul li.navli").hover(function(){
       $(this).children("ul").slideDown('500');
}).hover(function(){

$(this).children("ul").slideUp('1000');

});*/
$("ul li.navli").bind('mouseover',function() // 顶级菜单项的鼠标移入操作
{
$(this).children('ul').slideDown('fast');
}).bind('mouseleave',function() // 顶级菜单项的鼠标移出操作
{
$(this).children('ul').slideUp('fast');
});
$("#focus").hover(function(){$("#focus-prev,#focus-next").show();},function(){$("#focus-prev,#focus-next").hide();});
           $("#focus").slide({
               mainCell:"#focus-bar-box ul",
               targetCell:"#focus-title a",
               titCell:"#focus-num a",
               prevCell:"#focus-prev",
               nextCell:"#focus-next",
               effect:"left",
               easing:"easeInOutCirc",
               autoPlay:true,
               delayTime:200
           });
           $(".menu li").hover(function() {
$(this).children(".hi").animate({opacity: "show", top: "-75"}, "slow");
}, function() {
$(this).children(".hi").animate({opacity: "hide", top: "-85"}, "fast");
});

   });

</script>
<style type="text/css">
table
{
border-collapse:collapse;
}

</style>
</head>

<body>
<div class="con">
<div class="head">
<div class="logo">
<h1>蓝印花布
</h1></div>
<div class="nav" id="nav">
<ul >
<li><a href="#">首    页</a></li>
<li class="navli"> <a href="page2.htm" >历史演变</a>



</li>
<li><a href="page3.htm">工艺操作</a>
</li><li><a href="page4.htm">成品展示</a></li>
<li><a href="page5.htm">南通博物馆</a></li>


</ul>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div id="yc-mod-slider">
<div class="wrapper" >
<div id="slideshow" class="box_skitter fn-clear">
<ul>
<li> <img class="cubeRandom" src="images/d1.jpg" width="1024"/></li>
<li> <img class="cubeRandom" src="images/d2.jpg"width="1024" /></li>
<li> <img class="cubeRandom" src="images/d3.jpg" width="1024"/></li>
</ul>
</div>
<script type="text/javascript" src="js/slideshow.js"></script>
</div>

<div class="clear"></div>
<div class="main">
<h2><a href="page3.htm">蓝印花布</a></h2>
<table width="100%" border="1" >
<tr>
<td width="239" height="46" align="center">登录</td>
<td width="171" rowspan="3" align="center" valign="middle"><ol>
<li>1 <a href="#">工艺操作</a></li>
<li>2 <a href="#">工艺分类</a></li>
<li>3 <a href="#">历史演变</a></li>
<li></li>
</ol></td>
<td width="228" rowspan="5" valign="top"><p>蓝印花布</p>
<p>蓝印花布是一种工艺品，又称靛蓝花布，俗称药斑布、浇花布等。是中国传统的工艺印染品，镂空版白浆防染印花，距今已有一千三百年历史。
最初以蓝草为染料印染而成。蓝印花布用石灰、豆粉合成灰浆烤蓝，采用全棉、全手工纺织、刻版、刮浆等多道印染工艺制成。</p>
<p>广义的蓝印花布：包括扎染、蜡染、夹染和灰染。传统的扎染、蜡染、夹染和灰染大多以蓝靛为染料，虽然防染的方法不同，但成品都是蓝白相间的花布，所以可以统称为蓝印花布。其共同点是材料为布（或手织布），染料为植物蓝靛，制作过程为手工操作。<br />
狭义的蓝印花布：人们长期以来习惯于把以植物蓝草为染料，用黄豆粉和石灰粉为染浆，刻纸为版，滤浆漏印的灰染蓝白花布称为蓝印花布。</p></td>
<td width="294" rowspan="3"> 　　　　　　成品展示</td>
</tr>
<tr>
<td height="46" align="center">用户名：<input /></td>
</tr>
<tr>
<td height="46" align="center">密　码：<input /></td>
</tr>
<tr>
<td colspan="2" height="46" align="center"><input width="80" type="button" value="登录"/><input width="80" type="button" value="重置"/></td>
</tr>
<tr>
<td height="260px" colspan="2" align="center" valign="middle"><img src="images/2.jpeg" alt="" width="393" height="275" /></td>
<td valign="top"><img src="images/06.jpg" width="289" height="394" /></td>
</tr>

</table>
<h3><br />
</h3>
<p></p>

</div>
<div class="clear"></div>
<div class="foot">
<p>　　　　　　　　　　　　　　　　　　　　　xxxx
</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

#nav {
   height: 40px;
   width: 960px;
   margin-right: auto;
   margin-left: auto;
   border: 0px solid #B7DBF4;
   clear: both;
   padding-top: 5px;

}
#nav ul li a {
   color: #FFF;
}

ul{
   list-style:none;
   margin: 0px;
   padding: 0px;


}

#nav ul li ul{
display:none;
z-index: 999;
position: absolute;
}

p {
   font-family: Tahoma, "Trebuchet MS", Verdana;
   font-size: 14px;
   color: #333;
   text-align: justify; line-height:22px;
}

h1 {
   font-family: Tahoma, "Trebuchet MS", Verdana;
   font-size: 25px;
   color: #333;
   font-weight: normal;
   margin: 0 0 15px 0;
}

h2 {
   font-family: "Times New Roman", Times, serif;
   font-size: 14px;
   color: #111;
   margin: 0 0 10px 0;
}

h3 {
   font-family: Tahoma;
   font-size: 13px;
   color: #111;
   font-weight: normal;
   margin: 0 0 3px 0;
}

#container {
width: 960px; padding:20px;
margin: auto; background-color:rgba(255,255,255,0.8);
}

/* menu */

#menu {
   float: left;
   width: 960px;
   height:50px;
   background: url(../images/menu_bg.jpg);
   padding:10px;
   margin: 0 0 25px 0;
}

#menu ul {
   float: left;
   margin: 0 0 0 30px;
   padding: 0 0 0 0;
   width: 960px;
   list-style: none;
}

#menu ul li {
display: inline;
}

#menu ul li a {
   float: left;
   padding:15px;
   height: 50px;
   text-align: center;
   text-align: center;
   text-decoration: none;
   color: #ddd;
   font-family: "Brush Script MT", Arial;
   font-size:20px;
   outline: none;
}

...