BootStrap响应式项目实战之世界杯网页设计

news2025/7/27 19:17:10

BootStrap实战

目标

响应式布局复习

HTML5的复习

CSS3的复习

了解BootStrap

一.复习

ng

响应式布局：页面可以随着设备的变化而动态改变。
在这里插入图片描述

​ 淘宝：pc端一套页面：不能随着屏幕的缩小而变化；

​ 移动端：另外一套页面，可以随着屏幕的放大、缩小改变（m.taobao.com)

阿里公司：财大气粗可以做多套页面。

​ 苹果公司：一套页面，随着pc、pad、手机端多端变化而变化。

优点：

​ 1.适配多端；

​ 2.页面简介

缺点：

​ 1.页面内容要更多，因为要适配不同的设备；

​ 2.技术要求更广泛。

二.BootStrap

框架：前端框架

​ 所谓框架，就是一个软件的半成品，由大型软件公司（比较牛X)的架构师设计出来，供广大程序员使用，在这个框架基础上进行二次的研发,研发网页、软件系统等等。

​ 建筑行业，前期学的结构力学、工程学，可能去工地搬砖，最终设计师、监理等，建筑的框架，成品图纸、塔吊、等快速搭建的设备。

中文网：https://v3.bootcss.com/

2.1 站点欣赏：星巴克等

在这里插入图片描述

2.2 下载源码

在这里插入图片描述

在本地磁盘创建目录，worldcup–>拷贝下载的bootstrap代码过来。

a)新建一个index.html

b)将jquery.3.3.1.js复制到bootstrap下的js目录里面；

c)在index.html里面做下引用；引用顺序bootstrap.css->jquery 3.3.1.js–>bootstrap.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站(世界杯、美妆）</title>
    <!-- 我们要使用前框框架，拿过来就可以了。 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <h1>Hello BootStrap</h1>
</body>

</html>

2.3栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)
栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度None （自动）750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-

注意：

​ 1.屏幕适配的时候，从大到小的适配，当无法显示的时候，一行占据小屏的最大宽度；

​ 2.当设计的是小屏幕尺寸，变为大屏的时候，向上兼容模式；

三.项目

3.1 设计布局

<div class="container">
        <div class="row">
            <div class="col-lg-2">
              左侧部分
            </div>
            <div class="col-lg-7">中间部分</div>
            <div class="col-lg-3">右侧部分</div>
        </div>
    </div>

3.2 左侧效果

在左侧部分设计增加logo和导航部分。

<!-- 设计左侧Logo+导航 -->
<div class="logo">
    <img src="./img/logo.jpg" title="2022世界杯">
</div>
<div class="nav">
 <ul>
    <li><a href="#" class="glyphicon glyphicon-eur">欧罗巴</a></li>
    <li><a href="#" class="glyphicon glyphicon-indent-left">桑巴军团</a></li>
    <li><a href="#" class="glyphicon glyphicon-heart">铁血战车</a></li>
    <li><a href="#" class="glyphicon glyphicon-tower">非洲劲旅</a></li>
    <li><a href="#" class="glyphicon glyphicon-piggy-bank">东亚雄鸡</a></li>
  </ul>
</div>

样式设置

/* 设计世界杯自身的样式;在logo的图片设置为宽 高 各站100% */
.logo img {
    width: 100%;
    height: 100%;
}
.nav {
    background-color: #eee;
}
/* 设计ul的列表样式为none; padding:0；设置li和ul的间隙为0；ul默认有间隙存在;
margin:ul和它外部的元素，边界为0；
*/

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 由于a标签是行级元素，设置宽 高无效，需要让它设置为块元素;
    padding-left:左内填充，a内部左填充30px;
    line-height:50px;和元素高度一致，会垂直居中;
*/
.nav ul a {
    display: block;
    color: #666;
    padding-left: 30px;
    height: 50px;
    font-size: 15px;
    line-height: 50px;
}
/* text-decoration: none;设置字体的下划线样式，去除 下划线； */
.nav ul a:hover {
    background-color: white;
    color: #222;
    text-decoration: none;
}
.nav a::before {
    color: red;
    padding-right: 8px;
    vertical-align: middle;
}
li {}

3.3 中间部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gm9aceUB-1668781706054)(asseits/image-20221116095121339.png)]

先看大框架，分上下两部分.

<div class="col-lg-7">
    <div class="news"></div>
    <div class="page"></div>
</div>

3.3.1 上面图片内容

