前端学习——初探CSS与html的结合

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量751 收藏 8
点赞数 8
分类专栏： 前端 文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62862907/article/details/140207091
版权

本刊历程：

        本人初步接触前端，在此记录一些学习心得，欢迎一起学习交流！！老样子，在网址“Learn Basic CSS by Building a Cafe Menu: Step 1 | freeCodeCamp.org”通过项目进行学习，为咖啡馆网页设计菜单页面来学习CSS(层叠样式表)的基础知识。CSS是一种用于设计HTML文档样式的语言，告诉浏览器如何显示网页。可以使用CSS设置HTML元素的颜色、字体、大小和其他方面。

学习说明：

        项目成果预览

代码：

​​​html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Cafe Menu</title>

    <link href="styles.css" rel="stylesheet"/>

  </head>

  <body>

    <div class="menu">

      <main>

        <h1>CAMPER CAFE</h1>

        <p class="established">Est. 2020</p>

        <hr>

        <section>

          <h2>Coffee</h2>

          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>

          <article class="item">

            <p class="flavor">French Vanilla</p><p class="price">3.00</p>

          </article>

          <article class="item">

            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>

          </article>

          <article class="item">

            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>

          </article>

          <article class="item">

            <p class="flavor">Hazelnut</p><p class="price">4.00</p>

          </article>

          <article class="item">

            <p class="flavor">Mocha</p><p class="price">4.50</p>

          </article>

        </section>

        <section>

          <h2>Desserts</h2>

          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>

          <article class="item">

            <p class="dessert">Donut</p><p class="price">1.50</p>

          </article>

          <article class="item">

            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>

          </article>

          <article class="item">

            <p class="dessert">Cheesecake</p><p class="price">3.00</p>

          </article>

          <article class="item">

            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>

          </article>

        </section>

      </main>

      <hr class="bottom-line">

      <footer>

        <p>

          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>

        </p>

        <p class="address">123 Free Code Camp Drive</p>

      </footer>

    </div>

  </body>

</html>

CSS

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
}

.established {
  font-style: italic;
}

h1, h2, p {
  text-align: center;
}

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:-25px;
}

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

.bottom-line {
  margin-top: 25px;
}

h1, h2 {
  font-family: Impact, serif;
}

.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

/* FOOTER */

footer {
  font-size: 14px;
}

.address {
  margin-bottom: 5px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

学习心得：

1、复习——html基本结构

        正如在猫照片应用程序的最后几个步骤中学到的，有一个基本的结构需要开始构建网页。每个HTML文档都应该有一个DOCTYPE声明和HTML元素。DOCTYPE告诉浏览器文档的HTML版本。html元素表示包含所有其他元素的根元素。

【基本结构如我们代码中的<!DOCTYPE html><html lang="en"><></html>，在上一期小猫拍照应用里有详细介绍】

<head><head>、<body></body>

【基本结构如我们代码中的<head> <title>Cafe Menu</title><meta charset="utf-8"></head><body><main></main></body>，表明标题为Cafe Menu，编码方式是utf-8，在上一期小猫拍照应用里有详细介绍】

<h1></h1>,<p></p>,<section></section>

【 基本结构如我们代码中的 <section><h1>CAMPER CAFE</h1> <p>Est. 2020</p> </section>，在上一期小猫拍照应用里有详细介绍】

2、学习——CSS配置样式

html中加入<style></style>

         第一种方式是直接在html中加入<style></style>，将其加入在<head><head>中，基本格式如下

<style>
element {
 property: value;
}
</style>

【比如

 <head>

    <meta charset="utf-8" />

    <title>Cafe Menu</title>

    <style>

      h1,h2,p {text-align: center;}

    </style>

  </head>，就是使得h1\h2\p对应的文字内容居中】

         通过在样式标记内编写CSS，对三个元素进行了样式化。这是可行的，但由于会有更多的样式，最好把所有的样式放在一个单独的文件中，并链接到它。

创建新的styles.css文件，加入<style></style>

        为此，引出第二种方式，创建一个单独的styles.css文件，将创建的样式重写到styles.css文件中，并且在原html代码中，去除<style></style>这一部分，并在html代码head中加入link。

【 <head>

    <meta charset="utf-8" />

    <title>Cafe Menu</title>

    <link rel="stylesheet" href="styles.css">

  </head>】

为了使页面的样式在移动设备上看起来与在台式机或笔记本电脑上看起来相似，需要添加一个具有特殊内容属性的元元素。视口元标签 (<meta name="viewport">): 这个标签对于响应式设计至关重要，它确保网页能够根据不同设备的屏幕尺寸适当地缩放和渲染。

【在head元素中添加以下内容:<meta name="viewport" content="width=device-width, initial-scale=1.0" />】

3、CSS：body背景、字体风格、内边距

背景设置为原木色，添加咖啡豆背景。由于咖啡馆的主要产品是咖啡，使用咖啡豆的图像作为页面的背景。添加一个background-image属性，并将其值设置为url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)。

