bootstrap--实例-天天生鲜水果节 

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>天天生鲜-水果节</title>
  9 
 10     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
 11     <script type="text/javascript" src="js/bootstrap.min.js"></script>
 12     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 13     <link rel="stylesheet" type="text/css" href="css/main.css">
 14 
 15 </head>
 16 <body>
 17 
 18     <!--------------------导航栏------------------------>
 19     <div class="navbar navbar-inverse navbar-static-top">
 20         <div class="container">
 21             <div class="navbar-header">
 22                 <button class="navbar-toggle" data-toggle="collapse" data-target="#fruit_menu">  <!-- 固定写法，点击icon-bar，展示fruit_menu隐藏的菜单-->
 23                     <span class="icon-bar"></span>
 24                     <span class="icon-bar"></span>
 25                     <span class="icon-bar"></span>
 26                 </button>
 27                 <a href="#" class="navbar-brand"><img src="images/logo.png" alt="天天生鲜logo"></a>
 28             </div>
 29 
 30             <div class="collapse navbar-collapse" id="fruit_menu">   <!--固定写法，页面缩小时，隐藏下列菜单-->
 31                 <ul class="nav navbar-nav">
 32                     <li><a href="">首页</a></li>
 33                     <li><a href="">推荐商品</a></li>
 34                     <li><a href="">手机生鲜</a></li>
 35                     <li><a href="">抽奖</a></li>
 36                 </ul>
 37 
 38                 <div class="navbar-form navbar-right">   <!--搜索栏-->
 39                     <div class="form-group">
 40                         <div class="input-group">
 41                             <input type="text" name="" class="form-control">   <!--搜索框-->
 42                             <div class="input-group-btn">   <!--按钮-->
 43                                 <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
 44                             </div>
 45                         </div>
 46                     </div>
 47                 </div>
 48             </div>
 49         </div>
 50     </div>
 51 
 52     <!--------------------巨幕（banner）------------------------>
 53     <div class="jumbotron">
 54         <div class="container">
 55             <div class="row">
 56                 <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">   <!--栅格系统，offset偏移-->
 57                     <div class="banner_title"><img src="images/banner_title.png" alt="banner_title"></div>
 58                     <h1 class="active_title">水果节介绍</h1>
 59                     <p class="active_detail">天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场，借助天天生鲜产地端到用户端的渠道，果品流转效率得以大大提高。依托天天生鲜的渠道优势，首届果节做到了高质低价。</p>
 60                 </div>
 61                 <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">   <!--hidden-sm hidden-xs屏幕小于sm/xs，隐藏该图片-->
 62                     <img src="images/fruit.png" alt="" class="img-responsive">  <!-- img-responsive 声明响应式图片-->
 63                 </div>
 64             </div>
 65         </div>
 66     </div>
 67 
 68 
 69     <!--------------------活动图片模块------------------------>
 70     <div class="container">
 71         <h3 class="text-center active_pic_title">活动图片</h3>   <!--text-center文字居中-->
 72         <p class="text-center active_pic_detail">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后，在适合的时间将水果采摘下来后，直接在地头包装成箱，根据订单分装运到各个分仓，然后由配送员送到用户手中。以下是本次活动相关的图片</p>
 73     </div>
 74 
 75 
 76     <div class="container">
 77         <div class="row">
 78             <div class="col-lg-3 col-md-3 col-sm-6">   <!--栅格系统-->
 79                 <div class="thumbnail">    <!--thumbnail定义边线-->
 80                     <img src="images/active01.jpg" alt="active01" class="img-responsive">   <!-- img-responsive 声明响应式图片-->
 81                     <h4>现场采摘活动</h4>
 82                 </div>
 83             </div>
 84             <div class="col-lg-3 col-md-3 col-sm-6">
 85                 <div class="thumbnail">
 86                     <img src="images/active02.jpg" alt="active01" class="img-responsive">
 87                     <h4>现场采摘活动</h4>
 88                 </div>
 89             </div>
 90             <div class="col-lg-3 col-md-3 col-sm-6">
 91                 <div class="thumbnail">
 92                     <img src="images/active03.jpg" alt="active01" class="img-responsive">
 93                     <h4>现场采摘活动</h4>
 94                 </div>
 95             </div>
 96             <div class="col-lg-3 col-md-3 col-sm-6">
 97                 <div class="thumbnail">
 98                     <img src="images/active04.jpg" alt="active01" class="img-responsive">
 99                     <h4>现场采摘活动</h4>
