Day 05

最新推荐文章于 2023-04-19 21:02:32 发布
最新推荐文章于 2023-04-19 21:02:32 发布
阅读量62 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/addadsds/article/details/100760798
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>szj</title>
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
    a{
        color:antiquewhite;
        text-decoration: none;
    }
    a:hover{
        color: white;
        text-decoration: none;
    }
    a1{
        color:black;
        text-decoration: none;
    }
    a1:hover{
        color: white;
        text-decoration: none;
    }
    .k {
        position: fixed;
        top: 600px;
        left: 50%;
        margin-left: 680px;
        width: 46px;
        height: 46px;
        background-color: #777;
        font-size: 26px;
        text-align: center;
        line-height: 40px;
        color: #ccc;
        cursor: pointer;
    }
</style>
<script>
    window.addEventListener('load', function() {
        // 1.获取元素
        var k = document.querySelector('.k');
        // 2.注册点击事件
        k.addEventListener('click', function() {
            animate(window, 0);
        });

        function animate(obj, target, callback) {

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);

                    callback && callback();
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.top = window.scroll(0, window.pageYOffset + step); // window.scroll里不用加 px

            }, 15);
        }
    })
</script>
<body>
<div style="width:100%;background-color:rebeccapurple; ">
    <div class="navbar" style="background-color: black;padding-left:200px; color: white;height: 20px; padding-top: 10px">
        <a href="https://www.bootcss.com/" style="font-size: 17px;">Bootstrap中文25</a>
        <a href="https://v2.bootcss.com/"style="font-size: 17px;margin-left: 25px">Bootstrap2中文文档</a>
        <a href="https://v3.bootcss.com/"style="font-size: 17px;margin-left: 25px">Bootstrap3中文文档</a>
        <a href="https://v4.bootcss.com/"style="font-size: 17px;margin-left: 25px">Bootstrap4中文文档</a>
        <a href="https://www.bootcss.com/p/lesscss/"style="font-size: 17px;margin-left: 25px">Less教程</a>
        <a href="https://www.jquery123.com/"style="font-size: 17px;margin-left: 25px">JQery API</a>
        <a href="https://www.youzhan.org/"style="font-size: 17px;margin-left: 25px">网站实例</a>
        <a href="https://www.bootcss.com/about/"style="font-size: 13px;margin-left: 130px">关于</a>&nbsp&nbsp&nbsp

    </div>
    <div  style="width: 100%;height: 300px;background-color:rebeccapurple;text-align: center;color: white;margin-top: 50px;">
        <p style="font-size: 90px">Bootstrap</p>
        <p style="font-size: 30px" >简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
        <button style="background-color:#31b0d5;width: 300px;height: 50px;margin-top: 20px;font-size: 15px">Bootstrap3中文文档(v3.3.37)</button>
        <p style="font-size: 14px" >Bootstrap2中文文档(v2.3.2)</p>
    </div>
    <div style="width: 100%;height: 30px;background-color: #F5F5F5;text-align: center;color: black ;" >
        <P style="padding-top: 5px">Bootstrap问答社区&nbsp&nbsp&nbsp | &nbsp&nbsp&nbsp  &nbsp &nbsp &nbsp 新浪微博: @Bootstrap2中文网</p>

    </div>

