首页 > 分享 > 104. Web前端网页制作绿色盆栽花店网页设计实例大学生期末作业 html+css+js

104. Web前端网页制作绿色盆栽花店网页设计实例大学生期末作业 html+css+js

花匠小妙招
2024-12-03 18:14

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五、更多推荐

一、前言

绿色盆栽花店网页设计实例，应用html+css+js，响应式网页，可以根据不同的设备屏幕大小自动调整页面布局，手机等移动设备自适应界面，提高用户体验；支持包括IE、Firefox、Chrome、Safari等主流浏览器。本实例适用于企业网页设计、大学生网页课程作业设计的应用，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/media.css"/>
<link rel="stylesheet" type="text/css" href="css/sty.css"/>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<header class="header">
   <div class="top hidden-sm hidden-xs ">
       <div class="container">
           <div class="pull-left">欢迎来到某某绿植官网!</div>
           <div class="pull-right">您有26条新询盘信息！</div>
       </div>
   </div>

<section class="banner">
<img src="images/banner.jpg" alt="" class="img-responsive" />
</section>

<div class="about">
   <div class="container">
       <div class="row">
           <div class="col-md-4 hidden-sm hidden-xs ab_img">
               <img src="images/cf_ck1l.jpg" class="img-responsive"/>
           </div>
           <div class="col-md-8 col-sm-12 col-xs-12 ab_con">
               <h3><span>关于</span>我们</h3>
               <p>提升花艺设计及产品创新能力我们将携手国内、外较优秀的花艺师推出适合本地市场需要的商业花礼设计，并且将该设计的制作过程拍摄成视频，在视频中将揭示设计的理念、制作的过程、知识点的讲解等，供花店、花艺师及花艺爱好者学习和交流。提升花店经营管理及市场营销能力我们将推出中国花店经营管理精品培训系列，与中国较优秀的花店经营者对话，把他们的实战经验传授给更多的xxx花店业者。</p>
               <p>提升花艺设计及产品创新能力我们将携手国内、外较优秀的花艺师推出适合本地市场需要的商业花礼设计，并且将该设计的制作过程拍摄成视频，在视频中将揭示设计的理念、制作的过程、知识点的讲解等，供花店、花艺师及花艺爱好者学习和交流。提升花店经营管理及市场营销能力我们将推出中国花店经营管理精品培训系列，与中国较优秀的花店经营者对话，把他们的实战经验传授给更多的xxx花店业者。</p>
               <a href="about.html">查看更多</a>
           </div>
       </div>
   </div>
</div>

<div class="rmtj text-center">
   <div class="container">
       <div class="row">
           <div class="col-md-12">
               <div class="tit">
                   <h3>热门推荐</h3>
                   <p>Popular recommendation</p>
               </div>
           </div>
           <div class="pc-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-center none-effect">
<a href="products_article.html">
<img src="images/banner001.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="products_article.html">
<img src="images/banner002.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="products_article.html">
<img src="images/banner003.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="products_article.html">
<img src="images/banner004.jpg">
</a>
<div class="layer-mask"></div>
</div>
<div class="swiper-slide">
<a href="products_article.html">
<img src="images/banner005.jpg">
</a>
<div class="layer-mask"></div>
</div>
</div>
<div class="button">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>

</div>
</div>
</div>

......

2.CSS

代码如下（节选示例）：

*{margin: 0; padding: 0;}
body{font-family: "微软雅黑";}
a,a:hover{text-decoration: none !important;}
a{
color: #333;
}
a:hover{ color: #6cbb24 !important; transition: .3s;}

.xwzx_link{

   }
.xwzx_link a{
   display: inline-block;
   padding: 10px 40px;
   border: 1px solid #6cbb24;
   color: #6cbb24;
   border-radius: 30px;
   font-size: 14px;
   line-height: 14px;
   transition: .5s;
margin-top: 20px;
}
.xwzx_link a:hover{
   background: #6cbb24;
   color: #fff !important;
}

.xwzx_link2 a{
   display: inline-block;
   padding: 10px 40px;
   border: 1px solid #fff;
   color: #fff;
   border-radius: 30px;
   font-size: 14px;
   line-height: 14px;
   transition: .5s;
margin-top: 20px;
}
.xwzx_link2 a:hover{
   background: #fff;
   color: #6cbb24;
}
/*头部*/
.top{
   background: #666;
   color: #fff;
   font-size: 12px;
   line-height: 30px;
   /*margin-bottom: 20px;*/
}
.top a{
   color: #fff;
}

.logo_box{
   margin: 20px 0;
}
.nav_box ul li a{
   color: #333;
   font-size: 16px;
padding: 15px 25px 0;
}
.nav_box ul li a:hover,.nav_box ul li .acitve{
   background: none;
   color: #6cbb24;
}
.nav_box ul li.tel a{
   padding-right: 0;
}

/*三横*/
.navbar-toggle{
border: 1px solid #6cbb24;
}

.navbar-toggle .icon-bar{
background: #6cbb24;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;

}

/*关于我们*/
.about{
   padding: 90px 0 80px;
   background: url(../images/ann_s7i6.png) left no-repeat;
   background-attachment: fixed;
}

.ab_img{
   padding-left: 80px;
}
.ab_con{
   padding-left: 50px;
   text-align:left;
}
.ab_con h3{
   color: #555555;
   font-size: 24px;
   font-weight: bold;
   margin: 30px 0;
   text-align:left;
}
.ab_con h3 span{
   color: #6cbb24;
   font-weight: bold;
}
.ab_con p{
   text-indent: 2em;
   font-size: 14px;
   color: #666;
   line-height: 30px;
   text-align:left;
}

.ab_con a{
   display: inline-block;
   padding: 10px 40px;
   border: 1px solid #6cbb24;
   color: #6cbb24;
   border-radius: 30px;
   font-size: 14px;
   line-height: 14px;
   transition: .5s;
margin-top: 20px;
}
.ab_con a:hover{
   background: #6cbb24;
   color: #fff !important;
}

/*热门推荐*/
.rmtj{
   background: url(../images/vas_ecz3.jpg) no-repeat;
   padding: 90px 0 80px;
}
.rmtj .tit{
   color: #fff;
   margin-bottom: 30px;
}

......

3.JS

代码如下（节选示例）：

if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1||b[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.7",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^s]*$)/,""));var g=a("#"===f?[]:f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.7",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?

......