利用bootstrap框架做了一个采摘节节日活动网页

效果欣赏如下:

 

总共主要是一下两个块代码:

1.主题:

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天天生鲜</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<!-- 注意:css文件不能写注释 -->
 
</head>
<body>
<!-- 1.1导航条 -->
<nav class="navbar navbar-inverse navbar-static-top">
<!-- 声明导航条 声明反白样式 固定到顶部的导航条 -->
<div class="container">
<!-- 响应式 -->
<div class="navbar-header">
<!-- 声明logo的容器 -->
<!-- logo显示 -->
<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>
<!-- 针对logo等固定内容的样式 -->
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- 首页 推荐商品 手机生鲜 抽奖 -->
<!-- 折叠按钮 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 定义导航中的菜单 -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">推荐商品</a></li>
<li><a href="#">手机生鲜</a></li>
<li><a href="#">抽奖</a></li>
</ul>
<!-- 定义导航中的表单 菜单靠右 -->
<form class="navbar-form navbar-right">
<!-- 表单 -->
<div class="form-group">
<!-- 表单空间组 -->
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入搜索内容:">
<!-- 表单空间组样式 -->
<span class=input-group-btn>
<!-- 声明按钮 默认按钮样式 心形样式 -->
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-heart"></span></button>
</span>
</div>
</div>
</form>                 
</div>
</div>
</nav>
 
<!-- 2.水果介绍 -->
<!-- //巨幕 -->
<div class="jumbotron">
<!-- //响应式 -->
<div class="container">
<div class="row">
<!-- 分配格子 大5 中5 间隔1 -->
<div class="col-lg-5 col-lg-offset-1 col-md-5 clo-md-offset-1">                      <!-- 声明响应式图片 -->
<img src="images/banner_title.png" alt="banner标题" class="banner_pic_title img-responsive">
<h2 class="banner_title">水果节介绍</h2>
<p class="banner_detail">天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场,借助天天生鲜产地端到用户端的渠道,果品流转效率得以大大提高。依托天天生鲜的渠道优势,首届果节做到了高质低价。</p>
</div>
<!-- 设置水果篮 到sm自动消失 -->
<div class="col-lg-4 col-lg-offet-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
<img src="images/basket.png" alt="水果篮" class="img-responsive">
</div>
</div>
</div>
</div>
 
<!-- 3.活动图片设置 响应式 -->
<div class="container">
<h3 class="active_title text-center">活动图片</h3>
<p class="active_detail text-center">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后,在适合的时间将水果采摘下来后,直接在地头包装成箱,根据订单分装运到各个分仓,然后由配送员送到用户手中。以下是本次活动相关的图片</p>
</div>
 
<!-- 图片设置 响应式 分配格子 -->
<div class="container pic_list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<img src="images/active01.jpg" alt="现场采摘活动" class="img-responsive">
<h4>现场采摘活动</h4>
</div>
</div>
 
<div class="col-lg-3 col-md-3 col-sm-6">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<img src="images/active02.jpg" alt="产地装箱直发" class="img-responsive">
<h4>产地装箱直发</h4>
</div>
</div>
 
<div class="col-lg-3 col-md-3 col-sm-6">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<img src="images/active03.jpg" alt="水果节活动" class="img-responsive">
<h4>水果节活动</h4>
</div>
</div>
 
<div class="col-lg-3 col-md-3 col-sm-6">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<img src="images/active04.jpg" alt="水果艺术拼盘" class="img-responsive">
<h4>水果艺术拼盘</h4>
</div>
</div>
</div>
</div>
 
<!-- 4.商品价格介绍 -->
<!-- 4.1商品介绍导航条 -->
<!-- 响应式 -->
<div class="container">
<div class="row common_title">
<h3 class="pull-left">推荐商品</h3>
<a href="" class="pull-right">更多&gt;&gt;</a>
</div>
</div>
 
<!-- 4.2商品介绍内容 响应式 -->
<div class="container goods_list">
<div class="row">
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<div class="thumbnail">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<div class="thumbnail">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><img src="images/goods.jpg" alt="商品图片"></a>
<h4>进口草莓</h4>
<p>¥ <em>25.00</em>/500g</p>
</div>
</div>
 
</div>
</div>
 
<!-- 5.结尾 流体容器 元素宽度与父元素百分百 -->
<div class="container-fluid footer">
<div class="links">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话:010-****888 京ICP备*******8号</p>
 
</div>  
 
</body>
</html>

 

 

 

2.样式:

 

.navbar-brand{
padding:5px 15px;
}
.navbar-inverse {
background-color: #ff722b;
border-color: #ff722b;
}
.navbar-inverse .navbar-nav>li>a {
color: #fff;
}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.active>a:focus {
color: #fff;
background-color: #db6226;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
background-color: #db6226
}
.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
border-color: #fff
}
 
.navbar{
margin-bottom:0;
}
 
.jumbotron{
background:url(../images/banner_bg.jpg) center center no-repeat;
padding:24px 0;
margin-bottom:0;
}
 
