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++通过WMI和系统API函数获取获取系统硬件配置信息
    C++ 获取mac地址
    解决Win7下UAC开启时无法响应WM_DROPFILES消息
    C++vector迭代器失效的问题
    解决Duilib创建的win32窗口拖到屏幕上边缘自动最大化
    VC++获取计算机Hardware Information (CPU ID, MainBoard Info, Hard Disk Serial, System Information)
    VC++实现在系统托盘来新消息闪烁,鼠标悬停显示窗口
    正则表达式的懒惰匹配?
    thinkphp-许愿墙-3
    thinkphp-许愿墙-2
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6918291.html
Copyright © 2011-2022 走看看