学习链接

目录

  • 学习链接
  • 一、CSS简介
    • 1、书写CSS的语法规则
    • 2、快速入门
  • 二、CSS代码的书写方式
    • 1、嵌入式
    • 2、外链式
    • 3、行内式
    • 4、注释
  • 三、选择器
    • 1、基本选择器
    • 2、复合选择器
    • 3、伪类选择器
      • 3.1美化超链接
    • 4、属性选择器
  • 四、尺寸样式属性
  • 五、文本与字体属性
    • 1、文本属性
    • 2、字体属性
  • 六、列表样式属性
  • 七、特性
    • 1、继承性
    • 2、优先级
    • 3、!important属性
    • 4、一个标签可以携带多个类名
    • 5、标准文档流
  • 八、背景样式属性
  • 九、浮动
    • 清除浮动
  • 十、盒子模型
    • 1、padding
    • 2、margin
    • 3、border
  • 十一、display
  • 十二、position
    • 1、固定定位
    • 2、相对定位
    • 3、绝对定位
  • 十三、z-index
  • 十四、CSS3
    • 1、结构伪类
    • 2、伪元素
    • 3、文本阴影
    • 4、盒子阴影
    • 5、圆角矩形
    • 6、透明度

一、CSS简介

  • CSS（Cascading Style Sheets 的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表。
  • CSS主要是用来给HTML网页来设置外观或者样式。
  • 外观或者样式：HTML网页中文字的大小、颜色、字体，网页的背景颜色、背景图片等。

1、书写CSS的语法规则

  • CSS代码是由选择器和一对大括号组成；
  • 大括号里面是由多条声明语句组成；
  • 每条声明语句都要使用英文分号分隔；
  • 每条声明语句由 属性:值(key:value) 组成；
  • CSS中的属性值一般不加引号；
  • 在CSS中如果属性值为数值型数据时，一般情况下需要单位，如px（像素）；
  • 在CSS中不能出现HTML标签。

