大三每日总结
B/S结构用户界面设计
【实验编号】
10003809548j Web界面设计
【实验学时】
8学时
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为dreamweaver
【实验内容】
有机果蔬介绍网站,其中有多种果蔬供浏览者观看,同时帮助浏览者了解有机果蔬相关故事
页面跳转
导航栏设置
图片载入
文字说明
【关键步骤】
图片自动变化
主页面右上方有导航栏,可实现自由切换
下方可浏览各种信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Green — Free Bootstrap Theme, Free Responsive Bootstrap Website Template</title>
<meta name="description" content="Free Bootstrap Theme">
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
<link href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/styles-merged.css">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/custom.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- START: header -->
<div class="probootstrap-loader"></div>
<header role="banner" class="probootstrap-header">
<div class="container">
<a href="index.html" class="probootstrap-logo">有机<span></span></a>
<a href="#" class="probootstrap-burger-menu visible-xs" ><i>Menu</i></a>
<div class="mobile-menu-overlay"></div>
<nav role="navigation" class="probootstrap-nav hidden-xs">
<ul class="probootstrap-main-nav">
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="gallery.html">产品</a></li>
</ul>
<div class="extra-text visible-xs">
<a href="#" class="probootstrap-burger-menu"><i>Menu</i></a>
<h5>Connect</h5>
<ul class="social-buttons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook2"></i></a></li>
<li><a href="#"><i class="icon-instagram2"></i></a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- END: header -->
<section class="probootstrap-slider flexslider">
<div class="probootstrap-text-intro">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="probootstrap-slider-text text-center">
<h1 class="probootstrap-heading probootstrap-animate mb20" data-animate-effect="fadeIn">100% 有机</h1>
<div class="probootstrap-animate probootstrap-sub-wrap mb30" data-animate-effect="fadeIn">有 机 食 物</div>
<p class="probootstrap-animate" data-animate-effect="fadeIn"><a href="#" class="btn btn-ghost btn-ghost-white">全新体验</a></p>
</div>
</div>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(img/slider_1.jpg);"></li>
<li style="background-image: url(img/slider_2.jpg);"></li>
</ul>
</section>
<!-- END: slider -->
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_1.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机火龙果</h2>
<p>有机火龙果本名青龙果、玉龙果、红龙果、仙蜜果，因食有机火龙果健康长寿，俗名叫长寿果。有排毒解毒、保护胃壁，抗衰老、预防脑细胞变性，抑制痴呆症发生的功效。</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_2.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机豆芽蔬菜</h2>
<p> 疲劳是容颜的大敌，大豆发芽后，有一种叫天门冬氨酸的物质急剧增加，所以人吃豆芽能减少体内乳酸堆积，消除疲劳</p>
</div>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_3.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机豆瓣菜</h2>
<p>豆瓣菜中维生素B、维生素C、氨基酸含量比较高，并且含有丰富的蛋白质、糖类、有机酸等营养成分，是一种很好的食用蔬菜。</p>
</div>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_4.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机胡萝卜</h2>
<p>胡萝卜含有一种檞皮素，常吃可增加冠状动脉血流量，促进肾上腺素合成，有降压、消炎之功效。胡萝卜种子含油量达13%，可驱蛔虫，治长久不愈的痢疾。</p>
</div>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_5.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机甜椒</h2>
<p>甜椒性热、味辛、归心、脾经，能保护和调节糖代谢，显著降低血糖水平，有利尿和防腐等功效，还具有抗癌防癌、明目、提高免疫力的作用。甜椒既可生食又可烹食，可做沙拉，也可用来做汤、炖菜，还可以用来做馅，可促进消化、防止便秘、帮助脂肪代谢、预防中暑</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<div class="product-item">
<figure><img src="img/img_6.jpg" alt="Free Template" class="img-responsive"></figure>
<div class="text">
<h2 class="heading">有机黄瓜</h2>
<p>抗肿瘤,抗衰老：有机黄瓜中含有丰富的维生素E，可起到延年益寿,降血糖：有机黄瓜中所含的葡萄糖甙、果糖等不参与通常的糖代谢，减肥强体：有机黄瓜中所含的丙醇二酸，可抑制糖类物质转变为脂肪。</p>
</div>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
</div>
</div>
</section>
<section class="probootstrap-section probootstrap-bg" style="background-image: url(img/slider_2.jpg);">
<div class="container text-center">
<h2 class="heading probootstrap-animate" data-animate-effect="fadeIn">新鲜和非转基因产品</h2>
<p class="sub-heading probootstrap-animate" data-animate-effect="fadeIn">果蔬相关情况概述</p>
</div>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-leaf"></i></div>
<h2 class="heading">新鲜蔬菜和水果</h2>
<p>有机水果与绿色水果和无公害水果最主要的区别是种植有机蔬菜和水果完全不使用化学合成的肥料、农药、生长调节剂（比如激素等）、转基因技术，产地要求远离工业区、城市生活区、交通主干道，生产过程完全遵守有机蔬菜和水果生产技术规程。</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-hand"></i></div>
<h2 class="heading">当地种植的蔬菜环境</h2>
<p>基地的土地应是完整的地块，其间不能夹有进行常规生产的地块，但允许存在有机转换地块；有机蔬菜生产基地与常规地块交界处必须有明显标记，如河流、山丘、人为设置的隔离带等</p>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-tree"></i></div>
<h2 class="heading">品种选择</h2>
<p>种子和种苗，在得不到已获认证的有机蔬菜种子和种苗的情况下（如在有机种植的初始阶段），可使用未经禁用物质处理的常规种子。应选择适应当地的土壤和气候特点，且对病虫害有抗性的蔬菜种类及品种，在品种的选择中要充分考虑保护作物遗传多样性。禁止使用任何转基因种子。</p>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-location"></i></div>
<h2 class="heading">配套栽培技术</h2>
<p>通过培育壮苗、嫁接换根、起垄栽培、地膜覆盖、合理密植、植株调整等技术，充分利用光、热、气等条件，创造一个有利于蔬菜生长的环境，以达到高产高效的目的。</p>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-water"></i></div>
<h2 class="heading">环境调控技术</h2>
<p>创造有利于天敌栖息、繁衍，不利于病虫害发生、蔓延的生态环境条件，保障物种多样性和遗传基因多样性，增加菜田昆虫群落丰富度，强化食物网的结构和功能，构建稳定性高、变易性小的可持续发展的生态体系其技术包括蔬莱田环境条件建设、土壤状况的改善和创造适宜蔬菜生长发育的外界环境。</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-air"></i></div>
<h2 class="heading">有机蔬菜生产施肥原则</h2>
<p>有机蔬菜生产必须按照有机农业的生产方式进行，严格遵循有机食品的生产技术标准，整个生产过程中完全不使用农药、化肥、植物生长调节剂等化学物质，不使用转基因工程技术。因此，有机蔬菜生产的施肥原则是：在培肥土壤的基础上，通过土壤微生物的作用来供给作物养分，要求以有机肥为主，辅以生物肥料，并适当种植绿肥作物培肥土壤。</p>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
</div>
</div>
</section>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-chevron-thin-up"></i></a>
</div>
<script src="js/scripts.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Green — Free Bootstrap Theme, Free Responsive Bootstrap Website Template</title>
<meta name="description" content="Free Bootstrap Theme">
<meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">
<link href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Open+Sans:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/styles-merged.css">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" href="css/custom.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- START: header -->
<div class="probootstrap-loader"></div>
<header role="banner" class="probootstrap-header">
<div class="container">
<a href="index.html" class="probootstrap-logo">有机<span>.</span></a>
<a href="#" class="probootstrap-burger-menu visible-xs" ><i>Menu</i></a>
<div class="mobile-menu-overlay"></div>
<nav role="navigation" class="probootstrap-nav hidden-xs">
<ul class="probootstrap-main-nav">
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li class="active"><a href="gallery.html">产品</a></li>
</ul>
<div class="extra-text visible-xs">
<a href="#" class="probootstrap-burger-menu"><i>Menu</i></a>
<h5>Connect</h5>
<ul class="social-buttons">
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-facebook2"></i></a></li>
<li><a href="#"><i class="icon-instagram2"></i></a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- END: header -->
<section class="probootstrap-slider flexslider">
<div style="position: absolute; top: 0; left: 0; width: 100%; z-index: 49;">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="probootstrap-slider-text text-center">
<h1 class="probootstrap-heading probootstrap-animate mb20" data-animate-effect="fadeIn">产品</h1>
<div class="probootstrap-animate probootstrap-sub-wrap mb30" data-animate-effect="fadeIn">有 机 食 物</div>
<p class="probootstrap-animate" data-animate-effect="fadeIn"><a href="#" class="btn btn-ghost btn-ghost-white">全新体验</a></p>
</div>
</div>
</div>
</div>
</div>
<ul class="slides">
<li style="background-image: url(img/slider_1.jpg);"></li>
<li style="background-image: url(img/slider_2.jpg);"></li>
</ul>
</section>
<!-- END: slider -->
<section class="probootstrap-section">
<div class="container">
<div class="probootstrap-section-heading text-center mb50 probootstrap-animate">
<h4 class="sub-heading">图片展示</h4>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_1.jpg" class="image-popup"><img src="img/slider_1.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_2.jpg" class="image-popup"><img src="img/slider_2.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_3.jpg" class="image-popup"><img src="img/slider_3.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_4.jpg" class="image-popup"><img src="img/slider_4.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-lg-block visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_4.jpg" class="image-popup"><img src="img/slider_4.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_3.jpg" class="image-popup"><img src="img/slider_3.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-md-block visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_2.jpg" class="image-popup"><img src="img/slider_2.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_1.jpg" class="image-popup"><img src="img/slider_1.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-lg-block visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_1.jpg" class="image-popup"><img src="img/slider_1.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_2.jpg" class="image-popup"><img src="img/slider_2.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_3.jpg" class="image-popup"><img src="img/slider_3.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 probootstrap-animate" data-animate-effect="fadeIn">
<a href="img/slider_4.jpg" class="image-popup"><img src="img/slider_4.jpg" class="img-responsive img-rounded" alt="Free Bootstrap Template"></a>
</div>
<div class="clearfix visible-lg-block visible-sm-block"></div>
</div>
</div>
</section>
<section class="probootstrap-section probootstrap-bg" style="background-image: url(img/slider_2.jpg);">
<div class="container text-center">
<h2 class="heading probootstrap-animate" data-animate-effect="fadeIn">新鲜和非转基因产品</h2>
<p class="sub-heading probootstrap-animate" data-animate-effect="fadeIn">果蔬相关情况概述</p>
</div>
</section>
<section class="probootstrap-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-leaf"></i></div>
<h2 class="heading">新鲜蔬菜和水果</h2>
<p>有机水果与绿色水果和无公害水果最主要的区别是种植有机蔬菜和水果完全不使用化学合成的肥料、农药、生长调节剂（比如激素等）、转基因技术，产地要求远离工业区、城市生活区、交通主干道，生产过程完全遵守有机蔬菜和水果生产技术规程。</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-hand"></i></div>
<h2 class="heading">当地种植的蔬菜环境</h2>
<p>基地的土地应是完整的地块，其间不能夹有进行常规生产的地块，但允许存在有机转换地块；有机蔬菜生产基地与常规地块交界处必须有明显标记，如河流、山丘、人为设置的隔离带等</p>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-tree"></i></div>
<h2 class="heading">品种选择</h2>
<p>种子和种苗，在得不到已获认证的有机蔬菜种子和种苗的情况下（如在有机种植的初始阶段），可使用未经禁用物质处理的常规种子。应选择适应当地的土壤和气候特点，且对病虫害有抗性的蔬菜种类及品种，在品种的选择中要充分考虑保护作物遗传多样性。禁止使用任何转基因种子。</p>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-location"></i></div>
<h2 class="heading">配套栽培技术</h2>
<p>通过培育壮苗、嫁接换根、起垄栽培、地膜覆盖、合理密植、植株调整等技术，充分利用光、热、气等条件，创造一个有利于蔬菜生长的环境，以达到高产高效的目的。</p>
</div>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-water"></i></div>
<h2 class="heading">环境调控技术</h2>
<p>创造有利于天敌栖息、繁衍，不利于病虫害发生、蔓延的生态环境条件，保障物种多样性和遗传基因多样性，增加菜田昆虫群落丰富度，强化食物网的结构和功能，构建稳定性高、变易性小的可持续发展的生态体系其技术包括蔬莱田环境条件建设、土壤状况的改善和创造适宜蔬菜生长发育的外界环境。</p>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 probootstrap-animate">
<div class="service">
<div class="icon"><i class="icon-air"></i></div>
<h2 class="heading">有机蔬菜生产施肥原则</h2>
<p>有机蔬菜生产必须按照有机农业的生产方式进行，严格遵循有机食品的生产技术标准，整个生产过程中完全不使用农药、化肥、植物生长调节剂等化学物质，不使用转基因工程技术。因此，有机蔬菜生产的施肥原则是：在培肥土壤的基础上，通过土壤微生物的作用来供给作物养分，要求以有机肥为主，辅以生物肥料，并适当种植绿肥作物培肥土壤。</p>
</div>
</div>
<div class="clearfix visible-lg-block visible-md-block"></div>
</div>
</div>
</section>
<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-chevron-thin-up"></i></a>
</div>
<script src="js/scripts.min.js"></script>
<script src="js/main.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
【实验体会】
此次编写b/s，让我熟悉了css,div以及相关框架的使用，以前在做各种管理网页的时候,只用一些简单的设计，所以做出来的界面会比较难看，后来在自己学习做这次的b/s网站的时候边查资料,找优秀的作品进行学习，有了很大的进步
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南