bootstarp小项目——水果节

index.html：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
  6     maximum-scale=1.0, minimum-scale=1.0">
  7     <title>天天生鲜-水果节</title>
  8     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  9     <link rel="stylesheet" type="text/css" href="css/index.css">
 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 </head>
 13 <body>
 14 <!--    导航栏-->
 15     <div class="navbar navbar-inverse navbar-static-top">
 16         <div class="container">
 17             <!--            定义LOGO-->
 18             <div class="navbar-header">
 19                 <!--                定义三横杠-->
 20                 <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
 21                     <span class="icon-bar"></span>
 22                     <span class="icon-bar"></span>
 23                     <span class="icon-bar"></span>
 24                 </button>
 25                 <a href="#" class="navbar-brand"><img src="images/logo.png"></a>
 26             </div>
 27 
 28             <div class="collapse navbar-collapse" id="mymenu">
 29                 <!--            定义菜单-->
 30                 <ul class="nav navbar-nav">
 31                     <li class="active"><a href="#">首页</a></li>
 32                     <li><a href="#">推荐商品</a></li>
 33                     <li><a href="#">手机生鲜</a></li>
 34                     <li><a href="#">抽奖</a></li>
 35                 </ul>
 36 
 37                 <!--            定义菜单里面的表单-->
 38                 <form class="navbar-form navbar-right">
 39                     <div class="form-group">
 40                         <div class="input-group">
 41                             <input type="text" name="" class="form-control">
 42                             <span class="input-group-btn">
 43                                     <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
 44                                 </span>
 45                         </div>
 46 
 47                     </div>
 48                 </form>
 49             </div>
 50 
 51         </div>
 52     </div>
 53 
 54 <!--    banner-->
 55     <div class="jumbotron">
 56         <div class="container">
 57             <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
 58                 <img src="images/banner_title.png" class="banner_title img-responsive">
 59                 <h2 class="banner_detail_title">水果节介绍</h2>
 60                 <p class="banner_detail">天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座
 61                     核心城市同期推出北京水果专场， 借助天天生鲜产地端到用户端的渠
 62                     道，果品流转效率得以大大提高。依托天天生鲜的渠道优势，首届果节做到了高质低价。</p>
 63             </div>
 64             <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
 65                 <img src="images/basket.png" class="img-responsive">
 66             </div>
 67         </div>
 68     </div>
 69 
 70 <!--    活动图片-->
 71     <div class="container">
 72         <div class="row active-info">
 73             <h3 class="text-center">活动图片</h3>
 74             <p class="text-center">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后，在适合的
 75                 时间将水果采摘下来后，直接在地头包装成箱，根据订单分装运到各个分仓，然后由配送员送到用
 76                 户手中。以下是本次活动相关的图片</p>
 77         </div>
 78 
 79         <div class="row active-pic-list">
 80             <div class="col-lg-3 col-md-3 col-sm-6">
 81                 <div class="thumbnail">
 82                     <img src="images/active01.jpg">
 83                     <h4>现场采摘活动</h4>
 84                 </div>
 85             </div>
 86 
 87             <div class="col-lg-3 col-md-3 col-sm-6">
 88                 <div class="thumbnail">
 89                     <img src="images/active02.jpg">
 90                     <h4>现场采摘活动</h4>
 91                 </div>
 92             </div>
 93 
 94             <div class="col-lg-3 col-md-3 col-sm-6">
 95                 <div class="thumbnail">
 96                     <img src="images/active03.jpg">
 97                     <h4>现场采摘活动</h4>
 98                 </div>
 99             </div>
