HTML_and_CSS

最新推荐文章于 2024-04-22 19:03:56 发布
最新推荐文章于 2024-04-22 19:03:56 发布
阅读量414 收藏
点赞数
文章标签： 前端 人工智能 操作系统 ViewUI
原文链接：http://www.cnblogs.com/qmuy/p/11477413.html
版权

HTML知识

1. html概念

html全称HyperText Markup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。

超文本：音频，视频，图片称为超文本。
标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
 
HTML只是负责描述文档语义的语言,在html中，除了语义，其他什么都没有。

2. 网络术语

网页 ：由各种标记组成的一个页面就叫网页。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： <p>称为开始标记 ，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。

3. HTML规范

HTML是一个弱势语言
区分大小写
页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
HTML的结构：
    声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
    head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
    body部分：我们所写的需要显示出来的代码必须放在此标签內。

编写规范

1. 所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：<h1><font></font></h1>
2. 所有的标记都必须小写。
3. 所有的标记都必须关闭。
    双边标记：<span></span>
    单边标记：<br> 转成 <br /> <hr> 转成 <hr />，还有<img src=“URL” />
4. 所有的属性值必须加引号。<h1 id="head"></h1>
5. 所有的属性必须有值。<input type="radio" checked="checked" />

HTML基本语法特征

1. html对换行,tab不敏感
2. 空白折叠现象
3. 标签要严格封闭

4. HTML结构

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

1. 文档声明头

<!DOCTYPE html> 是一个声明，表示该文档是由 HTML5 进行编写的。
<!DOCTYPE> DocType Declaration，简称DTD,声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明，这样可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2. head 头标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。
这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>，<title>。
    
<base> : 用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。  
<link>：定义文档与外部资源的关系,最常见的用途是链接样式表。
<meta>：标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。
<script> : 标签用于在 HTML 文档中加入脚本（例如 JavaScript）   
<style>:定义内部样式表与网页的关系
<title>：指定整个网页的标题，在浏览器最上方显示。
base
<base> : 用来设置一个基准 URL，让 HTML 文档中的相对链接在此基础上进行解析。  
<base> 标签必须位于 <head> 标签内部，并尽量靠前，以便随后的元素中的相对 URL 可以用上其设置的基准 URL。
属性值描述
hrefURL指定该 HTML 文档中所有相对链接的基准 URL。
target_blank、_parent、_self、_top、framename指定在何处打开超链接。 _blank：在新窗口中打开 _parent：在当前的父窗口中打开，如果不存在父窗口，此选项的行为方式与 _self 等同 _self：当前窗口打开（默认） _top：在整个窗口中打开 framename：在指定的框架中打开

实例

<!doctype html>
<html lang="zh_cn">
<head>
    <base href="../img/" target="_blank">
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <img src="壁纸.jpg"><br>
    <p><a href="http://www.baidu.com">百度一下</a></p>
    <p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。<br>这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>

<link>：定义文档与外部资源的关系,最常见的用途是链接样式表。
link 元素定义了 6 个属性，其中 rel 属性是必选的，它说明了当前文档与被链接资源之间的关系。
属性值描述
hrefURL指定被链接资源的 URL。
hreflanglanguage_code指定被链接资源使用的语言。
sizesHeightxWidth指定图标的大小（比如 sizes="16x16"）。
mediamedia_query指定被链接的资源将被显示到什么设备上。
relalternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag指定当前文档与被链接资源之间的关系。
typeMIME_type规定被链接文档的 MIME 类型。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
    <link rel="stylesheet" type="text/css" href="css3.css" >
</head>
<body>
    <h1>我通过外部样式表进行格式化。</h1>
    <p>我也一样！</p>
</body>
</html>


放在同级目录css文件内的fishc.css:
body{
    color: green;
}

3. meta

<meta>：标签用于描述页面内容，关键词，作者，最新修订时间以及其它元信息。
标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。针对搜索引擎和更新频度的描述和关键词。

content 属性必须和 name 或 http-equiv 属性共存亡。
为了让网页尺寸实现自适应，你应该在 HTML 文档中加入下面代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
属性值描述
charsetcharacter_set指定 HTML 文档的编码。
contenttext指定与 http-equiv 或 name 属性相关的值。
http-equivcontent-type、default-style、refreshcontent-type：另一种声明 HTML 文档作用字符编码的方法（<meta http-equiv="content-type" content="text/html charset=UTF-8">）。 default-style：指定页面优先使用的样式表。 refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个 URL 让浏览器载入。
nameapplication-name、author、description、generator、keywords、viewportapplication-name：当前页所属 Web 应用系统的名称。 author：当前页的作者名。 description：当前页的内容描述。 generator：用来生成 HTML 的软件名称。 keywords：当前页的关键词。 viewport：网页尺寸自适应。

