CSS入门学习笔记+案例

简介: css能对网页中元素位置的排版进行像素精确控制,实现美化页面的效果,能够做到页面样式和结构分离。就是对前面的html骨架进行美化。

1. 概述

层叠样式表(Cascading Style Sheets)


css能对网页中元素位置的排版进行像素精确控制,实现美化页面的效果,能够做到页面样式和结构分离。就是对前面的html骨架进行美化。


2. 基本语法规范

选择器 + {一条/n条声明}


· 选择器决定针对谁修改


· 声明决定修改的内容


· 声明的属性是键值对,使用 “ ;”区分键值对, 键值对的格式:键:值


· 冒号后面加空格,选择器和 { 之间也加空格


例如:

<style>
        p {
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 30px; 
        }
    </style>

 

说明:


· CSS要写到style标签中


· style标签可以放到页面的任意位置,但是一般放到head标签内


· CSS使用/* */作为注释


3. 引入的方式

3.1 内部样式

写在style标签中,嵌入html内部,如上述例子所示


优点:这样能让样式和页面结构分离


缺点:当css内容很多的时候,分离的不够彻底


3.2 行内样式

通过style属性,来指定某个标签的样式,只针对某个标签生效


缺点:只适合简单的样式,不能写太复杂的样式


这种写法优先级高,会覆盖其他的样式


例如:

<style>
        p {
           color: red;
        }
    </style>
    <P style="color: green;">一去二三里</P>

 

结果:字体颜色显示绿色,而不显示红色

image.png


3.3 外部样式

外部样式是实际开发中最常用的方式


1. 创建一个css文件


2. 使用link标签引入css

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


例如:


创建html文件,并引入css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div>好好学习,天天向上</div>
</body>
</html>


创建css文件

div {
    /* 字体颜色 */
    color: blue;
    /* 字体大小 */
    font-size: 30px;
}


结果:

image.png



优点:样式和页面结构彻底分离


缺点:受浏览器缓存影响,修改之后不一定立刻生效,可以使用 ctrl+F5 强制刷新页面


4. 选择器

选择器的功能:选中页面中指定的标签元素,要先选中元素,才能设置元素的属性


选择器的种类:


1. 基础选择器:单个选择器构成


· 标签选择器


· 类选择器


· id选择器


· 通配符选择器


2. 复合选择器:把多种基础选择器综合运用起来


· 后代选择器


· 子选择器


· 并集选择器


· 伪类选择器


4.1 基础选择器

4.1.1 标签选择器

特点:能快速为同一类型的标签都选择出来,但是不能差异化选择

<style>
        p {
            color: red;
        }
        div {
            color: blue;
        }
    </style>
    <p>哈哈</p>
    <p>嘻嘻</p>
    <p>嘿嘿</p>
    <div>王昭君</div>
    <div>妲己</div>

 

4.1.2 类选择器

特点:差异化表示不同的标签,可以让不同的标签使用同一种样式

<style>
        .c1 {
            color: brown;
        }
    </style>
    <div class="c1">苹果</div>
    <span class="c1">香蕉</span>

 

注意:


· 类名用.开头


· 下方的标签使用class属性来调用


· 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割)


· 不要使用纯数字,或者中文,以及标签名来命名类名


示例:使用多个类名

<style>
        .c1 {
            color: brown;
        }
        .f1 {
            font-size: 30px;
        }
    </style>
    <div class="c1 f1">苹果</div>
    <span class="c1 f1">香蕉</span>

 

4.1.3 id选择器

· 使用#开头表示id选择器


· id是唯一的,不能被多个标签使用

<style>
        #i1 {
            color: red;
            font-size: 50px;
        }
    </style>
    <div id="i1">我爱学Java</div>

 

4.1.4 通配符选择器

使用 * 的定义,选取所有标签

* {
            color: pink;
        }

   

页面中所有的内容都会被修改为粉色


4.2 复合选择器

4.2.1 后代选择器

选择某个父元素中的某个子元素


元素1  元素2  { 样式声明 }


说明:


· 元素1和元素2要使用空格分割


· 元素1是父级,元素2是子级,只选元素2,不影响元素1


示例1:修改ul中的li颜色,不影响ul

<style>
        ul li {
            color: green;
        }
    </style>
    <ul>
        <li>Java</li>
        <li>c++</li>
        <li>python</li>
    </ul>

 

示例2:元素2不一定是儿子,也可以是孙子

