background属性

属性解释
background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:

  • background-color 设置背景颜色
  • background-image 设置背景图片地址
  • background-repeat 设置背景图片如何重复平铺
  • background-position 设置背景图片的位置
  • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,这里面的“#00ff00”是设置background-color;“url(bgimage.gif)”是设置background-image;“no-repeat”是设置background-repeat;“left center”是设置background-position;“fixed”是设置background-attachment,各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。

特征布局:翻页(所需知识点:盒模型、内联元素)

特征布局:导航条(所需知识点:盒模型、行内元素布局)

常用图片格式

图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:

1、psd
photoshop的专用格式。
优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。
缺点:应用范围窄,图片容量相对比较大。

2、jpg
网页制作及日常使用最普遍的图像格式。
优点:图像压缩效率高,图像容量相对最小。
缺点:有损压缩,图像会丢失数据而失真,不支持透明背景,不能制作成动画。

3、gif
制作网页小动画的常用图像格式。
优点:无损压缩,图像容量小、可以制作成动画、支持透明背景。
缺点:图像色彩范围最多只有256色,不能保存色彩丰富的图像,不支持半透明,透明图像边缘有锯齿。

4、png
网页制作及日常使用比较普遍的图像格式。
优点:无损压缩,图像容量小、支持透明背景和半透明色彩、透明图像的边缘光滑。
缺点:不能制作成动画

5、webp
将要取代jpg的图像格式。
优点:同jpg格式,容量相对比jpg还要小。
缺点:同jpg格式,目前不支持所有的浏览器。

位图和矢量图
位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时,图像会失真。上面讲的5种图像都属于位图。
矢量图和位图组成图像的原理不同,它的图像轮廓是由函数曲线生成的,当放大图像时,实际的原理就是将曲线乘以一个倍数,图像可以轻易地放大,而且不会出现像素块,图像边缘也不会出现锯齿。

svg
目前首选的网页矢量图格式。
优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑。
缺点:色彩不够丰富。

flash
退出历史的重量级网页矢量图格式。
优点:图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互。
缺点:不支持搜索引擎、运行慢、浏览器需要装插件才可支持。

总结
在网页制作中,如何选择合适的图片格式呢?
1、使用大幅面图片时,如果要使用不透明背景的图片,就使用jpg图片;如果要使用透明或者半透明背景的图片,就使用png图片;
2、使用小幅面图片或者图标图片时,如果图片含多种颜色,可以使用gif或png图片;如果图片是单色,而且要求有很好的显示效果,可以使用svg;如果是图片时动画的,可以使用gif。

photoshop批量切图技巧

切图,就是从效果图中把网页制作需要的小图片裁剪出来。

1、使用psd格式并且带有图层的图像切图

2、在图像上用切片工具切出需要的小图

3、双击切片,给切片命名

4、将需要制作透明背景图像的切片的背景隐藏

5、执行菜单命令 存储为web所用格式

6、点选切片,设置切片的图片格式

7、存储切片,选择“所有用户切片”,点存储(多个切片会自动存到所选文件夹中的images文件夹中)

CSS权重

CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级,按照等级来计算权重

1、!important,加在样式属性值后,权重值为 10000
2、内联样式,如:style=””,权重值为1000
3、ID选择器,如:#content,权重值为100
4、类,伪类和属性选择器,如: content、:hover 权重值为10
5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1
6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> <!-- 第2个子元素div匹配 -->

2、E:first-child:匹配元素类型为E且是父元素的第一个子元素
3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素

属性选择器:
1、E[attr] 含有attr属性的元素

<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>

2、E[attr='ok'] 含有attr属性的元素且它的值为“ok”
3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

CSS3圆角、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;

同时分别设置四个角: border-radius:30px 60px 120px 150px;

设置四个圆角相同:
border-radius:50%;

rgba(新的颜色值表示法)

1、盒子透明度表示法:

    .box
{
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}

2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性,比如:width height background-color
2、transition-duration 设置过渡的时间,比如:1s 500ms
3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

举例:(翻面效果)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="data:images/location_bg.jpg"></div>
<div class="back_info">背面文字说明</div>
</div>
</body>
</html>


CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

人物走路动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路动画</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
} .box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
} to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="data:images/walking.png"></div>
</body>
</html>

CSS3 浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

比如:

div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}

自动添加浏览器前缀

目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer

可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置:

1、preferences/key Bindings-User