.banner_title{
font-size:18px;
color:#ffff00;
}
 
.jumbotron .banner_detail{
font-size:14px;
color:#fff;
line-height:28px;
}
 
.banner_pic_title{
margin-top:46px;
}
 
@media (max-width:1200px){
.banner_pic_title{
margin-top:20px;
}
 
}
 
@media (max-width:992px){
.banner_pic_title{
margin-top:10px;
}
 
}
 
.active_title{
margin-top:30px;
font-size:30px;
color:#333;
}
 
.active_detail{
font-size:14px;
color:#333;
line-height:21px;
margin-top:20px;
}
 
.pic_list{
margin-top:10px;
}
 
.pic_list h4{
font-size:15px;
color:#333;
text-align:center;
}
 
.pic_list .thumbnail{
max-width:260px;
margin:0 auto 20px;
}
 
.common_title{
background-color:#ff722b;
margin:0;
height:40px;
}
 
.common_title h3{
font-size:16px;
color:#fff;
line-height:40px;
margin:0;
text-indent:10px;
}
 
.common_title a{
font-size:12px;
color:#fff;
margin:10px 10px 0 0;
}
 
.goods_list{
margin-top:20px;
}
 
.goods_list .col-lg-2{
width:20%;
}
 
.goods_list h4{
text-align:center;
font-size:14px;
color:#666;
}
 
.goods_list p{
text-align:center;
color:#ff0000;
font-size:16px;
}
 
.goods_list p em{
font-size:22px;
font-style:normal;
}
 
.goods_list .thumbnail{
max-width:260px;
margin:0 auto 20px;
}
 
@media (max-width:1200px){
 
.goods_list .col-lg-2{
width:25%;
float:left;
}
 
}
 
@media (max-width:992px){
 
.goods_list .col-lg-2{
width:50%;
float:left;
}
 
}
 
@media (max-width:768px){
 
.goods_list .col-lg-2{
width:100%;
float:left;
}
 
}
 
.footer{
background-color:#ff722b;
padding-bottom:20px;
}
 
.footer .links{
text-align:center;
margin-top:35px;
}
 
.footer .links a{
color:#fff;
}
 
.footer .links span{
color:#fff;
padding:0 10px;
}
 
.footer p{
text-align:center;
margin:10px 0;
color:#fff;
}

 

 

3.需要素材以及调用的代码:

链接:http://pan.baidu.com/s/1qYzAmDm 密码:5yvv

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473919.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FC网络学习笔记02 -网络配置方法

随着新一代飞机的综合化航电系统对通信需求的不断提高&#xff0c;传统的ARINC429、1553B总线的传输速率分别只有100Kbps和1Mbps&#xff0c;其带宽已远远不 论文联盟 http://Www.LWlm.cOm能满足系统通信的需求&#xff0c;无法为高性能数据处理提供有力的通信支撑。 FC网络是…

LeetCode 1599. 经营摩天轮的最大利润(模拟)

文章目录1. 题目2. 解题1. 题目 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但每次轮转都需要支付一定的运行成本 runningCost 。摩天轮每次轮转都恰好转动 1 / 4 周。 给你一…

1.数据库基本概念知识

数据库 存储数据的仓库 描述一个事物的基本信息 优点: 持久化存储 读写速度极高 保证数据的有效性 RDBMS 当前主要使用两种类型的数据库&#xff1a;关系型数据库、非关系型数据库 所谓的关系型数据库RDBMS&#xff0c;是建立在关系模型基础上的数据库&#xff0c;借助于…

LeetCode 1600. 皇位继承顺序(图的深度优先遍历)

文章目录1. 题目2. 解题1. 题目 一个王国里住着国王、他的孩子们、他的孙子们等等。每一个时间点&#xff0c;这个家庭里有人出生也有人死亡。 这个王国有一个明确规定的皇位继承顺序&#xff0c;第一继承人总是国王自己。我们定义递归函数 Successor(x, curOrder) &#xff…

Java泛型,枚举,注解

Java泛型&#xff0c;枚举&#xff0c;注解 1 泛型 1.1 什么是泛型 泛型&#xff1a;即参数化类型。在不创建新的类型的情况下&#xff0c;通过泛型指定的不同类型来控制形参具体限制的类型。允许在定义类、接口时通过一个标识表示类中某个属性的类型或者是某个方法的返回值…

2.数据完整性

使用数据类型的原则是&#xff1a;够用就行&#xff0c;尽量使用取值范围小的&#xff0c;而不用大的&#xff0c;这样可以更多的节省存储空间 常用数据类型如下&#xff1a; 整数&#xff1a;int&#xff0c;bit 小数&#xff1a;decimal 字符串&#xff1a;varchar,char 日期…

LeetCode 1601. 最多可达成的换楼请求数目(回溯+剪枝)

