基于BootStrap实现商城首页

最新推荐文章于 2024-06-01 11:07:49 发布
最新推荐文章于 2024-06-01 11:07:49 发布
阅读量1.5k 收藏 17
点赞数 2
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44116526/article/details/121524557
版权 
<!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_
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot网上商城(源代码+数据库)
weixin_45844165的博客
05-23 2058
前台商城系统：包含首页登录、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。后台管理系统：包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。基础环境 :IDEA/eclipse, JDK 1.8, Mysql5.7,Maven源码+数据库脚本所有项目以及源代码本人均调试运行无问题 可支持远程调试运行。
基于springboot+bootstrap+thymeleaf的物联网一站式宠物管理平台（领养、救助、商城）设计 毕业论文+用户手册+源码清单+项目源码及数据库文件
m0_66682818的博客
01-26 4620
下载：https://download.csdn.net/download/m0_66682818/77957797 项目介绍: 基于springboot+bootstrap+thymeleaf的物联网一站式宠物管理平台（领养、救助、商城）设计 毕业论文+用户手册+源码清单+项目源码及数据库文件 系统说明: 目录 1、引言 2 1.1、团队介绍 2 1.2、背景 2 1.3、定义 2 2、需求分析 3 2.1、功能介绍 3 2.1.1、“宠物去哪” 3 2.1.2、“带我回家” 3 2.1.3、“问我问我”
基于bootstrap的网站首页
04-25
运用bootstrap框架排版的企业网站首页
利用bootstrap实现简单页面设计
吟游诗人——吟唱生命的不朽
07-09 6521
最近在FreeCodeCamp上重温网页前端，并且也学习了一些新东西，这个便是用bootstrap制作的一个简单的前端页面。 代码发布在codepen上，点击访问：BlogDemo 上个图，虽然比较简单，但是用了bootstrap框架后适配性还是不错的，手机上访问没问题。 下面对代码进行一些详细讲解啦~(≧▽≦)/~ 因为没有动态页面所以没有用到js，css用的也不多，主要是用的bootst
HTML5期末大作业：游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript
网页设计与制作 | HTML+CSS+JS
06-01 815
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
基于bootstrap开发的电子商城首页项目
05-06
基于bootstrap开发的电子商城首页项目，其使用的技术HTML+css3，
【Bootstrap实战】用Bootstrap实战写一个完整的商城科技网站(源码附上~)
go
03-22 4375
直入主题~~看效果图: 前言: 页面自己设计的,用Bootstrap布局写一个完整的科技网站静态首页页面,所用技术是前端:html+css+js+bootstrap,通过页面实战来运用前端框架Bootstrap,从而对其有更好的运用和了解~~ ...
Bootstrap(实现搜索书籍页面&&购物车页面以及订单)
m0_68332494的博客
05-04 3473
运用Bootstrap实现以下案例： 案例1：实现搜索书籍页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：实现搜索书籍页面</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&
基于Bootstrap实现城市三级联动
08-28
总之，基于Bootstrap实现的城市三级联动是一种常见的前端交互功能，它利用Ajax技术和jQuery事件监听来实现动态数据加载。通过这种方式，我们可以创建一个响应迅速且用户友好的界面，允许用户方便地在多个级别的地理...
基于bootstrap实现的潮流服装商城html模板
最新发布
06-09
基于Bootstrap实现的潮流服装商城HTML模板，为用户呈现了一个时尚前沿、交互便捷的在线购物环境。以下是对该模板核心功能的简洁描述： 该模板充分利用Bootstrap的响应式特性，确保网站能够在不同设备上流畅显示，为...
基于bootstrap实现的服装鞋帽购物商城网站html模板
06-09
基于Bootstrap实现的服装鞋帽购物商城网站HTML模板，为在线购物提供了直观且用户友好的界面。以下是其主要功能描述： 首先，该模板采用Bootstrap框架，确保了网站的响应式设计，能够自适应各种屏幕尺寸，从而为用户...
Bootstrap响应式注册登录界面模板
05-13
Bootstrap响应式注册登录界面模板基于Bootstrap4.2.1制作，自适应分辨率，兼容PC端和移动端，有注册、登录两个页面模板。
bootstrap4实现购物商城
06-18
在"bootstrap4实现购物商城"这个项目中，我们将会探讨如何利用Bootstrap 4的强大功能来创建一个功能完备、视觉吸引人的在线购物平台。 首先，Bootstrap 4 提供了一套完整的网格系统，允许开发者轻松地创建多列布局...
使用bootstrap编写登录注册页面，半透明仿苹果系统风格。
热门推荐
Anakki的博客
12-03 1万+
效果图： html代码：（代码不全） <!--登录按钮--> <div class="col-xs-1 col-xs-offset-9 aTopAndBottom"> <a href="" data-toggle="modal" data-target="#login"> <span c...
Java全新高大尚HTML5 bootstrap后台框架源码
xiaodoudou的专栏
06-15 3833
Java全新高大尚HTML5 bootstrap后台框架源码 A 代码生成器(开发利器); 增删改查的处理类，service层，mybatis的xml，SQL( mysql 和oracle)脚本, jsp页面 都生成 就不用写搬砖的代码了,生成的放到项目里，可以直接运行 B 阿里巴巴数据库连接池druid; 数据库连接池 阿里巴巴的 druid。Druid在监
PHP+mysql+bootstrap在线游戏商城网站(附源码 调试 文档)
shenchengyv的博客
11-13 244
摘要：本文介绍了一种基于PHP语言的在线游戏商城网站，系统分为管理员和会员用户两种角色。管理员可以通过系统进行会员管理、分类管理、商品管理、订单管理、新闻管理和留言管理等操作。会员用户则可以通过系统进行注册登录、商品搜索、分类筛选、商品详细查看、在线下单、购物车管理、留言板留言和查看新闻公告等操作。本系统的服务器主要采用了PHP语言的Thinkphp框架和MySQL数据库。本文详细介绍了该系统的设计、实现及测试过程，并对其进行了评估。
Springboot毕设项目地铁站自动售票系统77x9w（java+VUE+Mybatis+Maven+Mysql）
sheji298的博客
09-15 1789
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。2. 前端：vue+css+javascript+jQuery+easyUI+highcharts。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；
基于Bootstrap的响应式后台管理模板Ace
chendaike的博客
07-16 2579
Ace是一个轻量级、功能丰富，基于Bootstrap3的响应式后台管理模板。支持多种皮肤，集成了多种插件，如Bootstrap，jQuery UI等、支持IE 8/9/10/11、Chrome、Firefox、Opera、Safari等主流浏览器，支持多种终端设备的展示。 Ace Admin演示网址：http://ace.jeka.by/ Ace Admin Git网址：https://githu...
后台管理系统示例：bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
qq_39231899的博客
04-07 6001
后台管理系统示例：通过bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
vue基于bootstrap实现的在线商城前端整站源码
05-14
本文提到的Vue基于Bootstrap实现的在线商城前端整站源码，是一个快速搭建电商网站的完整工程。 这个工程包括了网站的主页、商品列表页、商品详情页、购物车页、登录注册页、用户中心页等多个页面。采用Vue-router...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值