457.响应式电气焊接机械设备企业网站大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

于 2024-08-26 22:52:44 发布

阅读量715

点赞数 13

分类专栏： Web网页设计实例企业文章标签：前端课程设计 html

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

版权

Web网页设计实例同时被 2 个专栏收录

512 篇文章 26 订阅

订阅专栏

企业

42 篇文章 0 订阅

订阅专栏

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

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

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

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

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

一、网页概述

本实例应用html5+css+js：导航菜单、图片轮翻、三级页面、无缝滚动插件、鼠标滑动特效、出场动画、搜索等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>

<title>电气|专业焊接设备及服务提供商</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />

<div class="search_con">
<form onSubmit="return checktop(this);" action="#" method="get" name="search" id="form3">
<input class="input1" name="title" value="Search" onFocus="if(value=='Search'){value=''}" onBlur="if(value==''){value='Search'}">
<input name="c" type="hidden" value="Index">
<input name="a" type="hidden" value="Search">
<input type="submit" class="bnts" value="">
</form>
<script type="text/javascript">
function checktop(nForm){
if(nForm.title.value=="Search")
{ alert("请填写搜索关键字!");
nForm.title.focus();
return false;
}
}
function checktop_en(nForm){
if(nForm.title.value=="Search")
{ alert("Please fill in the search keywords");
nForm.title.focus();
return false;
}
}
</script>
</div>
</div>
<div class="top-main-content">
<div class="navBar">
<ul class="nav clearfix">
<li id="m1" class="m on"><h3><a href="index.html" title="首页">首页</a></h3></li>
<li id="m2" class="m "><h3><a href="QiYeJianJie.html" title="关于我们">关于我们</a></h3>
<div class="sub" style="display:none">
<dl>
<dd><a href="QiYeJianJie.html">企业简介</a></dd>
                               <dd><a href="FaZhanLiCheng.html">发展历程</a></dd>
                               <dd><a href="QiYeWenHua.html">企业文化</a></dd>
                               <dd><a href="QiYeRongYu.html">企业荣誉</a></dd>
                               <dd><a href="XinWenDongTai.html">新闻动态</a></dd>
                               <dd><a href="ZhaoXianNaShi.html">招贤纳士</a></dd>
                           </dl>
</div>
</li><li id="m3" class="m "><h3><a href="product.html" title="产品与服务">产品与服务</a></h3>
<div class="sub" style="display:none">
<dl>
<dd><a href="product.html">气保焊系列</a></dd>
                               <dd><a href="product.html">氩弧焊系列</a></dd>
                               <dd><a href="product.html">手工焊系列</a></dd>
                               <dd><a href="product.html">切割机系列</a></dd>
                               <dd><a href="product.html">埋弧焊系列</a></dd>
                               <dd><a href="product.html">电子元器件</a></dd>
                           </dl>
</div>
</li><li id="m4" class="m "><h3><a href="news.html" title="资讯中心">资讯中心</a></h3>
<div class="sub" style="display:none">
<dl>
<dd><a href="news.html">焊接资讯</a></dd>
                               <dd><a href="news.html">专业知识</a></dd>
                               <dd><a href="XiaZaiZhongXin.html">下载中心</a></dd>
                           </dl>
</div>
</li><li id="m5" class="m "><h3><a href="news.html" title="技术服务">技术服务</a></h3>
<div class="sub" style="display:none">
<dl>
<dd><a href="news.html">研发中心</a></dd>
                               <dd><a href="ShouHouFuWu.html">售后服务</a></dd>
                               <dd><a href="ZaiXianZiXun.html">在线咨询</a></dd>
                           </dl>
</div>
</li><li id="m6" class="m "><h3><a href="GongChengAnLi.html" title="工程案例">工程案例</a></h3>
<div class="sub" >
<dl></dl>
</div>
</li><li id="m7" class="m "><h3><a href="LianXiWoMen.html" title="联系我们">联系我们</a></h3>
<div class="sub" >
<dl></dl>
</div>
</li>
               </ul>
</div>
<script type="text/javascript"> jQuery(".nav").slide({
type: "menu",
titCell: ".m",
targetCell: ".sub",
effect: "slideDown",
delayTime: 300,
triggerTime: 100,
returnDefault: true
});</script>

   </div>
</div>

<div class="c_l"></div>
</header>

<div class="touch-top">
<div class="touch-top-wrapper clearfix">
<div class="touch-logo" skinobjectzone="HtmlLogo_1514"><a class="" href="index.html"><img src="picture/logo.png" alt="全彩照明"/></a></div>

