bootstrap结课作品

实现响应式页面
摘要由CSDN通过智能技术生成

商品的主页效果图如下:

 商品详情的效果图如下:

里面的时间显示效果通过以下代码实现:

<script>

 <!-- 时间显示 -->

        var date=new Date;

        var hours=date.getHours();

        var div=document.querySelector('#ak');

       

        function getTime(){

            var time=new Date;

            var h=time.getHours();

            h=h<10?'0'+h:h;

            var m=time.getMinutes();

            m=m<10?'0'+m:m;

            var s=time.getSeconds();

            s=s<10?'0'+s:s;

            return

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个使用Bootstrap栅格系统布局的网页作品示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Grid System Example</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 1</h5> <p class="card-text">This is a sample card.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 2</h5> <p class="card-text">This is a sample card.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 3</h5> <p class="card-text">This is a sample card.</p> </div> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="card"> <div class="card-body"> <h5 class="card-title">Card 4</h5> <p class="card-text">This is a sample card.</p> </div> </div> </div> </div> </div> </body> </html> ``` 这个网页使用了Bootstrap的栅格系统布局,将页面分为4列,每列包含一个卡片。在不同的屏幕尺寸下,根据栅格系统的规则,卡片的大小和排列方式会自动调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lwhstart

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值