{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User

{
"browsers": ["last 7 versions"],
"cascade": true,
"remove": true
}

last 7 versions:最新的浏览器的7个版本
cascade:缩进美化属性值
remove:是否去掉不必要的前缀

HTML5新增标签

新增语义标签

1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚

音频视频
1、<audio>
2、<video>

PC端兼容h5的新标签的方法,在页面中引入以下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表单控件

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>

新增常用表单控件属性:
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点
3、autocomplete 联想关键词

移动端与PC端页面布局区别

视口

视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

设置方法如下( 快捷方式:meta:vp + tab ):

<head>
......
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
......
</head>

视网膜屏幕(retina屏幕)清晰度解决方案

视网膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解为屏幕上的一个发光点,无数发光的点组成的屏幕,视网膜屏幕比一般屏幕的物理像素点更小,常见有2倍的视网膜屏幕和3倍的视网膜屏幕,2倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/9。

图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小,就可以解决模糊的问题。

背景图强制改变大小,可以使用background新属性

background新属性
background-size:

length:用长度值指定背景图像大小。不允许负值。

percentage:用百分比指定背景图像大小。不允许负值。

auto:背景图像的真实大小。

cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。

contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

适配布局类型

PC及移动端页面适配方法

设备屏幕有多种不同的分辨率,页面适配方案有如下几种:

1、全适配:响应式布局+流体布局
2、移动端适配:

  • 流体布局+少量响应式
  • 基于rem的布局

流体布局

流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc()
可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px);

box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

响应式布局

响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

相应布局的伪代码如下:

@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}

基于rem的布局

首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

cssrem安装

cssrem插件可以动态地将px尺寸换算成rem尺寸

下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

配置参数 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例,默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为:[".css", ".less", ".sass"]。

常用css列表

  • color 设置文字的颜色,如: color:red;

  • font-size 设置文字的大小,如:font-size:12px;

  • font-family 设置文字的字体,如:font-family:'微软雅黑';

  • font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px;

  • font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px

  • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

  • text-overflow 设置一行文字宽度超过容器宽度时的显示方式,如:text-overflow:clip 将多出的文字裁剪掉 text-overflow:ellipsis 将多出的文字显示成省略号

  • white-space 一般用来设置文本不换行,如:white-space:nowrap 设置文本不换行 一般与text-overflow和overflow属性配合使用来让一行文字超出宽度时显示省略号

  • list-style 一般用来设置去掉ul或者ol列表中的小圆点或数字 如:list-style:none

  • width 设置盒子内容的宽度,如: width:100px;

  • height 设置盒子内容的高度,如: height:100px;

  • border-top 设置盒子顶部边框的三个属性 如:border-top:5px solid red;设置盒子顶部边框为3像素宽的红色的实线,详细设置说明:盒子模型
  • border-left 设置盒子左边边框的三个属性 如:border-left:3px dotted red;设置盒子左边边框为3像素宽的红色的点线,详细设置说明:盒子模型
  • border-right 设置盒子右边边框的三个属性 如:border-right:2px dashed red;设置盒子右边框为2像素宽的红色的虚线,详细设置说明:盒子模型
  • border-bottom 设置盒子底部边框的三个属性 如:border-bottom:1px solid red;设置盒子底部边框为1像素宽的红色的实线,详细设置说明:盒子模型
  • border 同时设置盒子的四个边框,如果四个边的样式统一就使用它 如:border:1px solid #000 设置盒子四个边都是1像素宽的黑色实线,详细设置说明:盒子模型

  • padding 设置盒子四个边的内边距 如:padding:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的内边距(顺时针),详细设置说明:盒子模型

  • margin 设置盒子四个边的外边距 如:margin:10px 20px 30px 40px 分别设置盒子上边(10px)、右边(20px)、下边(30px)、左边(40px)的外边距(顺时针),详细设置说明:盒子模型
  • overflow 设置当子元素的尺寸超过父元素的尺寸时,盒子及子元素的显示方式 如:overflow:hidden 超出的子元素被裁切,详细设置说明:元素溢出

  • display 设置盒子的显示类型及隐藏,如:display:block 将盒子设置为以块元素显示 display:none 将元素隐藏,详细设置说明:元素类型

  • float 设置元浮动 如:float:left 设置左浮动 float:right 设置右浮动,详细设置说明:元素浮动

  • clear 在盒子两侧清除浮动 如:clear:both 在盒子两侧都不允许浮动,详细设置说明:元素浮动

  • position 设置元素定位 如:position:relative 设置元素相对定位,详细设置说明:元素定位

  • background 设置元素的背景色和背景图片,如:background:url(bg.jpg) cyan;设置盒子的背景图片为bg.jpg,背景色为cyan,详细设置说明:元素背景

  • background-size 设置盒子背景图的尺寸,如:background-size:30px 40px;设置背景图的尺寸宽为30px,高为40px,这个属性不能合到background属性中,详细设置说明:retina屏适配

  • opacity 设置元素整体透明度,一般为了兼容需要加上filter属性设置 如:opacity:0.1;filter:alpha(opacity=10)

  • cursor 设置鼠标悬停在元素上时指针的形状 如:cursor:pointer 设置为手型

  • outline 设置文本输入框周围凸显的蓝色的线,一般是设为没有 如:outline:none

  • border-radius 设置盒子的圆角 如:border-radius:10px 设置盒子的四个角为10px半径的圆角,详细设置说明:css圆角

  • box-shadow 设置盒子的阴影,如:box-shadow:10px 10px 5px 2px pink;设置盒子有粉色的阴影,详细设置说明:css阴影

  • transition 设置盒子的过渡动画,如:transition:all 1s ease;设置元素过渡动画为1秒完成,所有变动的属性都做动画,详细设置说明:过渡动画

  • animation 设置盒子的关键帧动画,详细设置说明:关键帧动画

  • transform 设置盒子的位移、旋转、缩放、斜切等变形,如:transform:rotate(45deg);设置盒子旋转45度,详细设置说明:元素变形

  • box-sizing 设置盒子的尺寸计算方式,如:box-sizing:border-box 将盒子的尺寸计算方法设置为按边框计算,此时width和height的值就是盒子的实际尺寸border-collapse 设置表格边框是否合并,如:border-collapse:collapse,将表格边框合并,这样就可以制作1px边框的表格。