【 body { background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); /* 设置背景图片 */

font-family: sans-serif; /* 定义字体风格为无衬线 */

padding: 20px; /* 设置四周内边距为20像素 */ }】

4、HTML、CSS：div

HTML部分

div元素主要用于设计布局，与您目前使用的其他内容元素不同。在body元素中添加div元素，然后将所有其他元素移动到新div中。在html开始的div标记中，添加值为menu的id属性。

【

<body>

<div class="menu">

  /*这个是可以直接定义选择器配套的代码，现在我们使用的是上一行的类选择器 <div id="menu">*/

    <main>

      <h1>CAMPER CAFE</h1>

      <p>Est. 2020</p>

      <section>

        <h2>Coffee</h2>

      </section>

    </main>

    </div>

  </body>

】

CSS部分

在css中加入配套样式，现在的目标是使div不占用整个页面的宽度。可以使用id选择器来针对具有id属性的特定元素。通过将哈希符号#直接放在元素的id值前面来定义id选择器。例如，如果一个元素的id是cat，那么你可以这样定位该元素:

示例代码
#cat {
width:250 px;
}

然而，更常见的是使用不同的选择器来样式化元素。类选择器是由一个名字定义的，在名字前面加一个点，如下所示:

示例代码
.class-name {
风格
}
通过引入.menu的类，使用类选择器。

【使用#menu选择器设置元素的宽度为300px。

/* 为class="menu"的<div>元素设置样式 */

.menu { width: 80%; /* 宽度设为父容器（body）的80% */

background-color: burlywood; /* 背景颜色为浅棕色 */

margin-left: auto; /* 左外边距自动，用于水平居中 */

margin-right: auto; /* 右外边距自动，用于水平居中 */

padding: 20px; /* 内边距20像素 */

max-width: 500px; /* 最大宽度为500像素 */ }
}}】

补充：CSS中的注释是这样的:/* comment here */

5、HTML、CSS：article

逻辑与div是相似的，在html中加入定义类，在css中定义样式

HTML部分

【<article class="item">

<p class="flavor">French Vanilla</p>

<p class="price">3.00</p> <!-- 咖啡名称和价格 -->

</article>】

CSS部分

【/* 设置class="item"内部<p>标签的显示方式和外边距 */

.item p {

display: inline-block; /* 行内块显示方式 */

margin-top: 5px; /* 上外边距5像素 */

margin-bottom: 5px; /* 下外边距5像素 */

font-size: 18px; /* 字体大小为18像素 */ }

/* 设置类名为.flavor和.dessert的<p>标签的文本对齐和宽度 *

/ .flavor, .dessert {

text-align: left; /* 文本左对齐 */

width: 75%; /* 宽度为75% */ }

/* 设置类名为.price的<p>标签的文本对齐和宽度 */

.price { text-align: right; /* 文本右对齐 */

width: 25%; /* 宽度为25% */ }】

6、探讨html中<main>, <section>, <article>, 和 <div>

<main>, <section>, <article>, 和 <div> 是HTML中常用于组织和结构化网页内容的元素。它们各自承担不同的角色，有助于构建更清晰、更语义化的网页结构。这不仅有利于搜索引擎优化（SEO），也提高了网站的可访问性。

