CSS3 基础（008_图片）

最新推荐文章于 2024-03-03 12:59:43 发布
最新推荐文章于 2024-03-03 12:59:43 发布
阅读量568 收藏
点赞数
分类专栏： CSS 文章标签： css3

原始网址：http://www.w3schools.com/css/css3_images.asp

翻译：

CSS 图片（CSS Images）

学习使用 CSS 如何样式化图片。

圆角图片（Rounded Images）

使用 border-radius 属性创建圆角图片：

img {
    border-radius: 8px;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
    border-radius: 8px;
}
</style>
</head>
<body>
    <h2>Rounded Images</h2>
    <p>Use the border-radius property to create rounded images:</p>
    <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>
img {
    border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
    border-radius: 50%;
}
</style>
</head>
<body>
    <h2>Rounded Images</h2>
    <p>Use the border-radius property to create circled images:</p>
    <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

缩略图（Thumbnail Images）

使用 border 属性创建缩略图。

Thumbnail Image:

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="http://www.w3schools.com/css/paris.jpg" alt="Paris">
<!DOCTYPE html>
<html>
<head>
<style>
img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}
</style>
</head>
<body>
    <h2>Thumbnail Images</h2>
    <p>Use the border property to create thumbnail images:</p>
    <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>

Thumbnail Image as Link:

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="http://www.w3schools.com/css/paris.jpg">
  <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris">
</a>
<!DOCTYPE html>
<html>
<head>
<style>
a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
    <h2>Thumbnail Image as Link</h2>
    <p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>
    <p>Hover over the image and click on it to see the effect.</p>
    <a target="_blank" href="http://www.w3schools.com/css/paris.jpg"> <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" width="400" height="300"></a>
</body>
</html>

响应式图片（Responsive Images）

响应式图片将自动调整以适应屏幕大小。
调整浏览器窗口以查看效果：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
</head>
<body>
    <h2>Responsive Images</h2>
    <p>Responsive images will automatically adjust to fit the size of the screen.</p>
    <p>Resize the browser window to see the effect:</p>
    <img src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
</body>
</html>

如果你想让一张图片向下拉伸，但是，拉伸尺寸又不想超过原有大小，可添加以下代码：

img {
    max-width: 100%;
    height: auto;
}

提示：请从 CSS RWD Tutorial 阅读更多有关响应式 web 设计的内容。

图片居中（Center an Image）

要让图片在页面内居中，使用 margin: auto;，再使之成为 block 元素：

img {
    display: block;
    margin: auto;
    width: 50%;
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
    display: block;
    margin: auto;
}
</style>
</head>
<body>
    <img src="http://www.w3schools.com/css/paris.jpg" alt="Paris" style="width: 50%">
</body>
</html>

图片文本（Image Text）

如何在图片上定位文本：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>
    <h2>Image Text</h2>
    <div class="container">
        <img src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
        <div class="topleft">Top Left</div>
        <div class="topright">Top Right</div>
        <div class="bottomleft">Bottom Left</div>
        <div class="bottomright">Bottom Right</div>
        <div class="center">Centered</div>
    </div>
</body>
</html>

Polaroid Images / Cards

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 25px;
}

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
}

div.container {
    text-align: center;
    padding: 10px 20px;
}
</style>
</head>
<body>
    <h2>Responsive Polaroid Images / Cards</h2>
    <div class="polaroid">
        <img src="http://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="width: 100%">
        <div class="container"><p>The Troll's tongue in Hardanger, Norway</p></div>
    </div>
    <div class="polaroid">
        <img src="http://www.w3schools.com/css/lights600x400.jpg" alt="Norway" style="width: 100%">
        <div class="container"><p>Northern Lights in Norway</p></div>
    </div>
</body>
</html>

图片过滤（Image Filters）

CSS filter 属性对元素添加视觉效果（如模糊度、饱和度）。
**注意：**IE、Edge 12、Safari 5.1 以及早期版本不支持 filter 属性。

