master

分支 (1)

管理

管理

master

Web-Study
/
Bootstrap+商城页面布局.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>Bootstrap</title>
  <style>
    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .img-responsive {
      display: block;
      margin: 10px auto;
    }

    .navbar {
      min-height: 29px;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <a class="navbar-brand">电子商店</a>
    </div>
    <div class="navbar-right" style="margin-right: 30px;">
      <div class="navbar-left">
        <form class="navbar-form">
          <input type="text" class="form-control" placeholder="输入商品" />
          <button type="submit" class="btn btn-primary">搜索</button>
        </form>
      </div>
      <div class="navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#">商品</a>
          </li>
          <li>
            <a href="#">注册</a>
          </li>
          <li>
            <a href="#">登录</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <section>
    <div class="center-block row">
      <div class="col-md-3">
        <div style="border: 1px solid #ccc;margin-bottom: 10px;">
          <ul class="nav nav-list">
            <li class="nav-header bg-primary">电子商品</li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">手机</a>
              </span>
              <span class="bg-success navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">笔记本</a>
              </span>
              <span class="bg-primary navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">平板</a>
              </span>
              <span class="bg-info navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">显示器</a>
              </span>
              <span class="bg-warning navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">游戏机</a>
              </span>
              <span class="bg-danger navbar-right">123</span>
            </li>
          </ul>
        </div>
        <div style="border: 1px solid #ccc;margin-bottom: 10px;">
          <ul class="nav nav-list">
            <li class="nav-header bg-primary">电子商品</li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">手机</a>
              </span>
              <span class="bg-success navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">笔记本</a>
              </span>
              <span class="bg-primary navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">平板</a>
              </span>
              <span class="bg-info navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">显示器</a>
              </span>
              <span class="bg-warning navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">游戏机</a>
              </span>
              <span class="bg-danger navbar-right">123</span>
            </li>
          </ul>
        </div>
        <div style="border: 1px solid #ccc;margin-bottom: 10px;">
          <ul class="nav nav-list">
            <li class="nav-header bg-primary">电子商品</li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">手机</a>
              </span>
              <span class="bg-success navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">笔记本</a>
              </span>
              <span class="bg-primary navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">平板</a>
              </span>
              <span class="bg-info navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">显示器</a>
              </span>
              <span class="bg-warning navbar-right">123</span>
            </li>
            <li style="margin-right: 20px;padding: 5px;">
              <span>
                <a href="#">游戏机</a>
              </span>
              <span class="bg-danger navbar-right">123</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-9">
        <div style="margin-bottom: 20px;">
          <div class="nav navbar bg-warning" style="font-size: 18px;text-align: left;">
            <a href="#">首页</a> / 手机</div>
          <div class="row">
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-bottom: 20px;">
          <div class="nav navbar bg-warning" style="font-size: 18px;text-align: left;">
            <a href="#">首页</a> / 手机</div>
          <div class="row">
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-bottom: 20px;">
          <div class="nav navbar bg-warning" style="font-size: 18px;text-align: left;">
            <a href="#">首页</a> / 手机</div>
          <div class="row">
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
            <div class="col-md-4">
              <div style="border: 1px solid #ccc; height: 390px;">
                <div>
                  <img width="200px; height:200px;" class="img-responsive" alt="Responsive image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2882284884,1913504836&fm=27&gp=0.jpg"
                  />
                </div>
                <p class="center-block">OPPO</p>
                <p class="center-block">1599</p>
                <p class="center-block">OPPO A57 3GB+32GB内存版</p>
                <p class="center-block">黑色 全网通4G手机 双卡双待</p>
                <button class="btn btn-success">立即购买</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer style="height: 40px;line-height: 40px;text-align: center;background-color: rgb(8, 7, 7);color: #ffffff">
    <p>&copy;2017| Email: info@itbegin.com</p>
  </footer>
</body>

</html>