整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

css篇二 css选择器

果要给一个html标签添加样式，使其变个更加美观。那么就要先选中它。否则鬼才知道你要给谁加样式呢。

就好比你要让Tom帮你拿杯水，那你先必须叫他的名字，在对他说：帮我拿杯水过来。否则，鬼知道你在让谁帮你拿杯水过来。

在开始之前，我们先创建一个index2.html文件，用来学习下面的效果使用：

内容如下：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>无</span>
</body>
</html>


css选择器分类：

css选择器分为三大类，每个大类下面又分若干小类，它们分别是：

一、基本选择器

1.通用选择器

*{
     border:1px solid red;
 }

“*” 号选择器是通用选择器，功能是匹配所有html元素的选择器，包括<html>和<body>标签。

使用通用选择器来添加样式：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    *{
      border: 1px solid red;
    }
</style>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>无</span>
</body>
</html>

页面效果如下图：

上图中一共有五个红框，最外面的红框是<html>标签，第二个红框是<body>标签,第三个红框是<p>标签，第四个红框是<b>标签，第五个红框是<span>标签。通用选择器就是选中页面中的所有元素，大家可以多加几个元素测试一下。


2.元素选择器

p{
    color:red;
}

直接使用标签名称作为选择器就称为元素选择器。

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    p{
      color:red;
    }
</style>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>无</span>
</body>
</html>

页面效果如下图：

你也可以试一试把加粗两字变红或者变绿，发挥想象自己变一下吧。


3.ID选择器


在html篇，我们讲过元素的属性，id是元素的通用属性，每个标签都可以加上id属性。例如我们可以给p标签加上id="abc"

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    #abc{
      color:red;
    }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b>加粗</b>
  <span>无</span>
</body>
</html>

id选择器以#开头，代表就是id，p标签的id="abc"，那在写css样式的时候，就要写成#abc。

页面效果如下图：

当然你也可以给b标签加一个id属性，然后用css的id选择器将b标签的文字变为蓝色。

这里要注意一点：在一个页面中id的名字不可以重复，我们p标签的id为abc，那么b标签的id就不能为abc了。


4.类选择器

和id一样，class也是一个元素的通用属性，我们可以给span加一个classs属性：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    .test{
      color:red;
    }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">无</span>
</body>
</html>

类选择器以"."开头，例如：要把span标签里面的文字变成红色，css的选择器就应该写成 .test。class和id不同，class可以重名，我们这里span标签和b标签的class都是test。所以

.test{
    color:red;
 }

会同时作用span和b标签。

页面效果如下图：

span和b标签里面的文字都变红了。

5.属性选择器

