zoukankan      html  css  js  c++  java
  • Bootstrap(项目2)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Pantry's Best 派送喜悦</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"> </script>
    <script src="js/bootstrap.js"></script>
    <script src="js/holder.js"></script>
    <style>
    @media(min- 992px){
    .thumbnail {
    border: none;
    max- 130%;
    height: auto
    }
    #mynav_content li{
    margin-right: 30px;
    color: white;
    }
    #select_nav{
    margin-right: 20px;
    }
    }
    @media (max- 768px) {
    #select_nav {
    margin-right: 20px;
    }

    #honeycarousel {
    margin-top: 100px;
    }

    .logo {
    margin-left: 120px;
    margin-right: 50px;
    }
    #sina,#weixin,#goodslistimg{
    display: none;
    }

    .thumbnail img {
    border: none;
    max-130%;
    height: auto;
    }
    .thumbnail {
    border: none;
    max-130%;
    height: auto
    }
    #footertext{
    text-align: center;
    }
    #phonelogo{

    }

    /*#shoppingcar {*/
    /*position: absolute;*/
    /*font-size: 20px;*/
    /*line-height: 30px;*/
    /*text-align: center;*/
    /*height: 30px;*/
    /* 30px;*/
    /**/
    /*margin-left: 200px;*/
    /*border-radius: 50%;*/
    /*margin-top: 120px;*/
    /*}*/

    /*#shoppingcar:hover {*/
    /**/
    /*}*/
    }

    </style>
    </head>
    <body>
    <nav class="navbar navbar-fixed-top" style="background-color: rgb(57, 12, 32)">
    <div class="navbar-header">
    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav">
    <p style="color: white">未登录</p>
    </button>
    <a href="#" class="logo"><img src="img/logo.png" alt=""></a>
    </div>
    <div class="nav navbar-collapse collapse" id="mynav" >
    <ul class="nav navbar-nav" id="mynav_content">
    <li><a href="#">English</a></li>
    <li>
    <a href="#sub1" class="navbar-collapse"data-toggle="collapse">当前城市:北京<span class="glyphicon glyphicon-triangle-bottom"></span></a>
    <ul id="sub1" class="collapse dropdown-menu">
    <li><a href="#">杭州</a></li>
    <li><a href="#">上海</a></li>
    <li><a href="#">广州</a></li>
    <li><a href="#">深圳</a></li>
    </ul>
    <li>
    <a href="#sub2" class="navbar-collapse"data-toggle="collapse">产品列表<span class="glyphicon glyphicon-triangle-bottom"></span></a>
    <ul id="sub2" class="collapse dropdown-menu" >
    <li><a href="#">迪士尼</a></li>
    <li><a href="#">蛋糕</a></li>
    <li><a href="#">纸杯蛋糕</a></li>
    <li><a href="#">礼盒</a></li>
    <li><a href="#">挞</a></li>
    <li><a href="#">派</a></li>
    <li><a href="#">素食</a></li>
    <li><a href="#">礼品卡</a></li>
    </ul>
    </li>
    <li><a href="#">门店</a></li>
    <li><a href="#">配送须知</a></li>
    <li><a href="#">活动</a></li>
    <li>
    <a href="#sub3" class="navbar-collapse" data-toggle="collapse">关于<span class="glyphicon glyphicon-triangle-bottom"></span></a>
    <ul id="sub3" class="collapse dropdown-menu">
    <li>我们</li>
    <li>会员</li>
    <li>礼品卡</li>
    </ul>
    </li>
    <li><a href="#">甜品台<img src="img/new_icon.png"></a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right" id="select_nav">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
    </ul>
    </div>
    </nav>

    <div class="carousel slide" data-ride="carousel" id="honeycarousel">
    <!--创建图片容器 -->
    <div class="carousel-inner">
    <div class="item active">
    <img src="img/1.jpg" alt="">
    </div>
    <div class="item">
    <img src="img/2.jpg" alt="">
    </div>
    <div class="item">
    <img src="img/3.jpg" alt="">

    </div>
    <div class="item">
    <img src="img/4.jpg" alt="">

    </div>
    <div class="item">
    <img src="img/5.jpg" alt="">

    </div>
    </div>
    <!--创建小圆点容器 -->
    <ol class="carousel-indicators">
    <li data-target="#honeycarousel" data-slide-to="0"></li>
    <li data-target="#honeycarousel" data-slide-to="1"></li>
    <li data-target="#honeycarousel" data-slide-to="2"></li>
    <li data-target="#honeycarousel" data-slide-to="3"></li>
    <li data-target="#honeycarousel" data-slide-to="4"></li>
    </ol>
    <!--创建左右按钮容器 -->
    <a href="#honeycarousel" class="carousel-control left" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#honeycarousel" class="carousel-control right" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>


    <div class="container">
    <div class="panel">
    <div class="panel-heading">
    <a href="#"><span class="glyphicon glyphicon-triangle-right"></span>产品列表</a>
    </div>
    </div>
    <div class="row" id="row1">
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods1.png" alt="">
    <p><a href="#">迪士尼</a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods2.png" alt="">
    <p><a href="#">礼盒</a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods3.jpg" alt="">
    <p><a href="#">蛋糕</a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods4.png" alt="">
    <p><a href="#">挞</a></p>
    </div>
    </div>

    </div>
    <div class="panel">
    <div class="panel-heading">
    <a href="#"><span class="glyphicon glyphicon-triangle-right"></span>新品推出</a>
    </div>
    </div>
    <div class="row" id="row2">
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods6.jpg" alt="">
    <p><a href="#"> 纯脆提拉米苏 6吋 ¥299 </a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods7.jpg" alt="">
    <p><a href="#"> 芒果空气感蛋糕 6吋 ¥249 </a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods8.jpg" alt="">
    <p><a href="#"> 荔枝玫瑰蛋糕 6吋 ¥299 </a></p>
    </div>
    </div>
    <div class="col-md-3 col-xs-6">
    <div class="thumbnail">
    <img src="img/goods9.jpg" alt="">
    <p><a href="#"> 素食迷你纸杯礼盒 礼盒 ¥199 </a></p>
    </div>
    </div>
    </div>


    <div class="row">
    <div class="col-md-4 col-xs-12" id="footertext">
    <p><span class="glyphicon glyphicon-earphone" style="color=lightgreen"></span>4008-3-14159</p>
    <p><span class="glyphicon glyphicon-envelope" style="color=lightgreen"></span>order@pantrysbest.com</p>
    </div>
    <div class="col-md-4">
    <span><a href="#" id="sina" ><img src="img/sina.png" style=" margin-left:120px;margin-right: 20px;height: 30px; 30px"></a> <a href="#"><img src="img/weixin.png" id="weixin" style="height: 30px; 30px"></a></span>
    </div>
    <div class="col-md-4">
    <img src="img/brand-icons1.png" id="goodslistimg" style=" 200px;height: 30px;margin-left: 150px">
    </div>
    </div>
    <div class="row">
    <div class="col-md-12"style="text-align: center">
    <p>北京市朝阳区神路街39号10幢3层4段92-93</p>
    <p> Copyright 2010-2017 派悦坊,Ltd 京ICP备12046340</p>
    </div>
    </div>

    </div>
    </body>
    </html>
  • 相关阅读:
    C/C++多文件之间的变量定义
    PKU POJ 2186 Popular Cows 强连通分量
    重载函数
    ZOJ 2763 Prison Break
    201357 训练赛总结
    hdu 4467 Graph 构造
    201356 训练赛总结
    201353 NEERC 2012, Eastern subregional contest
    2013512 CF 183 总结
    一道动态规划
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6918291.html
Copyright © 2011-2022 走看看