</div>
<div class="container" style="background-color: white; margin-top: 40px">
    <div class="row text-center">
        <p class="col-md-12 "style="background-color:white">
        <h1>Bootstrap相关优质项目推荐</h1>
        </p>
        <p class="col-md-12 "style="background-color:white">
        <h6>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</h6>
        </p>
    </div>
    <div class="row" style="margin-top: 50px; ">
        <div class="col-md-3 col-md-pull-1"style="width: 260px;height: 330px;border: 1px solid black;" >
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>优站精选</h2></p>
                <p>Bootstrap 网站实例</p>
                <p><h6>
                Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
            </h6>
                </p>
            </div>

        </div>
        <div class="col-md-3 "style="width: 260px;height: 330px;border: 1px solid black;" >
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>Webpack</h2></p>
                <p>是前端资源模块化管理和打包工具</p>
                <p><h6>
                Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
            </h6>
                </p>
            </div>
        </div>
        <div class="col-md-3 col-md-push-1"style="width: 260px;height: 330px;border: 1px solid black;">
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>React</h2></p>
                <p>用于构建用户界面的 JavaScript 框架</p>
                <p><h6>
                React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
            </h6>
                </p>
            </div>
        </div>
        <div class="col-md-3 col-md-push-2"style="width: 260px;height: 330px;border: 1px solid black;">
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>TypeScript </h2></p>
                <p>中文手册</p>
                <p><h6>
                TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
            </h6>
                </p>
            </div>
        </div>
    </div>
    <div class="row text-center">
        <div class="col-md-3 col-md-pull-1"style="width: 260px;height: 330px;border: 1px solid black;margin-top: 40px;" >
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>jQuery API </h2></p>
                <p>中文手册</p>
                <p><h6>
                根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。
            </h6>
                </p>
            </div>
        </div>
        <div class="col-md-3 "style="width: 260px;height: 330px;border: 1px solid black;margin-top: 40px;" >
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="qe.jpg" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>Next.js</h2></p>
                <p>中文文档</p>
                <p><h6>
                Next.js 是一个轻量级的 React 服务端渲染应用框架。
            </h6>
                </p>
            </div>
        </div>
        <div class="col-md-3 col-md-push-1"style="width: 260px;height: 330px;border: 1px solid black;margin-top: 40px;">
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="img/47.png" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>Babel </h2></p>
                <p>是一个 JavaScript 编译器。</p>
                <p><h6>
                Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。
            </h6>
                </p>
            </div>
        </div>
        <div class="col-md-3 col-md-push-2"style="width: 260px;height: 330px;border: 1px solid black;margin-top: 40px;">
            <div style="width: 230px;height: 130px;background-color: red;margin-top: 5px;">
                <img src="img/48.png" style="width: 230px;height: 130px;">
            </div>
            <div style="width: 240px;text-align: center">
                <p><h2>Node.js</h2></p>
                <p>中文文档 / 手册</p>
                <p><h6>
                Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。
            </h6></p>
            </div>
        </div>
    </div>

</div>
<div style="width: 100%;height: 50px;">
    <div class="k">▲</div>
</div>
<img  style="width: 25px;height: 15px;  position:absolute;left: 550px;top: 405px" src="img/51.png">
<img  style="width: 25px;height: 15px;  position:absolute;left: 720px;top: 405px" src="img/52.png">
</body>

</html>

在这里插入图片描述