<ul>
    <li class="one">
        <a href="#">
            <img src="./img/news01.jpg" class="img-rounded">
            <p>头号球星</p>
        </a>
    </li>
    <li><a href="#">
            <img src="./img/news-2.jpg" class="img-thumbnail">
            <p>头号球星</p>
        </a></li>
    <li><a href="#">
            <img src="./img/news-3.jpg" class="img-thumbnail">
            <p>头号球星</p>
        </a></li>
    <li><a href="#">
            <img src="./img/news-4.jpg" class="img-thumbnail">
            <p>头号球星</p>
        </a></li>
    <li><a href="#">
            <img src="./img/news-5.jpg" class="img-thumbnail">
            <p>头号球星</p>
        </a></li>
</ul>

3.3.2 上面样式设置


.news li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}

/* news块元素li  a下的子元素p ;position: absolute;绝对定位;
 设置位置left top right bottom;  margin-bottom: 0;外边界底部为0；
 background-color: rgba(0, 0, 0, 0.5);设置背景色半透明;
*/
.news li a p {
    width: 100%;
    height: 40px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0;
    line-height: 40px;
    left: 0;
    color: white;
}

/* 由于我们的a标签需要在这里容纳img p块元素；把它转化为块元素;
 新闻news块 li  a;position: relative;相对定位；此处的作用是为了 容纳p子元素；
*/
.news li a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

/* 设计新闻 块 li下的a标签下的图片 */
.news li a img {
    width: 100%;
    height: 100%;
}



/* 这个表示类样式是one的li元素; li:nth-child(1) */
li.one {
    width: 50%;
    height: 266px;
}

/* transition 延迟时间; */
img {
    transition: all 2s;
}

/* 鼠标悬停;transform: scale(1.05); scale 变多大; */
img:hover {
    transform: scale(1.05);
}

3.3.3 下面图文设置

重新来了解一下 布局大小。

<div class="row">
    <div class="col-sm-2 aimg">
        <img src="./img/zuoxia.jpg" alt="">
    </div>
    <div class="col-sm-10">
        <p>克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo dos Santos
            Aveiro），简称“C罗”，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，葡萄牙职业足球运动员司职边锋/中锋，
            现效力于英超的曼彻斯特联足球俱乐部</p>

        <p class="lbl">阅读(101) 查看评论 标签：C罗 葡萄牙 曼联 骡子 梅西德比</p>
    </div>
</div>

3.3.4 下面图文样式

/* 中 下界面样式 */
.aimg img {
    width: 100%;
    height: 100%;
}

p.lbl {
    color: #666
}

效果预览：

在这里插入图片描述

3.4补充表格

