213. Web前端网页制作 多肉植物主题响应式网页设计实例 大学生期末大作业 html+css+js
目录
前言
一、网页概述
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
3.JS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
六、更多推荐
前言
多肉植物主题响应式网页设计实例，应用html+css+js： Div、导航栏、选项卡、图片轮翻效果、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。
一、网页概述
网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
html>
<head>
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!--忽略页面中的数字识别为电话，忽略email识别-->
<meta name="format-detection" content="telphone=no, email=no" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top top-box">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="picture/logo.png" class="img-responsive" /></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right top-nav">
<li class="active">
<a href="index.html">
首页
<span class="sr-only">(current)</span>
</a>
</li>
<li>
<a href="about.html">关于肉萌萌</a>
</li>
<li>
<a href="news.html">公司新闻</a>
</li>
<li>
<a href="customer.html">客服中心</a>
</li>
<li>
<a href="zhaoshang.html">招商加盟</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!--/ 导航-->
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide banner" data-ride="carousel">
<!-- 圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 图片区域 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="picture/index-bn1.jpg" alt="">
</div>
<div class="item">
<img src="picture/index-bn2.jpg" alt="">
</div>
<div class="item">
<img src="picture/index-bn3.jpg" alt="">
</div>
</div>
<!-- 左右控制箭头 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--新闻中心-->
<div class="news">
<div class="container">
<div class="row">
<div class="common-title">
<h2>新闻中心</h2>
<span>News Center</span>
<p>
<i></i>
<i></i>
</p>
</div>
</div>
<div class="row news-content">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="thumbnail">
<img src="picture/news-1.jpg" alt="" class="img-responsive">
<div class="caption">
<h3>媒体关注</h3>
<p>谈多肉植物种子萌发的必要条件！</p>
</div>
<div class="news-des">
<p>多肉植物种子萌发的必要条件有那些?！为什么有的童鞋种多肉总是不出芽？种子是有生命的，成熟的多肉种子，在没有取得一定外界条件时，是处在休眠状态下的，种子里的胚几乎完全停止生长...</p>
</div>
<div class="news-more">
<time class="date">
<span class="glyphicon glyphicon-time"></span> 2017-04-28
</time>
<a href="news-detail.html" class="more">
<span class="glyphicon glyphicon-list-alt"></span> 查看详情
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="thumbnail">
<img src="picture/news-2.jpg" alt="" class="img-responsive">
<div class="caption">
<h3>行业新闻</h3>
<p>多肉植物怎么养肥？最重要的关键在的童鞋种多肉</p>
</div>
<div class="news-des">
<p>多肉植物怎么养肥？好多新手肉丝都在想，怎样把肉肉养得肥一点？胖一点？好吧，多肉植物论坛站长波斯猫一鼓作气，整理了以下几条，嫌你家肉肉苗条的你，不妨一试哦。</p>
</div>
<div class="news-more">
<time class="date">
<span class="glyphicon glyphicon-time"></span> 2017-04-28
</time>
<a href="news.html" class="more">
<span class="glyphicon glyphicon-list-alt"></span> 查看详情
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="thumbnail">
<img src="picture/news-3.jpg" alt="" class="img-responsive">
<div class="caption">
<h3>公司新闻</h3>
<p>谈多肉植物种子萌发的必要条件！</p>
</div>
<div class="news-des">
<p>多肉植物种子萌发的必要条件有那些?！为什么有的童鞋种多肉总是不出芽？种子是有生命的，成熟的多肉种子，在没有取得一定外界条件时，是处在休眠状态下的，种子里的胚几乎完全停止生长...</p>
</div>
<div class="news-more">
<time class="date">
<span class="glyphicon glyphicon-time"></span> 2017-04-28
</time>
<a href="news.html" class="more">
<span class="glyphicon glyphicon-list-alt"></span> 查看详情
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--公司简介-->
<div class="introduce">
<div class="container">
<div class="row">
<div class="common-title">
<h2>公司简介</h2>
<span>Company Profile</span>
<p>
<i></i>
<i></i>
</p>
</div>
</div>
<div class="row intro-content">
<p>肉萌萌多肉植物有限公司 经销批发的多肉植物、进口多肉植物、多浆植物畅销消费者市场，在消费者当中享有较高的地位，公司与多家零售商和代理商建立了长期稳定的合作关系。肉萌萌多肉植物有限公司经销的多肉植物、进口多肉植物、多浆植物品种齐全、价格合理。肉萌萌多肉植物有限公司实力雄厚，重信用、守合同、保证产品质量，以多品种经营特色和薄利多销的原则，赢得了广大客户的信任。 肉萌萌多肉植物有限公司办公室地址位于著名的“鱼米花果之乡”、素有“海滨邹鲁”美誉的漳州，漳州 福建 龙海市 百花村，公司成立以来发展迅速，业务不断发展壮大我公司主要经营多肉植物; 进口多肉植物; 多浆植物，我们有最好的产品和专业的销售和技术团队，我公司是漳州其他花卉公司行业内知名企业。</p>
<a href="about.html" class="pull-right">+ 查看详情</a>
</div>
</div>
</div>
<!--产品中心-->
<div class="product">
<div class="container">
<div class="row">
<div class="common-title">
<h2>产品中心</h2>
<span>Products</span>
<p>
<i></i>
<i></i>
</p>
</div>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
html,
body {
font-family: "novecento_widenormal", "STHeiti", "Microsoft JhengHei", "Microsoft YaHei", tahoma;
}
body {
padding-top: 50px;
}
/*顶部导航*/
.top-box {
height: 50px;
margin-bottom: 0;
z-index: 16;
}
.top-box .navbar-collapse {
border: none;
}
.top-box .navbar-brand {
height: 50px;
padding: 10px;
}
.top-box .navbar-brand img {
height: 100%;
}
.top-box .navbar-toggle {
margin-top: 8px;
}
.top-box .navbar-nav {
margin-top: 0 !important;
}
.top-nav li a {
line-height: 30px;
font-size: 14px;
text-align: center;
background: #fff !important;
}
.top-nav li.active a,
.top-nav li a:hover {
color: #f00 !important;
}
.common-title {
text-align: center;
}
.common-title h2 {
font-size: 20px;
margin-top: 0;
margin-bottom: 10px;
}
.common-title span {
display: block;
font-size: 18px;
color: #b2b2b2;
margin-bottom: 15px;
}
.common-title p {
text-align: center;
font-size: 0;
margin-bottom: 0;
}
.common-title p i {
display: inline-block;
width: 50px;
height: 1px;
margin: 0 2px;
background: #a4a4a4;
}
.common-title p i:first-child {
background: #009944;
}
/*页脚*/
.footer {
background: #eeeeee;
border-top: 10px solid #598c55;
padding-top: 30px;
padding-bottom: 30px;
}
.footer .thumbnail {
background: #eeeeee;
border: none;
text-align: center;
font-size: 12px;
margin-bottom: 0;
}
.bread {
font-size: 0;
background: #fff;
border-bottom: 2px solid #598c55;
border-radius: 0;
margin-bottom: 30px;
margin-top: 30px;
padding:10px 0;
}
.bread li,.bread li a{
font-size: 14px;
color: #808080;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bread li:last-child{
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bread .active{
color: #598c55;
}
/*首页--新闻中心*/
.news {
padding-top: 40px;
padding-bottom: 40px;
}
.news .news-content {
margin-top: 40px;
}
.news .news-content p {
margin-bottom: 0;
}
.news .thumbnail {
overflow: hidden;
padding: 0;
}
.news .thumbnail img {
width: 100%;
}
.news .news-content .caption {
padding: 0px 9px 20px 9px;
border-bottom: 1px solid #ccc;
color: #333;
}
.news .news-content .caption h3 {
margin-bottom: 12px;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news .news-content .caption p {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news .news-des {
padding: 20px 9px 20px 9px;
color: #b2b2b2;
}
.news .news-des p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
...
3.JS
代码如下（节选示例）：
/*!
* Bootstrap v3.3.0 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher")}(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){return a(b.target).is(this)?b.handleObj.handler.apply(this,arguments):void 0}})})}(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.0",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);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.0",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?(this.isLoading=!0,d.addClass(c).attr(c,c)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?a=!1:b.find(".active").removeClass("active")),a&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active"));a&&this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document)
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
相关知识
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
web网页设计实例作业 ：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
1500套前端大作业模板
HTML5期末大作业：鲜花主题网页设计——简约的网上花店网站设计(4页) HTML+CSS+JavaScript
HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码...
104. Web前端网页制作 绿色盆栽花店网页设计实例 大学生期末作业 html+css+js
Web前端期末大作业
342.大学生HTML5期末大作业 —【传统节日美食网页】 Web前端网页制作 html5+css3
153.大学生HTML期末大作业 —【 环保科技公司响应式网页】 Web前端网页制作 html+css+js
web网页设计期末课程大作业——电影介绍5页HTML+CSS制作
网址: 213. Web前端网页制作 多肉植物主题响应式网页设计实例 大学生期末大作业 html+css+js https://m.huajiangbk.com/newsview1300721.html
| 上一篇: 几款高颜值的多肉植物花盆，有你喜 |
下一篇: 水仙花的生长周期一般是多长? 爱 |