<main>

  • 用途: <main> 元素用于包裹页面的主要内容区域。它应该包含网页中最核心的内容，这些内容是页面独有的，不包括在页面的重复区域（如头部、导航栏、页脚等）。
  • 唯一性: 一个页面应该只有一个 <main> 元素。这有助于屏幕阅读器和辅助技术确定网页的主体内容。
  • SEO 和可访问性: 使用 <main> 可以提高页面内容的可访问性，使搜索引擎更好地理解页面结构。

<section>

  • 用途: <section> 元素用来表示文档或应用的一个独立部分，通常会有一个标题。如果内容足够重要，可以将其视为页面内的一个小节。
  • 组织性: <section> 是一个容器，用于相关内容的分组。例如，一个新闻网站可以使用 <section> 来分隔不同主题的新闻，如国内、国际、体育等。
  • 语义性: 使用 <section> 而不是非语义的 <div> 可以增强文档的结构化和语义化，帮助搜索引擎和辅助技术更好地理解内容的组织方式。

<article>

  • 用途: <article> 元素用于包裹独立的、自成一体的内容，这些内容理论上可以独立于网站的其余部分存在。例如，博客帖子、报纸文章、用户评论等。
  • 独立性: <article> 内的内容应该是独立的，这意味着如果将其从页面上剥离出来，放在其他地方仍然具有完整性和意义。
  • 重用性: <article> 内的内容通常适合被重复使用或单独引用，这在RSS feeds或社交媒体分享时特别有用。

<div>

  • 用途: <div> 是一个通用的容器元素，用于组织布局或样式化。它本身没有语义意义，主要用于CSS布局或JavaScript操作。
  • 灵活性: <div> 非常灵活，通常被用来创建网页布局中的行和列，或者用作其他元素的包裹器，以应用特定的样式或行为。

它们之间的关系

  • 层次结构: <main> 通常作为最外层的元素，包含整个页面的主要内容。<section> 可以在 <main> 内部使用，用于进一步组织相关的内容块。<article> 可以在 <section> 内部使用，用于标识独立的、完整的内容单元。而 <div> 可以在所有这些元素内部使用，提供必要的样式和布局支持。
  • 功能和样式: <main>, <section>, 和 <article> 提供语义上的组织，而 <div> 提供视觉和功能上的组织。在设计网页时，应优先使用语义元素以提高内容的可访问性和结构性，而 <div> 用于那些纯粹的样式或脚本需要。

7、HTML、CSS：hr

HTML 中的 <hr> 标签用于在文档中创建一条水平线，主要用于分隔内容或定义段落之间的转换。这个元素是自闭合的，不需要结束标签，并且其表现形式主要是视觉上的。在 HTML5 中，<hr> 标签表示主题内容的分隔，而不仅仅是视觉效果。

基本特性和用途：

  • 分隔内容：<hr> 最常见的用途是在视觉上分隔不同的内容区域。例如，在博客帖子中分隔两个不同的主题，或在一篇文章中标记不同章节的开始。
  • 语义意义：在 HTML5 中，<hr> 具有语义意义，表示文档中的主题转换。这可以帮助搜索引擎和辅助技术理解页面结构。
  • 样式化：尽管 <hr> 默认会显示为一条水平线，但可以通过 CSS 进行广泛的样式化，包括改变颜色、宽度、边框等。这使得它可以完全符合网站的设计风格。

HTML部分

【<hr class="bottom-line">】

CSS部分

【hr { height: 2px; /* 高度为2像素 */

background-color: brown; /* 背景颜色为棕色 */

border-color: brown; /* 边框颜色为棕色 */ }】

8、链接a

HTML部分

【<p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>  </p>】

  • <p>: 这是一个段落元素，用于包围文本和其他内联元素，这里用来包围超链接。
  • <a>: 这是一个锚元素（超链接），用于创建一个指向另一个页面的链接。
    • href="https://www.freecodecamp.org": href 属性指定链接的目标URL，这里是链接到 freeCodeCamp 的主页。
    • target="_blank": target 属性指定如何打开链接的目标。_blank 值意味着链接将在新窗口或新标签页中打开，这是常用于外部网站链接的做法，以避免导航离开当前网站。