为任意 标签添加 .table` 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

 <table class="table table-striped table-hover">
        <caption>积分榜</caption>
        <tr style="background: #990031;">
            <td>A组</td>
            <td>积分</td>
            <td>场次</td>
            <td>胜</td>
            <td>平</td>
            <td>负</td>
            <td>进/失</td>
        </tr>

效果单图一

在这里插入图片描述

综合排名图二

在这里插入图片描述

3.5右侧部分

3.5.1 右侧实现

网页数据

<aside class="col-md-3">
    <a href="#" class="banner">
        <img src="./img/you.png" alt="">
    </a>
    <a href="#" class="hot">
        <span class="btn btn-primary">热搜</span>
        <h4 class="text-primary">欢迎来到中东</h4>
        <p>足球竞猜</p>
        <img src="./img/youxia.png" alt="">
    </a>
</aside>

样式设置

.col-lg-3 a {
    text-decoration: none;
}
.banner img {
    width: 100%;    height: 100%;
}
.hot {
    display: block;    margin-top: 20px;
    padding: 0 20px 20px;    border: 1px solid #eee;
}
.hot span {    border-radius: 0;}
.hot p {    font-size: 12px;}

3.5.2 轮播插件补充

一般用于广告、图片等重点内容展示。

    <!-- 1.引用css和js文件 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <script src="../bootstrap/js/jquery-3.3.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>

<style>
    #carousel-example-generic,
    .carousel-inner .item {
        margin: 0 auto;
        width: 550px;
        height: 330px;
    }

    #carousel-example-generic .carousel-inner .item img {
        width: 100%;
        height: 100%;
    }
</style>
<!-- 2.插件;轮播插件 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 2.1 三个点;active:活动点的激活； -->
<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>

<!-- 2.2 轮播元素，img图片. -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="../img/news-2.jpg">
    </div>
    <div class="item">
        <img src="../img/news-3.jpg" alt="...">
    </div>
    <div class="item">
        <img src="../img/news-5.jpg" alt="...">
    </div>
</div>

<!-- 2.3 向左 向右的箭头 -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

效果图

在这里插入图片描述

3.5.3 手风琴

主要用于信息展示的场景，文字为主。

//第一步还是在js中引入css jquery.js bootstrap.js文件。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    C骡
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo dos Santos Aveiro），简称“C罗”，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，葡萄牙职业足球运动员
            </div>
        </div>
    </div>
    ...可以复制多个
</div>

效果图

在这里插入图片描述

3.6优化

BootStrap基于媒体查询（media query）实现的,栅格系统，即根据当前设备的尺寸等信息控制具体采用哪种 css样式。

1.max-width 最大宽度，当有多个媒体查询书写时，顺序从大到小
2.mix-width 最小宽度，当有多个媒体查询书写时，顺序从小到大
媒体查询完整写法：
@media 关键词  媒体类型 and (媒体特性) { css代码 }
关键词：  
and 连接另外一个条件 ：
（min-width:768px）and (max-width:991px)
only 仅这一个条件满足时
ont 非，取反
媒体类型：是用来区分设备类型的，例如打印机，手机电脑等等
	screen 带屏幕的设备
	print 打印预览模式
	speech 屏幕阅读模式
	all 默认值，包含上面三种模式

  1. @media mediatype and|not|only (media feature) {

    ​ CSS-Code;`

  2. }

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
.visible-xs-*可见隐藏隐藏隐藏
.visible-sm-*隐藏可见隐藏隐藏
.visible-md-*隐藏隐藏可见隐藏
.visible-lg-*隐藏隐藏隐藏可见
.hidden-xs隐藏可见可见可见
.hidden-sm可见隐藏可见可见
.hidden-md可见可见隐藏可见
.hidden-lg可见可见可见隐藏

3.6.1 图片小屏隐藏

 class="hidden-xs"

css的设计

.logo {   background-color: #a30029;}
/* 设计世界杯自身的样式;在logo的图片设置为宽 高 各站100% */
.logo img {
    /* width: 100%; */
    max-width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

在这里插入图片描述

3.6.2小屏文字

<span class="visible-xs">2022世界杯</span>

css设计

.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-style: 18px;
    text-align: center;
}

在这里插入图片描述

3.6.3非大屏导航

需要使用媒体查询，注意可以根据需求，自行设计，超小屏、小屏、中等屏、大屏等。

/* 
    当不再是大屏的时候，设计导航变化，为横着的效果;
    媒体查询
*/
@media screen and (max-width:1179px) {
    .nav ul li {        width: 20%;        float: left;    }
    .hot img {        width: 100%;    }
}

@media screen and (max-width:767px) {
    .nav li a {
        font-size: 12px;
        padding-left: 2px;
    }
    .news li.one {        width: 100%;    }
    .news ul li {        width: 50%;    }
    .page div {        font-size: 12px;    }  
    .hot img {        width: 100%;    }
}

外链图片转存中…(img-NKUwJFcP-1668781706060)]

3.6.3非大屏导航

需要使用媒体查询，注意可以根据需求，自行设计，超小屏、小屏、中等屏、大屏等。

/* 
    当不再是大屏的时候，设计导航变化，为横着的效果;
    媒体查询
*/
@media screen and (max-width:1179px) {
    .nav ul li {        width: 20%;        float: left;    }
    .hot img {        width: 100%;    }
}

@media screen and (max-width:767px) {
    .nav li a {
        font-size: 12px;
        padding-left: 2px;
    }
    .news li.one {        width: 100%;    }
    .news ul li {        width: 50%;    }
    .page div {        font-size: 12px;    }  
    .hot img {        width: 100%;    }
}

四.总结

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/16647.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java中的::

Java中的::

今天在练习SpringBoot的时候&#xff0c;看到了以下这种写法&#xff1a; //实体类&#xff1a; Data public class Book {private Integer id;private String type;private String name;private String description; }//测试类 //实现功能&#xff1a;关键字查询 Test void t…
阅读更多...
PCB设计---深入浅出的反弹图

PCB设计---深入浅出的反弹图

作者&#xff1a;一博科技高速先生成员 孙小兵 众所周知&#xff0c;信号的反射与互连线的阻抗密切相关&#xff0c;可以说互连线中阻抗突变是产生信号反射的最直接原因。但究竟为什么会发生反射&#xff0c;反射对信号的影响是什么样的&#xff0c;信号反射的过程又是如何呢&…
阅读更多...
MySql死锁