实例

实例一 : 指定网页编码

<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

实例二：为搜索引擎提供关键词

<meta name="keywords" content="网页前端学习">

实例三：描述网页内容

<meta name="description" content="这是一个学习前端html的网页">

实例四：定义网页的作者

<meta name="author" content="donyz">

实例五：设置网页尺寸自适应

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

实例六：每 5 秒刷新一下浏览器并跳转到指定页面

<meta http-equiv="refresh" content="5;http://baidu.com">

body

1. 输入框

1. <input type="text" value="默认内容" >    // 实色文字,可以删除
2. <input type="text"  placeholder="请输入用户名">    //提示信息半透明,且光标到输入框提示信息消失
3. <input type="password" placeholder="请输入密码">  //密文显示
4. <input type="date">  // 选择日期
5. <input type="color"> //选择颜色
6. <input type="file" > //选择文件
7. <input type="checkbox">  //复选框
8. <input type="radio"> // 单选框

2. a标签

1. <a href="#">百度一下</a> // 跳转到当前页面
2. <a href="http://baidu.com" title="这是百度链接">百度一下</a>   // title 鼠标移动到文字提示的内容

图片链接到网址
<a href="http://baidu.com" title="这是百度链接">
    <img src="https://wx2.sinaimg.cn/mw690/9b6feba7ly1g5l6z42v5zj24lz3gg1l1.jpg" alt="章若楠">
</a>

<a href="http://baidu.com" title="这是百度链接" target="_blank">百度一下</a>  // 
新标签打开 : _blank

target 属性

值描述
_blank在新窗口中打开被链接文档。
_self默认。在相同的框架中打开被链接文档。
_parent在父框架集中打开被链接文档。
_top在整个窗口中打开被链接文档。
framename在指定的框架中打开被链接文档

3. 锚点跳转

<body>
    <a href="#middle">中间</a>
    <a href="#finally">末尾</a>
    
    <p id="middle">这是中间部分</p>
    <hr>
    <p id="finally">这是尾部部分</p>
</body>

tips

随机生成内容:
lorem + 想要生成内容的字数   tab后生成英文内容

4. 媒体

audio 音频

方式一 :
<audio src="audio/爱的就是你-刘佳.mp3" controls='controls'>浏览器不支持</audio>
controls 声音控制, 如果浏览器不支持则会显示后面的文字
方式二 :
    <audio controls='controls'>
        <source src="audio/爱的就是你-刘佳.mp3">  <!-- 只播放第一个 -->
        <source src="audio/斧头舞.mp4">
    </audio>

背景音乐

<audio src="http://music.163.com/song/media/outer/url?id=518076141.mp3" autoplay="autoplay" loop="loop">
属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。
mutedmuted规定视频输出应该被静音。
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcurl要播放的音频的 URL。

video 视频

<video src="video/斧头舞.mp4" controls='controls'height="360px";width="540x">浏览器不支持</video>
属性值描述
autoplayautoplay如果出现该属性，则视频在就绪后马上播放。
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

5. 列表

有序/无序列表

    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    <ol start="10" reversed type="I">  <!--倒叙-->
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

有序列表

属性值描述
reversedreversed规定列表顺序为降序。(9, 8, 7, …)
startnumber规定有序列表的起始值。
type1、A、a、I、i、suqare、circle规定在列表中使用的标记类型。

定义列表

dt dl dd

<dt> 标签用于定义列表中的项目（即术语部分）。
<dl> 标签定义了一个包含术语定义以及描述的列表。
<dd> 标签用于定义列表中项目的描述部分。

实例

<body>
    <h2>一个定义列表：</h2>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
</body>
模拟显示效果:
计算机
    用来计算的仪器.. ...
显示器
    以视觉方式显示信息的装置 ... ...

6.表单标签