<style>
        ul li a {
            color: green;
        }
        /* 这两种都行 */
        ul a {
            color: green;
        }
    </style>
    <ul>
        <li>Java</li>
        <li>c++</li>
        <li><a href="#">空连接</a></li>
    </ul>

 

4.2.2 子选择器

和后代选择器类似,但是只能选择子标签,也就是亲儿子,不能是孙子


元素1>元素2 { 样式声明 }


· 使用大于号分割


· 只能是亲儿子,不能是孙子

<style>
        div>a {
            color: red;
        }
    </style>
    <div>
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

注意:只有链接1变色,链接2不变色,因为1是亲儿子,2是孙子


4.2.3 并集选择器

用于选择多组标签(集体声明)


元素1,元素2  {样式声明}


· 使用逗号分割多个元素,表示同时选中


· 最后一个选择器不能加逗号


示例:将香蕉和苹果同时染成红色

<style>
        div,span {
            color: red;
        }
    </style>
    <div>苹果</div>
    <span>香蕉</span>

 

4.2.4 伪类选择器

1. 链接伪类选择器


a:link ,未被访问过的链接


a:visited ,已经访问过的链接


a:hover ,鼠标悬停的链接


a:active ,鼠标按下未弹起的链接


示例: 给链接添加样式

<a href="#">陕西科技大学</a>
        a:link {
            color: blue;
        }
        a:visited {
            color: grey;
        }
        a:hover {
            color: brown;
        }
        a:active {
            color: green;
        }


说明:未访问蓝色,访问过灰色,悬停棕色,按下不弹起绿色


2. force伪类选择器


选取获取焦点的input表单元素


示例:

<style>
        #i1:focus {
            color: red;
        }
        #i2:focus{
            color: green;
        }
        #i3:focus {
            color: blue;
        }
    </style>
    <input id="i1" type="text">
    <input id="i2" type="text">
    <input id="i3" type="text">

 

结果:鼠标悬停在哪个输入框,哪个输入框的文本就会变成设置的颜色


image.png


5. 常用元素属性

5.1 字体属性

5.1.1 设置字体

div {
            font-family: '微软雅黑';
        }
        span {
            font-family: '宋体';
        }

   说明:


· 字体名称可以用中文,但是不建议


· 多个字体之间使用逗号分隔(从左到右查找字体,如果都找不到,会使用默认字体)


· 如果字体名有空格,使用引号包裹


· 建议使用常见字体,否则兼容性不好


5.1.2 设置字体大小

 

div {
            font-size: 50px;
        }

 

说明:


· 不同浏览器默认字号不一样,chrome默认是16px


· 可以给body标签使用font-size


· 注意单位px,表示像素


· 标题标签需要单独指定大小


5.1.3 设置字体粗细

div {
            font-weight: 500px;
        }
        span {
            font-weight: bold;
        }

   

· 可以使用数值表示粗细


· 700==bold,400是不变粗细为normal,数字取值范围:100~900


5.1.4 设置文字样式

 

/* 倾斜 */
        div {
            font-style: italic;
        }
        /* 取消倾斜 */
        span {
            font-style: normal;
        }

 

5.2 文本属性

5.2.1 文本颜色

认识RGB


我们的显示器是由很多很多像素构成的,每个像素视为一个点,这个点能反映出一个具体的颜色,R(red)G(green)B(blue)的方式表示颜色,三种颜色按照不同的比例搭配,就能混合出各种颜色。


计算机中针对R,G,B三个分量,分别用一个字节表示(8个比特位,表示的范围是0-255,十六进制表示为00-FF),数值越大,表示该分量颜色就越浓,255,255,255就表示白色;0,0,0就表示黑色


设置文本颜色


color:red;


color:#ff0000;


color:rgb(255,0,0);


color属性值的写法:


· 预定义的颜色值(单词)


· 十六进制形式(常用)


· RGB方式

<style>
        .c1 {
            color: green;
        }
    </style>
    <div class="c1">好好学习进大厂</div>

 

5.2.2 文本对齐

控制文字水平方向的对齐,除了文本,也能控制图片等元素对齐的方式


text-align:[值];


center:居中对齐


left:左对齐


right:右对齐

<style>
        .c1 {
            text-align: left;
        }
        .c2 {
            text-align: center;
        }
        .c3 {
            text-align: right;
        }
    </style>
    <div class="c1">左对齐</div>
    <div class="c2">居中对齐</div>
    <div class="c3">右对齐</div>

