首页 > 分享 > 153.大学生HTML期末大作业 —【环保科技公司响应式网页】 Web前端网页制作 html+css+js

153.大学生HTML期末大作业 —【环保科技公司响应式网页】 Web前端网页制作 html+css+js

花匠小妙招
2024-11-11 12:29

一、更多推荐

二、网页简介

三、网页文件

四、网页效果

五、代码展

1.html

2.CSS

3.JS

六、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

一、更多推荐

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

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

三、网页文件

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

四、网页效果

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

五、代码展

1.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1;" id="viewport" name="viewport" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Page-Enter" Content="revealTrans(duration=5, transition=2)">
<meta http-equiv="Page-Exit" Content="revealTrans(duration=5, transition=2)">
<title>xx硅藻泥官网</title>
<meta name="keywords" content="象邦硅藻泥官网 ">
<meta name="description" content="吉林省象邦环保科技有限公司（以下简称"象邦"）是一家集高端硅藻泥壁材研发、生产、设计、营销、服务为一体的综合型企业。象邦生产基地与运营总部位于吉林省，原材矿土取自中国东北长白山山脉，专业生产健康功能型高端硅藻泥系列产品。">

...

2.CSS

代码如下（节选示例）：

input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
.jslink{color: #666}
textarea { -webkit-appearance: none;}
input{border-radius:0;}

body{
   padding-top:80px;
}
.top{
   height:80px;
   width:100%;
   background:#ffffff;
   position:fixed;
   left:0px;
   top:0px;
   z-index:9999;
}
.pc_nav ul li{
   float:left;
   height:80px;
   line-height:80px;
   border-left:1px solid #DDDDDD;
}
.pc_nav ul li a{
   display:block;
   float:left;
   font-family:"微软雅黑";
   font-size:16px;
   color:#323232;
   font-weight:bold;
   padding-left:30px;
   padding-right:30px;
}
.pc_nav ul li a:hover{
   color:#89b226;
}
.pc_nav ul li.on a{
   color:#89b226;
}
.ph_logo img{
   height:50px;
}
.mobile-inner-header{
   display:none;
}
.banner{
   height:750px;
}
.c1{
   background:#ECEDE9;
   padding-top:90px;
   padding-bottom:90px;
}
.c1_title{
   width:325px;
   height:78px;
   border:5px solid #CACEBF;
   margin:0 auto;
}
.c1_title_t1{
   font-family:"微软雅黑";
   font-size:46px;
   color:#323232;
   font-weight:bold;
   width:100%;
   text-align:center;
   line-height:70px;
}
.c1_title_t2{
   font-family:"微软雅黑";
   font-size:20px;
   color:#cacebf;
   font-weight:bold;
   text-align:center;
   width:200px;
   background:#ECEDE9;
   margin:0 auto;
   text-transform:uppercase;
}
.boxmain{
   max-width:1200px;
   margin:0 auto;
   padding:5px;

}
.tiao{
   width:100%;
   text-align: left;
   margin-top: 10px;
   color: #666;

}
.tiao1{
   margin-top: 50px;
}
.tiao a{
   color: #89b226;
   font-weight: bold;

   }
.c1_list{
   padding-top:50px;
}
.c1_list ul li{
   float:left;
   margin-left:1%;
   margin-right:1%;
   width:23%;
   margin-bottom:30px;
}
.c1_titleText{
   width:100%;
   height:80px;
   line-height:80px;
   text-align:center;
   font-family:"微软雅黑";
   font-size:18px;
   color:#323232;
   background:#ffffff;
}
.c1_img{
   overflow:hidden;
}
.c1_img img{
   width:100%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.c1_img img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.c2{
   background:url(../images/bg1.jpg) center center no-repeat;
   padding-top:90px;
   padding-bottom:90px;
}
.c2_img{
   display:table;
   width:190px;
   height:190px;
   border:5px solid #ffffff;
   border-radius:100%;
   margin:0 auto;
   -webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
}

...

3.JS

代码如下（节选示例）：

$(document).ready(function() {
//$(".c2_list ul li:nth-child(4n)").css("margin-right","0px")

   $(".mobile-inner-header-icon").click(function(){
       $(this).toggleClass("mobile-inner-header-icon-click mobile-inner-header-icon-out");
       $(".mobile-inner-nav").slideToggle(250);
   });
   $(".mobile-inner-nav a").each(function( index ) {
       $( this ).css({'animation-delay': (index/10)+'s'});
   });

   $(".c1_hover1").hover(function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img5_hover.jpg");
   },function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img5.jpg");
   })
   $(".c1_hover2").hover(function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img6_hover.jpg");
   },function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img6.jpg");
   })
   $(".c1_hover3").hover(function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img7_hover.jpg");
   },function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img7.jpg");
   })
   $(".c1_hover4").hover(function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img8_hover.jpg");
   },function(){
       $(this).children("a").children(".c1_img").children("img").attr("src","Public/home/images/img8.jpg");
   })
   $(".c2Img1").hover(function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon1_hover.png");
   },function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon1.png");
   })
   $(".c2Img2").hover(function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon2_hover.png");
   },function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon2.png");
   })
   $(".c2Img3").hover(function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon3_hover.png");
   },function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon3.png");
   })
   $(".c2Img4").hover(function(){
       $(this).children(".c2_img").children().children("img").attr("src","Public/home/images/icon4_hover.png");
   }

...

六、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

关注作者，点赞收藏博文，获取完整源码，Thanks!

冬至后，赶快扦插这几种花，天越冷，生根越快，每1种都出乎意料

买无花果，挑大的还是小的？果农：选“裂开的”准没错，个个香甜

热点分享

家庭养花知识大全(家庭养花知识大全与技巧)

养花常识养花技巧 1.浇花 ①残茶浇花残茶用来浇花,既能保持土...

养花知识大全,养花技巧大全

养花知识绿萝是一种很常见的盆栽植物，因为四季翠绿、养护简单...

推荐分享

家庭养花风水知识家庭养花“五行说”

许多人喜欢在家庭里面养花，但不是很了解家庭养花风水知识。居家...

家庭养花知识大全家庭养花有什么好处

家庭养花知识大全家庭养花有什么好处爱花之人总是喜欢在家里...

热门点击排行

君子兰什么品种最名贵十大名贵君子兰排名

世界上最名贵的10种兰花图片，莲瓣兰价值高达1500万

分享分类导航

花卉

每日分享

花卉图片

养花生活

153.大学生HTML期末大作业 —【 环保科技公司响应式网页】 Web前端网页制作 html+css+js

一、更多推荐

二、网页简介

三、网页文件

四、网页效果

五、代码展

1.html

2.CSS

3.JS

六、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

冬至后，赶快扦插这几种花，天越冷，生根越快，每1种都出乎意料

买无花果，挑大的还是小的？果农：选“裂开的”准没错，个个香甜

家庭养花知识大全(家庭养花知识大全与技巧)

养花知识大全,养花技巧大全

家庭养花风水知识 家庭养花“五行说”

家庭养花知识大全 家庭养花有什么好处

153.大学生HTML期末大作业 —【环保科技公司响应式网页】 Web前端网页制作 html+css+js

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处