CSS部分

【a { color: black; /* 默认颜色黑色 */ }

a:visited { color: black; /* 访问后颜色仍为黑色 */ }

a:hover { color: brown; /* 悬停时颜色变为棕色 */ }

a:active { color: brown; /* 激活时颜色为棕色 */ }】

这部分CSS代码用于定义超链接(a 元素)在不同状态下的样式：

  • a: 指定所有超链接的默认样式。
    • color: black;: 设置链接文字的默认颜色为黑色。
  • a:visited: 用于定义用户已访问过的链接的样式。
    • color: black;: 即使链接被访问过，颜色仍然保持黑色，这样可以保持网站颜色的一致性。
  • a:hover: 指定当鼠标悬停在链接上时的样式。
    • color: brown;: 当鼠标悬停时，链接颜色变为棕色，提供视觉反馈，告诉用户可以点击这个链接。
  • a:active: 定义链接在被点击的那一刻的样式。
    • color: brown;: 当链接被激活（即在鼠标点击时）颜色也是棕色，这为用户操作提供即时的视觉反馈。

这些样式增强了用户界面的交互性，通过颜色变化向用户明确指示链接的可点击性，以及他们的交互状态（如是否已访问，是否正在被点击等）。

结语：

使用 HTML 和 CSS 创建和设计网站时，它们各自扮演独特的角色，并通过互相配合来构建和美化网页。下面是一个关于如何使用 HTML 和 CSS 以及它们之间如何交互的总结：

HTML：网页内容的结构

HTML（超文本标记语言）是网页内容的骨架。它定义了网页的结构和内容元素，如文本、图片、链接等。

  • 元素和标签：HTML 使用一系列标签来标记文本，这些标签告诉浏览器如何展示它们。例如，<p> 用于段落，<h1> 到 <h6> 用于标题，<img> 用于图片等。
  • 属性：标签可以包含属性，增加额外的信息，如 <a href="..."> 中的 href 指定链接目标，<img src="..."> 中的 src 指定图片来源。
  • 语义标签：使用如 <article>、<footer>、<header> 等语义标签提高内容的结构化和可访问性。

CSS：网页的样式和布局

CSS（层叠样式表）用于增强 HTML 内容的表现形式，比如设置字体样式、颜色、布局等。

  • 选择器：CSS 使用选择器来指定哪些 HTML 元素应该应用特定的样式规则。例如，类选择器（.classname）和 ID 选择器（#idname）可以定位 HTML 中的特定元素。
  • 属性和值：每个 CSS 规则包含一个属性和一个值，用来定义如何显示一个元素。例如，color: red; 定义字体颜色。
  • 布局技术：CSS 提供了多种布局技术，如 Flexbox 和 Grid，它们允许开发者创建复杂的响应式网页布局。

二者的交互

  • 内联样式：直接在 HTML 元素中使用 style 属性来应用 CSS，这种方式虽快速但难以维护，不推荐用于生产环境。
  • 内部样式表：在 HTML 的 <head> 部分使用 <style> 标签定义样式。适用于单个页面的样式定义。
  • 外部样式表：最常用的方法，使用 <link> 标签在 HTML 中引入外部的 .css 文件。这种方法使结构与样式分离，便于维护和重用。

最佳实践

  1. 结构与样式分离：尽量保持 HTML 和 CSS 的分离。使用外部样式表可以使内容和设计分离，便于管理和更新。
  2. 语义化 HTML：使用适当的 HTML5 元素增强内容的可访问性和搜索引擎优化（SEO）。
  3. 响应式设计：使用媒体查询（Media Queries）和响应式工具，如 Flexbox 和 Grid，确保网页在不同设备上都能良好展示。
  4. 维护性和可扩展性：使用一致的命名约定和注释，保持 CSS 的组织和清晰，以便未来的维护和扩展。

