如何在GitHub正确地使用 Curl 下载文件？

url是在 Linux 终端中下载文件的绝佳工具。

下载与原始文件同名的文件的常用语法非常简单：

curl -O URL_of_the_file

这在大多数情况下都有效，但是，您会注意到，有时当您从 GitHub 或 SourceForge 下载文件时，它不会获取正确的文件。

例如，我试图以 tar gz 格式下载 archinstall 脚本。这些文件位于发布页面上。

如果我在浏览器中打开这个源代码链接，它会得到 .tar.gz 格式的源代码。

但是，如果我使用终端使用 curl 命令下载相同的文件，我会得到一个不正确存档格式的小文件。

tar -zxvf v2.4.2.tar.gz 

gzip: stdin: not in gzip format
tar: Child returned status 1
tar: Error is not recoverable: exiting now

当我运行 file 命令以了解确切的文件类型时，它告诉我它是一个 HTML 文档。

file v2.4.2.tar.gz 
v2.4.2.tar.gz: HTML document, ASCII text, with no line terminators

HTML 文档而不是存档 zip 或 tarball？问题出在哪里？让我告诉你快速修复。

使用 curl 正确下载存档文件

这里的问题是您拥有的 URL 重定向到实际的存档文件。为此，您需要使用其他选项。

curl -JLO URL_of_the_file

选项可以按任何顺序排列。

这是基于 curl 命令手册页的选项的快速说明。

J：此选项告诉 -O, --remote-name 选项使用服务器指定的 Content-Disposition 文件名，而不是从 URL 中提取文件名。
L：如果服务器报告请求的页面已移动到不同的位置（用 Location: 标头和 3XX 响应代码指示），此选项将使 curl 在新位置重做请求。
O：使用此选项，您无需指定下载的输出文件名。

正如您在下面的屏幕截图中所见，这次我能够使用 curl -JLO 选项下载正确的文件。

额外提示：您需要登录吗？

这适用于公共文件，但是，如果您尝试从私有存储库或 GitLab 下载文件，那么您可能会看到有关重定向到登录页面的消息。

<html><body>You are being <a href="https://gitlab.com/users/sign_in">redirected</a>.</body></html>

在这种情况下，请为 API 令牌提供 -H 选项。

lex方法

首先给图片添加一个div，设置其宽高及基本属性，其次把div中的display元素设置成flex，最后给img添加align-items:center属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
         body{ 
            background:#000
        }
        div{
            width: 900px;
            height: 800px;
            background:deeppink;
            display: flex;
            align-items: center;
        }
        div img{
            width: 579px;
            height: 282px;
            align-items: center;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

看下效果

display方法

首先创建一个div，以及对有图片的div设置样式，给img的父级添加一个diaplay，并且属性为table，并且把包含图片的div中的display属性设置成table-cell，最后给有图片的div设置成vertical-align: middle; 属性，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style tpye="text/css">
        body{
            background: #bbb;
        }
        div{
            display: table;
            width: 900px;
            height: 700px;
            background: #f3f3f3;
            display: table-cell;
            vertical-align: middle;
        }
        div img{
            width: 282px;
        }
    </style>
</head>
<body>
<div>
    <img src="html.png" alt="">
</div>
</body>
</html>

效果图：

小节基本要求：

了解css选择器之类选择器

要点：

css选择器之类选择器

目前样式

https://ypt.ink/blog/index

目标样式

https://ypt.ink/blog/index

Step1：定义公告位 (.gonggao选择器的代码)

注意：更加精确一点来说，以 . 开头的选择器，例如这个 .gongao样式选择器，统称为类选择器。因为它在div中引入的方式是这样的

<div class="gonggao"></div>

class翻译有类的意思，所有叫它类选择器，也就是说，样式的引入方式决定了它的称呼。

(还是在body.css文件中写)

.main-left .gonggao{
    height: 40px;
    line-height: 40px;
    width: 100%;
    position: relative;
    border-color: #eee;
    margin: 0px 0 13px;
    box-shadow: -1px 0 0 rgba(0,0,0,0.04),0 -1px 0 rgba(0,0,0,0.04),1px 0 0 rgba(0,0,0,0.04);
    background: #fff;
    border-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

来看几处决定性的代码：(其它的是细节不关注)

heigth:40px; 设置框高为40px

width:100%; 设置框宽为100%

line-height: 40px; 设置框内行与行之间的间距：这值一般与height的值一样。

background: #fff; 设置框的背景为白色

运行，直接看效果，如下：

Step2：定义广告位(.guangao类选择器的代码)

.main-left .panel{
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
    background-color: #fff;
    color: #666;
}
.panel .guangao{
    padding: 50px 30px;
}

从上节的代码结构知道，.guanggao选择器是在.panel里面的，也就是说我给广告位外面加了一层框，修饰这个框的类选择器是 .panel

看起决定性的几处代码，

.panel类选择器中的：

background-color: #fff; 框的背景颜色是白色

.guanggao类选择器中的：

padding: 50px 30px; 边框里的内容被限制为：距离上下边框间距是50px,左右边框是30px；

ps:内边距我前面是讲过的。

直接看效果：

Step3：定义文章的类选择器

.main-left .content .card{
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    width: 452px;
    float: left;
}

从上篇文章可以知道，热门文章与最新文章都是包含在card这个类选择器中的，所以直接定义card的代码。

看起决定性的代码：

background-color: #fff; 框的背景颜色设置为白色

width: 452px; 宽度

float:left；左浮动；

ps：左浮动我前面已经说了，代码很关键。大致作用就是使得边框朝左边靠拢

从上篇文章知道，热门文章与最新文章都用了card选择器定义的div做外框，那么看效果：

左边一个card定义的div框，右边一个card定义的div框。分别用来盛放热门文章与最新文章。

Step4：优化card选择器，继续编写card-body选择器的代码

.card-body{
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
}

card-body类选择器也是公用的。

定义.hot类选择器与.new选择器

.hot,.new{
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
}

运行看效果：

完整body.css代码：

.tbody{
    background-color: rgba(61,176,203,0.15);
    padding: 10px;
    overflow: hidden;
}
.tbody .is-main{
    width: 85%;
    margin: 0 auto;
}

.is-main .main-left{
    width: 71%;
    float: left;
}

.is-main .main-right{
    width: 28%;
    float: right;
}


.main-left .gonggao{
    height: 40px;
    line-height: 40px;
    width: 100%;
    position: relative;
    border-color: #eee;
    margin: 0px 0 13px;
    box-shadow: -1px 0 0 rgba(0,0,0,0.04),0 -1px 0 rgba(0,0,0,0.04),1px 0 0 rgba(0,0,0,0.04);
    background: #fff;
    border-radius: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.main-left .panel{
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
    background-color: #fff;
    color: #666;
}

.panel .guangao{
    padding: 50px 30px;
}


.main-left .content .card{
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    width: 452px;
    float: left;
}

.card-body{
    position: relative;
    padding: 10px 15px;
    line-height: 24px;
}
.hot,.new{
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
}

建议对照body.html文件看，那样会更清晰。可以多试试代码，怎么试？

删一行代码运行一下，看看效果是什么样，加上去又是一个什么样，这样学很快就明白了。

在线咨询

上一篇：简单小程序：登录页面（html）
下一篇：html开发笔记15-图片标签-向网页添加图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商