八 二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap首页demo效果
06-01
Bootstrap框架下的首页demo，动画效果丰富
bootstrap网站首页
weixin_44043233的博客
09-09 753
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="styles...
公告滚动
weixin_43549976的博客
09-19 505
公告滚动 setInterval() 按照指定的时间周期（以毫秒计）来调用函数或计算表达式 弊端：随着时间的推移内存占用会增多，时间长了可能会造成页面卡顿，严重的甚至浏览器崩溃 clearInterval() 取消由 setInterval() 函数设定的定时执行操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
bootstrap布局
m0_45301039的博客
01-10 810
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边
bootstrap 导入和 bootstrapv3的使用
m0_61973028的博客
04-27 2184
一、bootstrap的导入 如果要使用bootstrap，就必须在html文档中导入bootstrap的css样式和js脚本。从官网下载即可。 步骤如下： 二、bootstrap v3的使用 （一）container容器、row行，col-*-“分数”单元格 bootstrap采用的是flex弹性布局的技术实现的栅格系统，原理是把整个屏幕分为十二份和无数行，屏幕的情况分为了超大屏col-lg-（>=1200px,一般设置最小宽度为1170px）、中屏幕col-md-（>=992px,
Day05
03-13
"Day05"可能是指一个学习计划或课程的一部分，专门关注HTML的学习。在这个压缩包"Day05-master"中，我们可以期待找到与HTML相关的代码、教程或者练习项目。 HTML的基本构成包括元素（Elements）、标签（Tags）和...
PHP，使用ThinkPHP5和bootstrap开发一个班级公告管理网站
11ze的个人博客
08-25 2290
自己做的第一个web网站，使用tp5、bootstrap和MySQL数据库，用于发布、查看和管理班级公告。虽然是实训，但题目是自己想的，具体看文件Linux实训要求.txt。 bootstrap样式是直接在菜鸟教程里的可视化布局直接拉取替换的：https://www.runoob.com/try/bootstrap/layoutit/ 部署时请参考：https://www.cnblogs.co...
Bootstrap案列:首页界面
zyz博客
02-07 1383
在自学Bootstrap之后我开始完成一个旅游网项目的首页界面，本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <sc...
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5780
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Bootstarp详解(配有旅游网首页和头条首页，轻松实现轮播，导航等..)
superliug的博客
09-05 852
详解Bootstarp框架(不会让你失望的呦) 一、Bootstrap简介 Bootstrap是美国公司开发的一种基于HTML,CSS,JavaScript开发的一款简洁,直观，强悍的前端框架(总之一句话，很牛掰，反正菜鸟的我用的特别爽)，使得web开发更加更加敏捷，Bootstrap提供优雅的HTML和CSS规范,它是由动态的CSS语言Less组成，Bootstrap是在jQuery的基础上工作...
基于Bootstrap的垂直滚动新闻特效
07-06
基于Bootstrap的垂直滚动新闻特效
基于bootstrap金融平台网站管理后台模板
02-08
这套是基于bootstrap的金融平台网站管理后台模板，界面简洁大方，支持响应式，分享给大家
使用Bootstrap搭首页
m0_62839141的博客
04-01 1482
一，实现首页轮播图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例1:实现首页轮播图</title> <!-- 一如Bootatrap的CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <!-- 支持手..
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1486
bootstrap实现管理系统首页设计
(学习笔记)Bootstrap写一个简单的博客首页
qq_56508310的博客
03-16 976
Blog网站首页 一、效果图 二、代码部分 整体代码结构 1.导航栏代码 <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header">
Bootstrap-实现简单的网站首页
diaoweisang7683的博客
06-27 1743
html： 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt...
Bootstrap01【前端开发框架】家居商城首页之导航&轮播图
qq_73126462的博客
04-19 666
Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。如果要继续添加行，那么在 "class=container" 的 div里面继续添加 div 并设置 "class=row"；如果行里面要增加列，在 "class=row" 的 div里面继续添加 div并设置 "class=col"；运行项目，改变页面的大小，页面每行所显示的 div 的数量就会发生改变；，表示一行，意思是当前 div 为一行。
使用Bootstrap开发网站首页
liaowenxiong的博客
12-09 1071
视频1：https://live.csdn.net/v/182207 视频2：https://live.csdn.net/v/182208 视频3：https://live.csdn.net/v/182209
Bootstrap搭首页
weixin_68744539的博客
04-01 311
目录： 一、首页轮播图实现 组件：轮播-Carousel 二、首页书籍分类实现 组件：列表组-List group 三、首页新书上架&热门书籍实现 页面内容：画像-Figure 四、首页整合 完善轮播图（左右箭头 指示灯样式） 完善新书上架&热门书籍 五、实现登录&注册页面 组件：表单-Forms 案例1：首页轮播图实现 <div class="row" style="background-c...
性能测试 day05
最新发布
07-29
您好！对于性能测试来说，第五天的任务可能会有所不同，具体取决于您的测试计划和目标。下面是一些常见的性能测试任务和活动，供您参考： 1. 负载测试：通过模拟并发用户访问系统，评估系统在高负载情况下的性能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值