基于BootStrap实现商城首页

于 2021-11-24 20:57:14 发布
阅读量1.6k 收藏 17
点赞数 2
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_44116526/article/details/121524557
版权
这是一个展示JY书城首页的HTML代码，包括导航条、轮播图、图书分类和推荐书籍等内容。页面设计采用了Bootstrap框架，具有响应式布局，支持导航、搜索、轮播图片、商品展示等功能，同时提供了注册和登录链接以及多种图书分类选项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>书城首页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .title-text {
            font-size: 20px;
            font-weight: 600;
            color: #8E2323;
            text-align: center;
            height: 39px;
        }

        .title-tit {
            font-size: 15px;
            font-weight: 500;
            color: #8E2323;
            text-align: center;
            height: 20px;
        }

        .title-tex {
            text-align: center;
        }
    </style>
</head>
<body>
<!--头部-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">JY书城</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
        </ul>
    </div>
</nav>
<!--导航条-->
<div class="container">
    <div class="row">
        <div class="col-md-11">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">首页</a>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">图书</a>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">电子书</a>
                            </div>
                        </div>

                        <div>
                            <div class="col-md-4">
                                <form class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Search">
                                    </div>
                                    <button type="submit" class="btn btn-default">提交按钮</button>
                                </form>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-default navbar-btn">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown">
                                            我的中心 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">我的</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">购物车</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">我的订单</a></li>
                                        </ul>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </nav>
        </div>
    </div>

</div>
</div>
<!--轮播图-->
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <!--                <li class="active"><a href="#">Home</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>
        </div>
        <div class="col-md-6">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="1.jpg" alt="First slide">
                        <div class="carousel-caption">标题 1</div>
                    </div>
                    <div class="item">
                        <img src="1.jpg" alt="Second slide">
                        <div class="carousel-caption">标题 2</div>
                    </div>
                    <div class="item">
                        <img src="1.jpg" alt="Third slide">
                        <div class="carousel-caption">标题 3</div>
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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="col-md-3">
            <h5 style="margin-left:5px;">最新动态</h5>
            <ul >
                <li style="margin-top: 10px"><a href="#">爆品童书7.9折封顶，每满100减50</a></li>
                <li style="margin-top: 10px"><a href="#">人文历史，古籍文化，每满100减50</a></li>
                <li style="margin-top: 10px"><a href="#"> 人生哲学，职场学习，每满100减50</a></li>
                <li style="margin-top: 10px"><a href="#">人文历史，古籍文化，每满100减50</a></li>
                <li style="margin-top: 10px"><a href="#"> 人生哲学，职场学习，每满100减50</a></li>
            </ul>

        </div>
    </div>
</div>
<!--分行-->
<div class="container">
    <div class="row">
        <div class="col-md-11">
            <div class="page-header">
                <h3>精选
                    <small>文学</small>
                </h3>
            </div>
        </div>
    </div>
</div>
<!--精选-->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <img src="1.jpg"/>
            <p>
            <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
            </p>
            <p class="title-text">￥25</p>
            <p class="text-justify text-muted">
                对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行对齐文对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行对齐文本。该段落会根据屏幕的大小对超出屏幕的文字进行换行</p>
        </div>
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>

                </div>
                <div class="col-md-3">
                    <img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分行-->
<div class="container">
    <div class="row">
        <div class="col-md-11">
            <div class="page-header">
                <h3>优选
                    <small>名著</small>
                </h3>
            </div>
        </div>
    </div>
</div>
<!--优选-->
<div class="container">
    <div class="row">
        <div>
            <div class="row">
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
            </div>
            <div class="row">
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
                <div class="col-md-2"><img src="1.jpg"/>
                    <p>
                    <h5 class="title-tit" style="CURSOR:pointer">人间失格</h5>
                    </p>
                    <p class="title-text">￥25</p></div>
            </div>
        </div>
    </div>
</div>
<!--结尾-->
<div class="row">
    <div class="col-md-12 bg-success">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="row">
                    <div class="col-md-2 col-md-offset-1 bg-success">
                        <h1 class="title-text">JY商城</h1>
                    </div>
                    <div class="col-md-3 bg-success">
                        <h3 class="title-text">关于商城</h3>
                        <h5 class="title-tex">最新消息</h5>
                        <h5 class="title-tex">集团简介</h5>
                        <h5 class="title-tex">企业理念</h5>
                        <h5 class="title-tex">经营范畴</h5>
                        <h5 class="title-tex">质量保证</h5>
                        <h5 class="title-tex">社会责任</h5>
                    </div>
                    <div class="col-md-2 bg-success">
                        <h3 class="title-text">投资者关系</h3>
                        <h5 class="title-tex">企业资料</h5>
                        <h5 class="title-tex">企业管制</h5>
                        <h5 class="title-tex">财务摘要</h5>
                        <h5 class="title-tex">财务报表</h5>
                        <h5 class="title-tex">业绩简报</h5>
                        <h5 class="title-tex">公告及通告</h5>
                    </div>
                    <div class="col-md-2 bg-success">
                        <h3 class="title-text">关注我们</h3>

                        <h5 class="title-tex">信息技术系</h5>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>
狼牙yyy_
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值