100 
101             <div class="col-lg-3 col-md-3 col-sm-6">
102                 <div class="thumbnail">
103                     <img src="images/active04.jpg">
104                     <h4>现场采摘活动</h4>
105                 </div>
106             </div>
107         </div>
108     </div>
109 
110 <!--    推荐商品-->
111 
112     <div class="container">
113         <div class="row common_title">
114             <h3 class="pull-left">推荐商品</h3>
115             <a href="#" class="pull-right">更多 &gt;&gt;</a>
116         </div>
117     </div>
118 
119 
120     <div class="container">
121         <div class="row goods_list">
122             <div class="col-lg-2">
123                 <div class="goods_con">
124                     <img src="images/goods.jpg" class="img-responsive">
125                     <h4>商品名称</h4>
126                     <p>￥ <em>25.00</em>/500g</p>
127                 </div>
128             </div>
129 
130             <div class="col-lg-2">
131                 <div class="goods_con">
132                     <img src="images/goods.jpg" class="img-responsive">
133                     <h4>商品名称</h4>
134                     <p>￥ <em>25.00</em>/500g</p>
135                 </div>
136             </div>
137 
138             <div class="col-lg-2">
139                 <div class="goods_con">
140                     <img src="images/goods.jpg" class="img-responsive">
141                     <h4>商品名称</h4>
142                     <p>￥ <em>25.00</em>/500g</p>
143                 </div>
144             </div>
145 
146             <div class="col-lg-2">
147                 <div class="goods_con">
148                     <img src="images/goods.jpg" class="img-responsive">
149                     <h4>商品名称</h4>
150                     <p>￥ <em>25.00</em>/500g</p>
151                 </div>
152             </div>
153 
154             <div class="col-lg-2">
155                 <div class="goods_con">
156                     <img src="images/goods.jpg" class="img-responsive">
157                     <h4>商品名称</h4>
158                     <p>￥ <em>25.00</em>/500g</p>
159                 </div>
160             </div>
161 
162             <div class="col-lg-2">
163                 <div class="goods_con">
164                     <img src="images/goods.jpg" class="img-responsive">
165                     <h4>商品名称</h4>
166                     <p>￥ <em>25.00</em>/500g</p>
167                 </div>
168             </div>
169 
170             <div class="col-lg-2">
171                 <div class="goods_con">
172                     <img src="images/goods.jpg" class="img-responsive">
173                     <h4>商品名称</h4>
174                     <p>￥ <em>25.00</em>/500g</p>
175                 </div>
176             </div>
177 
178             <div class="col-lg-2">
179                 <div class="goods_con">
180                     <img src="images/goods.jpg" class="img-responsive">
181                     <h4>商品名称</h4>
182                     <p>￥ <em>25.00</em>/500g</p>
183                 </div>
184             </div>
185 
186             <div class="col-lg-2">
187                 <div class="goods_con">
188                     <img src="images/goods.jpg" class="img-responsive">
189                     <h4>商品名称</h4>
190                     <p>￥ <em>25.00</em>/500g</p>
191                 </div>
192             </div>
193 
194             <div class="col-lg-2">
195                 <div class="goods_con">
196                     <img src="images/goods.jpg" class="img-responsive">
197                     <h4>商品名称</h4>
198                     <p>￥ <em>25.00</em>/500g</p>
199                 </div>
200             </div>
201         </div>
202     </div>
203 
204 <!--    页面尾部-->
205     <div class="container-fluid footer">
206         <div class="links">
207             <a href="#">关于我们</a>
208             <span>|</span>
209             <a href="#">联系我们</a>
210             <span>|</span>
211             <a href="#">招聘人才</a>
212             <span>|</span>
213             <a href="#">友情链接</a></div>
214         <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
215         <p>电话：010-****888    京ICP备*******8号</p>
216     </div>
217 </body>
218 </html>
View Code