<body>
    <form action="http://127.0.0.1:9966">   <!--提交的服务器地址和端口-->
        <label>用户名</label>
        <input type="text" id="user" placeholder="请输入用户名">
        <br>
        <br>
        <label>密 码</label>
        <input type="password" placeholder="请输入密码">
        <br>
        <br>
        <label>性①别</label>   <!--下拉选择-->
        <select name="sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        <br>
        <br>
        <label>性②别</label>   <!--单选-->
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女
        <br>
        <br>
        <input type="checkbox" name="hobby" value="1">唱
        <input type="checkbox" name="hobby" value="2">跳
        <input type="checkbox" name="hobby" value="3">rap
        <br>
        <br>
        <label>个人介绍</label>
        <textarea name="info" id="" cols="30" rows="10"></textarea>
        <br>
        <br>
        <input type="hidden">    <!--隐藏-->
        <input type="date">     <!--选择日期-->
        <input type="file">     <!--文件上传-->
        <input type="submit" value="提交">
        <input type="reset">    <!--重置-->
        <br>
        <br>
        <!-- for属性,点击lable中的内容,让for标示的id对应的元素获得焦点-->
        <label for="use">用户名</label>
        <input type="text" name='username' id="use" >
    </form>

7. 样式(CSS)/节

1. 导入css

方式一 : 行内引入

<body>  
    <div style ='color:red'>asdfg</div>
</body>

方式二 : 内联引入

<head>
    <style>
        div{
            color:aqua;
        }
    </style>
</head>
<body>  
    <div>asdfg</div>
    <div>asdfg</div>
</body>

方式三 : 外链引入

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div>asdfg</div>
</body>
</html>


index.css :
div{
    color: darkorange;
}

方式四 : 导入式

<head>
    <style>
        @import "index.css";
        /*@import url("index.css");*/
    </style>
</head>
<body>
    <div>asdfg</div>
</body>

2. 节标签

div-独占一行
span

3. 语义化标签

<header>    //对主页的介绍
<section>   //文档中的区段
<footer>    //文档中的页脚部分
<arcticle>  //文档的内容
<nav>       // 标签定义导航链接的部分。

8. 设置浏览器标签图标

favicon.ico

1. favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上，是展示网站个性的缩略logo标志
2. favicon.ico也可以说是网站头像,目前主要的浏览器都支持favicon.ico图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico是必不可少的

在线制作

http://www.faviconico.org/

设置图标

方式1. 将制作好的图片放到项目的根目录
方式2. 在head当中添加以下标签图标:
    在<head>加:
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

9. 清除网页外边距

<body style="margin: 0;">

CSS

1. 引入方式

行内样式 style="color:red;height:200px"
内接样式 
<style>
  div{
      color:red;
  }
</style>
外接样式1.(链接式,导入式)
    <link href='xxxx.css'>
    <link rel="stylesheet" href="index.css">
外接样式2.
    <style>
        @import url('地址')
    </style>

2. 选择器

什么是选择器 :
    对指定的标签设置样式，要把指定的标签选择出来

2.1 通用选择器