MySql死锁

MySql死锁产生的原因?[面试7.0] 高并发情况下,事务之间对资源的访问顺序交替会导致死锁 加锁失败且出现环时触发死锁 事务1事务2begin;select *from testlock where id1 for update;begin;select *from testlock where id2 for update;select *from testlock where id2 for…
阅读更多...
安卓系统的启动

安卓系统的启动

Init.rc启动 创建和挂在启动所需的文件目录初始化和启动属性服务解析init.rc配置文件并启动Ztgote进程 Zygote进程 创建一个Server端的Socket预加载类和资源启动SystemServer进程等待AMS请求创建新的应用程序进程 SystemServer进程 启动Binder线程池&#xff0c;这样就可以…
阅读更多...
环保数采仪 VOCs|污染源|水质污染源|烟气排放在线监测

环保数采仪 VOCs|污染源|水质污染源|烟气排放在线监测

计讯物联环保数采仪&#xff0c;丰富接口&#xff0c;符合环保行业规约标准&#xff0c;具备采集、无线传输、控制、告警等功能&#xff0c;广泛应用于Vocs在线监测、水污染大气污染远程监测、烟气排放在线监控等场景&#xff0c;数据全方位多角度实时采集、自动上报、远程在线…
阅读更多...
汽车倒车防碰撞报警系统的设计

汽车倒车防碰撞报警系统的设计

目 录 1 绪论 1 1.1 背景 1 1.2 国外研究情况 1 1.3 超声波测距的优势 2 2 基本原理 3 2.1 超声波简介 3 2.2 超声波基本特性 4 2.3 超声波模块简介 5 2.4 超声波传感器原理 6 2.5 超声波的测距原理 6 3 总体方案 8 4 硬件实现 9 4.1 电路 9 4.1.1 主控制最小系统电路 10 4.1.…
阅读更多...
面试24K字节测试开发岗被血虐，到底具有怎样的技术才算高级水平？

面试24K字节测试开发岗被血虐，到底具有怎样的技术才算高级水平？

前几天我朋友跟我吐苦水&#xff0c;这波面试又把他打击到了&#xff0c;做了6年软件测试。。。 下面这条招聘是在腾讯招聘官网截图下来的&#xff0c;首先我们对高级水平下一个定义吧&#xff0c;那它应该是对标这个职级该有的能力 什么样的工程师才能算高级&#xff1f;至少…
阅读更多...
《数据库的原理与应用》--用两种方法实现S-T数据库创建

《数据库的原理与应用》--用两种方法实现S-T数据库创建

一、实验目的 复习数据库的定义&#xff0c;用两种方法实现S-T数据库创建&#xff1b;用两种方法创建数据库表&#xff0c;最后为数据库中的三个表增加数据&#xff1b;分离数据库和备份数据库。数据库表为&#xff1a; 学生表&#xff1a;Student(Sno,Sname,Ssex,Sage,Sdept…
阅读更多...
Django ORM 多表操作：一对一、一对多、多对多的增删改，基于对象/双下划线的跨表查询

Django ORM 多表操作：一对一、一对多、多对多的增删改，基于对象/双下划线的跨表查询

Django model ORM数据表相关操作 分析思路&#xff0c;创建数据表 对于表操作&#xff0c;表之间的关联关系&#xff0c;必须理解他们之间的关系&#xff0c;对于编程很重要。可以看看映射关系、外键和relationship查询 &#xff0c;至少明白外键相关基本知识。 &#xff08…
阅读更多...
App Languages 批量导入管理Android多语言文案

App Languages 批量导入管理Android多语言文案

AppLanguages支持安卓的多语言文案管理啦&#xff0c;支持批量的检测&#xff0c;批量导入&#xff0c;批量删除&#xff0c;批量替换&#xff0c;批量导出。 操作界面 批量导入 1&#xff09;需要选择res文件夹的路径&#xff0c;方便创建和寻找本地的多语言文件 2&#xff…
阅读更多...
ui界面的介绍

ui界面的介绍

创建一个项目时默认选择带有ui界面&#xff0c;ui界面的作用是方便设计者设计功能。 ui界面常见的功能&#xff1a; 方便对象的创建&#xff0c;拖入到窗口中即可方便布局&#xff0c;可以直接使用布局对控件进行修饰方便制作信号&#xff0c;通过转到槽的机制&#xff0c;快速…
阅读更多...
Cesium 入门（一）无服务 Cesium 环境

