BootStrap实例

2018-01-30 19:23:43来源:cnblogs.com作者:一清人点击

分享

使用BootStrap做一个简单的商城首页

代码:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>商城首页</title>        <link href="css/bootstrap.min.css" rel="stylesheet">        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>    </head>    <body>        <div class="container">            <div class="row">                <div class="col-lg-4 col-md-4 col-sm-6">                    <img src="img/logo.png" height="51px">                </div>                <div class="col-lg-5 col-md-5 hidden-xs col-sm-6">                    <img src="img/header.png">                </div>                <div class="col-lg-3 col-md-3 col-sm-12" style="padding-top: 15px;">                    <a href="#">登录</a>                    <a href="#">注册</a>                    <a href="#">购物车</a>                </div>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <nav class="navbar navbar-inverse">                <div class="container-fluid">                    <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="#">首页</a>                    </div>                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                        <ul class="nav navbar-nav">                            <li class="active">                                <a href="#">智能手机<span class="sr-only">(current)</span></a>                            </li>                            <li>                                <a href="#">家用电器</a>                            </li>                            <li>                                <a href="#">电脑办公</a>                            </li>                            <li>                                <a href="#">品牌服装</a>                            </li>                            <li class="dropdown">                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类<span class="caret"></span></a>                                <ul class="dropdown-menu">                                    <li>                                        <a href="#">智能手机</a>                                    </li>                                    <li>                                        <a href="#">家用电器</a>                                    </li>                                    <li>                                        <a href="#">电脑办公</a>                                    </li>                                    <li>                                        <a href="#">品牌服装</a>                                    </li>                                </ul>                            </li>                        </ul>                        <form class="navbar-form navbar-right">                            <div class="form-group">                                <input type="text" class="form-control" placeholder="搜索">                            </div>                            <button type="submit" class="btn btn-default">搜索</button>                        </form>                    </div>                </div>            </nav>        </div>        <div class="container">            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                <ol class="carousel-indicators">                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>                </ol>                <div class="carousel-inner" role="listbox">                    <div class="item active">                        <img src="img/1.jpg" alt="...">                        <div class="carousel-caption">                            ...                        </div>                    </div>                    <div class="item">                        <img src="img/2.jpg" alt="...">                        <div class="carousel-caption">                        </div>                    </div>                    <div class="item">                        <img src="img/3.jpg" alt="...">                        <div class="carousel-caption">                        </div>                    </div>                    ...                </div>                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>                    <span class="sr-only">Previous</span>                </a>                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                    <span class="sr-only">Next</span>                </a>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <!--文字内容-->            <div class="row">                <span style="font-size: 30px; padding-left: 30px;">                    热门商品&nbsp;&nbsp;&nbsp;                    <img src="img/title2.jpg" />                </span>            </div>            <!--图片内容-->            <div class="row">                <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;">                    <img src="img/big01.jpg" height="100%" />                </div>                <div class="col-md-10 col-sm-10" style="padding-left: 10px;">                    <div class="row">                        <div class="col-md-6 hidden-xs hidden-sm" style="height: 200px; width: 490px;">                            <img src="img/middle01.jpg" height="100%" width="100%" />                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                    </div>                    <div class="row">                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                    </div>                </div>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <div class="row">                <div class="col-lg-12 col-md-12 hidden-sm hidden-xs" style="padding-left: 15px;">                    <img src="img/ad.jpg" width="100%" />                </div>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <!--文字内容-->            <div class="row">                <span style="font-size: 30px; padding-left: 30px;">                    最新商品&nbsp;&nbsp;&nbsp;                    <img src="img/title2.jpg" />                </span>            </div>            <!--图片内容-->            <div class="row">                <div class="col-md-2 col-sm-2 hidden-xs hidden-sm" style="height: 400px;">                    <img src="img/big01.jpg" height="100%" />                </div>                <div class="col-md-10 col-sm-10" style="padding-left: 10px;">                    <div class="row">                        <div class="col-md-6 hidden-xs hidden-sm" style="height: 200px; width: 490px;">                            <img src="img/middle01.jpg" height="100%" width="100%" />                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                    </div>                    <div class="row">                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small09.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small03.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                        <div class="col-md-2 col-sm-4 col-xs-6" align="center">                            <img src="img/small02.jpg" />                            <p>                                <font color="gray">商品名</font>                            </p>                            <p>                                <font color="red">¥666</font>                            </p>                        </div>                    </div>                </div>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <div class="row">                <div class="col-lg-12 col-md-12 hidden-sm hidden-xs" style="padding-left: 15px;">                    <img src="img/footer.jpg" width="100%" />                </div>            </div>        </div>        <div class="container" style="margin-top: 10px;">            <div class="row">                <div align="center">                    <ul class="list-inline">                        <li>                            <a>关于我们</a>                        </li>                        <li>                            <a>联系我们</a>                        </li>                        <li>                            <a>招贤纳士</a>                        </li>                        <li>                            <a>法律声明</a>                        </li>                        <li>                            <a>友情链接</a>                        </li>                        <li>                            <a>支付方式</a>                        </li>                        <li>                            <a>配送方式</a>                        </li>                        <li>                            <a>服务声明</a>                        </li>                        <li>                            <a>广告声明</a>                        </li>                    </ul>                </div>                <div style="text-align: center;margin-top: 5px;margin-bottom:20px;">                    Copyright &copy; 1998-2018 版权所有                </div>            </div>        </div>    </body></html>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台