/* 将所有图片的颜色改为黑白色（100% gray）： */
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
<!DOCTYPE html>
<html>
<head>
<style>
img {
    width: 33%;
    height: auto;
    float: left;
    max-width: 235px;
}

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(250%);
    filter: brightness(250%);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
    <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
    <img src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="blur" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="brightness" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="contrast" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="grayscale" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="huerotate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="invert" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="opacity" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="saturate" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="sepia" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
    <img class="shadow" src="http://www.w3schools.com/css/pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>

提示：浏览 CSS filter Reference 以学习更多有关 CSS filters 的内容。

Responsive Image Gallery

CSS 可被用于创建 image galleries 。本例使用 media queries 在不同的屏幕尺寸上重布图片。调整浏览器窗口大小以查看效果：

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>
    <h2>Responsive Image Gallery</h2>
    <h4>Resize the browser window to see the effect.</h4>
    <div class="responsive">
        <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/img_fjords.jpg"> <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
            </a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/img_forest.jpg"> <img src="http://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/img_lights.jpg"> <img src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
    <div class="responsive">
        <div class="img">
            <a target="_blank" href="http://www.w3schools.com/css/img_mountains.jpg"> <img src="http://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400"></a>
            <div class="desc">Add a description of the image here</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div style="padding: 6px;">
        <p>
            This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will
            show four images side by side, for screens smaller than 700px, it
            will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).
        </p>
        <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
    </div>
</body>
</html>

提示：在 CSS RWD Tutorial 可阅读更多有关响应式 web 设计的内容。

Image Modal (Advanced)