<div class="touch-navigation">
<div class="touch-toggle">
<ul>
<li class="touch-toggle-item-last"><a href="javascript:void(0);" class="drawer-menu"
data-drawer="search_div"><i
class="touch-icon-search"><span>搜索</span></i></a></li>
<li class="touch-toggle-item-last"><a href="javascript:;" class="drawer-menu"
data-drawer="drawer-section-menu"><i
class="touch-icon-menu"></i><span>导航</span></a></li>
</ul>
</div>
</div>
</div>

<div class="touch-toggle-content touch-top-home">

<div class="drawer-section search_div">
<div class="search_con"><input name="names" type="text" class="input1" value="Search"
onFocus="if(value=='Search'){value=''}"
onBlur="if(value==''){value='Search'}"/><input type="submit" value=""
class="bnt1"/>
</div>
</div>

...

2.CSS

代码如下（节选示例）：

*{margin:0;padding:0;border:0;}
body {background-color: #fff; overflow-x:hidden;color: #333;font-size: 12px; font-family: "微软雅黑","Microsoft YaHei", "Arial", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";}
a { color: #333;
text-decoration: none;
-webkit-transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease;
-moz-transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease;
transition: transform 0.3s ease, text-decoration 0.3s ease, color 0.3s, background 0.3s ease, text-indent 0.3s ease;
}
a:hover {color: #029bde;/*text-decoration: underline;*/}
input,select,img{vertical-align:middle;}
ul,li{ list-style:none;}
em, cite, th { font-style: normal; font-weight: normal; font-style:normal;}
.wrap{clear:both; width:96%;max-width:1200px;margin:0 auto;text-align:left;zoom:1; overflow:hidden;}
.wrap2{clear:both; width:96%;max-width:1400px;margin:0 auto;text-align:left;zoom:1; overflow:hidden;}
.divhidden{ display:none;}
.l{ float:left;}
.r{float:right;}
.c_l{ clear:both; height:0px; font-size:0px; overflow:hidden;}

/*PC导航*/
.header-v1{ width:100%; position:fixed; /*overflow:hidden; */height:114px; padding-top:3px;z-index:10; background:url(../images/top_bg.jpg) #fff left top repeat-x;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);}
.nav-hide .header-v1{ height:99px;}
.nav-hide .blank_h{ height:99px;}
.nav-hide .header-v1 .top-main .logo1 img{ height:99px;}
/*.nav-hide .header-v1 .top-main .top-main-content{ margin-top:18px;}*/
.header-v1 .top-main{ width:100%;/* max-width:1730px;*/ margin:0 auto;/* position:relative;*/}
.header-v1 .top-main .logo1{ float:left; height:100%; margin-left:2%;}
.header-v1 .top-main .logo1 img{ height:100%;}
.header-v1 .languages{ float:right; position:relative; display:block;font-size:18px; color:#16549e;height:114px;line-height:114px; width:34px; text-align:center; font-weight:bold; font-family:"微软雅黑"; text-decoration:none; text-align:center; margin-left:3px; margin-right:2%;}
.nav-hide .header-v1 .languages{ height:99px; line-height:99px;}
.header-v1 .languages:Hover{ background-color:#fff;}
.header-v1 .languages:after{left: 1%;right: 1%;opacity: 1;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}
.header-v1 .languages:after{content: "";display: block;position: absolute;left: 50%;right: 50%;bottom: -1px;height:4px;opacity: 0;background-color: #c71d32;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}
.header-v1 .languages:hover:after{left: 1%;right: 1%;opacity: 1;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}
.header-v1 .top-main .top-main-content{ float:right;/* margin-top:31px;*/}
.navBar{}
.nav{ list-style:none; padding:0; }
.nav .m{ float:left; border-top:0; border-bottom:0; width:120px; position:relative;}
.nav a:hover{ text-decoration:none; color:#3ebff7; }
.nav h3{ float:left; font-weight:normal; font-size:16px; height:114px; overflow:hidden; width:100%; text-align:center; }
.nav h3 a{ display:block; color:#666666; line-height:114px; font-size:16px;}
.nav-hide .nav h3{ height:99px;}
.nav-hide .nav h3 a{ line-height:99px;}
.nav .on{}

...

3.JS

代码如下（节选示例）：

$(function(){
// 出场动画
var anim = $(".anim");
setTimeout(function(){//规避页面加载不完整高度获取异常
$(window).scroll(function() {
roll();
})
$(window).resize(function() {
roll();
})
roll();
},6)
function roll() { //滚动执行动画
var oHeight = $(window).height();
var ScrVal = $(window).scrollTop();
anim.each(function(i) {
if (ScrVal + oHeight > anim.eq(i).offset().top + 100 ){
anim.eq(i).addClass("anim-show");
}
})
}