2、快速入门

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CSS快速入门</title><style type="text/css">/** 在这里写CSS代码* CSS代码：选择器:{语句1;语句2}; */p{color: #FF0000;     /*给文本设置颜色为#FF0000*/font-size: 100px;    /*设置字体大小为100px*/};</style>
</head>
<body><p>CSS样式</p>
</body>
</html>

二、CSS代码的书写方式

  • CSS代码应该书写在什么位置？

书写方式分为三种：嵌入式、外链式、行内式

1、嵌入式

  • 嵌入式就是将CSS代码嵌入到HTML文件中，嵌入式通过HTML中的< style >标签将CSS代码嵌入到HTML网页中。

  • 语法格式：

<!-- 如果使用的是HTML5的文档，type属性可以省略不写 -->
<style type="text/css">/** 书写CSS代码* 选择器:{属性:值;属性:值};*/
</style>
  • < style>< /style>可以出现在HTML中的任何位置，但是一般会放置在< head>标签中。
  • 范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>嵌入式CSS</title><style type="text/css">/** 嵌入式CSS* CSS代码：选择器:{语句1;语句2}; */div{width: 100px;                 /*设置宽度为100px*/height: 100px;                    /*设置高度为100px*/background-color: #FF0000;        /*设置背景颜色为红色*/};</style>
</head>
<body><!-- 要使用CSS给div设置宽度100像素高度100像素以及背景颜色为红色，把div理解为存放东西的盒子--><div></div>
</body>
</html>

2、外链式

  • 外链式是指单独写一个以.css为扩展名的文件，然后在< head>< /head>标签中使用< link />标签，将这个 css 文件链接到 html 文件中。
  • css文件的名称需要为英文。
  • css文件不能单独运行，必须依赖html文件。
  • 语法格式：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>外链式CSS</title><!-- 将单独的css文件链接到当前的HTML文件中 --><link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
</body>
</html>
  • css文件夹下的index.css文件
/** 在index.css文件中书写css代码* 这个文件里只能写css格式的代码* 选择器{属性:值};
*/
body{background-color: #f00;    /*f00 --> ff0000 */
}
  • 确保 css 文件被正确引入：浏览器右键选检查，或F12，在network中找css文件的status状态，成功表示已经被加载，失败表示未被正确引入。
  • link标签可以有多个，意味着一个 html 页面可以同时引入多个 css 文件。

3、行内式

  • 将 CSS 代码写在 HTML 标签的 style 属性中；
  • style 是一个通用属性，每一个标签里面都拥有这个属性。
  • 语法格式：
<标签名 style="属性:值;属性:值;"></标签名>
  • 范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>行内式CSS</title>
</head>
<body><!--使用行内式css将div设置为宽度100px，高度100px，背景颜色为红色--><div style="width:100px;height:100px;background-color:#ff0000;"></div>
</body>
</html>

总结

  • 使用嵌入式CSS，只能作用于当前的HTML文件；
  • 使用外链式CSS，能作用于多个HTML文件。

4、注释

  • 格式
/* 注释的内容 */
  • 上面的例子都有用到CSS注释
  • sublime编辑器中有快捷方式来注释：Ctrl + Shift + /
  • 注意不要在 CSS 代码中使用 HTML的注释

三、选择器

  • 选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
  • 选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。

1、基本选择器

选择器 格式 含义 举例
通用选择器 {属性:值;} 通用选择器，将匹配HTML所有标签。不建议使用，IE6不支持，给大型网站增加负担。 {margin:0px;}
标签选择器 标签名{属性:值;} 标签选择器，匹配对应的HTML标签。 p{font-size: 14px;}
类选择器 .class属性值{属性:值;} 类选择器，给拥有指定的CLSS属性值的元素设置样式。 .box{width: 800px;}
id选择器 #id属性值{属性:值;} id选择器可以为标有特定ID的HTML元素指定特定的样式，只能使用一次。ID选择器以#来定义。 #title{font-size:14px;}
  • 通用选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** 通用选择器* 格式 *{属性：值}* 作用：给HTML中所有的标签设置样式*/*{color:#00f;}</style>
</head>
<body><h2>中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul>
</body>
</html>
  • 标签选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>标签选择器</title><style type="text/css">/*嵌入式选择器*//** 标签选择器* 格式 标签名{属性：值}* 作用：给指定的标签设置样式*/h2{color:#00f;}li{color: #f00;}</style>
</head>
<body><h2>中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul><h2>你答对了吗？</h2>
</body>
</html>
  • 类选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** 类选择器* 格式 .class的属性值{属性：值}* 作用：给拥有指定的.class属性值的标签设置样式*//* 只要是.class属性的值为h的标签，都会设置样式*/.h{color:#00f;}/*先找到p标签，然后再去p标签里面找.class属性值为h1的标签，有就为其设置样式*/p.h1{color: #f00;}</style>
</head>
<body><h2 .class="h">中国四大名著</h2><ul><li .class="h1">西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul><p .class="h1">测试</p><p>测试</p>
</body>
</html>
  • id选择器
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** id选择器* 格式 #id的属性值{属性：值}* 作用：给拥有指定的id属性值的标签设置样式，但是要注意在一个HTML文件中id属性值必须是唯一的*/#h{color:#00f;}</style>
</head>
<body><h2 id="h">中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul>
</body>
</html>

2、复合选择器

选择器 含义 举例
选择器1,选择器2{属性:值;} 多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号隔开 p,h1,h2{margin:0px;}
E F{属性:值} 后代元素选择器，匹配所有属于E元素后代的F选择器，E和F之间用空格分隔 #slidebar p{font-color: #990000;}
E>F{属性:值} 子元素选择器，匹配所有E元素的子元素F div>p{color:#990000;}
E + F{属性:值} 相邻元素选择器，匹配所有紧随E元素之后的同级元素F div + div{color:#990000;}
  • 多元素选择器范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>多元素选择器</title><style type="text/css">/** 多元素选择器* 格式：选择器1,选择器2,选择器n{属性：值;}* 作用：给列表中的所有选择器设置样式*/.box,p,h2,li{color:#f00;text-decoration: underline;}</style>
</head>
<body><div class="box">HTML</div><p>CSS</p><h2>php</h2><ul><li>北京</li><li>上海</li><li>广东</li><li>深圳</li></ul></body>
</html>
  • 后代元素选择器：所有后代都选择，无论隔多少代
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>相邻元素选择器</title><style type="text/css">/** 相邻元素选择器* 格式：E + F{属性:值;}* 作用：满足E和F同级、相邻（E必须在F下面）才会匹配的选择器*/.box + p{color:#f00;text-decoration: overline;}</style>
</head>
<body><!-- class=box这个元素中有三个子元素第一个子元素：<h2>HTML</h2>第二个子元素：<div></div>第三个子元素：<h2>PHP</h2>第二个子元素里面还有一个子元素：<h2>CSS</h2>--><p>上面的元素</p><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div>  <h2>PHP</h2></div><p>下面的元素</p>
</body>
</html>

3、伪类选择器

  • 伪类选择器是用来给超链接的不同状态来设置样式。
选择器 含义
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:active 鼠标放在元素上面时，点击的一瞬间 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>伪类选择器</title><style type="text/css">a:link{color: #f00;}a:visited{color:#000;}a:hover{color:gold;}a:active{color:#0f0;}</style>
</head>
<body><a href="http://www.baidu.com">baidu</a><a href="http://www.qq.com">qq</a><a href="http://www.google.com">google</a>
</body>
</html>
  • 超链接的不同状态是有顺序的，也就是说伪类选择器是有顺序的，如果不按照伪类选择器的顺序，样式就会失效。
  • 顺序：link、visited、hover、active

3.1美化超链接

  • 一般情况下：去掉超链接的下划线，然后同时给超链接设置一个颜色
  • 正常状态与访问过后的状态的样式设置为相同的
  • 当鼠标放上的时候给其设置另外一个颜色
  • 激活状态一般不设置，因为激活状态时间太短

4、属性选择器

  • 属性选择器是与标签的属性名和属性值有关
  • 通过标签的属性名和属性值来匹配元素
选择器 含义 举例
[attr] 匹配所有具有attr属性的元素，不考虑它的值 h1[align]{…}
input[type][size]{…}
[attr = “val”] 匹配所有attr属性等于val的元素 h1[align=“center”]{…}
属性值一般加引号
[attr^=“val”] 匹配元素中attr属性以指定值开头的元素 Font[color^="#ff"]
[attr$=“val”] 匹配元素中attr属性以指定值结尾的元素 Font[color￥=“00”]
[attr*=“val”] 匹配元素中attr属性包含指定值的元素 Font[color*=“00”]
  • 范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>属性选择器</title><style type="text/css">/* 通过属性选择器来匹配元素 *//* 第一种：[属性名] */p[align]{color:#f00;}/* 第二种：[属性名="值"] */h2[align="center"]{color:#f00;}/* 第三种（开头）：[属性名^="值"] */font[color^="#FF"]{border:1px solid #00f;}/* 第四种（结尾）：[属性值$="值"] *//* 第五种（包含）：[属性值*="值"] */</style>
</head>
<body><p align="center">test1</p><h2 align="center">test2</h2><p align="left">test3</p><font color="#FF0000">颜色</font><font color="#FFAA00">颜色</font><font color="#FFaabb">颜色</font><font color="#FFaacc">颜色</font><font color="#FFaadd">颜色</font>
</body>
</html>

四、尺寸样式属性

属性 值 含义
height auto：自动，浏览器会自动计算高度
length：使用px定义高度
%：基于包含它的块级对象的百分比高度 		设置元素高度
width 同上 设置元素的宽度
  • 范例
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>尺寸样式属性</title><style type="text/css">/*使用类选择器来设置样式*/.box{width:100px;height: 100px;background-color: #f00;}</style>
</head>
<body><!-- 给div标签设置高、宽、背景颜色 --><div class="box"></div>
</body>
</html>
  • span标签不能设置宽度，因为span标签是一个行内元素，不可以设置高宽，只有块级元素能设置高宽。

五、文本与字体属性

1、文本属性

属性名 值 含义
color #ff0000 或 red 或 rgb(3,5,8) 设置文本颜色
text-align left（居左
right（居右）
center（居中）） 		设置文本的水平对齐方向
text-decoration none（去掉文本修饰线）
underline（下划线）
overline（上划线）
line-through（删除线） 		设置文本修饰线
text-transform capitalize、uppercase、lowercase 大小写转换或者首字母大写
Line-height 固定值或百分比 设置行高
text-indent px 或 em 设置首行缩进，允许负值
letter-spacing px 设置字符间距
word-spacing px 设置单词间距
  • 范例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>文本属性</title><style type="text/css">.zhang{/*十进制表示颜色的方式在CSS中没有浏览器兼容性的问题*/color: rgb(255,0,0); text-decoration:underline;}h2{text-align:center;}.cap{text-transform: capitalize;}p{/* 一个em表示一个汉字的位置，可以为负数 */text-indent: 2em;/* 行高的值与高度的值相同，就可以实现文本垂直方向上居中对齐 */line-height:30px;height:30px;}</style>
</head>
<body><h2>文本属性</h2><p>测试文本属性，测试<span class="zhang">文本</span>属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性。</p><div class="cap">cascading Style sheet</div>
</body>
</html>

2、字体属性

属性名 值 含义
font-style normal（正常）
italic（斜体） 		设置文本为斜体
font-weight normal（正常）
bold（加粗） 		设置文本粗细
font-size 如12px、14px，需要加单位 设置文本大小
font-family 微软雅黑、楷体、宋体 设置文本字体
font 举例：font:italic bold 14px “微软雅黑” 简写属性，能够同时给文本设置斜体、加粗、大小、字体
每一个值之间需要使用空格，并且一定要有顺序
  • 范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>字体属性</title><style type="text/css">.zhang{/* 将文本设置为斜体 */font-style:italic;/* 将文本设置为加粗 */font-weight:bold;/* 将文本大小设置为36px */font-size:36px;/* 将文本字体设置为楷体，没有该字体则使用下一个，都没有则会显示为宋体 */font-family:"楷体","微软雅黑";}i{/* 将斜体恢复正常 */font-style:normal;}b{/* 将加粗效果恢复正常 */font-weight:normal;}.zz{font:italic bold 24px "宋体";}</style>
</head>
<body><h3>测试字体属性</h3><p>测试字体属性测试<span class="zhang">字体</span>属性测试<i>字体</i>属性测试字体属性测试字体属性测试字体<b>属性</b>测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性测试<span class="zz">字体</span>属性测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性</p>
</body>
</html>

六、列表样式属性

  • 这里的列表可以是 无序列表 或 有序列表
  • 但实际上主要说的是无序列表，因为使用较频繁
属性 值 含义
list-style-type none（将列表前面的项目符号去掉）
disc（实心圆）
square（实心小方块）
circle（空心圆） 		设置列表前项目符号的类型
list-style-positon inside（里面）
outside（外面） 		设置列表项标记的放置位置
list-style-image url(图像路径) 将图像设置为列表项标记
list-style square inside url(arrow.gif) 在一个声明中设置所有列表属性
  • 范例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>列表样式选择器</title><style type="text/css">/* 后代元素选择器 */.box ul{/* none:去除列表前的项目符号 */list-style-type:none;}.box ul li{border:1px solid #f00;height:35px;line-height: 35px;/* 项目符号的位置 */list-style-position:inside; /* 将列表前面的符号换成一张图片 *//** list-style-image: url(./image/tri.png)* 这种方式不能修改图片大小*/background: url(./image/tri.png) no-repeat 0rem 0rem;background-size: 1rem 1rem;text-indent: 2em;    }</style>
</head>
<body><div class="box"><h2>请列出中国四大名著</h2><ul><li>西游记</li><li>红楼梦</li><li>三国演义</li><li>水浒传</li></ul></div>
</body>
</html>

七、特性

1、继承性

外层元素上的样式会被内层元素所继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>继承性</title><style type="text/css">body{color:#f00;}p{color:#00f;}</style>
</head>
<body><div><h2>h2标题</h2><p>p段落</p></div>
</body>
</html>

当内存元素上的样式与外层元素相同时，内层元素会覆盖外层元素

  • 并不是所有的样式都能够被继承，只有文本与字体样式能够被继承
  • 实际工作中，往往会给body标签设置字体大小以及字体颜色。

2、优先级

  • 优先级：行内样式>id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>优先级</title><style type="text/css">/* 标签选择器 */div{color:#f00;}/* 类选择器 */.d{color:#00f;}/* id选择器 */#dd{color:#0f0;}div h2{     /* 1+1=2 */color: #ccc;}.d h2{        /* 10+1=11 */color:#000;}#dd h2{      /* 100+1=101 */color:#f00;}</style>
</head>
<body><div class="d" id="dd" style="color:skyblue;"><h2>h2标题</h2><p>p段落</p></div>
</body>
</html>
  • 一般而言，选择器指向的越准确，优先级就越高
  • 不管是单个选择器还是多个选择器组合都可以通过以下数值相加计算
选择器 权重值
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000

3、!important属性

  • 主要用来提升属性的权重，其属性的权重值无穷大
  • 格式：属性:值 !important;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>!important</title><style type="text/css">/** 使用!important属性* 属性:值 !important;* 加了!important属性，其权重值无穷大*/p{color:#f00 !important;font-size:20px;}.p1{color:#0f0;}#p2{color:#00f;font-size:100px;}</style>
</head>
<body><p class="p1" id="p2">test</p>
</body>
</html>
  • !important属性提升的只是该属性的权重，不是选择器的权重。
    上面的例子可以看出字体大小是由id选择器中的font-size属性决定的。
  • !important属性不能提升继承属性的权重。

4、一个标签可以携带多个类名

  • 类名指的是class的属性值。
  • 一个标签可以有多个类名：class属性值可以有多个，每一个属性值之间用空格分隔。
  • 优点：
    1、减少CSS的代码量
    2、多个类名的样式会叠加到当前元素上
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>多个类名</title><style type="text/css">/** class=div1的文字设置为加粗* class=div2的文字设置为红色* 第三个div的文字加粗并设置为红色*/.div1{font-weight:bold;}.div2{color:#f00;}</style>
</head>
<body><div class="div1">test</div><div class="div2">test</div><div class="div1 div2">test</div>
</body>
</html>
  • 如果一个标签内的多个类名存在相同的样式，就会存在样式的冲突。
    写在后面的样式作为标准

5、标准文档流

  • 我们制作HTML网页时，遵循一个“流”的规则：从左至右、从上至下
  • 空白折叠现象：元素之间的写换行在浏览器中以空格显示，元素写在同一行之后就没有间隔
  • 高矮不齐，底部对齐：同一行的元素底部对齐

八、背景样式属性

属性 值 含义
background-color #ff0000、red、rgb(255,0,0) 背景颜色
background-image url(图像路径和名称) 背景图像
background-repeat repeat、repeat-x、repeat-y、no-repeat 背景图像是否重复
background-position center center或x% y%或xpos ypox 背景图像起始位置
background-attachment scroll（滚动）
fixed（固定） 		设置背景图像是否固定或者随着页面的其余部分滚动
background … 设置背景的简写形式
  • 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>背景样式属性</title><style type="text/css">/* 给body标签设置样式 */body{font-size:12px;color:#f60;}.box{width:400px;border: 1px solid #00f;margin-right: auto;margin-left: auto;}.box h2{height:35px;line-height:35px;color:gold;}.box ul li{/* 去除li前的项目符号 */list-style:none;height:30px;line-height: 30px;border:1px solid #ccc;background-image:url(./image/tri.png);background-repeat:no-repeat;background-size: 1rem 1rem;background-position: 0rem center;padding-left:15px;}/* 超链接美化 */a:link,a:visited{color:#444;text-decoration: none;}a:hover{color: #f00;}</style>
</head>
<body><div class="box"><h2>新闻列表</h2><ul><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li></ul></div>
</body>
</html>
  • background-color
    用于给元素设置背景颜色，前提是这个元素有内容或者有宽高。
  • background-image 用于给元素设置背景图片
    1、图片的地址放在url()中；
    2、同样的，这个元素要有内容或者有宽高；
    3、背景图片默认是平铺的。
  • background-repeat
    用于设置背景图片是否平铺，已经平铺方向
  • background-position
    用于设置背景图片的位置，有水平位置和垂直位置两个值，表达方式有三种：（三种方式可以混用）
    1、英文单词
    水平方向：left、center、right
    垂直方向：top、center、bottom
    2、固定值
    px px
    3、百分比

九、浮动

  • 行内元素的特性：让多个元素排在一行
  • 块级元素的特性：给元素设置宽高
  • 在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
  • 浮动元素可以让元素脱离标准文档流，就可以实现让多个元素排在同一行，并且可以设置宽高。
  • 浮动是通过一个浮动属性来实现的，有left和right两个值。
  • 特性：
    1、浮动元素脱离标准文档流，不再占用空间。
    2、浮动元素的层级要比标准文档流的元素层级高，它会将标准文档流中的元素盖住
    3、浮动元素会向左或向右进行浮动（移动）
    4、浮动元素遇到父元素的边框或上一个浮动元素就停止浮动
    5、浮动元素浮动后，其父元素不会再包裹着浮动元素
    6、将行内元素进行浮动以后，这个行内元素就会变成块级元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>浮动</title><style type="text/css">.box1{width:600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.div1{width: 100px;height: 100px;background-color: #f00;/* 给这个元素增加浮动属性 */float:left;}.div2{width: 100px;height: 100px;background-color: #0f0;float:left;}.div3{width: 100px;height: 100px;background-color: #00f;float:right;}.box2{width:600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.s1{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #f00;float:left;}.s2{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #0f0;float:left;}.s3{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #00f;float:right;}</style>
</head>
<body><div class="box1"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div><div class="box2"><div style="height:100px"></div><span class="s1">文本一</span><span class="s2">文本二</span><span class="s3">文本三</span></div>
</body>
</html>

清除浮动

  • 只要有浮动，必须有清除浮动；因为浮动元素会影响到下方元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹。
  • 清除浮动后，不会影响浮动元素的下方排版布局，浮动元素的父元素在视觉上包裹着浮动元素
  • 清除浮动的三种方法：
    1、给浮动元素的父元素设置一个固定的高度
    2、使用清除浮动的样式属性：clear
    3、使用overflow:hidden这个属性清除浮动
  • 设置高度的方法不建议使用，因为一个元素的高度一般不手动设置，应该由其自身内容填充高度
  • 使用清除浮动的样式属性 clear，这个属性有三个值（left、right、both）一般用在最后一个浮动元素下面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>清除浮动</title><style type="text/css">.box{width:600px;border:1px solid #000;margin-left: auto;margin-right: auto;}.box div{}.div1{background-color: #f00;float:left;width: 100px;height: 100px;}.div2{background-color: #0f0;float:left;width: 100px;height: 100px;}.div3{background-color: #00f;float:right;width: 100px;height: 100px;}.clear{clear: both;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div><!-- 在最后一个浮动元素下面新建一个空白的div用于清除浮动 --><div class="clear"></div></div><h2>浮动与清除浮动</h2>
</body>
</html>
  • 使用overflow:hidden属性清除浮动：原意是将溢出的部分进行隐藏，但是还可以用于清除浮动
    用上面的例子举例：给浮动元素的父元素设置overflow:hidden
<div class="box" style="overflow:hidden">

十、盒子模型

  • CSS中的盒子的组成部分：内容(content)+内填物(padding)+边框(border)+外边距(margin)
  • 一个盒子的主要属性：width、height、padding、border、margin
  • width指的是盒子内容的宽度，而不是盒子的宽度
  • height指的是盒子内容的高度，而不是盒子的高度
  • padding是内填充的意思，指的是里面的内容到盒子边框的距离
  • border是外边框的意思，指的是盒子边框
  • margin是外边距的意思，指的是盒子与盒子之间的距离

一个盒子的总宽度为：盒子内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度为：盒子内容的高度+上下两边的填充+上下两边的边框线
盒子的高度一般不用设置，因为盒子的高度由盒子的内容决定

1、padding

  • padding是内填充的意思，指的是里面的内容到盒子边框的距离
  • padding是有4个方向的，所以能分别描述这4个方向的padding
  • 方法有两种：
    1、padding-top、padding-right、padding-bottom、padding-left。
    2、padding：这个属性描述4个方向是有顺序的，顺时针方向，从上开始：上、右、下、左。
  • 如果简写方法中padding只设置一个值表示4个方向的内填充都是这个值。
  • 如果简写方法中padding设置两个值表示上下方向的内填充为第一个值，左右为第二个值。
  • 如果简写方法中padding设置三个值，第一个值表示上、第二个值表示左右、第三个值表示下。

2、margin

  • margin是外边距的意思，指的是盒子与盒子之间的距离
  • margin也是4个方向的，所以也能通过4个方向对其进行描述
  • 方法和padding相同，两种方法，只是把padding换成了margin
  • margin有塌陷现象：
    1、在标准文档流中，竖直方向的margin值不会叠加，会取较大值
    2、水平方向没有margin塌陷现象
    3、浮动元素没有margin塌陷现象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>竖直反向的margin值不会叠加，取较大值</title><style type="text/css">div{width:100px;height:100px;}.div1{background-color: #f00;margin-bottom: 20px;}.div2{background-color: #00f;margin-top: 40px;}</style>
</head>
<body><div class="div1"></div><div class="div2"></div>
</body>
</html>
  • margin居中，margin的值可以是auto，当左外边距和右外边距都是auto时，这个盒子就会水平居中。

1、使用margin来实现水平居中时，盒子一定要有固定的宽度；
2、只有块元素可以实现水平居中，行内元素是不能实现居中的；
3、只有标准文档流中的盒子可以使用margin来居中；
4、margin属性用来实现盒子的水平居中，而不是文本的水平居中。
文本的水平居中是用text-align:center;实现的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>margin居中</title><style type="text/css">.box{width: 100px;height: 100px;background-color: #f00;margin-left: auto; /* 左外边距 */margin-right: auto; /* 右外边距 */margin-top: 100px; /* 上外边距 */margin-bottom: 100px; /* 下外边距 */}p{height: 50px;background-color: skyblue;}</style>
</head>
<body><div class="box"></div><p></p>
</body>
</html>
  • 善于使用父元素的padding，而不是子元素的margin

margin这个属性本意是用于描述兄弟元素之间的关系，不是用于描述父子元素之间关系的。如果是父子元素的关系，最好在父元素设置padding属性。

3、border

  • border边框的意思，有三个要素：粗细、线型、颜色。
  • 语法格式：border: 粗细 线型 颜色
  • 颜色可以省略不写，默认黑色；其他两个属性不能省略，省略会导致border设置失效。
  • 边框的线型：
  • 颜色用三种表达方式都可以。
  • 边框也有四个方向上的属性：border-top、border-right、border-bottom、border-left可以分别设置上面的粗细、线型、颜色。

十一、display

  • display是显示的意思，用来进行行内元素与块级元素之间的相互转化，将隐藏的元素显示或者将显示的元素隐藏。
  • display的属性取值：inline、block、none。
  • 当我们将一个行内元素的display属性的值设置为block以后，这个元素就会被转换为块级元素（设置的宽高生效）。
  • 当我们将一个块级元素的display属性的值设置为inline以后，这个元素就会被转换为行内元素（设置的宽高失效）。
  • 将一个显示的元素display属性设置为none以后，这个元素就会隐藏。
  • 将一个隐藏的元素display属性设置为block以后，这个元素就会显示。
  • 显示/隐藏主要是JS来使用。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>display案例</title><style type="text/css">/* 通用选择器来去除HTML中所有标签的默认内填充与外边距 */*{margin:0px;padding:0px;}body{background-image: url(./image/background29.jpg);background-size: 100%;background-repeat:no-repeat;background-position: top center;}.nav{width:960px;height: 40px;margin-left: auto;margin-right:auto;}.nav ul{/* 将列表前的项目符号去除 */list-style:none;}.nav ul li{/* 把每个li标签向左浮动 */float:left;/* 给每个li标签设置宽度 */width:120px;text-align:center;background-image: url(./image/line.jpg);height:40px;line-height: 40px;}.nav ul li a{width: 120px;height: 40px;/* 将行内元素转换为块状元素 */display: block;}a:link,a:visited{text-decoration: none;color: white;}a:hover{background-image: url(./image/yellow_line.jpg);}</style>
</head>
<body><div style="height:40px"></div><div class="nav"><ul><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li></ul></div>
</body>
</html>

十二、position

  • position表示位置的意思，主要用于实现对元素的定位。
  • 在CSS中定位分为三种：fixed(固定定位)、relative(相对定位)、absolute(绝对定位)。
  • 在使用定位属性时，一定要配合定位的坐标来使用。
    left：表示定位的元素离左边多远。
    right：表示定位的元素离右边多远。
    top：表示定位的元素离上边多远。
    bottom：表示定位的元素离下边多远。

1、固定定位

  • 固定定位，它是相对于浏览器窗口来进行定位；不管页面如何滚动，固定定位元素显示的位置不会改变。
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>固定定位</title><style type="text/css">*{margin:0px;padding:0px;}p{width:100px;height:100px;background-color: #f00;}</style>
</head>
<body><p></p><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" >
</body>
</html>
  • 特点：
    1、固定定位元素脱离了标准文档流
    2、固定定位元素的层级比标准文档流里的元素高，所以固定定位元素会盖住标准文档流里的元素
    3、固定定位元素不再占用空间
    4、固定定位元素显示的位置不会随着浏览器滚动而滚动
  • 用固定定位返回网页顶部
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>使用固定定位来实现返回顶部的按钮</title><style type="text/css">*{margin:0px;padding: 0px;}a{width: 60px;height: 60px;display: block;background-color: #ccc;text-align:center;line-height: 30px;text-decoration: none;color:white;font-weight: bold;position: fixed;right:30px;bottom:30px;}div{height:200px;}.div1{background-color: #f00;}.div2{background-color: #0f0;}.div3{background-color: #00f;}.div4{background-color: #f00;}.div5{background-color: #0f0;}.div6{background-color: #00f;}</style>
</head>
<body><a href="#">返回<br/>顶部</a><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div>
</body>
</html>
  • 用固定定位实现顶部导航栏
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>固定定位实现顶部导航栏</title><style type="text/css">*{margin:0px;padding: 0px;}body{padding-top: 60px;}.nav{width: 100%;height: 60px;background-color: #222222;position: fixed;left:0px;top:0px;}.nav .inner_c{width: 1000px;height:60px;margin:0px auto;}ul{list-style: none;}ul li{float:left;width:100px;height: 60px;line-height: 60px;text-align: center;}ul li a{display: block;width:100px;height: 60px;text-decoration: none;color:white;font-weight: bold;}a:hover{background-color: gold;}div{height:200px;}.div1{background-color: #f00;}.div2{background-color: #0f0;}.div3{background-color: #00f;}.div4{background-color: #f00;}.div5{background-color: #0f0;}.div6{background-color: #00f;}</style>
</head>
<body><div class="nav"><div class="inner_c"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div></div><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div>
</body>
</html>

2、相对定位

  • position:relative
  • 相对定位时相对于“原来的自己”进行定位。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>相对定位</title><style type="text/css">*{margin:0px;padding:0px;}.box{width: 600px;border:1px solid #000;margin:100px auto;}.box div{width:100px;height: 100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/* 相对定位 */position:relative;left:100px;}.div3{background-color: #00f;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

  • 特点：
    1、相对定位元素没有脱离标准文档流
    2、相对定位元素如果没有设置定位的坐标，那么相对元素还在原来的位置
    3、相对定位元素设置定位的坐标后，原本的位置会空白
    4、相对定位元素会将标准文档流中的元素盖住
    5、相对定位元素的定位坐标可以是负数

相对定位元素原本的位置会空白，所以相对定位很少单独使用，主要是用来配合“绝对定位”元素来使用的。

3、绝对定位

  • positon:absolute
  • 绝对定位是相对于“上级定位元素”来进行定位的。
  • 绝对定位元素会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是如果其父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有就进行定位；如果没有设置，就会进行向上一级进行查找，直到相对于浏览器窗口来进行定位。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>绝对定位</title><style type="text/css">*{margin:0px;padding:0px;}.box{width: 600px;border: 1px solid #000;margin:100px auto;position: relative;}.box div{width:100px;height:100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/* 绝对定位 */position:absolute;/* 设置定位的坐标 */right: 0px;top:0px;}.div3{background-color: #00f;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>
  • 特点：
    1、绝对定位元素脱离了标准文档流
    2、绝对定位元素不再占用空间
    3、绝对定位元素会盖住标准文档流中的元素
    4、绝对定位元素相对于其上级定位元素进行定位，这里的上级定位元素可以是相对定位、固定定位和绝对定位，但一般只会给其上级定位元素设置相对定位属性。

十三、z-index

  • z-index表示压盖的层级关系
  • 只有定位的元素才有z-index值（即只有设置了固定定位、相对定位、绝对定位的元素才会有z-index值）
  • z-index值没有单位，是一个正整数，默认的z-index值是0
  • 如果多个定位元素没有设置z-index属性，或者z-index值设置一样，那么写在HTML后面的定位元素就会盖住前面的定位元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>z-index</title><style type="text/css">.div{width:100%;height:100%;position: relative;}.div1{width:200px;height:200px;background-color: #f00;/* 绝对定位 */position:absolute;/* 定位的坐标 */left:100px;top:100px;z-index: 1;}.div2{width:200px;height:200px;background-color: #0f0;/* 绝对定位 */position:absolute;/* 定位的坐标 */left:200px;top:200px;z-index: 2;}</style>
</head>
<body><div  class="div"><div class="div1"></div><div class="div2"></div></div>
</body>
</html>

  • z-index的用途：如果后面有定位元素写在导航栏的后面，可能盖住导航栏，所以导航栏应该设置较高的z-index值。

十四、CSS3

  • CSS3与CSS2之间的区别
    CSS3 = CSS2 + 新语法 + 新的属性

1、结构伪类

选择器 功能
E:first-child 匹配第一个孩子
E:last-child 匹配最后一个孩子
E:nth-child(n) 匹配第n个孩子
E:nth-child(2n)
E:nth-child(even) 		匹配偶数的孩子
E:nth-child(2n+1)
E:nth-child(odd) 		匹配奇数的孩子
E:only-child 匹配有且只有一个孩子 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>结构伪类</title><style type="text/css">.box ul li:first-child{color:#f00;width:100px;height:30px;line-height: 30px;border: 1px solid #000;}.box ul li:last-child{color:#f00;width:100px;height:30px;line-height: 30px;border: 1px solid #000;}div ul li:only-child{color:#f00;}</style>
</head>
<body><div class="box"><ul><li>test1</li><li>test2</li><li>test3</li><li>test4</li><li>test5</li><li>test6</li><li>test7</li><li>test8</li></ul></div><div><ul><li>only-child</li></ul></div>
</body>
</html>
  • 案例：使用CSS3中的结构伪类实现隔行变色的表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>CSS3中的结构伪类实现隔行变色表格</title><style type="text/css">table tr:nth-child(even){background-color: #f00;}table tr:nth-child(odd){background-color: #00f;}/* 当鼠标移动到tr上面时显示背景颜色为灰色 */table tr:hover{background-color: #ccc;}</style>
</head>
<body><table width="500" border="1" align="center">table>tr*20>td{&nbsp;}*10<!-- 都是重复的，节省空间，不展开了 -->
</body>
</html>

  • 合并表格的边框线border-collapse，值为：collapse
<style type="text/css">table{border-collapse: collapse;border-color: #ccc;}
</style>

2、伪元素

选择器 功能
::first-letter 操作当前元素中的第一个字
::first-line 操作当前元素中的第一行
::before 在之前插入，在一个盒子内部的最前面
::after 在之后插入，在一个盒子内部的最后面
  • 示例省略。

3、文本阴影

  • text-shadow有水平阴影、垂直阴影、模糊距离、阴影颜色四个属性。
  • 每个阴影有两个或三个长度值和一个可选的颜色值进行规定；省略的长度是0。
值 描述
h-shadow 必需；水平阴影的位置，允许负值。
v-shadow 必需；垂直阴影的位置，允许负值。
blur 可选；模糊的距离。
color 可选；阴影的颜色。
  • 文字阴影可以有多组值，表示多个阴影，多组之间用逗号隔开就可以；
  • 水平阴影正值在右边，负值在左边；
  • 垂直阴影正值在下边，负值在上边；
  • 模糊强度，值越大越模糊。

4、盒子阴影

  • box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、颜色、内/外阴影。
值 描述
h-shadow 必需；水平阴影的位置，允许负值。
v-shadow 必需；垂直阴影的位置，允许负值。
blur 可选；模糊的距离。
spread 可选；阴影的尺寸。
color 可选；阴影的颜色。
inset 可选；将外部阴影(outset)改为内部阴影。
  • 可以给div设置box-shadow，img图片也可以。
  • 示例省略。

5、圆角矩形

  • border-radius：左上、右上、右下、左下。
  • 如果border-radius四个值相同，只需要写一个就行。
  • 不想有圆角的位置用0px就行。
  • 让div变圆形：div的高宽设置相同，然后设置border-radius为border高宽的一半。
  • 让div变椭圆：div的border-radius设置为高度的一半。
  • 让div变半圆：div的高度为宽度的一半，border-radius设置为高度值
  • 其他图案类似
  • 案例：（更多>）圆角矩形超链接
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>圆角矩形案例</title><style type="text/css">body{background-color: #ccc;}.more{width:60px;height:20px;background-color: #fff;text-align: center;line-height: 20px;margin:100px auto;/* 圆角矩形 */border-radius: 10px;font-size: 12px;font-family: "微软雅黑";}a{display:block;width:60px;height: 20px;border-radius: 10px;}a:link,a:visited{color: #000;text-decoration: none;}.more a:hover{background-color: #f00;color: #fff;}</style>
</head>
<body><div class="more"><a href="#">更多></a></div>
</body>
</html>


6、透明度

  • 只要是颜色，都可以用透明度
  • rgba(红色,绿色,蓝色,透明度)
  • a：表示透明度的意思，透明度取值：0~1，0表示完全透明
  • 可以实现：背景颜色(background-color)透明、文本颜色(color)透明、边框颜色(border)透明。

阿里云前端开发学习路线 - CSS快速掌握 笔记相关推荐

  1. 重磅推出：分享阿里云大学前端开发学习路线链接

    重磅推出:分享阿里云大学前端开发学习路线链接 这是一份阿里云大学推出前端开发学习路线,适合入门.也适合刚入职场一两年的小伙伴,来一个基础知识进行加深视频学习.内容言简意赅,通过demo练习等来理解学习 ...

  2. 2018web前端学习路线，详谈web前端开发学习路线

    近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...

  3. 送给大家一套完整的web前端开发学习路线

    本文来源:千锋web前端开发 近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...

  4. 重磅推出：分享阿里云大学Linux学习路线链接

    重磅推出:分享阿里云大学Linux学习路线链接 这是一份阿里云大学推出Linux学习路线,适合入门.也适合刚入职场一两年的小伙伴,来一个基础知识进行加深视频学习.内容言简意赅,通过demo练习等来理解 ...

  5. 小猿圈Web前端开发学习路线

    很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...

  6. web前端开发学习路线

    导语:首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想 ...

  7. 小猿圈Web之前端开发学习路线及建议

    人生在勤,不索何获.--张衡 很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了 ...

  8. HTML5前端开发学习路线建议，学习前端的必备知识点

    Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师.主要进行网站开发,优化,完善的工作.网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览 ...

  9. 前端开发学习路线 第一阶段(一) HTML5入门与实战

    整体架构 一.浏览器标准 1.1 Web标准的好处 让Web的发展前景更广阔 内容能被更广泛的设备访问 更容易被搜寻引擎搜索 降低网站流量费用 使网站更易于维护 提高页面浏览速度 1.2 Web标准构 ...

最新文章

  1. mendix归还界面如何只显示登录人自己借阅的书籍，而不显示全部人借阅的书籍
  2. 平衡二叉树的构造_LeetCode 题解 | 110.平衡二叉树
  3. XHTML Strict和Transitional 的区别
  4. fiddler，他和其他抓包软件有什么区别，如何使用fiddler进行抓包
  5. ecshop nginx php-fpm,ecshop在nginx下配置常见问题
  6. mysql定时任务多条sql_【SQL】使用Navicat创建MySQL定时任务重复执行某个sql语句
  7. 蓝牙核心规范（V5.2）7.8-深入详解之SMP(安全管理协议)|LE配对过程（1）
  8. Ubuntu使用问题备忘录
  9. html中dom什么意思,dom属性是什么意思啊 html dom是什么意思，通俗易懂
  10. 有奖 | 你想要什么样的程序员贴纸？
  11. keyberos认证问题导致GSS initiate failed
  12. 在java中使用关键字导入包_在Java中，若要使用一个包中的类时，首先要求对该包进行导入，其关键字是( )。...
  13. XYOJ1255: 寻找最大数X（按数的一个一个元素输出）
  14. struts使用下拉列表框[LabelValueBean的使用]
  15. OA厂商与OA用户：相处模式还能这样切换？
  16. 201911-202004《JavaScript设计模式》读书笔记
  17. 经济学模型1-循环流向图
  18. redmi K30 5G拆解
  19. PHP （TP5）常用内容
  20. 一群中国芯片技术小球的奋斗故事系列： “中科融合“AI-3D”芯片追赶美国TI的DLP技术之产业和技术初探-part I”

热门文章

  1. 论山寨手机和Android 【8】 自己动手做XP手机，DIY实战指南
  2. 大都会系统MetLife小记
  3. 完美收官！java获取当前时间的字符串
  4. mysql的while循环语句,MySQL循环语句之while循环测试
  5. Grab Cut与Graph Cut
  6. JavaScript_Object.keys() Object.values()
  7. 【Intellij IDEA教程】怎么自动清除无效的import导入包、清除无效的import导入包的快捷键
  8. Win10压缩的在linux打不开,win10压缩包打不开什么原因？打不开压缩包解决方法
  9. 2022-2028全球与中国室内垂直农场市场深度分析及十四五规划咨询建议报告
  10. 第二版：JAVA对象对比VO对象找出差异值结合swagger-ApiModel无需自定义注解