结果:

image.png


5.2.3 文本装饰(上划线,下划线,删除线)

text-decoration:[值]


常用值:


underline:下划线


none:啥都无,可以取掉下划线,删除线等


overline:上划线


line-through:删除线

<style>
        .c1 {
            text-decoration: overline;
        }
        .c2 {
            text-decoration: none;
        }
        .c3 {
            text-decoration: underline;
        }
        .c4 {
            text-decoration: line-through;
        }
    </style>
    <div class="c1">上划线</div>
    <div class="c2">啥都无</div>
    <div class="c3">下划线</div>
    <div class="c4">删除线</div>


结果:

image.png



5.2.4 文本的缩进与行高

缩进:控制段落的首行缩进(其他行不受影响)


text-indent:[值];


单位可以用px或者em


em作为单位,1个em为一个文字大小


缩进可以为负数,表示往左缩进(文字就会冒出去)

<style>
        .c1 {
            text-indent: 2em;
        }
        .c2 {
            text-indent: -2em;
        }
    </style>
    <div class="c1">正常缩进</div>
    <div class="c2">反向缩进</div>

行高:行高是上下文本行之间基线距离


line-height:[值]


注意:行高 = 上边距 + 下边距 + 字体大小


HTML中涉及到这几个基准线:


· 顶线 · 中线 · 基线(相当于四线三格倒数第二条线)· 底线


内容区:底线和顶线包裹的区域,即下图深灰色背景区域

image.png



基线之间的距离 = 顶线的距离 = 底线之间的距离 = 中线间距


注意:行高与元素高度相等,就可以实现文字居中对齐


例:

<style>
        div {
            height: 100px;
            line-height: 100px;
            font-size: 30px;
        }
    </style>
    <div>文字居中对齐</div>

 微信图片_20221029122633.jpg


5.3 背景属性

5.3.1 背景颜色

background-color:[指定颜色]


默认是transparent透明的,可以通过设置颜色的方式修改

<style>
        div {
            background-color: blue;
        }
    </style>
    <div>设置蓝色背景</div>

 微信图片_20221029122653.jpg 



5.3.2 背景图片

background-image:url();


注意:url可以是相对路径也可以是绝对路径,url可以加引号也可以不加


          url的路径必须正确,否则找不到照片

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(../10.jpg);
        }
    </style>
    <div>设置背景图片</div>

 

结果:

微信图片_20221029122710.jpg



5.3.3 背景平铺

background-repeat:[平铺方式]


重要值:


repeat:平铺


no-repeat:不平铺


repeat-x:水平平铺


repeat-y:垂直平铺


默认是repeat,背景颜色可以和背景图片同时存在,背景图片在背景颜色的上方

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(../作业/5.jpg);
            background-repeat: no-repeat;
            /* no-repeat  repeat  repeat-x  repeat-y */
        }
    </style>

 

repeat:

微信图片_20221029122738.jpg



no-repeat:

微信图片_20221029122753.jpg


repeat-x:

微信图片_20221029122756.jpg


repeat-y:

微信图片_20221029122818.jpg



5.3.4 背景位置

background-position:x y;


注意:是修改图片内容的位置


参数:


方位名词:(top,left,right,bottom)


精确单位:坐标或者百分比(以左上角为原点)


混合单位:同时包含方位名词和精确单位

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url("../10.jpg");
            background-position: center;
        }
    </style>
    <div>背景位置</div>

 微信图片_20221029122903.jpg说明:没有把图片的位置放到屏幕中间,而是把图片内容的中间部分按要求大小展示在屏幕上


注意:


如果参数的两个值都是方位名词,则前后顺序无关(top left与left top效果一样)


如果只指定了一个方位名词,则第二个默认居中(left就是水平居中,top就是垂直居中)


如果参数为精确值,则第一个为x,第二个为y


如果参数为精确值且只给了一个数值,则该数值为x坐标,另一个默认垂直居中


5.3.5 背景尺寸

background-size:length|percentage|cover|contain;


· 可以填具体数值,40px 60px表示宽为40px,高为60px


· 也可以填百分比,按照父元素的尺寸设置


· cover,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,这样背景图片的某些位置就无法显示


· contain,把图像扩展至最大尺寸,以使宽度,高度完全适应内容区域


contain:

微信图片_20221029122935.jpg

