利用bootstrap框架做了一个采摘节节日活动网页
来源：互联网 发布：js 视频加载完成后执行 编辑：程序博客网 时间：2024/04/19 21:15
效果欣赏如下：
总共主要是一下两个块代码：
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="#"><imgsrc="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"><ahref="#">首页</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"><spanclass="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">更多>></a>
</div>
</div>
<!-- 4.2商品介绍内容 响应式 -->
<div class="container goods_list">
<div class="row">
<div class="col-lg-2">
<!-- Thumbnail 组件主要用于显示图片列表及图文混排列表 -->
<div class="thumbnail">
<a href="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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="#"><imgsrc="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:5px15px;
}
.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 centerno-repeat;
padding:24px0;
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:0auto 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:10px10px 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:0auto 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:010px;
}
.footer p{
text-align:center;
margin:10px0;
color:#fff;
}
3.需要素材以及调用的代码：
链接：http://pan.baidu.com/s/1qYzAmDm 密码：5yvv
阅读全文
1 0
- 利用bootstrap框架做了一个采摘节节日活动网页
- 利用Bootstrap制作一个流行的网页
- 店铺一个段日期内做了哪些活动
- javascript 添加表单脚本 利用了bootstrap 框架美化
- 做了一个五子棋程序的框架
- 利用R做Bootstrap统计分析
- 利用JS做的一个网页安全色调色板
- 利用JS做的一个网页安全色调色板
- bootstrap网页框架使用例子
- 最近做了一个自动纠错演示网页
- 做了一个网页版的串口调试助手
- 当我们打开一个网页，浏览器做了什么？
- 要做网页了
- 利用CI框架做一个简单的注册表格
- 利用CI框架做一个随机的验证码识别
- squid利用windows活动目录做身份验证
- 做了一个网页，顺便录制了一个视频，大家看看高端不
- 上周日去郊区农家采摘“桑椹”。
- 数组循环左移
- Android Canvas绘制丘比特之箭
- CSS3-过渡
- Linux-虚拟网络设备-OpenvSwitch(持续更新)
- 一名3年工作经验的程序员应该具备的技能（写得很好，果断转）
- 利用bootstrap框架做了一个采摘节节日活动网页
- 关于MySQL数据类型定义的几个细节-INT(N)/VARCHAR（N）/DECIMAL（M,N）
- 【学习摘记】马士兵bbs初级版_课时11-12_发表新帖：仿照”回复”就好
- Android 7.1.1中captive portal检测导致网络不可用的状态
- Python机器学习教程百度云全集
- 2017第6届全球软件案例研究峰会—TOP100案例开始征集
- Universal links(页面跳转app)
- initializationError(org.junit.runner.manipulation.Filter) java.lang.Exception: No tests
- 滚动事件