Cesium 入门（一）无服务 Cesium 环境

Cesium 入门&#xff08;一&#xff09;无服务环境 一、无服务环境下的 Cesium 无网络环境下的静态 cesium 地图服务&#xff0c;cesium 1.98.1 已经支持无 token 情况下的地图显示&#xff0c;默认 token 可用来展示 3d 地图&#xff0c;老版本 cesium&#xff0c;需自行前往…
阅读更多...
Golang入门笔记（15）—— 数组

Golang入门笔记（15）—— 数组

编程的世界中&#xff0c;或许是因为一次一次的定义变量&#xff0c;维护管理起来都太费劲了&#xff0c;所以推出了数组&#xff0c;将数据用数组的形式管理起来。 参考代码&#xff1a; package mainimport "fmt"func main() {var scores [5]intscores[0] 90sco…
阅读更多...
RabbitMQ基础

RabbitMQ基础

文章目录一. Hello World二. Work Queues三. 消息应答1. 自动应答2. 手动应答3. 批量应答4. 消息自动重新入队四. 持久化1. 实现队列持久化2. 实现消息持久化五. 消息不公平分发1. 配置不公平分发2. 预取值六. 发布确认1. 发布确认原理2. 开启发布确认3. 单个发布确认4. 批量发…
阅读更多...
DOM介绍及DOM获取元素的方式

DOM介绍及DOM获取元素的方式

1、DOM介绍 DOM&#xff08;Document Object Model&#xff09;&#xff1a;文档对象模型其实就是操作html中的标签的一些能力我们可以操作哪些内容○ 获取一个元素 ○ 移除一个元素 ○ 创建一个元素 ○ 向页面里面添加一个元素 ○ 给元素绑定一些事件 ○ 获取元素的属性 ○ …
阅读更多...
Hive集群部署实验

Hive集群部署实验

目录一、实验介绍1.1 实验内容1.2 实验知识点1.3 实验环境1.4 实验资源1.5 实验步骤清单二、实训架构三、实验环境准备四、实验步骤4.1 Hive部署4.1.1 安装Hive4.1.3 修改hive配置文件4.1.4 创建Hadoop测试目录4.1.5 初始化hive元数据库4.2 Hive测试4.2.1 启动Hive4.2.2 创建测…
阅读更多...
pytorch的gpu版本安装以及cpu版本的卸载

pytorch的gpu版本安装以及cpu版本的卸载

目录 前言 一、安装显卡驱动 二、安装Visual Studio 2019 三、安装CUDA 四、安装cudnn 五、安装anaconda 六、安装PyTorch 前言 因为最近需要导师的指导&#xff0c;我开始了unet的学习&#xff0c;虽然之前也学习过机器学习&#xff0c;但是只是浅尝辄止&#xff0c;没…
阅读更多...
你好，以太坊社区，你准备好参加 ETH India 2022 黑客马拉松活动了吗

你好，以太坊社区，你准备好参加 ETH India 2022 黑客马拉松活动了吗

你好&#xff0c;以太坊社区&#xff0c;我们很高兴通过 ETH Global即将举行的ETH India 2022 黑客马拉松活动将Cartesi 技术带到亚洲&#xff01;如果你是一位喜欢探索尖端技术且是一位创新型开发人员&#xff0c;我们期待着你的到来&#xff0c;并且想帮助你将美好的DApps 发…
阅读更多...
[BLIP]-多模态Language-Image预训练模型

[BLIP]-多模态Language-Image预训练模型

论文&#xff1a;https://arxiv.org/pdf/2201.12086.pdf 代码&#xff1a;GitHub - salesforce/BLIP: PyTorch code for BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation demo&#xff1a;BLIP - a Hugging Face …
阅读更多...
代码随想录算法训练营第二天|LeetCode 977.有序数组的平方 、209.长度最小的子数组 、59.螺旋矩阵II

代码随想录算法训练营第二天|LeetCode 977.有序数组的平方 、209.长度最小的子数组 、59.螺旋矩阵II

LeetCode 977.有序数组的平方 题目链接&#xff1a;977.有序数组的平方 思路&#xff1a; 1、先对每个数进行遍历平方&#xff0c;并插入新的容器中 2、对容器进行排序&#xff0c;返回就可以了 缺陷&#xff1a;开辟了新的容器空间 class Solution { public:vector<int…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023