本例将演示 CSS 和 JavaScript 如何一起工作。
首先，使用 CSS 创建模态框（对话框），默认隐藏。
然后，当用户点击图片的时候，使用 JavaScript 显示模态框并且呈现模态框内的图片：

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>
    <h2>Image Modal</h2>
    <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
    <p>
        We use JavaScript to trigger the modal and to display the
        current image inside the modal when it is clicked on. Also note that
        we use the value from the image's "alt" attribute as an image caption text inside the modal.
    </p>
    <p>
        Don't worry if you do not understand the code right away. When
        you are done with CSS, go to our JavaScript Tutorial to learn more.
    </p>

    <img id="myImg" src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>

    <script>
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }
</script>
</body>
</html>
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV+CSS实现alt属性效果
sdlfx的专栏
10-09 4908
head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>鼠标提示title>script language="JavaScript">...function seashowtip(tips,flag,iwidth)...{var my_tips=document.all.mytips;if(fl
css设置图标居左_CSS基础
weixin_35547906的博客
12-24 2674
CSS基础第一章css基础语法每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值。属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号结束。属性值与属性值不分先后顺序。选择符{属性：属性值;}div{width:500px; height:500px;}样式的建立：1.内部样式(最好写在中)内部样式表(嵌套到页面中)语法：css语句background:背景色div{wid...
CSS 基础（022_图片画廊）
Google2606的博客
10-28 767
原始网址：http://www.w3schools.com/css/css_image_gallery.asp 翻译： CSS 图片画廊（CSS Image Gallery） CSS 可用于创建图片画廊： html lang="en-US"> head> meta http-equiv="Content-Type" content="text/html; charset=UTF-
CSS基础伪类和CSS3图片
ACBYCL的博客
08-05 386
含义：在选择器上添加特殊效果 link visited hover active的使用 before after 之类的使用 二.CSS图片 效果展示 效果展示 展示效果 定位图片文本 展示效果 展示效果 CSS filter属性为元素添加可视效果（例如：模糊和饱和度） 展示效果 展示效果 展示效果...
CSS3 图片
冷月醉雪的博客
06-16 272
圆角图片 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; img { border-radius:8px; }
CSS 基础（020_下拉式菜单）
Google2606的博客
10-27 1130
原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻译： CSS 下拉式菜单（CSS Dropdowns） 使用 CSS 创建可悬停、下拉式菜单。 演示：下拉式菜单示例 移动鼠标至以下示例： 这里写代码片
前端CSS3常用基础知识总结
不想学习的打工人的博客
07-25 2785
CSS是(CascadingStyleSheets)的简称.CSS是也是一种标记语言，其主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式等。选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等属性和属性值之间用英文“”分开多个“键值对”之间用英文“;”进行区分上方。...............
css3详解
最新发布
2301_79683791的博客
03-03 2202
CSS新手指南，CSS3必会知识，css3该怎么学，CSS入门技巧
CSS简单的图片居中
热门推荐
unsleepfish的博客
05-15 4万+
图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如 一般设置图片属性 ​text-align:center ​ 水平居中，但这个方法经常无效，很多前端工程师都有研究过或者说是搜索过 CSS 图片居中方法吧。 但其实CSS 图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示： 图片居中又分为水平居中和垂直居中 提示：在你开始阅读以下内容之前，你可以先了解CSS图片的基础内容。 一、水平居中： 1、单独文字垂直居中我们只需要设置 CSS
css3鼠标拖拽展示图片特效
07-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够实现复杂的交互效果，比如我们今天要探讨的"css3鼠标拖拽展示图片特效"。这种特效使得用户可以通过鼠标拖动来浏览图片，...
css3实现超立体3D图片侧翻倾斜效果
09-25
1. CSS3 3D转换基础： - CSS3提供了强大的3D转换功能，包括rotateX(), rotateY(), translateZ()等。 - transform属性是实现这些3D效果的关键，它允许元素进行旋转、倾斜、缩放等操作。 - transform-origin属性...
shitoujiandaobu_HTML5_CSS3源码_
10-01
【标题】"shitoujiandaobu_HTML5_CSS3源码_" 暗示这是一个基于HTML5和CSS3开发的项目，...开发者可以通过阅读和调试代码，提升自己在HTML5和CSS3方面的技能，甚至可以以此为基础，进行二次开发，创建更多样的互动应用。
CSS3 3D图片分割拼接特效
06-24
【CSS3 3D图片分割拼接特效】是一种利用现代Web技术实现的视觉效果，它结合了CSS3的强大力量和JavaScript的灵活性，为网页设计师提供了全新的展示方式。在这个特效中，一张完整的图片被分割成多个部分，然后在3D空间...
camry_html5_html_CSS3_page_
10-03
【标题】"camry_html5_html_CSS3_page_" 指的是一个针对Camry车型的网页设计项目，其中使用了HTML5、HTML和CSS3这三种核心技术来构建页面。HTML5是现代网页开发的标准，提供了更好的媒体支持、离线存储功能以及更...
h5aliupload_HTML5_CSS3源码_
09-29
【标题】：“h5aliupload_HTML5_CSS3源码_” 涉及的主要知识点是HTML5中的上传功能以及阿里云图片预览技术，结合了CSS3进行样式美化。 【HTML5上传功能】：HTML5引入了新的File API，允许用户在网页上选择本地文件...
CSS高级属性（五）
小白先生的博客
05-05 1154
CSS3多列属性 column-count：将指定文本分割成几列 column-gap：指定文本分割后 列之间的间距 column-rule-style：指定文本分割后，设置分割线样式 column-rule-width：指定文本分割后，指定分割线的宽度 column-rule-color：指定文本分割后，指定分割线的颜色 column-r...
HTML5+CSS3入门基础知识
12-29
CSS3 基础 CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。CSS3 新增了许多新的特性和选择器，如圆角、阴影、渐变等。CSS3 的主要特点包括： *新增了许多新的选择器，如 nth-child、nth-of-type...
css3_图片展示,任由发挥,3d相册.rar
09-27
一、CSS3 3D变换基础 CSS3的3D变换主要通过`transform`属性来实现，包括`rotateX`、`rotateY`、`rotateZ`用于旋转，`translateX`、`translateY`、`translateZ`用于平移，以及`scaleX`、`scaleY`、`scaleZ`用于缩放...
css3图片高亮突出显示特效代码
03-20
在CSS3中，图片高亮突出显示是一种常见的视觉效果，用于吸引用户的注意力或者强调特定的图像元素。这个特效可以通过多种CSS3属性和技术实现，包括伪类、渐变、阴影、滤镜以及转换等。让我们详细探讨一下如何使用CSS3...
HTML5+CSS3基础知识大全
**CSS3基础知识点** 1. **CSS简介**：CSS（Cascading Style Sheets）是一种样式表语言，用于控制网页的布局和样式。 2. **CSS结构**：CSS结构主要包括选择器、属性和值，选择器用于选择要样式化的元素，属性用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值