使用bootstrap ui制作商城

最新推荐文章于 2023-12-12 00:53:03 发布
最新推荐文章于 2023-12-12 00:53:03 发布
阅读量180 收藏
点赞数
文章标签： bootstrap ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67282071/article/details/131902207
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>欣知</title>

    <link rel="stylesheet" href="./boots/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="./boots/bootstrap/css/bootstrap-theme.min.css">

    <style>

        #top {

            background-color: white;

            box-shadow: 0 2px 3px gray;

        }

        #top a {

            color: rgb(128, 128, 128);

        }

        #logo nav img {

            line-height: 5px;

        }

        #logo nav a {

            color: black;

        }

        #lunbo{

            height: 400px;

        }

        #lunbo img{

            width: 100%;

            height: 400px;

        }

        #hot #top-text h3,#hot #top-text p{

            display: inline-block;

            line-height: 50px;

            margin: 0;

        }

        #hot #top-text{

            height: 50px;

        }

        #hot #down-img #left, #hot #down-img #right{

            height: 400px;

        }

        #hot #down-img #left img{

            width: 100%;

            height: 400px;

        }

        #hot #down-img #right>div{

            height: 200px;

        }

        #hot #down-img #right img{

            text-align: center;

        }

        #chao div img{

            width: 292px;

          height: 292px;

          margin-top: 10px;

        }

    </style>

</head>

<body>

  <!-- 顶部 -->

  <div class="container-fluid row" id="top">

    <div class="col-lg-6 text-center"><a href="">Free Shipping Worldwide - On All Order Over $1000</a></div>

    <div class="col-lg-6 text-center"><a href="">Store Locator Track Orders Credit Card English & Dollar</a></div>

</div>

<!-- 导航 -->

<div class="container" id="logo">

    <nav class="navbar">

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li class="active"><img src="./image/tmlogo.png" width="100px" height="40px" alt=""></li>

                <li><a href="#">Link</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                        aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li><a href="#">Something else here</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">One more separated link</a></li>

                    </ul>

                </li>

            </ul>

            <form class="navbar-form navbar-left">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Search">

                </div>

                <button type="submit" class="btn btn-default">Submit</button>

            </form>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">Link</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                        aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li><a href="#">Something else here</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                    </ul>

                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </nav>

</div>

<!-- 轮播图 -->

<div class="container" id="lunbo">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <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>

     

        <!-- Wrapper for slides -->

        <div class="carousel-inner" role="listbox">

          <div class="item active">

            <img src="./image/bg111.PNG" alt="...">

          </div>

          <div class="item">

            <img src="./image/bg222.PNG" alt="...">

          </div>

          <div class="item">

            <img src="./image/bg333.PNG" alt="...">

          </div>

        </div>

      </div>

</div>

<!-- 热门商品 -->

<div class="container" id="hot">

    <div id="top-text" class="row">

        <h3 class="col-lg-3">热门商品</h3>

        <p class="col-lg-9">根据您的喜好精心为您推荐优质商品</p>

    </div>

    <div id="down-img" class="row">

        <div class="col-lg-3" id="left"><img src="./image/clo.PNG" alt=""></div>

        <div class="col-lg-9" id="right">

            <div class="row">

                <img class="col-lg-6" src="./image/nnz.PNG" alt="">

                <img class="col-lg-3" src="./image/cb44.jpg" alt="">

                <img class="col-lg-3" src="./image/fd4.jpg" alt="">

            </div>

            <div class="row">

                <img class="col-lg-3" src="./image/ac2.jpg" alt="">

                <img class="col-lg-3" src="./image/q2.jpg" alt="">

                <img class="col-lg-6" src="./image/nnn.PNG" alt="">

            </div>

        </div>

    </div>

</div>

<!-- 潮牌来袭 -->

<div class="container" id="chao">

        <h3 class="text-center">潮牌来袭</h3>

        <div class="row">

            <img class="col-lg-3" src="./image/qqq067.jpg" alt="">

           <img class="col-lg-3" src="./image/qqq1.jpg" alt="">

           <img class="col-lg-3" src="./image/qqq28ab.jpg" alt="">

           <img class="col-lg-3 " src="./image/qqq3b2f.jpg" alt="">

        </div>

        <div class="row">

            <img class="col-lg-3" src="./image/qqq6c35.jpg" alt="">

            <img class="col-lg-3" src="./image/qqq7f2.jpg" alt="">

            <img class="col-lg-3 " src="./image/qqq880-1.jpg" alt="">

           <img class="col-lg-3 " src="./image/qqq980c.jpg" alt="">

        </div>

        <div class="row">

             <img class="col-lg-3 " src="./image/qqqcd1.jpg" alt="">

             <img class="col-lg-3 " src="./image/qqqcd8.jpg" alt="">

             <img class="col-lg-3 " src="./image/qqqdd12.jpg" alt="">

             <img class="col-lg-3 " src="./image/qqqf06.jpg" alt="">

        </div>

</div>

<script src="./boots/jquery-3.1.1.min.js"></script>

<script src="./boots/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