100                 </div>
101             </div>
102         </div>
103     </div>
104 
105 
106     <!--------------------推荐商品模块------------------------>
107     <div class="container">
108         <div class="common_title">
109             <h3 class="pull-left">推荐商品</h3>       <!--pull-left左浮动-->
110             <a href="#" class="pull-right">更多 &gt;&gt;</a>     <!--pull-right右浮动-->
111         </div>
112     </div>
113 
114     <div class="container">
115         <div class="row goods_list">
116             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
117             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
118             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
119             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
120             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
121             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
122             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
123             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
124             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
125             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
126             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
127             <div class="goods_list_show col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/good_pic.jpg" class="img-responsive"><h4 class="goods_name">进口草莓</h4><p class="goods_price">¥ <em>25.00</em>/500g</p></div>
128         </div>
129     </div>
130 
131 
132     <!--------------------底部------------------------>
133     <div class="container-fluid footer">
134         <p class="text-center">
135             <a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span><a href="#">招聘人才</a><span> | </span><a href="#">友情链接</a>
136         </p>
137         <p class="text-center">CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
138         <p class="text-center">电话：010-****888    京ICP备*******8号</p>
139     </div>
140 </body>
141 </html>

 

  1 body{
  2     font-family: 'Microsoft Yahei';
  3 }
  4 .navbar{
  5     margin-bottom:0;
  6 }
  7 
  8 /*-------------导航栏---------------*/
  9 .navbar-brand{
 10     padding:5px 15px;
 11 }
 12 
 13 .navbar-inverse{
 14     background-color:#ff722b;;
 15     border-color:#ff722b;;
 16 }
 17 
 18 .navbar-inverse .navbar-nav>li>a {
 19     color: #fff;
 20 }
 21 
 22 .navbar-inverse .navbar-toggle {
 23     border-color: #fff;
 24 }
 25 
 26 .navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
 27     background-color: pink;
 28 }
 29 
 30 .navbar-inverse .navbar-toggle {
 31     border-color: #fff
 32 }
 33 
 34 .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
 35     border-color: #fff;
 36 }
 37 
 38 
 39 /*-------------巨幕（banner）---------------*/
 40 .jumbotron{
 41     background:url(../images/banner_bg.jpg) center center no-repeat;   /*为了适应各种屏幕大小，巨幕图片要比一般图片大*/
 42     padding:24px 0;      /*重置巨幕图片自带的pading和margin*/
 43     margin-bottom:0;
 44 }
 45 
 46 .banner_title{
 47     margin-top:40px;
 48 }
 49 
 50 @media (max-width:992px){     /*当屏幕小于992px时*/
 51     .banner_title{
 52         margin-top:10px;
 53     }
 54 }
 55 
 56 .jumbotron .active_title{   /*增加权重，不然字体大小不生效*/
 57     font-size:18px;
 58     color:#ff0;
 59     margin-top:20px;
 60 }
 61 
 62 .jumbotron .active_detail{
 63     font-size:14px;
 64     color:#fff;
 65     line-height:28px;
 66 }
 67 
 68 
 69 /*-------------活动图片模块---------------*/
 70 .active_pic_title{
 71     font-size:30px;
 72     color:#333;
 73     margin:34px 0 25px;
 74 }
 75 
 76 .active_pic_detail{
 77     font-size:14px;
 78     color:#333;
 79     margin-bottom:20px;
 80 }
 81 
 82 .thumbnail h4{
 83     text-align:center;
 84 }
 85 
 86 .thumbnail{
 87     max-width:260px;     /*边线最大宽度260px*/
 88     margin:0px auto 20px;  /*居中*/
 89 }
 90 
 91 
 92 /*-------------推荐商品模块---------------*/
 93 .common_title{
 94     background-color:#ff722b;
 95     overflow:hidden;   /*父元素内整体浮动的元素无法撑开父元素，需要清除浮动*/
 96     height:40px;
 97 }
 98 
 99 .common_title h3{
100     font-size:16px;
101     color:#fff;
102     text-indent:32px;
103     margin:0;
104     line-height:40px;
105 }
106 
107 .common_title a{
108     font-size:12px;
109     color:#fff;
110     margin:16px 10px 0 0;
111 }
112 
113 
114 .goods_list .goods_name{
115     text-align:center;
116     font-size:14px;
117     color:#666;
118 }
119 
120 .goods_list .goods_price{
121     font-size:16px;
122     text-align:center;
123     color:#ff0000;
124 }
125 
126 .goods_list .goods_price em{
127     font-style:normal;
128     font-size:22px;
129 }
130 
131 .goods_list_show{
132     border:1px solid #ddd;
133     margin-top:20px;
134     border-right-color:#fff;   /*将右边线置为白色*/
135 }
136 
137 .goods_list_show img{
138     margin:0 auto;   /*图片居中*/
139 }
140 
141 .goods_list{
142     margin:0;
143 }
144 
145 .goods_list .goods_list_show:nth-child(2n){
146     border-right-color:#ddd;
147 }
148 
149 @media (min-width:768px){     /*当屏幕变化时，右边线的变化*/
150     .goods_list .goods_list_show:nth-child(2n){
151         border-right-color:#fff;
152     }
153 
154     .goods_list .goods_list_show:nth-child(3n){
155         border-right-color:#ddd;
156     }
157 }
158 
159 @media (min-width:992px){
160     .goods_list .goods_list_show:nth-child(3n){
161         border-right-color:#fff;
162     }
163 
164     .goods_list .goods_list_show:nth-child(4n){
165         border-right-color:#ddd;
166     }
167 }
168 
169 @media (min-width:1200px){
170     .goods_list .goods_list_show:nth-child(4n){
171         border-right-color:#fff;
172     }
173 
174     .goods_list .goods_list_show:nth-child(6n){
175         border-right-color:#ddd;
176     }
177 }
178 
179 
180 /*-------------底部---------------*/
181 .footer{
182     background-color:#ff722b;
183     margin-top:20px;
184     padding:20px 0;
185 }
186 
187 .footer p{
188     color:#fff;
189 }
190 
191 .footer a{
192     color:#fff;
193 }
194 
195 .footer a:hover{
196     text-decoration:none;
197     color:#ff0;
198 }

posted on 2020-01-06 21:54  cherry_ning  阅读(181)  评论(0)    收藏  举报

导航