通用选择器，可以同时选中页面中的所有元素。
`语法
*{ }

2.2 标签选择器

<style>
    div{
    color: darkorange;
        }
</style>

2.3 类选择器

    <style>
        .div{   /* 用点'.'+类名引用   */
            color: darkorange;
        }
        .div1{  
            color: orange;
            font-size: 100px;
        }
    </style>
</head>
<body style="margin: 0;">
    <div class="div">设置类选择器01</div> /* div是类名 */
    <div class="div div1">设置类选择器02</div>  /* 一个标签可以设置多个类名 */
    <div class="div1">设置类选择器03</div>
</body>

2.4 ID选择器

ID是唯一的

    <style>
        #div1{
            font-size: 100px;
            background-color:darkturquoise;
        }
        #div2{
            color: greenyellow;
           font-weight: bold;
        }
    </style>
</head>
<body style="margin: 0;">
    <div id="div1">设置ID选择器01</div>
    <div id="div2">设置ID选择器02</div>
</body>

2.5 复合选择器

    <style>
        div.test1{
            font-size: 50px;
        }
        p.test2{
            color: #f30c65;
        }
    </style>

</head>
<body style="margin: 0;">
    <div class="test1">这个是div标签01</div>
    <div>这个是div标签02</div>
    <hr>
    <p>这是p段落标签1</p>
    <p class="test2">这是p段落标签2</p>
    <hr>
    <span class="test3">这是span标签01</span>
    <span>这是span标签02</span>
</body>

2.6 群组选择器

群组选择器，可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

        div, span,p{
            background-color: #deff3b;
        }
    </style>

</head>
<body style="margin: 0;">
    <div class="test1">这个是div标签01</div>
    <div>这个是div标签02</div>
    <hr>
    <p>这是p段落标签1</p>
    <p class="test2">这是p段落标签2</p>
    <hr>
    <span class="test3">这是span标签01</span>
    <span>这是span标签02</span>
</body>

2.7 后代选择器

    <style>
       #main p{         /* 只找main下p标签这一层  */
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <div id="main">
        <p>div中的p标签     /* 变 */
        <div>div-p-div标签</div>  /* 不变 */
        </p>
        <span>
            <div><p>span中的p标签</p></div>  /* 变 */
        </span>
    </div>
    <p>外面的p标签</p>       /* 不变 */
</body>

2.8 直接后代选择器

    <style>
       #main>p{         /* 只找main下的第一层p */
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <div id="main">
        <p>div中的p标签
        <div>div-p-div标签</div>
        </p>
        <span>
            <div><p>span中的p标签</p></div>
        </span>
    </div>
    <p>外面的p标签</p>
</body>

2.9 兄弟选择器

拿到下面的一个元素

    <style>
       div+p{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p>批标签</p>
    <p>批标签</p>
    <div></div>
    <p>皮标签</p>      /* 变色 */
    <p>皮标签</p>
</body>

查找下面的所有兄弟

    <style>
       div~p{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p>批标签</p>
    <p>批标签</p>
    <div></div>
    <p>皮标签</p>  /* 变色 */
    <p>皮标签</p>  /* 变色 */
</body>

2.10 属性选择器

属性选择器可以挑选带有特殊属性的标签 :
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

    <style>
       p[name_p]{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p name_p="pp">批标签</p>  /* 变色 */
    <p name_p="ss">皮标签</p>  /* 变色 */
    <p>皮标签</p>
</body>

    <style>
       p[name_p='ss']{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p name_p="pp">批标签</p>
    <p name_p="ss">皮标签</p>  /* 变色 */
    <p>皮标签</p>
</body>

    <style>
       p[name_p][age_p]{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p name_p="pp" age_p="18">批标签</p>   /* 变色 */
    <p name_p="ss">皮标签</p>
    <p>皮标签</p>
</body>

2.11 伪类和伪元素

":after" 伪元素可以在元素的内容之后插入新内容 :
在每个 <h1> 元素后面插入一幅图片：
h1:after
  {
  content:url(logo.gif);
  }

":before" 伪元素可以在元素的内容前面插入新内容 :
在每个 <h1> 元素前面插入一幅图片：
    h1:before
  {
  content:url(logo.gif);
  }

"first-line" 伪元素用于向文本的首行设置特殊样式。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：

注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-letter" 伪元素：
font   color   background   margin   padding   border   text-decoration
vertical-align(仅当loat为none时)   text-transform
line-height   float   clear

    <style>
       p:first-line{
           color: #ff5a17;
       }
    </style>
</head>
<body style="margin: 0;">
    <p >批标签中华人民共和国</p>  /* 第一个字变色 */
    <p >皮标签中华人民共和国</p>  /* 第一个字变色 */
    <p>皮标签中华人民共和国</p>   /* 第一个字变色 */
</body>

2.12. hover 选择器

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover
{ 
background-color:yellow;
}

2.13. focus 选择器

选择获得焦点的输入字段，并设置其样式：

    <style>
        input:focus{
            width: 500px;
            height: 50px;
            background-color:yellow;
        }
    </style>
</head>
<body style="margin: 0;">
    <input type="text">
</body>

2.14. 否定伪类

否定伪类可以帮助我们选择不是其他标签的某个标签。

比如div:not(.box)表示选择所有的div元素但是class为box的除外。

2.15. 序号选择器

1. 不区分类型
:first-child    选中同级别中第一个标签
:last-child     选中同级别中最后一个标签
:nth-last-child(n)  选中同级别中倒数第n个标签
:nth-child(n)   选中同级别中第n个标签
:only-child     选中同级别中唯一子元素标签

    <style class="">
        li:nth-child(odd){
            color:aqua;
        }
    </style>
</head>
<body>
    <ul class="">
        <li class="">1</li>
        <li class="">2</li>
        <li class="">3</li>
        <li class="">4</li>
        <li class="">5</li>
        <li class="">6</li>
        <li class="">7</li>
    </ul>
2. 区分类型
:first-of-type
        选中同级别中同类型第一个标签
:last-of-type
        选中同级别中同类型最后一个标签
:nth-of-type(n)
        选中同级别中同类型第n个标签
:nth-last-of-type(n)
        选中同级别中同类型倒数第n个标签
:only-of-type
        选中同级别中唯一同类型子元素标签
3. 奇偶选择
:nth-child(odd)
        选中级别中所有奇数
:nth-child(even)
        选中同级别中所有的偶数
:nth-child(xn+y)
        x,y是用户自定义的 n为计数器,从0开始递增选择,  到元素的总个数停止

3. html标签分类

3.1块元素

特点

1. 自己单独占一行，就像一个段落
2. 能随时设置宽度和高度

常见块元素

ul  li  form    h1-h6   hr  p   div

3.2. 内联(行内)元素

特点

1. 不会自己独立占一行，就好像一个单词，一直往后排
2. 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变

常见内联元素

a  br   em  img label   span

3.3. 内联(行内)-块级元素

特点

1. 多个内联(行内)-块级元素可以在一行
2. 能设置宽度和高度

常见块级元素

input   select  textarea

3.4. 块元素与内联元素相互转换

把内联 (行内) 元素转成块元素

display:block  -- 显示为块级元素
display:none -- 隐藏

把块元转成内联 (行内) 元素

display:inline  -- 显示为内联元素
display:none -- 隐藏

转为内联块元素

dipslay:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

4. 盒子模型

  • 网页上的每一个标签就是一个盒子
  • 每一个盒子都有四个属性

4.1 内容 - content

  • 盒子里装的东西 - 网页中通常是指文字和图片

  • 属性描述
    height设置元素高度
    max-height设置元素的最大高度
    min-height设置元素的最下高度
    width设置元素宽度
    max-width设置元素的最大宽度
    min-width设置元素的最小宽度

4.2 填充 (padding,内边距)

  • padding 是盒子与内容之间的距离

  • 属性描述
    padding-top设置元素的顶内边距
    padding-right设置元素的右内边距
    padding-bottom设置元素的下内边距
    padding-left设置元素的左内边距
  • 设置上右下左内边距分别为 :10px 5px 15px 20px
padding : 10px 5px 15px 20px

  • 设置上下内边距都为10px,左右内边距都为5px :
padding : 10px 5px

  • 设置上边距10px , 左右内边距5px , 下边距15px
padding : 10px 5px 15px

  • 设置四个内边距都是10px
padding : 10px

4.3. 边框 - border :盒子本身

border 简写属性在一个声明设置所有的边框属性。

值描述
border-width规定边框的宽度。(px) 可以这样 :border-width:20px 10px 20px 10px ;
border-style规定边框的样式。
点线 ：dotted ；
实线 ：solid ；
双实线 ： double ；
虚线 ：dashed
可以这样 ：border-style:dotted solid double dashed;
border-color规定边框的颜色。可以这样 ：border-color:red green blue pink;
inherit规定应该从父元素继承 border 属性的设置。
值描述
border-top设置元素的上边框
border-right设置元素的右边框
border-bottom设置元素的下边框
border-left设置元素的左边框
border-radius设置边框圆角 50% 为圆形 数值px 或 数值%
border-top-left-radius设置左上角圆角 数值px 或 数值%
可以这样 :
border:fuchsia dashed 5px;

width: 200px;
height:200px;
border:fuchsia solid 10px;
border-top-left-radius: 50%;
border-bottom-right-radius:50%;

4.2 边界 - margin : 外边界

盒子之间的距离称为margin - 从边框开始往外的距离

属性描述
margin在一个声明中设置所有外边距属性
margin-top设置元素的上外边距
margin-right设置元素的右外边距
margin-bottom设置元素的下外边距
margin-left设置元素的左外边距
设置上右下左外边距分别是 :10px 5px 15px 20px;
margin:10px 5px 15px 20px;

设置上10px , 左右5px , 下15px
margin : 10px 5px 15px

设置上下10px , 左右5px
margin : 10px 5px

设置所有外边距都为10px
margin : 10px

5. 浮动 - float

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit规定应该从父元素继承 float 属性的值。
把图像向右浮动：
img{float:right;}

6. 标签居中

6.1 水平居中

行内标签水平居中

text-align:center

块级标签水平居中

margin:0 auto

6.2 垂直居中

行内标签垂直居中

line-height:height;

块级标签垂直居中

定位

6.3. vertical-align - 垂直对齐方式

vertical-align 属性设置元素的垂直对齐方式。

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
值描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
设置行内标签的文字和图片在在基线轴的中部
父级样式和img标签都要设置 vertical-align

<style class="">
        #box{
            background-color:cyan;
            width:800px;
            height:600px;
            text-align:center;
            line-height:600px;
            vertical-align:middle;
        }
        span{
            background-color: orange;
        }
        img{
            vertical-align:middle;
        }
    </style>
</head>
<body>
    <div id="box">
        <span class="">行内标签1</span>
        <img src="http://img3.imgtn.bdimg.com/it/u=4200179912,1171200473&fm=15&gp=0.jpg" alt="" class="">
        <span class="">行内标签2</span>
    </div>
</body>

7. css常见属性

7.1 visibility - 可见性

visibility 属性规定元素是否可见。
提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
值描述
visible默认值。元素是可见的。
hidden元素是不可见的。
使h2不可见 :
h2
  {
  visibility:hidden;
  }

7.2. cursor - 光标指针

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值描述
url需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default默认光标（通常是一个箭头）
auto默认。浏览器设置的光标。
crosshair光标呈现为十字线。
pointer光标呈现为指示链接的指针（一只手）
move此光标指示某对象可被移动。
e-resize此光标指示矩形框的边缘可被向右（东）移动。
ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize此光标指示矩形框的边缘可被向上（北）移动。
se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize此光标指示矩形框的边缘可被向下移动（南）。
w-resize此光标指示矩形框的边缘可被向左移动（西）。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。
此光标指示程序正忙(通常是一只表或沙漏）:
cursor:wait;

7.3. color - 字体

为不同元素设置文本颜色

三种书写格式

  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
p
  {
  color:rgb(0,0,255);
  }

7.4. font - 字体

font 简写属性在一个声明中设置所有字体属性

值描述
font-style规定字体样式:
normal :正常(默认)
italic :斜体
oblique:倾斜
font-weight规定字体粗细
bold :粗体
bolder :更粗
lighter :更细
100-900 :定义由粗到细,400=normal,700=bold
font-size/line-height规定字体尺寸和行高。
font-family规定字体系列。
Arial , Helvetica , sans-serif
浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。
caption定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon定义被图标标记使用的字体。
menu定义被下拉列表使用的字体。
message-box定义被对话框使用的字体。
small-captioncaption 字体的小型版本。
status-bar定义被窗口状态栏使用的字体。

7.5. text-decoration - 文本的修饰

text-decoration 属性规定添加到文本的修饰。

值描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。

7.6. text-indent -首行文本缩进

该样式需要指定一个长度，并且只对第一行生效。

值描述
length定义固定的缩进。默认值：0。
%定义基于父元素宽度的百分比的缩进。

7.7. text-align - 文本水平的对齐方式

值描述
left把文本排列到左边。默认值：由浏览器决定。
right把文本排列到右边。
center把文本排列到中间。
justify实现两端对齐文本效果。

7.8. text-transform - 控制文本大小写

值描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母，仅有小写字母。

7.9. list-style -type - 列表属性样式

list-style-type

值描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)

7.10. overflow - 元素框溢出事件

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

7.11. line-height - 设置行高

值描述
normal默认。设置合理的行间距。
number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。

7.12. box-sizing - 定义匹配某个区域

    box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
    例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
值描述
content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

8. position - 定位

position 属性规定元素的定位类型。

    这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值描述
absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

8.1 .相对定位 - relative

1. 开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2. 相对定位元素相对于其自身在文档流中的位置来定位
3. 相对定位的元素不会脱离文档流
4. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5. 相对定位的元素会提升一个层级

实例

        img{
            position:relative;
            left:100px;
            top:100px;
        }

8.2. 绝对定位 -

1. 元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2. 绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3. 绝对定位的元素会完全脱离文档流
4. 绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5. 绝对定位会使元素提升一个层级

8.3. 固定定位 - fixed

1.  固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样
2.  不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动

8.4. 层级关系

z-index z-index:999;

1. z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
2. Z-index 仅能在定位元素上奏效（例如 position:absolute;）

9. background - 背景

9.1. background

background 简写属性在一个声明中设置所有的背景属性。

值描述
background-color规定要使用的背景颜色。
background-position规定背景图像的位置。
background-size规定背景图片的尺寸。
background-repeat规定如何重复背景图像。默认平铺 不平铺:no-repeat
background-origin规定背景图片的定位区域。
background-clip规定背景的绘制区域。
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。
background-image规定要使用的背景图像。

9.2. background-position

值描述
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

9.3. repeat

repeat:
        默认值，背景图片会平铺显示
        沿x轴和y轴双方向重复
no-repeat:
        背景图片不重复
repeat-x:
        背景图片沿水平方向重复
repeat-y:
        背景图片沿垂直方向重复

9.4. background-size

length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

9.5. background-attachment

用来设置背景是否随页面滚动

可选值:
1. scroll :
    默认值，背景图片会随页面一起滚动
2. fixed :
    1. 背景图片不随页面滚动，会固定在页面的指定位置
    2. 设置该属性的背景，则背景会永远相对于浏览器窗口进行定位
    3. 一般这种背景都会设置给body

10. opacity - 不透明度

值 : 0~1

div
{
opacity:0.5;
}

常用CSS属性

1. transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

2. 移动 - translate

值描述
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是用 X 轴的值。
translateY(y)定义转换，只是用 Y 轴的值。
translateZ(z)定义 3D 转换，只是用 Z 轴的值。

例子

    <style class="">

        div{
            background-color: deeppink;
            width:100px;
            height:100px;
            transition:all 0.5s ease-out;
        }
        div:active{
            transform:translate(100px)
        }
    </style>
</head>
<body>
    <div class=""></div>
</body>

3. transition-timing-function 属性

以相同的速度从开始到结束的过渡效果

linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    <style class="">

        div{
            background-color: deeppink;
            width:100px;
            height:100px;
            transition:all 0.5s ;
            transition-timing-function:ease-out;
        }
        div:active{
            transform:translate(100px)
        }
    </style>
</head>
<body>
    <div class=""></div>
</body>

4. 缩放 - scale

值描述
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    <style class="">

        div{
            background-color: deeppink;
            width:100px;
            height:100px;
            margin:200px auto;
             /* 过渡效果 */
            transition:all 0.5s ease-out;
            /* 改变中心点 */
            transform-origin:left top;            
        }
        div:hover{
            transform:scale(1.5)
        }
    </style>
</head>
<body>
    <div class=""></div>
</body>

5. transform-origin - 改变中心点

值描述
x-axis定义视图被置于 X 轴的何处。可能的值：leftcenterright*length**%*
y-axis定义视图被置于 Y 轴的何处。可能的值：topcenterbottom*length**%*
z-axis定义视图被置于 Z 轴的何处。可能的值：length

6. rotate - 旋转

rotate(angle)定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
<style class="">

        div{
            background-color: deeppink;
            width:100px;
            height:100px;
            margin:200px auto;
            transition:all 0.5s ease-out;

            /* 改变中心点 */
            /* transform-origin:left top; */
        }
        div:hover{
            /* z方向顺时针旋转90° */
            transform:rotatez(90deg);
        }
    </style>
</head>
<body>
    <div class=""></div>
</body>

网页favicon.ico图标设置

第一种方式：放在根目录

这种方法最简单，在服务器根目录下放一个 favicon.ico 的文件，浏览器发现后就会使用。
注：这种方式，ico文件的名称一定要叫：favicon

第二种方法：link标签

在head里面加入代码：

<link rel="shortcut icon" href="ico文件url">
或
<link rel="icon" href="../favicon.ico">
或
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

favicon的格式一定是ico格式吗？

favicon的格式不一定是ico格式，它可以是png，jpg甚至是gif，不过ico格式是所有浏览器都支持的。

favicon.ico的尺寸有16×16、32×32、48×48，在添加到桌面、任务栏小尺寸的图标就不是很理想了，这就需要多种尺寸兼容各种设备和情况。

转载于:https://www.cnblogs.com/qmuy/p/11477413.html

dee73219
关注
电子木鱼网页版(教学+源码带注释)
zhangawei123的博客
11-05 2万+
近日在网上经常看见电子木鱼的案例，但都是做的小程序，本人就突发奇想，使用css和JavaScript在网页中实现这个功能。于是便有了这个文章。有细致的讲解，也把源码都放在了最后，没有耐心的小伙伴可以直接去看源码，内有详细注释。
html和css概述
xwj144的博客
08-16 269
W3C万维网联盟： 是国际最著名的标准化组织，用来制定web（网页）的标准。到目前为止W3C已经发布了200多项影响深远的web技术标准及其指南。 HTML： html全称HyperText Markup Language 用来定义文档的内容结构，中文：超文本标记语言。 HTML5中的变化：html由08年发布草案，12年形成稳定版本 标签： doctype、meta 新增语义化标签和属性 去掉了纯展示性的标签 添加canvas、video、dudio、本地储存、拖拽 语法： 标记不区
微信小程序项目-电子木鱼
记录及分享编程和收租生活。
12-25 1553
useWebAudioImplement : true // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项 }) innerAudioContext . src = '/images/music.mp3' //Page Object Page({data : {} , // 创建动画 onShow : function() {
将float元素居中的几种办法
”前端金城武”“哦”
04-25 2万+
在HTML+CSS布局中，元素的居中一直是定位非常重要的部分，今天第一天写博，就从这个让我比较头疼的定位布局开始吧~ 下面这些方法基本上是我在网上查阅资料以及自己的一些思考改良所得，不完全算是自己的原创。
HTML5——学习记录1
weixin_45019830的博客
07-22 215
写一些博客用来记录我学习HTML5+CSS3，好吧我也不是个什么牛逼的大神，所以我就只能用一些很通俗的语言把话说明白吧哈哈哈哈哈…那直接开始吧 HTML概述 HyperText MarkUp Language超文本标记语言，HTML不区分大小写，它是制作网页的标准语言 第一个HTML程序 直接用记事本写下： ```bash <!DOCTYPE html> <html> <head> <title>第一个程序</title> </h
HTML_and_CSS_projects
02-15
"HTML_and_CSS_projects"这个项目很可能是包含一系列练习或实例，帮助学习者深化对HTML（超文本标记语言）和CSS（层叠样式表）的理解。下面我们将深入探讨HTML与CSS的相关知识点，并结合项目文件名...
html_and_css_basic
02-21
在这个名为"html_and_css_basic"的压缩包文件中，我们可以推测它包含了一些关于HTML和CSS基础的教程或项目。 HTML基础知识： 1. **元素与标签**：HTML由一系列的元素构成，每个元素由起始标签（如`<p>`)和结束标签...
HTML_And_CSS_Template_One:HTML和CSS设计第一
03-31
在本教程“HTML_and_CSS_Template_One”中，我们将学习如何组织一个有效的HTML结构，包括使用头部（`<head>`）、主体（`<body>`）和元信息（如 `<meta>` 标签）。此外，我们还将探讨外部和内部CSS的使用，以及如何将...
用JS做一个电子木鱼
最新发布
daibadetianshi的博客
04-22 887
敲电子木鱼，积赛博功德这样的网页需要有两个部分组成，一部分是css里面的网页布局设计，另一部分是用JS写的内部程序。
CSS
qq_30075075的博客
10-16 264
<<<<<<< HEAD CSS 1. 引入方式 方式一 : 行内引入 <body> <div style ='color:red'>asdfg</div> </body> 方式二 : 内联引入 <head> <style> div{ ...
css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）
朝阳39的博客
11-18 7262
实现原理 添加resize 属性即可实现： none：初始值，表示没有拉伸效果，常用来重置<textarea>元素内置的拉伸行为，代码如下： textarea { resize: none; } both：既可以水平方向拉伸，也可以垂直方向拉伸。 horizontal：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。 vertical：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。 block：后期新增的属性值，目前现代浏..
SpringBoot thymeleaf自定义错误页面
憧憬个人博客
02-21 1964
导入thymeleafpom.xml<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency...
纯css实现背景图片半透明，内容不透明
热门推荐
一个安全研究员
03-12 3万+
前言 最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。 效果展示 半透明 不透明 常见的失败做法 最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。 还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方...
HTML背景颜色及透明度设置
Procrastination
07-10 3万+
初学HTML，在学习的过程中偶然发现了背景颜色透明度的设置方法挺有趣，顺便把颜色的设置方法复习总结一下 设置背景颜色有三种方法，分别是:sRGB,十六进制和颜色名； 十六进制： text RGB： text 颜色名：（如：yellow,lightred,black等等） text 用RGB值法还可以设置背景颜色的透明度，我一般把它用于调整颜色
用HTML写个人简历
Faith_xzc
02-27 1554
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值