cover:

微信图片_20221029122958.jpg


5.4 圆角矩形

使用border-radius使边框带圆角效果


border-radius:length;


length:内切圆半径,数值越大,弧线越强烈

<style>
        /* 普通圆角矩阵 */
        #d1 {
            width: 300px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 20px;
        }
        /* 圆形 */
        #d2 {
            width: 200px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 50%;
            /* 50%也可以替换为数值100px */
        }
        /* 圆角矩阵 */
        #d3 {
            width: 300px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 100px;
        }
    </style>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>

image.png  


展开写法:可以针对四个角分别设置


border-radius:2em; 相当于四个角全都是2em


border-radius:10px 20px 30px 40px

等价于 (按顺时针旋转)

border-top-left-radius:10px;

border-top-right-radius:20px;

border-bottopm-right-radius:30px;

border-bottom-left-radius:40px;


6. 元素的显示模式

这里重点介绍两个:块级元素      行内元素


6.1 块级元素

常见的元素:


h1-h6

p

div

ul ol li

...


特点:


独占一行

高度,宽度,内外边距,行高都可以控制

宽度默认是父级元素宽度的100%

是一个容器盒子,里面可以放行内元素和块级元素


注意:


· 文字类元素内不能使用块级元素

· p标签主要用于存放文字,内部不能放块级元素,特别是div


6.2 行内元素/内联元素

常见元素:


a

strong

b

em

i

del

span

...


特点:


· 设置行高,宽度,高度无效

· 左右外边距有效(上下无效),内边距有效

· 默认高度就是内容本身的高度

· 行内元素只能容纳文本和其他行内元素,不能放块级元素


注意:


a标签内不能在放a标签

a标签可以放块级元素,但是先把a转换为块级元素


行内元素与块级元素的区别


· 块级元素独占一行,行内元素不独占一行

· 块级元素可以设置宽高,行内元素不能设置宽高

· 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置


6.3 改变显示模式

使用display属性可以修改元素的显示模式


display:block,改成块级元素


display:inline,改成行内元素


display:inline-block ,改成行内块元素


7. 盒模型(重点)

每一个HTML元素相当于是一个矩形盒子,这个盒子由以下几部分构成:


边框:border

内容 :content

内边距:padding

外边距:margin

image.png



7.1 边框

基础属性


粗细:border-width


样式:border-style,默认没有边框,solid实线边框,dashed虚线边框,dotted点线边框


颜色:border-color


例:

<style>
        div {
            width: 300px;
            height: 50px;
            border-style: dashed;
            border-color: blue;
            border-width: 5px;
        }
    </style>

 

可以简写(建议),减少代码量


border:5px solid red;


可以改变四个方向的任意边框


border-top/bottom/left/right


例:给边框的四个方向设置不同的颜色和属性

<style>
        div {
            width: 400px;
            height: 100px;
            border-top: 3px solid red;
            border-right: 3px dashed blue;
            border-bottom: 3px dotted green;
            border-left: 3px dashed yellow;
        }
    </style>

 

image.png


注意:边框会撑大盒子

image.png



可以看到weight,height为400,100,但是整个盒子为406*106,多出来的那部分为边框像素的大小。


可以通过box-sizing属性可以修改浏览器的行为,使边框不在撑大盒子

* {
            box-sizing: border-box;
        }

  image.png


可以看到盒子的大小又恢复400*100了


7.2 内边距

padding设置内容和边框之间的距离


默认内容是顶着边框来放置的,用padding来控制这个距离


给四个方向都加边框


· padding-top

· padding-bottom

· padding-left

· padding-right


不加内边距:

<style>
        div {
            width: 200px;
            height: 100px;
        }
    </style>
    <div>内边距</div>

 

加上内边距padding后:

<style>
        div {
            width: 200px;
            height: 100px;
            padding: 5px;
        }
    </style>

 

注意:内边距也会影响到盒子的大小,使用box-sizing:border-box;不在撑大盒子


复合写法:


padding:5px;表示四个方向都是5px


padding:5px 10px 20px 30px;上,右,下,左(顺时针方向,与设置边框的复合写法类似)


7.3 外边距

控制盒子与盒子之间的距离


· margin-top

· margin-bottom

· margin-left

· margin-right


不加外边距:

<style>
        #i1 {
            width: 200px;
            height: 100px;
        }
        #i2 {
            width: 200px;
            height: 100px;
        }
    </style>
    <div id="i1">哈哈</div>
    <div id="i2">嘿嘿</div>