小马807
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap网上购物商城.zip
07-29
bootstrap网上购物商城，仿天猫商城界面
Java项目:二手汽车商城管理系统(java+JSP+bootstrap+SSM+Mysql)
一位性感程序员的博客
07-07 247
本项目共分为管理员、用户、店员三种角色： 管理员角色包含以下功能： 管理员登录,在售车辆管理,品牌管理,品牌分类管理,推荐车辆,订单管理,销量统计等功能。用户角色包含以下功能： 用户登录,用户角色首页,购物商城,查看购物车,订单管理,个人信息修改,关于我们等功能。店员角色包含以下功能： 添加删除修改二手车,订单管理,销量统计,个人信息修改等功能。1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推
Bootstrap03购物车页面&登录注册界面&其他组件使用
qq_73126462的博客
04-21 1784
【代码】Bootstrap03购物车页面&登录注册界面&其他组件使用。
BootStrap实现商城index页面前端效果------商城项目前端
春风若有怜花意，可否许我再少年
12-12 866
BootStrap实现商城index页面前端效果------商城项目前端
基于bootstrap设计的手机商城
01-29
基于bootstrap设计的手机商城，比较轻量级，前端各功能的页面齐全，加入后端接口调用，本人转载来的优质资源，可以直接用~~
Bootstrap制作超酷进度条UI动画
04-02
Bootstrap制作超酷进度条UI动画是一款在原生Bootstrap进度条组件的基础上，通过简单CSS3代码制作出炫酷的进度条动画特效。
Bootstrap制作超酷进度条UI动画特效代码
03-20
在本教程中，我们将探讨如何利用Bootstrap制作超酷的进度条UI动画特效。这个特效不仅能够提升用户体验，还能让网页设计更具吸引力。 首先，要创建一个基本的Bootstrap进度条，我们需要在HTML文件中引入Bootstrap的...
时尚的bootstrap5管理后台UI框架 - Neptune
最新发布
04-17
Bootstrap5是目前非常流行的一款前端开发框架，尤其在构建用户界面（UI）方面表现出色，尤其是在制作管理后台界面时。Neptune是一款基于Bootstrap5的管理后台UI框架，它以其时尚的设计和丰富的功能，为开发者提供了...
bootstrap-ui-portfolio：使用bootstrap框架制作的Web UI。 逐块设计
02-12
设计块项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
Bootstrap制作超酷进度条UI动画.zip
11-16
这个压缩包"Bootstrap制作超酷进度条UI动画.zip"显然包含了利用Bootstrap来创建具有动态效果的进度条界面的相关资源。让我们深入探讨一下如何使用Bootstrap、CSS、JavaScript（包括jQuery）以及HTML5来实现这样的...
6套响应html5后台,基于Bootstrap的商城后台管理系统模板Moltran
11-16
基于Bootstrap的商城后台管理系统模板Moltran，四套风格，个人觉得很漂亮，很好用，演示地址：http://demo.srfish.com/
基于bootstrap的移动web商城前端UI
07-06
这是移动web开发技术的课程设计源码，使用HTML+JavaScript+CSS完成移动商城的系列前端UI。基于bootstrap实现响应式网页。因为服务器不是我的，所以页面请求的服务器数据不保证时效性哦。
2023全新UI H5购物商城系统源码支持易支付 首发.zip
05-11
2023全新UI H5购物商城系统源码|支持易支付
基于spring mvc、spring、hibernate、bootstrap 的网上商城源码下载
07-26
基于spring mvc、spring、hibernate、bootstrap 的网上商城源码下载
利用Bootstrap、jQuery、Html、CSS等设计蛋糕商城注册页面
m0_58736001的博客
05-16 5745
2.通过css.js来修改bootstrap导航样式与鼠标滑动效果。
基于Bootstrap的登录&注册模板（html+css）
热门推荐
皮埃尔的博客
01-28 1万+
基于Bootstrap的登录&注册模板（html+css），适合django等框架，可直接修改对接后端。
BootStrap实现商城首页
m0_37286282的博客
09-10 1万+
BootStrap作为一个JS框架，在web开发上带来的便捷实在太大了。如图 这是个特别方便的文档，可以下载离线，也可以在官网上直接用。 附上一个效果图及自己的代码： 效果图就是这样，有很多框架就是直接官网模板复制过来简单的修改一下，而且很美观。 Bootstrap 101 Template
【一、bootstrap框架前端注册登录页面】
weixin_51988564的博客
03-28 4130
基于eclipse平台，java语言开发，前端用到bootstrap框架，后端使用jsp技术和servlet技术，数据库使用mysql，服务器端使用tomcat,设计并开发一个电子相册系统。
Bootstrap(首页整和&&实现登录、注册)
m0_68332494的博客
05-01 2752
首页整和以及实现登录、注册 案例1：首页轮播图实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1：首页轮播图实现</title> <!-- 引入bootstrap样式 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> .
Bootstrap与jQuery UI响应式框架实战指南
- 入门阶段：首先介绍了Bootstrap的基本概念，包括其文件结构和标准模板的使用。通过操作案例，学习者可以实际动手将Bootstrap应用于页面中。 - 功能介绍：深入探讨了Bootstrap的构成模块，如响应式媒体查询、主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值