效果欣赏如下：
总共主要是一下两个块代码：
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"
>更多>>
</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
扫一扫
1655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