image.png  



加了外边距margin后:

<style>
        #i1 {
            width: 200px;
            height: 100px;
            margin: 5px;
        }
        #i2 {
            width: 200px;
            height: 100px;
            margin: 5px;
        }
    </style>

image.png  

复合写法:与padding相同


7.4 块级元素水平居中

三种写法:


margin-left:auto;margin-right:auto;

margin:auto;

margin:0 auto;


示例:

<style>
        #i1 {
            width: 200px;
            height: 100px;
            margin: auto;
        }
    </style>
    <div id="i1">哈哈</div>

 

image.png


注意:这种居中方式和text-align不一样,margin:auto是给块级元素用的,text-align:center是让行内元素或者行内块元素居中的


7.5 去除浏览器默认样式

浏览器会给元素加上一些默认的样式,尤其是内外边距,不同浏览器的默认样式存在差别,为了保证在不同的浏览器上运行的效果相同,往往去掉浏览器默认样式,使用通配符去掉浏览器默认样式:

* {
            margin: 0;
            padding: 0;
        }

   

7.6 弹性布局

display:flex;


示例:创建一个div包含3个span

<style>
        div {
            width: 100%;
            height: 100px;
            background-color: red;
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

image.png 

给div加上display:flex;后:

div {
            width: 100%;
            height: 100px;
            background-color: red;
            display: flex;
        }

image.png    

此时看到,span不在是行内元素了,再给div加上justify-content:space-around;此时效果:

image.png



此时可以看到,span已经能够水平隔开了


把justify-content:space-around;改为justify-content:flex-end,此时效果:

image.png

flex布局的基本概念


flex是flexible box的缩写,意思为弹性盒子

任何一个html元素,都可以指定为display:flex完成弹性布局


flex布局的本质是给父盒子添加display:flex属性,来控制盒子的位置和排列方式


概念:


· 被设置为display:flex属性的元素,称为flex container


· 它的所有子元素立刻称为了该容器的成员,称为flex item


· flex item 可以纵向排列,也可以横向排列,称为flex direction(主轴)


常用属性


justify-content:设置主轴上的子元素排列方式

flex-start 默认值,位于容器开头
flex-end 位于容器结尾
center 位于容器中央
space-between 行与行之间有间隔
space-around 行之前,行之间,行之后又间隔


center效果展示:

image.png


space-between效果展示:


image.png


align-items:设置侧轴上元素排列方式

stretch 默认值,行拉伸以占据剩余空间
center 朝着弹性容器的中央对行打包
flex-start 朝着弹性容器的开头对行打包
flex-end 朝着弹性容器的结尾对行打包
space-between 行均匀分布在弹性容器中
space-around 行分布在弹性容器中,两端各占一半


stretch效果展示:


image.png


center效果展示:

image.png


flex-start,flex-end效果展示:

image.png

 



可以使用align-items实现垂直居中:

<style>
        div {
            width: 500px;
            height: 300px;
            background-color: green;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        div>span {
            background-color: red;
            width: 150px;
            height: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

微信图片_20221029124259.jpg 

注意:align-items只能针对单行元素来实现,如果有多行元素,就需要使用items-conten


相关实践学习
利用大模型大规模分发技术,实现AIGC在线应用秒级弹性
通过ECI的数据缓存技术实现大模型的快速分发,将模型与应用解耦,敏捷部署,实现秒级在线弹性启动。
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
相关文章
|
1天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
16 1
|
17天前
|
前端开发
css3 纯代码案例
css3 纯代码案例
23 0
|
18天前
|
前端开发 JavaScript API
|
20天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
24天前
|
存储 前端开发 算法
【正在完善】高级CSS特效解析其示范案例
【正在完善】高级CSS特效解析其示范案例
118 0
|
27天前
|
前端开发 搜索推荐 开发者
CSS 选择器全攻略:从入门到精通(下)
CSS 选择器全攻略:从入门到精通(下)
|
27天前
|
缓存 前端开发 JavaScript
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
|
28天前
|
前端开发
CSS总结笔记+案例(下)
CSS总结笔记+案例
33 1
|
28天前
|
前端开发 Python
CSS总结笔记+案例(上)
CSS总结笔记+案例
27 1
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
10 0

热门文章

最新文章

相关产品

  • 云迁移中心