每个标签都有四个通用属性，分别是：id、class、name、title，还有专用属性，比如href这个属性就专属于a标签。属性选择器就是根据元素的属性来进行选择，就拿a标签来举例：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    [href]{
      color:red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>    
</body>
</html>

页面效果如下：

属性选择器还以进一步过滤，比如我们有好多的a标签：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">网易</a>
  <a href="https://www.php.net">php</a>
</html>

我们要选择以http开头的，那么就可以写成：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    [href^="http"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">网易</a>
  <a href="https://www.php.net">php</a>
</html>

[href^="http"]意思就选择href属性以http开头的html标签。有开头就有结尾，比如我们选择以net结尾的标签：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    [href$=".net"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">网易</a>
  <a href="https://www.php.net">php</a>
</html>

有开头有结尾，那有没有中间呢？有，*可匹配属性值包含指定字符的标签，比如我们要选择百度：

<!DOCTYPE html>
<html>
<head>
  <title>css选择器</title>
  <style>
    [href*="baidu"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">网易</a>
  <a href="https://www.php.net">php</a>
</html>

上面效果图我就不展示了，大家可以自测试一下效果。

二、复合选择器

1.分组选择器

将多个选择器通过逗号分隔，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用ID选择器、类选择器、属性选择器混合使用。

比如我们可以同时选中p、b、span标签将它们的文字变为红色：

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p,b,span{
         color: red;
       }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">无</span>
</body>
</html>

也可以：

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       #abc,.test{
         color: red;
       }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">无</span>
</body>
</html>


2.后代选择器

选择p元素内部的所有b元素，不在乎b的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p b{
         color: red;
       }
</style>
</head>
<body>
  <p>
    <b>1</b>
    <b>2</b>
    <b>3</b>
    
    <b>
      202
      <b>4</b>
    </b>
    <b>
      203
      <b>
        204
        <b>5</b>
      </b>
    </b>
  </p>
</body>
</html>

页面效果如下图：


3.子选择器

子选择器类似于后代选择器，而最大的区别就是子选择器只能选择父元素下一级的元素，不可以再往下选择。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       ul > li{
         border:1px solid red;
       }
</style>
</head>
<body>
  <ul>
    <li>
      我是儿子
      <ol>
        <li>我是孙子</li>
        <li>我是孙子</li>
      </ol>
    </li>
    <li>我是儿子</li>
    <li>我是儿子</li>
  </ul>
</body>
</html>

页面效果图如下：

4.相邻兄弟选择器
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p+b{
         border:1px solid red;
       }
</style>
</head>
<body>
  <p>第一个</p>
  <b>第二个</b>
  <b>第三个</b>
  <b>第四个</b>
</body>
</html>

页面效果图如下：

5.普通兄弟选择器

普通兄弟选择器匹配和第一个元素后面的所有元素。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p ~ b{
         border:1px solid red;
       }
</style>
</head>
<body>
  <p>第一个</p>
  <b>第二个</b>
  <b>第三个</b>
  <b>第四个</b>
</body>
</html>

页面效果图如下：


三、伪元素选择器

1.::first-line 块级首行

块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置P::first-line。什么是块级元素我们在html篇中讲过，块级元素就是独占一行的元素。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       ::first-line{
         color:red;
       }
</style>
</head>
<body>
  <p>这里是测试<br>这里是第二行</p>
  <div>这里是测试<br>这里是第二行</div>
</body>
</html>

页面效果如下图：

如果只想改变p标签首行的样式，那么在前面加上限定p::first-line

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p::first-line{
         color:red;
       }
</style>
</head>
<body>
  <p>这里是测试<br>这里是第二行</p>
  <div>这里是测试<br>这里是第二行</div>
</body>
</html>

2.::块级首字母
块级元素的首行字母，上面的是首行，现在这个是首行的字母。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       p::first-letter{
         color:red;
       }
</style>
</head>
<body>
  <p>这里是测试<br>这里是第二行</p>
  <div>这里是测试<br>这里是第二行</div>
</body>
</html>

页面效果如下图：

3.::before 文本前插入

在文本前面插入内容。

<!DOCTYPE html>
<html>
<head>
    <title>css选择器</title>
    <style>
       a::before{
         content:'点击-';
       }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
</body>
</html>

页面效果如下图：


4.::文本后插入

文本后和文本前效果差不多，大家自行测试看效果。


今天的内容就这么多，一定记得多加练习。光看不练是永远都学不会的。

如果喜欢我的内容记得关注我，我的宗旨是用最通俗易懂的语言，让所有人都学会电脑编程。大家一起加油！

准命中

我写的样式老不生效啊，怎么办呢？要不来个important吧！反正催得急，先上线再说，有五个属性都要修改，但是都被覆盖了，emmm，那就加五个important吧。改到最后项目中随处都可见important的身影，当你或者其他人在为此抓狂的时候，它躲在一旁邪魅的一笑：就喜欢你看不惯我又干不掉我的样子！

简直笑哭

还有一种情况就是，不知道怎么选中需要设置样式的元素，所以就不断的加类名，费劲脑筋去想各种各样名称，又要见名知意，又要各有不同，因此五花八门越来越多的类名，搞得多人维护的项目变得越来越头大，甚至让人抓狂。

生无可恋

下面我们就来搞一搞，看看选择器有哪些好玩的地方。

优先级概念解析

一共大致分为五个等级：

  1. 内联样式：权重为(1,0,0,0)
  2. id选择器：权重为(0,1,0,0)。
  3. 类、伪类、属性选择器：权重为(0,0,1,0)。
  4. 标签、伪元素选择器：权重为(0,0,0,1)。
  5. 通用、子、相邻选择器：权重为(0,0,0,0)。

还有三个特殊的规则：!important、继承和默认代理样式。其中!important权重为无穷大。

他们之间的默认优先级顺序为：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承 > 代理(浏览器)默认属性。

样式生效的规则符合以下几点：

  1. 两个选择器权重不同时，权重搞得优先生效。
  2. 两个选择器权重相同时，后定义的优先生效(即层叠样式表的特性，后面定义的会覆盖前面定义的)。
  3. 被!important修饰的属性，会无条件的优先生效。

这里面还有几个需要注意的点：

  1. 所有权重中的0和1代表的是标识位，如内联样式的(1,0,0,0)代表第一等级标识位为1，并不是代表内联样式权重为1000，同样id选择器(0,1,0,0)代表第二个标识位为1，并不代表内联权重为100。也就是说#container {color: red}具有第二级权重。
  2. 同一权重等级下的选择器才可以累加，低等级权重的选择器永远不会超过高等级的选择器，如#a.b.c的优先级比#a.d的优先级要高，因为它们虽然都拥有第二等级权重，但是#a.b.c比#a.b多了一个第三等级的权重，而#a的优先级永远比.b.c(可以有任意多个低于第二等级权重的选择器)高，因为在进行权重比较的时候，是从高到低逐级比较的，#a选择器为第二等级，那么.b.c没有第二等级权重，即使有再多的第三级权重都没用。
  3. !important选择器虽然权重为无穷大，但是与数学中无穷大的比较不同，两个!important权重是可以进行比较的，两个同时拥有!important属性的选择器，也符合上面的比较规则，如#a中的!important要比.b中的!important优先级高。

权重逐级比较公式：(第一等级权重*该选择器个数,第二等级权重*该选择器个数,第三等级权重*该选择器个数,第四等级权重*该选择器个数,第五等级权重*该选择器个数)。

会逐个标识位进行比较，并不是进行简单的加法运算。

是的没错

写了这么长的文字，可是实在找不到可以插入一张图片的地方。总感觉思路会被打断。现在可以休息一下，稍后再往下看。

选择器类型解析

假设你已经对各种类型的选择器有所了解，知道了什么是类选择器、什么是内联样式、什么是标签选择器等。

接下来我们讨论一下几种组合选择器：(示例中都是用类名或标签作为选择器，因此为了简便，对于.a1这种的选择器，在表达的时候直接用a1来表示拥有类名a1的元素)

① *：这里先要介绍一下通用选择器，* {}选择器将会覆盖所有元素的代理默认样式，也可以用div.container * {}来指定对类名为container的div元素下的所有子孙元素应用样式。

② .a1 > .b1：表示给a1的子元素b1应用样式。只能是子元素，不包括孙子元素。

<style>
  .a1 > .b1{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li>
      <span class="b1">2</span>
  </li>
</ul>

选择子元素

③ .b1 + .b2：表示给b1后面的紧跟着的b2应用样式。

<style>
  .b1 + .b2{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li class="b2">2</li>
  <li class="b2">3</li>
</ul>

选择紧跟的

④ .b1 ~ .b2：表示给b1后面的b2应用样式。不用紧跟。

<style>
  .b1 ~ .b2{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li class="b2">2</li>
  <li class="b2">3</li>
</ul>

选择后面的

⑤ li:first-child：表示给li应用样式，但是li必须是属于其父元素的第一个子元素。li:last-child与其类似，但是li必须是属于其父元素的最后一个子元素，不再给出示例。

<style>
  li:first-child{
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  </ul>
  <ul>
    <li>3</li>
  <li>4</li>
</ul>

选择属于第一个子元素的

⑥ span:first-of-type：表示给span应用样式，其中只要span属于其父元素的所有子元素中的第一个span即可，即span前面的兄弟元素再没有其他的span，则应用样式。span:last-of-type与其类似，只是span后面的兄弟元素再没有其他的span，则应用样式，不再给出示例。

<style>
  span:first-of-type{
    color: red;
  }
</style>
<div>
  <span>1</span>
  <p>2</p>
  </div>
  <div>
    <p>3</p>
  <span>4</span>
</div>

选择第一种该类型

(Tips：first-child与first-of-type不同的地方在于，first-child必须是作为第一个子元素，而first-of-type是作为同一种类型中的第一个，他们都可修饰多个选择器，如.a.b:first-child。last-child和last-of-type同理。)

⑦ .b:not(li)：表示给b应用样式，但是li除外。

<style>
  .b:not(li) {
    color: red;
  }
li:not(.a) {
  color: red;
}
</style>
<ul>
  <li class="a">1</li>
  <li class="b">2</li>
  </ul>
  <div>
    <div class="a">3</div>
  <div class="b">4</div>
</div>

"非"修饰符

⑧ li:nth-child(order)：表示给li应用样式，但是li必须是属于其父元素的第order个子元素。li:nth-last-child(order)与其类似，但是li必须是属于其父元素的倒数第order个子元素，不再给出示例。

li:nth-child(2) {
  color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

可以指定为第几个元素应用样式

这里还有一个小技巧，比如我想要选择前五个li，能做到吗？当然可以。请看代码。

<style>
  li:nth-child(-n + 5) {
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

选择前五个元素

这是因为除了可以指定order之外，还可以指定一个迭代序列n(从0开始)，ul有8个li子元素，所以n可以取0,1,2,3,4,5,6,7，所以-n + 5可取出5,4,3,2,1,0,-1,-2，舍去负数，那么就是选中了1,2,3,4,5也就是前五个元素，注意这里只能写成-n + 5的形式，而不能写成5 - n的形式。

同样，它还有几种表达方式：(由于html部分与上面相同，不再重复列出)

<style>
  /* 选择第五个li元素，以及后面的所有li */
  li:nth-child(n + 5) {
    color: red;
  }
</style>

第五个及之后的元素

n+一个数字，表示这个数字以及之后的元素应用样式，-n+一个数字，表示这个数字以及之前的元素应用样式。

/* 以2的倍数选择li元素 */
li:nth-child(2n) {
  color: red;
}

只选择2的倍数

注意这里只能写成2n的形式，不能是2 * n或n * 2。

<style>
  /* 以2的倍数加1选择li元素 */
  /* n从0开始 */
  li:nth-child(2n + 1) {
    color: red;
  }
</style>

2的倍数加1

⑨ li:nth-of-type(order)：只在li类型中查找符合条件的来应用样式，与nth-child一样，只不过加了个类型区分。li:nth-last-of-type(order)与其类似，但是li必须是属于其父元素的倒数第order个子元素，不再给出示例。

<style>
  /* 按照同类型查找，不会受div影响 */
  li:nth-of-type(2n) {
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <div>9</div>
  <div>10</div>
  <li>3</li>
  <div>11</div>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

按照类型来查找

它们同样可以指定一个迭代序列n，与上面相同，故在此不做示例。

⑩ .a:only-of-type：表示给a应用样式，但是a的标签类型必须在其父元素中唯一。

<style>
  /* 注意：type指的是标签名要唯一才会生效 */
  .a:only-of-type {
    color: red;
  }
</style>
<div>
  <div class="a">1</div>
  <span>2</span>
  <p>3</p>
</div>
<div>
  <div class="a">1</div>
  <span>2</span>
  <p class="a">3</p>
  <!-- 如果去掉下面这一行，那么第一行的1也会变颜色 -->
  <div class="a">4</div>
</div>

对唯一的类型应用样式

哇！终于大概都讲完了。由于选择器太多了，篇幅有限，不能一一列举，其他的伪类、伪元素、属性选择器等，大家直接可以去官网查阅就可以了，都是基础的内容。

good job!

局部作用域

在vue中，由于组件化的概念，我们希望当前的样式只能当前文件中生效，不要影响全局的样式，因此可以给style标签设置scoped属性。这里有一套机制来保证每个组件间的样式是处于隔离状态的，不会互相影响，不但兄弟组件如此，父子组件也可以这样。

很好

这样是很好的，为我们带来了便利，并且不用为同名的问题所困扰，但是有一种情况是：当我们引用子组件的时候，想要修改它里面的样式，这个时候正常的选择器是无法生效的，我们无法选择到子组件里面的元素。

这是因为每一个组件都是独立样式作用域，它用一个唯一标识来区分，在父组件中写的样式，会自动在选择器的最后面加上这个唯一标识，而子组件中有自己的另一个唯一标识，所以会选择不到该元素。

这可怎么办？

这个时候我们可以使用一个叫做深度选择器的功能来帮助我们解决这个问题。

用>>>来表示，你也可以使用/deep/或者::v-deep，都代表相同的含义，只不过是写法不同，一个别名而已。

<style scoped lang="scss">
  .a >>> .b {
    color: red;
  }
</style>

经典案例

我们以下面这段html片段为例。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

区间选择：我们可以指定一个区间来选择指定的元素。

<style>  
	/* 选择2到5之间的 */
  li:nth-child(n + 2):nth-child(-n + 5) {
    color: red;
  }
</style>

区间选择1

<style>
  /* 选择4以及之后的，但必须是2的倍数 */
  li:nth-child(n + 4):nth-child(2n) {
    color: red;
  }
</style>

区间选择2

<style>
  /* 选择3的倍数之外的 */
  li:not(:nth-child(3n)) {
    color: red;
  }
</style>

伪类选择：我们可以通过伪类来做一些事情。

<style>
  span {
    cursor: pointer;
  }
  span + span {
    display: none;
  }
  span:hover + span {
    display: inline;
  }
</style>
<div>
  <span>查看识别码</span>
	<span>5201314</span>
</div>

默认状态

鼠标悬浮

题外话

说几句题外话，虽然不是选择器的内容，但是也跟它有关系，主要有以下几个方面：

  1. 我们在修改元素样式的时候，尽量先预设好选择器的样式，然后通过动态增加或移除相应的类名来达到效果，而不是直接设置style。
  2. 应该尽量避免使用id选择器，最好都通过标签、类名、属性选择器来操作样式。因为id选择器权重大，有时候覆盖起来不方便。而且id只能存在一个。再有一个就是id选择器会比类选择器给浏览器带来更大的负担。
  3. 尽量少使用!important，多通过上面讲述的权重规则来设定相应的样式。
  4. 尽量少用通用选择器，即通配符*，也会给浏览器增加负担。

CSS很厉害

总的来说

CSS选择器在我们实际开发工作当中不但是不可缺少的一部分，而且几乎时时刻刻都要与之打交道，熟练掌握他们的用法和原理，能够使我们在操作元素样式的时候得心应手，今天内容你学会了吗？[比心]

感谢阅读!

tml和css的使用方法以及样式，很好的基础知识系列，内容都是干货知识点，适合收藏下来！


布局步骤

第一步： 清除默认样式

第二步： 划分模块

第三步： 设置模块的大小以及位置

第四步： 划分下一级模块

html和css

引入网页头像

<link rel="shortcut icon" href="img/...ico">

css样式表的引入方式

css样式表的引入方式

1、外链式

<link href="" rel="stylesheet">

2、嵌入式

<style></style>

3、行内样式

<div style="width:200px;height:200pxs;"></div>

  1. @import url('')


文件命名以及变量命名

命名规范

1、严格区分大小写

2、可以采用字母数字下划线$,数字不开头

3、命名语义化

4、可以采用驼峰命名法

清除默认样式

清楚边距

*{

margin: 0;

padding: 0;

list-style: none;

}

a标签清楚下划线和颜色

a{

color: black;

text-decoration: none;

}

css中颜色的表示方式

css中颜色的表示方式：

1.预定义的颜色【关键字颜色】 red pink blue yellow

2.#6位数的色值 #00-00-00 红绿蓝

3.rgb（红，绿，蓝） ：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度） ：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的标签和属性


html：

标签：

按照语法分类：

1.单标签：只有开始标签

meta img a

2.双标签：有开始标签和结束标签

<html></html>

3.属性的语法

语法：

属性名 = "属性值"

属性名 = "属性值1 属性值2"

注意:

1、标签名和属性名之间要有空格

2、多个属性之间要有空格

3、多个属性值之间要有空格

4.开始标签 标签名后有空格

​


按照标签在页面中的呈现效果分类：

1、行内元素

行内元素定义:在一行内显示，只能设置左右间距，不可以设置上下间距。

举例：span del i em b strong a(title="鼠标移入时显示的文字";target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开) ...

2、块元素

块元素定义：可以设置宽高，独占一行。

举例：div 标题标签 列表标签 段落标签 ...

3、行内块元素

行内块元素定义：可以设置宽高，在一行显示。

举例：img 【title="鼠标移入时显示的文字" 】 表单控件

元素的转换

块元素： display:block;

行内块元素：display:inline-block;

行内元素： display:inline;


元素的级别

块元素 > 行内块元素 > 行内元素

元素嵌套规范

1、同一级别可以相互嵌套

2、级别高的元素可以嵌套级别低的元素

3、段落标签只能嵌套行内元素

4、a标签不可以嵌套a标签；p不能嵌套p

盒子模型及其问题

四部构成：

1、margin 外间距 盒子与盒子之间的距离

2、border 边框

3、padding 内填充（内间距） 边框与内容之间的距离。

4、content 内容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上 右 下 左

margin: 50px 100px; 上下 左右

margin:0 auto; auto自动

margin: 50px 100px 150px; 上 左右 下

margin: 50px 100px 150px 200px; 上 右 下 左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上边框的宽度

​

padding:设置方法同margin

​

content: ;

width : 数值 百分比 auto

height: 数值 百分比 auto

​


盒子模型的问题：

1.大部分元素的margin和padding默认为0，但有一部分的margin和padding不为0，例如body 标题标签（h1-h6）（ul ol il等列表标签） 段落标签

2.想领的两个块元素的margin会重合，值会取最大值

3.margin可以为[负数] ，padding不可以设置[负数]。

4.行内元素margin只有左右，没有上下

5.如果（1）发生嵌套关系的元素，（2）父元素没有上边框，（3）上padding ，（4）父元素与子元素之间没有别的内容，此时子元素margin-top就会作用到父元素身上

margin-top的解决方式：

1.用父元素的padding-top代替子元素的margin-top；

2.给父元素添加overflow：hidden；

宽高的设置和计算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto； 参照与父元素

width：auto；参照与内容

box-sizing：border-box； 将边框算入盒子内；

​

一个元素实际的宽高

实际宽度 = border-left + padding-left + width +paddint-right + border-right;

实际高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮动

作用：让块元素横排排列

样式： float：left；从左往右排列

float：right；从右往左排列

原理：让元素脱离文档流，让元素从文档层浮动到浮动层。

引发的问题：父元素不设置高度，子元素都浮动，浮动的子元素撑不开父元素。（浮动的元素脱离文档流）

*解决方式一：给父元素添加 overflow：hidden；（超出部分隐藏）

*解决方式二：在父元素内容最后添加拥有清除浮动属性的元素。

clear：right/left/both ； 别的浮动对它的影响清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解决方式三：父元素能设置高度的尽量设置高度

浮动之后的块元素参照内容：属性值 auto

定位

定位的元素脱离文档层，到达定位层

定位的元素会多出5个样式：

top right bottom left z-index：999

上 右 下 左 层级（层级越高，离用户越近）【只能在有定位属性的元素上才能用】

层级：

z-index：整数；

定位的几种方式：

1.相对定位：

相对于自身来定位，在文档层中保留原来的位置

用法：

position：relative；

2.绝对定位：

相对于最近的 定位的 祖先元素 来定位，完全脱离文档流（其他顶替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相对于浏览器的四条边，完全脱离文档流

用法：

position：fixed；

top与bottom同时定义，那个样式会作用到元素身上的判断关系：

top的权重比bottom的权重大

left的权重比right的权重大

元素作用时：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身长度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身长度的一半；

3.绝对居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身长度的一半；

margin-top：-自身长度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D属性：

1.平移样式

transform:translate(x,y); 向上为负， 向下为正

transform:translateX(100px);

transform：rotate（180deg） ； （1turn）转一圈

平移 transform:translate（） 例子：translate（x，y） translateX（）

旋转 transform:rotate（） 例子rotate（180deg）顺时针 -180deg 逆时针

transform：rotate（）空格translate（）；

transform-origin:px px;变换的中心点；

left center；

缩放 transform:scale（） 例子：scale（2） 放大为原来的2倍 scale（0.n）缩小为原 来的0.n scale（m，n） x轴m，y轴n

斜切 transform:skew（） 例子：skew（45peg） 左拉伸45° skew（45peg，m）

  1. 过渡transition
  2. transition：all 0.5s；

全部 时间

3.过渡的属性样式： transition-property: ， ;

可以为：属性的全部样式

4.过度的总时间： transition-duration：；

5.过渡的时间函数： transition-timing-function：；

linear（匀速） ease（开头结尾慢，中间快）

cubic-bezier（1，0.07，0.54，0.21） 贝塞尔曲线

6.延迟 transition-delay：；

​

3d效果：和2d的一样transition，transform；

prespective：给父元素加prespective（灭点的值）

prespective-origin：x y；灭点的位置 调整观察的角度（大多数情况不设置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

​

父元素：transform-style：preserve-3d；

动画

动画规则：

@keyframes 动画名（随便给）{

（动画规则）

from{}

to{}

}

@keyframes 动画名（随便给）{

（动画规则）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

}

​

挂载动画:将动画加到元素身上

.元素{

animation：animation1 时间 步数 时间函数 延迟时间 次数 ；

}

挂载多个动画：

.元素{

animation：animation1 时间,animation2 时间,animation1 时间；

其他动画的相同的可以附件通过animation属性；

}

animation的样式

动画名：animation-name

时间： animation-duration

步数：animation-steps：8；

时间函数：animation-timing-function

延迟： animation-delay

动画次数： animation-iteration-count：infinite（无限次）/2；

指定下一次动画是否逆向：animation-direction：alternate（逆向）/ normal（常规）；

最后的状态：animation-fill-mode：backwards（默认（保持一开始的状态））/forwards（保持当前的状态）；

状态即指定动画是否运动： animation-play-state: running（运行）/paused（静止）;

​

元素分类

按照在页面中的呈现效果：

1.行内元素：在一行内显示 ，不可以设置宽高 ：（存放文字）

span a b i strong del

2.行内块元素：在一行内显示，可以设置宽高：（有缝隙 不常用）

img 表单控件

3.块元素 ：可以设置宽高，独占一行

div 标题标签（h1-h6） 列表标签（ul-li ol-li dl>dt+dd 段落标签 （p pre））

元素嵌套规范：

1.同一级别可以相互嵌套

2.级别高的可以嵌套级别低的元素

3.p标签只能嵌套行内元素

4.a链接不能相互嵌套

元素的转换：

1.块元素：display：block；

2.行内块元素：display：inline-block；

3.行内元素：display：inline；

背景图片以及浏览器内核

背景图

先设大小，在引background；

background: url('路径') no-repeat left bottom/contain；

//图片位置 禁止重复 位置（top bottom left right）

  1. 路径：background-image：url（“”），url（“”）；加载多张背景图
  2. 背景图大小： background-size：100px auto，100px auto； 会重复
  3. 背景的图重复：

4. background-repeat：no-repeat，repeat；（无重复）

5. background-repeat：repeat-x（x方向重复）

background-repeat：repeat-y（y方向重复）

  1. 背景图的位置：


background-position：x y；（数值 方位值（top/bottom left/rightcenter（可以省略）） ）

  1. 背景开始渲染的位置： background-origin: ;


8. padding-box；（默认）从padding位置开始渲染

9. border-box；从边框的位置开始渲染

content-box；从内容的位置开始渲染

  1. 图片结束渲染的位置：background-clip: ;


11. padding-box；（默认）从padding位置结束渲染

12. border-box；从边框的位置结束渲染

content-box；从内容的位置结束渲染

  1. 使得背景图加载到浏览器中
  2. background-attachment: fixed;

8.可以简写：

background：空格隔开；

  1. 背景图渐变
  2. background: linear-gradiend(top，颜色1，颜色2，颜色n)

//渐变开始的方向（默认top） 类似25deg（25度）

10.浏览器内核//背景色渐变

1. /* 标准语法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌内核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐内核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 欧鹏内核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE内核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

​

文件的读取方法路径

绝对路径：从盘符开始的一条完整路径

相对路径：两个文件的位置关系

边框的相关属性【圆角，边框形状】

border-radius：边框的半径 设置圆角 n%或者num像素

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

透明度

透明性的选择：（整个容器都变）

opacity：；0-1之间的值；

字体

font-family =“ 字体” //字体样式可以被继承

鼠标移入样式

span标签

cursor：pointer； 鼠标样式：手型

阴影

box-shadow：x轴偏移量 y轴偏移量 阴影的模糊程度 阴影的大小（0和本身一样大小） 阴影的颜色；

引入字符图标

引入字符图标：

行内元素 随意

span class=“iconfont 图标类名”

可调节样式： 同文字

文档流

文档流：

标准情况下 ，页面元素从左往右 从上往下 依次排列

flex布局(规范的设计稿)-弹性布局

容器（父元素）的属性：【display:flex;】

*flex-direction: 决定主轴方向。

row 主轴在水平方向，从左向右（默认）。

row-reverse 主轴在水平方向，从右向左

column 主轴在垂直方向，从上到下

column-reverse 主轴在垂直方向，从下到上

*flex-wrap: 决定项目换行

wrap: 项目换行

nowrap: 项目不换行（默认值）

wrap-reverse： 项目换行且反转

*justify-content: 决定项目在主轴的对齐方式

flex-start;主轴的起点

flex-end;主轴的终点

center;主轴的中心

space-between;两端对齐

space-around;项目两侧距离相等

*align-items：项目在交叉轴上的对齐方式（适用于一根轴线与多跟轴线）

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

baseline： 基线对齐（文本底部）

*align-content:定义项目在交叉轴上的对齐方式（仅适用于多根轴线）

flex-start;交叉轴的起点

flex-end;交叉轴的终点

center;交叉轴的中心

space-between;两端对齐

space-around;两侧距离相等

子元素（项目）的属性：

*order：定义项目的排列顺序，数值越小，越靠前，默认值为0（可以取负值）。

*flex-grow:定义项目的放大比例。默认值为0，即使存在剩余空间，也不放大。

*flex-shrik：定义项目的缩小比例，默认值为1，空间不足，项目缩小;值为0时,空间不足,项目也不缩小.

*flex-basis: 定义项目占据的主轴空间.默认auto或者自己添加像素;

*align-self:定义单个项目在交叉轴的对齐方式.

flex-start:交叉轴的起点

flex-end：交叉轴的终点

Center：交叉轴的中心

滚动条

overflow-x：auto；超出部分在x轴的表现形式。

auto：自动；（如果超出，就自动以滚动条的形式显示）

去滚动条： 加在具有overflow属性的元素身上

::-webkit-scrollbar{

height：0；

}

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

值 描述 测试

visible 不裁剪内容，可能会显示在内容框之外。 测试

hidden 裁剪内容 - 不提供滚动机制。 测试

scroll 裁剪内容 - 提供滚动机制。 测试

auto 如果溢出框，则应该提供滚动机制。 测试

no-display 如果内容不适合内容框，则删除整个框。 测试

no-content 如果内容不适合内容框，则隐藏整个内容。 测试

​

轮播图

swiper(.js).com

表格

[行] [列]

​

table身上的属性

table身上的属性：

border：表格边框 cellspacing：单元格间的间距

cellpadding：单元格的内容与其边框的内边距

bgcolor：表格的背景颜色 background：表格的背景图片

width：表格宽度 height：表格高度

border-collaspe：collaspe：边框合并，不叠加 cellspacing：0：边框合并，但合并之后的边框宽度等于 前两个边框宽度之和

caption：表格标题

background:表格背景图

cellspacing:单元格之间的间隙宽度

align:表格的水平对齐方式，通常是left，center，right

表格的标题

<caption align="水平对齐方式" valign="标题与表格的相对位置"></caption>

单元格【tr】【td】

width：单元格宽度height：单元格高度

align：单元格内文本的对齐方式,通常是左，中，右 left，center，right

valign：单元格内文本的对齐方式,通常是上，中，下 top，middle，bottom

nowrap：在为设置单元格宽度时，当文本长度宽于单元格宽度，将要换行时，该标签会使其不换行

​

<tr align="center" valign="bottom">

<td align="center" nowrap>手机空中免费充值</td>

<td width="100px">IP卡</td>

<td width="100px" bgcolor="#006400" valign="top">网游</td>

</tr>

表格的跨行与跨列【td】

rowspan：跨行标签，表示跨了多少行

colspan：跨列标签，表示跨了多少列

表格标签拓展及其属性

thead：定义表格的表头。

tbody：定义表格主体（正文）。

tfoot：定义表格的页脚（脚注或表注）。

colgroup：标签用于对表格中的列进行组合，以便对其进行格式化。

注意：不管thead、tbody、tfoot的代码先后顺序如何，html显示时，始终是先显示thead，再显示tbody，最后显示tfoot。

1、<thead> 内部必须拥有 <tr> 标签！

2、<tfoot> 元素内部必须包含一个或者多个 <tr> 标签。

3、<tbody> 元素内部必须包含一个或者多个 <tr> 标签。

4、必须在 table 元素内部使用这些标签。

5、当不同行间的单元格合并时各单元格所在的行不要加tbody标签。

标题栏

《tr》<th></th>《/tr》 用法和td相似 知识自动将单元格内容以粗体显示

表单控件表单标签

<form action=" " method=" ">

action:表单信息提交的位置；

method：提交的方式

get：地址栏，信息量少，安全性低

post：信息量多，比较安全

1.输入文本【输入框】：

用户名：<input type="text" placeholder="请输入用户名" maxlength="10" value=" " name="username" class="">

placeholder：默认提示文本;

maxlength:规定输入的最大字符数

name:本文本框的名字，与后台进行数据交互用

class:定义本文本框的样式，相当于盒子

placeholder下的缩进

text-indent：2em；缩进

2.输入密码【密码框】：

密码：<input type="password" placeholder="请输入密码" maxlength="10" value=" " name="psw" class="">

3.单选按钮[name的值必须相同]：

请选择你的性别：

<label for="man"> [label实现点什么就选中 ，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默认选项

</label>

<label for="woman">

女：<input type="radio" name="sex" id="woman">

</label>

4.多选按钮[name的值必须相同]：

请选择你喜欢的音乐：

摇滚：<input type="checkbox" checked>

摇滚：<input type="checkbox" checked>

摇滚：<input type="checkbox" checked>

5.下拉列表【下拉框】：

选择你的学历：

<select name="" id="">

<option value="">学士</option>

<option value="">博士</option>

<option value="">硕士</option>

</select>

6.上传文件：

选择你的照片：

<input type="file">

7.留言文本空间：

<textarea name="" id="" rows="" col="">

</textarea>

8.用户是否允许重新设置textarea大小css属性：

resize: none/both/vertical/horizontal;不允许/上下允许拖动/只能在垂直方向拖动/只能在水平方向 拖动

9.重置按钮：

<input type="reset">

10.提交按钮：

<input type="submit">

11.自定义按钮：

<input type="button" value="按钮">

<button>搜索</button>

12.颜色：

<input type="color">

13.时间日期：

年月：<input type="month">

年周：<input type="week">

时分：<input type="time">

年月日：<input type="date">

年月时分：<input type="datetime-local">

14.验证

<input type="email"> 邮箱验证

<input type="tel" autofocus> 电话

15. autofocus 自动获取焦点

</form>

文本模型

文本换行

使非中日韩文本换行

word-break: break-all ;

文本禁止换行

white-space:nowrap;

单行文本溢出部分以省略号显示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

  1. 指定为弹性盒子
  2. display: -webkit-box;
  3. 在弹性盒模型中指定元素的排列顺序
  4. -webkit-box-orient: vertical;
  5. 指定文本显示（溢出）的行数;
  6. -webkit-line-clamp: 3;
  7. height要是line-height的倍数
  8. line-height: 70px;
  9. overflow：hidden；

音频视频标签

音频标签

<audio src="" controls loop autoplay></audio>

controls 空间向用户显示：

loop 循环播放

autoplay当前页面加载完自动播放

视频标签

<video src="" controls loop autoplay></video>

H5语义化标签

<header>头部</header>

<nav>导航</nav>

<aside>侧导航<aside>

<section>页面中的某一部分</section>

<main>主体</main>

<footer>底部</footer>

meta标记【签】

name="关键字" cantent="内容"

<mate http-equiv="Refresh" content="10";url="跳转路径"> //每10s刷新一次并且跳转到跳转路径知识的文件

bgsound标签

<bgsound src="路径" loop="播放次数">

body属性

  1. bgcolor:背景颜色
  2. background：背景图片
  3. text：文档中文字的颜色
  4. link：超链接的颜色
  5. alink：正在访问的超链接的颜色
  6. vlink：已访问过的超链接的颜色
  7. leftmargin/rightmargin/topmargin/bottommargin： 左/右/上/下边距的像素值

对文字操作的标签

  1. <p></p>开始一个新段落，可单可双
  2. 换行标签，单独标记
  3. <pre></pre>预格式化【敲什么样式，显示什么样式】
  4. <font></font> 用来设置文字的字体 大小 颜色 粗细等
  5. 文字样式标记[均成对出现]
  6. b 粗体 i 斜体 u 下划线 tt 等宽
  7. sup 上标体 sub 下表体 strike 删除线 big 大号字样
  8. small 小号字样 blink 闪烁字样 em强调字样 strong着重字样 cite引用字样

列表标签

  1. 符号列表
  2. <ul type="circlr(空心圆点)/disc（实心圆点）【默认】/square（实心方块）">

2. <li>

<li>

</ul>

  1. 排序列表
  2. <ol type="1(数字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a标签

<a href="路径 " title="鼠标移入时显示的文字" target=" "(新窗口打开的位置 _self:在本窗口打开;_blank:在新窗口打开；_parent:在当前窗口的父窗口打开链接；_top:在整个浏览器窗口打开) ...

[字符实体]常用的转义字符

显示结果 描述 实体名称

空格

< 小于号

大于号

& 和号

" 引号

' 撇号 (IE不支持)

￠ 分（cent）

£ 镑（pound）

¥ 元（yen）

€ 欧元（euro）

§ 小节

© 版权（copyright）

® 注册商标

™ 商标

× 乘号

÷ 除号

选择器

分类

css选择器

1.通用选择器：

*｛｝//选择所有的标签

2.群组选择器：

E1,E2,E3..｛｝//选择E1 E2 E3

3.标签选择器

标签名｛｝

4.类名选择器：

.类名｛｝

5.后代选择器

.E1 .E2｛｝ //选择E1 的后代E2

6.交叉选择器

标签名.类名｛｝

7.id选择器

例如 创建id

<div id=“box”></div>

#id名｛｝ //选择页面中id为**的标签

8.伪类选择器：

鼠标移入状态

E：hover{ } E元素选择鼠标移入状态

E：hover .子类{ } 选择e元素下鼠标移入时子类的变化

获取焦点，用于表单的输入

E: focus{

outline: none;

}

9.伪结构选择器：

E：first-child｛｝ 作为子元素的第一个孩子的E标签

E：last-child｛｝ 作为子元素的最后第一个孩子的E标签

E: nth-child(n){} //作为子元素的第n个孩子的E标签

E: nth-last-child(n) 作为子元素的倒数第n个孩子的E标签

E：first-of-type｛｝ 作为子元素的同类型的第一元素

E：last-of-type｛｝ 作为子元素的同类型中的最后一个元素

E: nth-of-type（n） 作为子元素的同类型中的第n个元素

E: nth-last-of-type(n) 作为子元素的同类型中的倒数第n个元素

（n）n可以以为num/even（偶数）/odd(奇数)/3n（3的倍数）

例子：5.15/伪结构选择器

10.伪元素选择器：

::after{} 在元素之后加入一个

::before{

content：“内容之前”；

color：；

} 在元素之前

属于行内元素

::after{} ::before{}伪元素 content：""； 样式必须写

​

11.子类选择器

相邻兄弟选择器

E1+E2｛｝ 选择E1的下一个兄弟元素E2（不能选中上一个兄弟元素）

div.box>a+img a和img统计

子类选择器

E1>E2{} 选择E1的子类元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.属性选择器

[属性名]{} 选择所有拥有属性为 属性名 的元素

[属性名=“value”]｛｝ 选择拥有属性名的属性 且属性值为value

E[属性名=“value”]{} 选择拥有属性名的属性 且属性值为value的E元素

E[属性名~=“value”]{} 选择拥有属性名的属性 并且属性值一个或者多个，其中一个属性值为value的E元素

E[value^=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 开头的E元素

E[value$=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值以 1 结尾的E元素

E[value*=“1”]{} 选择拥有 value的属性 并且属性值一个或者多个，其中一个属性值包含 1 的E元素

例子：属性选择器

选择器的优先级

宗旨：越具体的优先级越高

id (100 ) > class( 10 )> 标签名( 1)

.box .son{ } 10+10=20

abcde优先级（e为个位）：

a:行内样式

b:id选择器

c:类名选择器 伪类选择器（：hover） 属性选择器

d:标签选择器 伪元素选择器 （：：after）

e:通用选择器有一个

选择有中有一个abcde在其位置+1

移动端布局步骤

  1. 修改视口
  2. <meta name="viewport" content="width=device-width">

​

视口：视觉视口，布局视口，理想视口

em:当前字体的倍率 100px=10em

rem：html字体的倍率

移动端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

  1. 引入rem.js
  2. <script src="路径"></script>
  3. 修改rem.js中设计稿的宽度
  4. 100px=1rem

我是一名前端开发程序员，自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴

前端资料获取方式：

1.在你手机的右上角有【关注】选项，点击关注！

2.关注后，手机客户端点击我的主页面，右上角有私信，请私信回复：【学习】

电脑已经设置好了关键词自动回复，所以回复的时候请注意关键词哟~

在线咨询
上一篇：最好用的内外网测速工具, speedtest 服务器搭建指南
下一篇：把 Word文档转为移动端友好的 HTML5格式文档从未如此轻松

您的项目需求

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

推荐阅读
友情链接 三水区 赫山区 兴化市 台安县 名山县 东风区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服