index.css：

  1 .navbar-brand{
  2     padding: 5px 15px;
  3 }
  4 
  5 .navbar-inverse{
  6     background-color: #ff722b;
  7     border-color: #ff722b;
  8 }
  9 
 10 .navbar-inverse .navbar-nav>li>a {
 11     color:#ffffff;
 12 }
 13 
 14 .navbar-inverse .navbar-nav>.active>a,
 15 .navbar-inverse .navbar-nav>.active>a:hover,
 16 .navbar-inverse .navbar-nav>.active>a:focus {
 17     color:#fff;
 18     background-color:#c75922;
 19 }
 20 
 21 .navbar-inverse .navbar-toggle {
 22     border-color:#ffffff;
 23 }
 24 
 25 .navbar-inverse .navbar-toggle:hover,
 26 .navbar-inverse .navbar-toggle:focus{
 27     background-color:#c75922;
 28 }
 29 
 30 .navbar-inverse .navbar-collapse,
 31 .navbar-inverse .navbar-form {
 32     border-color:#ffffff;
 33 }
 34 
 35 .navbar {
 36     margin-bottom: 0px;
 37 }
 38 
 39 .jumbotron{
 40     background: url("../images/banner_bg.jpg") center center no-repeat;
 41     padding: 25px 0px;
 42 }
 43 
 44 .banner_title{
 45     margin-top: 47px;
 46 }
 47 
 48 @media (max-width: 1200px) {
 49     .banner_title{
 50         margin-top: 30px;
 51     }
 52 }
 53 
 54 @media (max-width: 992px) {
 55     .banner_title{
 56         margin-top: 15px;
 57     }
 58 }
 59 
 60 .jumbotron .banner_detail_title{
 61     font-size: 18px;
 62     color: #ffff00;
 63 }
 64 
 65 .jumbotron .banner_detail{
 66     font-size: 14px;
 67     color: #ffffff;
 68     line-height: 28px;
 69 }
 70 
 71 .active-info{
 72     margin: 0px;
 73 }
 74 
 75 .active-info h3{
 76     margin-top: 0px;
 77     font-size: 30px;
 78     color: #333;
 79 }
 80 
 81 .active-info p{
 82     font-size: 14px;
 83     color: #333;
 84 }
 85 
 86 .active-pic-list .thumbnail{
 87     max-width: 260px;
 88     margin: 0 auto 20px;
 89 }
 90 
 91 .active-pic-list .thumbnail h4{
 92     text-align: center;
 93     font-size: 15px;
 94     color: #333;
 95 }
 96 
 97 .common_title{
 98     background-color:#ff722b;
 99     margin:0;
100     height:40px;
101 }
102 
103 .common_title h3{
104     font-size:16px;
105     color:#fff;
106     line-height:40px;
107     margin:0;
108     text-indent:10px;
109 }
110 
111 .common_title a{
112     font-size:12px;
113     color:#fff;
114     margin:20px 10px 0 0;
115 }
116 
117 .goods_con{
118     border: 1px solid #dddddd;
119     margin: 0 auto 20px;
120     max-width: 260px;
121 }
122 
123 .goods_con img{
124     width: 100%;
125 }
126 
127 .goods_list{
128     margin-top:20px;
129 }
130 
131 .goods_list .col-lg-2{
132     width: 20%;
133 }
134 
135 @media (max-width: 1200px) {
136     .goods_list .col-lg-2{
137         width: 20%;
138         float: left;
139     }
140 }
141 
142 @media (max-width: 992px) {
143     .goods_list .col-lg-2{
144         width: 33.33%;
145         float: left;
146     }
147 }
148 
149 @media (max-width: 768px) {
150     .goods_list .col-lg-2{
151         width: 100%;
152         float: left;
153     }
154 }
155 
156 .goods_list .goods_con h4{
157     text-align: center;
158     font-size: 14px;
159     color: #666666;
160 }
161 
162 .goods_list .goods_con p{
163     text-align: center;
164     font-size: 16px;
165     color: #ff0000;
166     letter-spacing:2px;
167 }
168 
169 .goods_list .goods_con p em{
170     font-size: 22px;
171     font-style: normal;
172 }
173 
174 .footer{
175     background-color:#ff722b;
176     padding-bottom:20px;
177 }
178 
179 .footer .links{
180     text-align:center;
181     margin-top:35px;
182 }
183 
184 .footer .links a{
185     color:#fff;
186 }
187 
188 .footer .links span{
189     color:#fff;
190     padding:0 10px;
191 }
192 
193 .footer p{
194     text-align:center;
195     margin:10px 0;
196     color:#fff;
197 }
View Code
posted @ 2020-04-28 18:35  组装梦想  阅读(217)  评论(0)  编辑  收藏  举报