css布局、动画要点的更多相关文章

  1. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  2. 熟悉HTML CSS布局模型

    HTML最难的地方来了!这个我反复了很多遍, 包括现在写博客, 也对我自己算是一种温习, 我这块怕是没办法写的很好懂, 因为我自己还不能把我学到的准确通俗易懂的表达出来, 给自己记个笔记, 以后再来一 ...

  3. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  4. 一览css布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  5. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  6. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

  7. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  8. Day4 HTML新增元素与CSS布局

    Day4  HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...

  9. CSS布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  10. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

随机推荐

  1. java字段值为null,不返回该字段

    jackSon注解– @JsonInclude 注解不返回null值字段 @Data @JsonInclude(JsonInclude.Include.NON_NULL) public class R ...

  2. having对聚合函数的结果集进行过滤

    SELECT rl.road_code,string_agg(distinct rs.tech_level_label, ',') from road_lst rlleft join road_sec ...

  3. java SE01

    目录 一.基础语言 1. 注释 a. 行内注释 b. 多行注释 c. 文档注释 2. 关键字 3. 数据类型 a.基本数据类型 b.引用数据类型 c. 类型转换 4. 变量类型 a. 类变量 b. 实 ...

  4. [SSH-1]publickey,gssapi-keyex,gssapi-with-mic

    实际上,是有两个不同的原因的,它们都会造成这个报错. 原因1)client端私钥文件权限太大 解决方法:chmod 400 ~/.ssh/id_rsa  #如果是RSA算法的话,私钥生成时默认叫id_ ...

  5. springboot+mybatis实现增删改查

    开发工具IDEA 一.创建springboot项目(可以百度或者点击查看) 二.添加依赖pom.xml 1 <?xml version="1.0" encoding=&quo ...

  6. Excel怎么把公式转成数值并复制

    直接选中复制,粘贴时选择选择性粘贴,选择数值确认

  7. Spark 中三种数据处理对象的区别: RDD-Dataset-Dataframe

    1,对比表:   RDD Dataframe Dataset 版本 1.0 1.3 1.6 描述 分布式数据集合 行列化的分布式数据集合  RDD 和 DataFrame的结合 数据格式 结构化和非结 ...

  8. 使用Android studio配置软件签名,并在车机安装

    系统级APP,可在Androidmanifest.xml中配置属性,并使用系统级签名. 1. 签名方式 1.1 bulid.gradle(:app)中添加签名信息 1.2 使用Android stud ...

  9. 字符串内特殊字符的替换处理,如对\n的替换

    一.对于字符串特殊字符的替换 对于字符串内,\n的处理,如何去掉 s='123,456\n' s1=s.strip('\n') s2=s.replace('\n','') print(s) print ...

  10. MyBatis_02_(搭建Mybatis)

    搭建MyBatis 1-开发环境 2-创建Maven工程 2.1- 打包方式 2.2 导入依赖 <!-- 打包方式jar--> <packaging>jar</packa ...