Web前端教程2-CSS教程
1. CSS基本语法
CSS是层叠样式表
1.1. CSS基本定义
CSS的定义方法时:
选择器{
属性: 值;
属性: 值;
}
div{
width:100px;
height:100px;
background:gold;
}
- 选择器是将样式和页面元素关联起来的名称
- 属性是希望设置的样式属性,每个属性有一个或多个值
CSS引入页面的方法
- 在HTML中通过外联方法
<link rel = "stylesheet" type="text/css" href="css/style.css">
- 内联式,通过标签的style属性,直接在标签上写样式
<div style="width: 100px; height: 100px">..</div>
- 嵌入式: 通过style标签
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
1.2. CSS布局属性
属性 | 说明 |
---|---|
width | 宽度 |
height | 高度 |
background-color | 背景颜色 |
border | border: 1px solid gold; 设置元素边框 |
padding | 设置内容和元素边框距离 |
margin | 元素和容器的距离, margin: 10px auto 0 居中 |
float | 设置元素浮动 |
1.3. CSS文本常用属性
常用的应用文本的css样式
属性 | 说明 | 值 |
---|---|---|
color |
文本颜色 | 颜色值 |
font-size |
文字大小 | px值 |
font-family |
文字字体 | 字体名称 |
font-style |
字体是否倾斜 | normal :不倾斜italic :倾斜 |
font-weight |
字体是否加粗 | normal :不加粗bold :加粗 |
font |
同时设置上面的属性 | 加粗 字号 /行高 字体 |
line-height |
文字的行高 | px值 |
text-decoration |
文字的下划线 | none去除下划线 |
text-indent |
文字的首行缩进 | 首行缩进24px |
text-align |
文字的水平对齐方式 | center字体居中 |
2.CSS选择器
2.1. 标签选择器
- 直接通过html中的标签名字来选择对于的元素
- 选择面太广,很少用
/* 直接选择html中所有的div元素 */
div{
color: red;
}
2.2. id选择器
- 在html中设置一个id,在css中引用设置它
- id只能是一个全局唯一样式
- 一次只能选择一个元素
- 很少用
#box{
color: pink;
}
<div id="box">666</div>
2.3. 类选择器
- 为了补偿id选择器的缺点,可以一下子设置多个元素样式
.lei{
color: red;
}
.indent{
text-indent: 20px;
}
<div class="lei indent">1</div>
<div id = "box" class="lei">2</div>
<div class="lei">3</div>
<div class="lei">4</div>
<div class="lei">5</div>
2.4. 层级选择器
- 主要用于选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用
.list{
height: 30px;
}
/* 这是一个两层的层级选择器 */
.list a{
text-decoration: none;
color: #333;
}
.list .num{
color: #333;
}
<ul class="list">
<li><a href = "">新闻标题</a></li>
<li class="num"><a href = "">新闻标题</a></li>
<li><a href = "">新闻标题</a></li>
<li><a href = "">新闻标题</a></li>
</ul>
2.5.组选择器
- 多个选择器,有相同的样式设置,可使用组合选择器
/* 设置3个类的公共属性 */
.box1,.box2,.box3{
font-size: 14px;
text-indent: 28px;
}
/* 然后在使用类选择器个性化 */
.box1{
color: red;
}
.box2{
color: green;
}
.box3{
color: orange;
}
/* 更多设置形式 */
/* 匹配所有的p,b,i,span元素 */
p,b,i,span {
color: green;
}
<div class="box1">3</div>
<div class="box2">4</div>
<div class="box3">5</div>
2.6. 伪类和伪元素选择器
- 常用的伪类选择器为hover,表示鼠标悬停在元素上时的状态
/* 鼠标放到list类下的a时,会变色 */
.list a:hover{
color: gold;
}
- 伪元素选择器有before和after,它们可通过样式在元素中插入内容
/* 块级首行 */
/* 在p,div,body等块级元素才有效果 */
::first-line{
color: red;
}
/* 块级首字母 */
::first-letter{
color: red;
}
/* 文本前插入内容 */
/* 变成:点击百度 */
a::before{
content: '点击-';
}
/* 文本后插入内容 */
/* 百度搜索 */
a::after{
content: '搜索';
}
3. 块元素、内联元素和内联块元素
3.1. 块元素(行元素)
- 块元素,也称为行元素,比如
div,p,ul,li,h1-h6,dl,dt,dd
等都是块元素 - 它的行为有:
- 支持全部的样式
- 如果没有设置宽度,默认宽度是父级宽度的100%
- 盒子占据一行,即使设置了宽度
<style type="text/css">
body{
margin: 0;
}
div{
background-color: gold;
text-align: center;
margin: 10px 0;
}
.box2{
width: 200px;
}
.box3{
width: 300px;
}
</style>
...
<div class="">这是一个div元素</div>
<div class="box2">这是二个div元素</div>
<div class="box3">这是三个div元素</div>
3.2. 内联元素(行内元素)
- 内联元素,也是行内元素,布局中常用的有
a, span,em,b,strong,i
等都是行内元素 - 他们在布局中的行为是:
- 支持部分样式(不支持宽,高,margin上下,padding上下)
- 宽高由内容决定
- 盒子挤在一行
- 代码换行,盒子之间会产生间距
- 子元素是内联元素,父元素可以用
text-align
属性设置子元素水平对齐方式,用line-height
设置垂直对齐方式
<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
}
.con a{
background-color: gold;
width: 500px;
height: 300px;
margin-left: 30px;
margin-top: 50px;
}
</style>
...
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是二个a标签</a>
</div>
解决内联元素之间的间隔问题
- 去掉内联元素之间的换行
- 将内联元素的父级设置font-size为0,然后再设置自身的font-size
<!--方法1:-->
<a href="#">这是一个a标签</a><a href="#">这是二个a标签</a>
<!--方法2:-->
<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
font-size: 0;
}
.con a{
background-color: gold;
width: 500px;
height: 300px;
margin-left: 30px;
margin-top: 50px;
font-size: 20px;
}
</style>
3.3. 内联块元素
结合了块元素和内元素的优点,通过
display
转换他们的行为是:
- 支持全部样式
- 如果没有设置宽高,由内容决定
- 盒子并在一行
- 代码换行,由间距
- 子元素是内联块元素,父元素可以通过text-align设置水平对齐方式,用line-height设置垂直对齐
- display属性
属性 | 说明 |
---|---|
none | 隐藏不占用位置 |
block | 块元素 |
inline | 内联元素 |
inline-block | 内联块元素 |
<style type="text/css">
body{
margin: 0;
}
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto 0;
}
.con a{
background-color: gold;
width: 100px;
height: 50px;
display: inline-block;
}
</style>
<div class="con">
<a href="#">这是一个a标签</a>
<a href="#">这是二个a标签</a>
</div>
3.4. 实例: 设置导航栏
<style type="text/css">
body{
margin: 0;
}
.menu{
width: 694px;
height: 50px;
margin: 50px auto 0;
list-style: none;
padding: 0;
font-size: 0;
}
.menu li{
display: inline-block;
width: 98px;
height: 48px;
border: 1px solid gold;
font-size: 16px;
margin-right: -1px;
text-align: center;
line-height: 48px;
}
.menu li:hover{
background-color: orange;
}
.menu a{
font-family: 'Microsoft Yahei';
color: pink;
text-decoration: none;
}
.menu a:hover{
color: red;
}
</style>
</head>
<body>
<ul class="menu">
<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>
</body>
4.CSS表格
.goods{
/* 通用属性 */
width: 300px;
height: 300px;
text-align: center;
/* 设置的单元格相邻边是否被合并
separate: 单元格边框独立,默认
collapse: 边框合并(变成实心的实现) */
border-collapse: collapse;
/* 设置单元格边框边距,只有在border-collapse为separate情况下才有用 */
border-spacing: 10px;
/* 标题方位
top, bottom */
caption-side: top;
/* 空内容单元格的是否显示,hide */
empty-cells: hide;
/* 表格的排版方式
auto: 内容过长的时候,会拉伸整个单元格,挤压其他单元格
fixed: 内容过长时,不会拉伸,会换行处理 */
table-layout: fixed;
}
/* 设置表头的背景颜色 */
.goods th{
background-color: green;
color: #ffffff;
}
<link rel="stylesheet" type="text/css" href="style.css">
<table class = "goods" border="1">
<caption>人员表格</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>34</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>43</td>
</tr>
5.盒模型
5.1. 什么是盒子模型
元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是现实盒子的比喻,帮组我们设置元素对应的样式
- 盒子的边框:
border
- 盒子内的内容和边框的间距:
padding
- 盒子和盒子之间的间距:
margin
5.2设置边框
border
:长度值或者百分比border-top/bottom
border-left/right
.box{
width: 200px;
height: 100px;
background-color: red;
/* 设置顶部边框的宽度,颜色 */
/* border-top-width: 10px;
border-top-color: #000; */
/* 设置线的样式,实线solid, 虚线dashed, 点线dotted */
/* border-top-style: solid; */
/* 全部一下子来写 */
/* border-top: 10px solid #000; */
border: 10px solid orange;
}
<div class="box"></div>
5.3. 盒子内边距
padding
:长度值或者百分比padding-top/bottom
padding-left/right
.box{
padding: 20px;
/* 上,右,下,左 */
/* padding: 10px 20px, 10px, 20px; */
}
5.4. 盒子外边距
根据body文档的左上角为起点
margin
margin-top/bottom
margin-left/right
注意
- 当两个垂直外边距相遇时,它们将形成一个新的外边距,这个新的外边距长度等于两个发生合并的外边距的高度中的最大值,解决方法是
- 只设置
margin-top
,不设置margin-bottom
- 将元素浮动或者定位
- 盒子水平居中方法 :使用
auto
平分水平距离
.box{
margin: 100px auto;
}
5.5. 盒子尺寸大小
盒子宽度 = width + 左右padding值 + 左右的border值
盒子高度 = height + 上下的padding值+ 上下的border值
.box1,.box2,.box3{
width: 50px;
height: 50px;
background-color: gold;
margin: 20px;
}
.box2,.box3{
border: 50px solid #000;
}
.box3{
padding: 50px;
}
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
如何解决盒子尺寸动态变化的问题?
- 使用
indent
: 首行缩进 - 文本垂直居中
line-height
- 文本水平居中
text-align
- 盒子水平居中
margin: 10px auto;
假设设置一个高宽45*400px的盒子
.box2{
width: 400px;
height: 50px;
border-top: 1px solid #f00;
border-bottom: 3px solid #666;
font-size: 20px;
font-family: "Microsoft Yahei";
text-indent: 15px;
/* 让文字居中 */
line-height: 50px;
}
5.6. 盒子元素溢出
5.6.1. margin-top塌陷
在两个盒子嵌套的时候,内部的盒子设置的margin-top会加到外部的盒子上(只有外部的盒子有margin-top),导致内部的盒子margin-top
设置失败,解决方法如下:
- 外部盒子设置一个边框
- 外部盒子设置
overflow: hidden
- 外部盒子使用伪元素类(常用)
/* 类似于加边框 */
.clearfix:before{
content: "";
display: table;
}
/* <div class= "non clearfix"></div> */
5.6.2. 元素溢出
当子元素的尺寸超出父元素的尺寸时, 需要设置父元素显示溢出的子元素的方式,设置的方法通过overflow
属性设置
属性值 | 说明 |
---|---|
visible |
内容不会被修剪,会呈现在元素框外部,默认 |
hidden |
内容会被修剪,并且其他内容不可见,此属性还有清除浮动、清除margin-top 塌陷的功能 |
scroll |
内容会被修剪,通过滚动条显示 |
auto |
如果内容被修剪,就通过滚动条显示 |
inherit |
规定应该从父元素继承overflow 属性的值 |
什么是溢出
<div class="con">
<div class="box">
</div>
</div>
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto;
}
.box{
width: 400px;
height: 600px;
background-color: gold;
}
以下这个图就是溢出
设置溢出方法
.con{
width: 500px;
height: 300px;
border: 1px solid #333;
margin: 50px auto;
overflow: scroll;
}
6. CSS浮动
文档流
文档流,是指按照html标签编写的顺序一次从上到下,从左到右排列,块元素占一行,行内元素在一行只能从左到右排列,先写的先排,后写的后排,每个盒子都占据自己的位置, 浮动,定位可以打破这种规律
6.1. 浮动的特性
- 浮动元素有左浮动(
float:left
)和右浮动(float:right
) - 浮动的元素会向左或者向右浮动,直到碰到了父元素边界,浮动元素,或者未浮动元素才会停下来
- 相邻浮动的块元素可以并在一行,超出父级宽度就换行
- 浮动会让行内元素或者块元素自动转为行内块元素
- 浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果--也就是说浮动元素像是浮起来一样,后面的元素就占据了浮动起来空的位置,但是其中的文字会避开浮动的元素 浮动相当于飘起来了,到了天上,空出来的位置就会被占据(但是文字不会,从而形成文字饶图)
- 父元素内整体浮动的元素无法撑开父类,需要清除浮动
- 浮动元素之间没有垂直
margin
的合并
浮动特性1-5
/* 碰到父元素边界停下 */
.box1{
float: left;
}
/* 碰到父元素边界停下 */
.box2{
float: right;
}
/* 碰到box1浮动元素边界停下 */
.box3{
float: left;
}
6.2. 清除浮动
- 父级上增加属性
overflow: hidden
(在定位的时候会有问题 ) - 在最后一个子元素的后面加入空的
div
,给它样式属性clear: both
(不推荐) - 使用成熟的清浮动样式类(推荐)
/* 既可以清除margin-top的bug,也可以清除浮动 */
.clearfix:after, .clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom: 1;
}
清除浮动的用法(在父级上添加)
<div class = "con clearfix">
7. 定位
7.1. 定位简介
可以使用CSS的position属性来设置元素的定位类型,position的设置项如下:
relative
: 相对定位元素,元素所占的文档流位置不变,元素本身相对文档流进行位置偏移absolute
: 绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位,如果找不到,就相当于body元素定位fixed
: 固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为为漂浮在文档流的上方,当有滚动条的时候,元素会跟随滚动条一直显示static
: 默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性inherit
: 从父元素继承position
的值
7.1.1. 相对定位
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto 0;
}
.con div{
width: 200px;
height: 100px;
margin: 20px;
background-color: gold;
font-size: 40px;
text-align: center;
line-height: 100px;
}
.box01{
position: relative;
top: 80px;
left: 50px;
background-color: green;
}
7.1.2. 绝对定位
.box01{
position: absolute;
top: 50px;
left: 50px;
background-color: green;
}
我们也可把外部容器设置为定位的起点
.con{
width: 400px;
height: 400px;
border: 1px solid #000;
margin: 100px auto 0;
position: relative;
}
.box01{
position: absolute;
top: 50px;
left: 50px;
background-color: green;
}
7.1.3. 固定定位
- 跟随滚动框走
.box01{
position: fixed;
top: 50px;
left: 50px;
background-color: green;
}
7.2. 定位元素的特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
7.3. 定位元素层级
定位元素是浮动的正常的文档流之上的,可以用z-index
属性来设置元素的层级
7.4. 典型的 定位布局
- 固定在顶部的菜单
- 水平垂直居中的弹框
- 固定的侧边的工具栏
- 固定在底部的按钮
7.5. 浮动定位的范例
1. 导航栏
<ul class="menu">
<li class="active"><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 class="new"></li>
</ul>
.menu{
width: 950px;
height: 40px;
margin: 50px auto 0;
list-style: none;
background-color: #55a8ea;
padding: 0;
position: relative;
}
.menu li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
.menu li a{
font-size: 14px;
font-family: 'Microsoft Yahei';
color: #fff;
text-decoration: none;
}
.menu .active{
background-color: #00619f;
}
.menu li:hover{
background-color: #00619f;
}
.menu .new{
width: 30px;
height: 30px;
background: url(new.png) no-repeat;
position: absolute;
left: 433px;
top: -20px;
}
.menu .new:hover{
background: url(new.png) no-repeat;
}
2. 新闻列表
<div class="news_list_con">
<h3><span>新闻标题</span></h3>
<ul>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
<li><a href="">特征布局:新闻列表所需要的至少</a><span>2016-12-25</span></li>
</ul>
</div>
.news_list_con{
width: 600px;
height: 290px;
border: 1px solid #ddd;
margin: 50px auto 0;
overflow: hidden;
}
.news_list_con h3{
height: 50px;
width: 560px;
border-bottom: 1px solid #ddd;
margin: 0px auto;
}
.news_list_con h3 span{
display: inline-block;
height: 50px;
border-bottom: 2px solid red;
font-size: 18px;
line-height: 50px;
font-family: 'Microsoft Yahei';
padding: 0 15px;
}
.news_list_con ul{
list-style: none;
padding: 0;
width: 560px;
height: 238px;
margin: 7px auto 0;
}
.news_list_con ul li{
height: 38px;
border-bottom: 1px solid #ddd;
}
.news_list_con ul a{
float: left;
height: 38px;
line-height: 38px;
font-size: 14px;
font-family: 'Microsoft Yahei';
text-decoration: none;
color: #000;
}
.news_list_con ul a:before{
content: ".";
}
.news_list_con ul a:hover{
color: red;
}
.news_list_con ul span{
float: right;
height: 38px;
line-height: 38px;
font-size: 14px;
font-family: 'Microsoft Yahei';
color: #000;
}
8. CSS背景
页面上放图片的方法
方法 | 说明 |
---|---|
直接通过src | 占用空间 |
通过backgound-image |
图片不占用空间,只是作为背景,可以在上面写字.. |
backgound-image属性解释
background
是CSS中很重要的一个属性,它复制给盒子设置背景图片和背景颜色的,background
是一个复合属性,他可以分解成如下几个设置项
backgound-color
: 设置背景颜色image postion color repeat
backgound-image
: 设置背景图片地址backgound-repeat
: 设置背景图片如何重复平铺repeat(default),repeat-X,repeat-Y, no-repeat
backgound-position
: 设置背景图片位置水平(left/right/center) 垂直(top/bottom/center)
同时设置:必须在no-repeat
情况下使用水平偏移(10px) 垂直偏移(0px)
:参考点是 父元素的左上角
backgound-attachment
: 设置背景图片是固定还是随着页面滚动条滚动fixed
:不随着滚动
.box{
width: 200px;
height: 200px;
border: 1px solid red;
background-image: url(news.png);
}
Web前端教程2-CSS教程的更多相关文章
- 大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)
大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教 ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- Yeoman+Bower+gulp web前端自动化工作流程(初级教程)
Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题(八)
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
- 转:【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
原文地址:http://blog.csdn.net/wangfupeng1988/article/details/46418203 jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 用grunt搭建自动化的web前端开发环境-完整教程
原稿:http://www.cnblogs.com/wangfupeng1988/p/4561993.html#!comments jQuery在使用grunt,bootstrap在使用grunt,百 ...
- 【前端福利】用grunt搭建自己主动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发者.假设你如今还不知道grunt或者听说过. ...
随机推荐
- 【原】无脑操作:Gitblit服务器搭建及IDEA整合Git使用
背景:虽然有GitHub.GitLab这样强大的Git仓库,但是涉及私有Git库要收费,所以自己动手搭建免费的用用 环境:windows 7 旗舰版.JDK 1.8.IDEA 2017 ------- ...
- 查看三种MySQL字符集的方法(转)
MySQL字符集多种多样,下面为您列举了其中三种最常见的MySQL字符集查看方法,该方法供您参考,希望对您学习MySQL数据库能有所启迪. 一.查看MySQL数据库服务器和数据库MySQL字符集. m ...
- eShopOnContainers 知多少[3]:Identity microservice
首先感谢晓晨Master和EdisonChou的审稿!也感谢正在阅读的您! 引言 通常,服务所公开的资源和 API 必须仅限受信任的特定用户和客户端访问.那进行 API 级别信任决策的第一步就是身份认 ...
- 两篇文章带你走入.NET Core 世界:Kestrel+Nginx+Supervisor 部署上云服务器(二)
背景: 上一篇:两篇文章带你走入.NET Core 世界:CentOS+Kestrel+Ngnix 虚拟机先走一遍(一) 已经交待了背景,这篇就省下背景了,这是第二篇文章了,看完就木有下篇了. 直接进 ...
- PHP中$GLOBALS和global的区别
很多人都认为$GLOBALS['var']和global $var只是写法上不同,其实并不是这样 根据官方的解释是 $GLOBALS['var']是外部全局变量$var的本身, 而global $v ...
- Android 音视频开发学习思路
Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...
- Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)
WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...
- Json,Gson,Ajax基础知识
//json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...
- mac 下常用命令备忘录
1.查看端口号 lsof -i: 2.杀死进程 kill 41321 3.查看文件夹文件 ls ls -l //看到文件及文件夹更多的内容 ls -a //隐藏的文件 ls -la //上面的组合 4 ...
- 【Android Studio安装部署系列】四十一、Android Studio安装Alibaba Java Coding Guidelines插件(检查代码规范)
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 该插件主要是对今年发布的<阿里巴巴 Java 开发规约>的一个延伸,它以一个 IDE 的插件存在,可以自动对手册中的 J ...