文章目录1. 题目2. 解题1. 题目 我们有 n 栋楼&#xff0c;编号从 0 到 n - 1 。每栋楼有若干员工。由于现在是换楼的季节&#xff0c;部分员工想要换一栋楼居住。 给你一个数组 requests &#xff0c;其中 requests[i] [fromi, toi] &#xff0c;表示一个员工请求从编号为 …

3.数据库基本操作

数据库操作&#xff1a; 查看所有数据库 show databases; 使用数据库 use 数据库名; 查看当前使用的数据库 select database(); 创建数据库 create database 数据库名charsetutf8; 例&#xff1a;create database python charsetutf8; 删除数据库 drop database 数据库名…

Nginx + PHP(php-fpm)遇到的502 Bad Gateway错误

我一个统计程序估计要跑1分多钟以上 查看了一个php-fpm 配置文件 [13-Oct-2013 12:06:07] WARNING: [pool www] child 7458, script /home/wwwroot/admin/index.php (request: "GET /index.php") execution timed out (101.515909 sec), terminating [13-Oct-2013 12…

4.数据库(增删改查)备份及恢复

查询所有列 select * from 表名; 例&#xff1a;select * from classes; 查询指定列&#xff0c;可以使用as为列或表指定别名 select 列1,列2,...from 表名; 例&#xff1a;select id,name from classes; 增加 全列插入&#xff1a;值的顺序与表中字段的顺序对应 insert in…

LeetCode 767. 重构字符串(堆)

文章目录1. 题目2. 解题1. 题目 给定一个字符串S&#xff0c;检查是否能重新排布其中的字母&#xff0c;使得两相邻的字符不同。 若可行&#xff0c;输出任意可行的结果。若不可行&#xff0c;返回空字符串。 示例 1: 输入: S "aab" 输出: "aba"示例 2…

5.数据库设计

三范式 经过研究和对使用中问题的总结&#xff0c;对于设计数据库提出了一些规范&#xff0c;这些规范被称为范式 数据库设计中一共有6个范式&#xff0c;一般需要遵守3范式即可 第一范式&#xff08;1NF)&#xff1a;数据库表的每一列都是不可分割的原子数据项&#xff0c;…

minix中atoi、atol、atof的实现

在minix2.0源代码中&#xff0c;有将字符串类型转换为int、long、double类型的函数实现&#xff0c;相关的实现函数分别在atoi.c、atol.c、atof.c文件中&#xff0c;我们来逐一学习其中的源码&#xff1a; 1、int atoi(register const char *nptr) &#xff1a;将字符串类型转换…

LeetCode 729. 我的日程安排表 I(set 二分查找)

文章目录1. 题目2. 解题2.1 set 二分查找2.2 差分思想1. 题目 实现一个 MyCalendar 类来存放你的日程安排。如果要添加的时间内没有其他安排&#xff0c;则可以存储这个新的日程安排。 MyCalendar 有一个 book(int start, int end)方法。 它意味着在 start 到 end 时间内增加…

java基础之lambda表达式

java基础之lambda表达式 1 什么是lambda表达式 lambda表达式是一个匿名函数&#xff0c;允许将一个函数作为另外一个函数的参数&#xff0c;将函数作为参数传递&#xff08;可理解为一段传递的代码&#xff09;。 2 为什么要用lambda表达式 lambda表达式可以写出更简洁更灵…

6.数据查询(条件

查询所有字段select * from 表名; 例&#xff1a;select * from students; 查询指定字段 在select后面的列名部分&#xff0c;可以使用as为列起别名&#xff0c;这个别名出现在结果集中 select 列1,列2,... from 表名; -- 表名.字段名 select students.id,students.name,su…

开源代码分析技巧之——打印调用逻辑

开源代码分析技巧之——打印调用逻辑 在研究开源代码时&#xff0c;大家或许都有这样的感慨&#xff1a; &#xff08;1&#xff09;代码太庞大&#xff0c;少则几万行代码&#xff0c;多则几百万行代码&#xff0c;不知道如何入手&#xff1b; &#xff08;2&#xff09;相关的…

LeetCode 731. 我的日程安排表 II(set二分查找 / 差分思想)

文章目录1. 题目2. 解题2.1 set 二分查找2.2 差分思想1. 题目 实现一个 MyCalendar 类来存放你的日程安排。如果要添加的时间内不会导致三重预订时&#xff0c;则可以存储这个新的日程安排。 MyCalendar 有一个 book(int start, int end)方法。 它意味着在 start 到 end 时间…

7.排序、聚合函数、分组查询

排序 语法&#xff1a; select * from 表名 order by 列1 asc|desc,列2 asc|desc,... asc从小到大排列&#xff0c;即升序&#xff0c;也可不写&#xff1b; desc从大到小排序&#xff0c;即降序 例1&#xff1a;查询未删除男生信息&#xff0c;按学号降序 select * from…

JSON数据格式以及与后台交互数据转换实例

/*作者&#xff1a;烟大阳仔时间&#xff1a;20131013介绍:主要了解一下json的格式&#xff0c;看看数据是怎么存储的 */ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> &…