通过这样的结构和样式定义方式，可以创建出既功能强大又外观美观的网页，同时保持良好的用户体验和易于维护的代码。

PixelMeng
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习之HTML和CSS总结
qq_54553728的博客
06-24 643
前端学习html和css那些事儿，包括html常见标签，,格式及用法等等还有css的选择器用法，格式，常见属性。
【Web前端开发】——HTML和CSS基础
msmxsd的博客
03-03 120
HTML和CSS基础前言一、HTML元素嵌套元素空元素HTML文档详解标记文本标题元素段落元素列表链接二、CSSCSS规则集详解多元素选择不同类型的选择器字体和文本字体选择盒子模型文档体的格式图像居中 前言 超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言 HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一、HTML元素 嵌套元素 可以将一
前端学习笔记之——初探CSS
前尘忆梦的博客
05-25 172
初探 CSS 1、定义和应用样式 CSS 样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个 CSS 属性和该属性的值，二者以冒号分隔。 background-color:grey; color:white; 1.1、了解本章所用的 CSS 属性 属性 说明 background-color 设置元素的背景颜色 border 设定围绕元素的边框 color 设置元素的前景颜色 font-size 设置元素文字的字号 height 设置元素高度 padding
初探jquery——表单应用范例
10-31
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
easyUI初探
02-27
它与按钮组件结合使用，可以创建复杂的交互界面。 - **按钮（Button）**: 按钮组件不仅限于基本的点击事件，还可以触发对话框、弹出窗口或执行其他操作。支持多种样式，如普通、链接、图标按钮等。 - **对话框...
personal-website-v1
03-30
【个人网站开发初探——基于HTML的网页设计与构建】 标题“personal-website-v1”表明这是一个关于个人网站的早期版本，很可能是一个开发者或者设计师，梅森（Jason Mui），正在进行的工作项目。在这个阶段，我们...
ducha_IoT:还没
03-17
HTML与CSS结合，使界面美观易用；JavaScript则负责交互逻辑，如按钮点击事件和实时数据更新。 3. **安全与隐私**： - **加密通信**：确保用户数据和控制指令在传输过程中的安全，防止被非法截取或篡改。 - **权限...
simple-personal-library:一个网络应用程序，可帮助您记录所有拥有的书籍
05-23
《构建个人图书管理系统：simple-personal-library初探》 在数字化时代，个人的书籍收藏管理变得日益重要。"simple-personal-library"项目就是一个为解决这一问题而诞生的网络应用程序。这个小巧的应用允许用户轻松...
Vue3 Suspense 和 defineAsyncComponent 结合使用方法
qq_30193097的博客
08-13 204
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。用于协调对组件树中嵌套的异步依赖的处理。上述案例可以实现大型项目的骨架屏效果。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 578
ASP.NET Core Web API 使用Autofac框架
前端JS总结（中）
m0_54066656的博客
08-12 696
前端JS之内置对象总结，这很重要！！！
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 265
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 601
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 171
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
使用 TinyVue 组件库搭建前端项目的实操体验
Echo_Wish的博客
08-14 441
在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。在项目中，我使用了 TinyVue 提供的多个组件来构建页面。首先，我按照官方文档的指引，完成了开发环境的准备工作。
前端学习笔记-JS篇-04
Yvonne_hjj的博客
08-14 615
函数:function,是被设计为执行特定任务的代码块说明:函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于。比如前面使用的alert()、prompt()和console.log()都是一些，只不过已经封装好了，我们直接使用的。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 560
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【如何有效解决前端Vue中的常见难题】
zhaochen1127的博客
08-11 771
面对Vue项目中的性能优化、兼容性和安全性等难题，开发者需结合项目实际情况，采取合适的解决方案。通过代码分割、状态管理、服务端渲染等技术优化性能；利用PostCSS、Polyfill等工具解决兼容性问题；通过严格的输入验证、HTTPS传输等措施保障应用安全。同时，良好的团队协作和持续的技术学习也是解决难题、提升项目质量的关键。希望本文能为Vue开发者提供一些实用的参考和启发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值