當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/7/5 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了利用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">  ? </head> <body>  <nav class="navbar navbar-inverse navbar-static-top">  <div class="container">  <div class="navbar-header">   <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>  <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> ?   <div class="jumbotron">  <div class="container"> <div class="row">  <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>  <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> ?  <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">  <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">  <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">  <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">  <div class="thumbnail"> <img src="images/active04.jpg" alt="水果藝術拼盤" class="img-responsive"> <h4>水果藝術拼盤</h4> </div> </div> </div> </div> ?    <div class="container"> <div class="row common_title"> <h3 class="pull-left">推薦商品</h3> <a href="" class="pull-right">更多>></a> </div> </div> ?  <div class="container goods_list"> <div class="row"> <div class="col-lg-2">  <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"> <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">  <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">  <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"> <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"> <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"> <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"> <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"> <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"> <a href="#"><img src="images/goods.jpg" alt="商品圖片"></a> <h4>進口草莓</h4> <p>￥ <em>25.00</em>/500g</p> </div> </div> ? </div> </div> ?  <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

總結

以上是生活随笔為你收集整理的利用bootstrap框架做了一个采摘节节日活动网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java操作redis的操作_Java操
下一篇： TCP协议以及三次握手