文档章节

css3总结笔记

名字已被取
 名字已被取
发布于 2016/03/17 23:33
字数 4054
阅读 84
收藏 6

属性选择器

E[attr]只使用属性名,但没有确定任何属性值
E[attr="value"]指定属性名,并指定了该属性的属性值
E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写
E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的
E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的
E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value
E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)
实例:百度文库;

<style>p{height:30px; line-height:30px; font-size:12px;border:1px solid #000;}p a{background:url(img/w.gif) no-repeat 3px center;padding-left:20px; display:block;}p a[href*=text]{ background-image:url(img/text.gif);}p a[href*=pdf]{ background-image:url(img/swf.gif);}p a[href*=exl]{ background-image:url(img/x.gif);}</style></head><body><p>
    <a href="http://www.miaov.com/doc/javascript.html">测试文字</a></p><p>
    <a href="http://www.miaov.com/text/javascript.html">测试文字</a></p><p>
    <a href="http://www.miaov.com/pdf/javascript.html">测试文字</a></p><p>
    <a href="http://www.miaov.com/exl/javascript.html">测试文字</a></p>

备注:IE7及以上支持;

结构性伪类

E:nth-child(n)  表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/匹配奇数行/
p:nth-child(even){background:red}/匹配偶数行/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

实例:新浪头部导航

<style>.list{margin:0;padding:0; list-style:none;}.list li{width:150px;border-right:1px solid #000;float:left;}.list li:last-of-type{border:none;}.list a{float:left;width:40px;margin:0 5px; font:12px/30px "宋体"; text-align:center;}.list li a:nth-of-type(3n+1){ font-weight:bold;}.list li:nth-child(3) a:nth-child(2){ color:red;}</style></head><body><ul class="list">
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
       <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li>
    <li>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
        <a href="#">测试文字</a>
    </li></ul>

其它伪类

E:target 表示当前的URL片段的元素类型,这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content 属性

css3绘制叉号

a{ display: inline-block; width: 20px;height:5px; background: red;line-height: 0;font-size:0;vertical-align: middle;-webkit-transform: rotate(45deg) }    a:after{content:'/';display:block;width: 20px;height:5px; background: red;-webkit-transform: rotate(-90deg);}

文字

文字阴影

text-shadow:x y blur color, …
参数
x        横向偏移
y        纵向偏移
blur        模糊距离
color        阴影颜色
文本阴影如果加很多层,会很卡很卡很卡

文字阴影应用

最简单用法

text-shadow:2px 2px 4px black

阴影叠加

text-shadow:2px 2px 0px red, 2px 2px 4px green;

先渲染后面的,再渲染前面的
几个好玩的例子

//层叠:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;//光晕:color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;//火焰文字:text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

文字描边

webkit-text-stroke:宽度 颜色

新增文本功能

Direction  定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从左到右
注意要配合unicode-bidi 一块使用

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;unicode-bidi: bidi-override}

Text-overflow 定义省略文本的处理方式
clip  无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

自定义文字

代码格式

@font-face {    font-family: 'miaov';    src: url('1-webfont.eot');    src: url('1-webfont.eot?#iefix') format('embedded-opentype'),         url('1-webfont.woff') format('woff'),         url('1-webfont.ttf') format('truetype'),         url('1-webfont.svg#untitledregular') format('svg');    font-weight: normal;    font-style: normal;}

转换字体格式生成兼容代码http://www.fontsquirrel.com/fontface/generator

弹性布局

弹性盒模型

<style>.box{height:100px;padding:10px; display:-webkit-box; display: -moz-box;}.box div{width:100px;height:100px;background:red;border:1px solid #fff;}</style></head><body><div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div></div>

注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box

box-orient 定义盒模型的布局方向

Horizontal 水平显示
vertical 垂直方向
 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-orient:vertical; }

box-direction 元素排列顺序

 Normal 正序
 Reverse 反序
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff; }

box-ordinal-group 设置元素的具体位置

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{width:100px;height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

box-flex 定义盒子的弹性空间

子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }.box div{height:100px;background:red;border:1px solid #fff;}.box div:nth-of-type(1){width:300px;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}

box-pack 对盒子富裕的空间进行管理

start 所有子元素在盒子左侧显示,富裕空间在右侧
end 所有子元素在盒子右侧显示,富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布

 .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:justify  ;  }

box-align 在垂直方向上对元素的位置进行管理

star 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

<style>
 /*个未知宽高的块元素如何在屏幕中水平垂直居中?需说明原理。*/html{height:100%;}body{height:100%;margin:0;}.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}.box div{background:red;border:1px solid #fff;}</style></head><body><div class="box">
    <div>1s</div>
    <div>2s</div>
    <div>3s</div>
    <div>4s</div>
    <div>5s</div></div>

盒模型阴影

用法

box-shadow:[inset] x y blur [spread] color

参数
inset投影方式
inset:内投影
不给:外投影
x、y:阴影偏移
blur:模糊半径
spread:扩展阴影半径
先扩展原有形状,再开始画阴影color

box-shadow:10px 10px 30px blue;box-shadow:inset 10px 10px 30px blue;box-shadow:0 0 30px 10px #000; 
box-shadow:0 0 30px 30px #000,inset 0 0 30px yellow;

其他盒模型新增属性

box-reflect 倒影

direction  方向必选     above|below|left|right;
距离
渐变(可选)

img{ -webkit-box-reflect:below;}//上下排列,倒影在下方img{ -webkit-box-reflect:right 10px;}//左右排列,倒影在右方img{-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0,0,0,1) 0,rgba(0,0,0,0) 50%);}//线性渐变,逐渐消失background:-webkit-linear-gradient(red 0,blue 100%);//背景渐变

resize 自由缩放

both 水平垂直都可以缩放
horizontal 只有水平方向可以缩放
vertical 只有垂直方向可以缩放

.box{width:100px;height:100px;background:url(bg.jpg);border:5px solid #000; resize:both; overflow:auto;}

注意:一定要配合overflow:auto 一块使用只有水平方向可以缩放

box-sizing 盒模型解析模式

content-box  标准盒模型 width/height=border+padding+content
border-box 怪异盒模型 width/height=content

.box{width:200px;height:200px;padding:50px;border:10px solid #000; box-sizing:border-box;}

Css3分栏布局

column-width 栏目宽度
column-count 栏目列数
column-gap   栏目距离
column-rule  栏目间隔线

.wrap{width:900px;border:1px solid #000; font:14px/28px "宋体";color:#000; text-indent:2em; -webkit-column-width:400px;}//分成了宽度400px的两栏.wrap{ -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid red;}//分成了四列

只有webkit内核实现了该属性

Css3响应式布局

媒体类型

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv  电视

关键字

and
not      not关键字是用来排除某种制定的媒体类型
only     only用来定某种特定的媒体类型

媒体特性

(max-width:600px)
(max-device-width: 480px)  设备输出宽度
(orientation:portrait)  竖屏
(orientation:landscape)    横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
devicePixelRatio 设备像素比 window.devicePixelRatio = 物理像素 / dips
@media screen{ 选择器{属性:属性值; }
}
@media screen and (max-width:400px) {
}

移动端meta

<meta name="viewport" content="" />
width [pixel_value | device-height]
height [pixel_value | device-height]
user-scalable 是否允许缩放 (no||yes)
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

新增样式属性

圆角

border-radius: 1-4个数字 / 1-4个数字
前面是水平,后面是垂直
不给“/”则水平和垂直一样

border-radius: 10px/5px;
border-radius:100px/150px;
border-radius:20px 40px 60px 80px/10px 20px 30px 40px;

参数
各种长度单位都可以:px,%。  %有时很方便但宽高不一致时不太好

border-radius:50%;

用法
1个:都一样
border-radius: 一样

 border-radius:20px;

2个:对角
border-radius: 左上&右下    右上&左下

 border-radius:20px 40px;

3个:斜对角
border-radius: 左上    右上&左下    右下

border-radius:20px 40px 60px;

4个:全部,顺时针
border-radius: 左上    右上    右下    左下

 border-radius:20px 40px 60px 80px;

例子:风车

<style>.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:red ;}.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}.box:hover{ -webkit-transform:rotate(720deg);}</style></head><body><div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div></div>

边框

边框图片 border-image

border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式  round 平铺,repeat 重复,stretch拉伸

.box{width:200px;height:60px; -webkit-border-image:url(bt_blue.png) 0 10;border-left-width:20px;border-right-width:20px;}.box{width:100px;height:100px; border-width:20px; -webkit-border-image:url(border.png) 27 27 round round;}

边框颜色 border-colors 只在火狐下实现

-moz-border-left-colors:red blue yellow red blue yellow red blue yellow;

线性渐变

线性渐变格式
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上

IE 下的样式格式如下

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');`

参数
起点:从什么方向开始渐变      left、top、left top 默认:top
角度:从什么角度开始渐变  x deg的形式

background-image:-webkit-linear-gradient(60deg,red,blue);background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);

点:渐变点的颜色和位置
black 50%,位置可选

线性渐变实例进度条

<style>.wrap{width:200px;height:30px;overflow:hidden;border:1px solid #000;}.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green 0,green 10px,#fff 10px,#fff 20px); transition:3s;}.wrap:hover .box{ margin-left:-100px;}</style></head><body><div class="wrap">
    <div class="box"></div></div>
 background-image:-webkit-linear-gradient(60deg,red 0,blue 50%,green 100%);

repeating-linear-gradient

 background-image:-webkit-repeating-linear-gradient(60deg,red 0,blue 30px);

性渐变实例(2)
加入点的位置
top, red 40%, green 60%
top, red 50%, green 50%
同一个位置两个点——直接跳变
也可以用px 配合rgba
top, rgba(255,255,255,1), rgba(255,255,255,0)
加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)), url(a.gif)

实例:百度音乐图片光影效果

<style>.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 210px) no-repeat -200px 0,url(new_bg.png) no-repeat; transition:1s;}.box:hover{background-position:300px 0,-100px -100px;}</style></head><body><div class="box"></div>

兼容版本

.box{background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}

径向渐变

radial-gradient([<起点>]? [<形状> || <大小>,]? <点>, <点>…);
起点:可以是关键字(left,top,right,bottom),具体数值或百分比
形状: ellipse、circle
大小 :具体数值或百分比,也可以是关键字(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover));
注意firefox目前只支持关键字

background:-webkit-radial-gradient(red,blue);background:-webkit-radial-gradient(100px 50px,red,blue);background:-webkit-radial-gradient(100px 50px,circle,red,blue);background:-webkit-radial-gradient(100px 50px,100px 20px,red,blue);background:-moz-radial-gradient(100px 50px,red,blue);
<style>.box{width:300px;height:300px;border:1px solid #000;float:left;margin:10px;}.box:nth-child(1){ background:-webkit-radial-gradient(100px 50px,closest-side,red,blue);}.box:nth-child(2){ background:-webkit-radial-gradient(100px 50px,closest-corner,red,blue);}.box:nth-child(3){ background:-webkit-radial-gradient(100px 50px,farthest-side,red,blue);}.box:nth-child(4){ background:-webkit-radial-gradient(100px 50px,farthest-corner,red,blue);}.box:nth-child(5){ background:-webkit-radial-gradient(100px 50px,contain ,red,blue);}.box:nth-child(6){ background:-webkit-radial-gradient(100px 50px,cover ,red,blue);}</style></head><body><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></body>

背景

多背景 先写的背景在上面
逗号分开
background: url(a.jpg) 0 0, url(b.jpg) 0 100%;

background:url(bt_blue.png) no-repeat, url(border.png) repeat-y right 0;

背景尺寸
background-size:x y
background-size:100% 100%
Cover 放大
Contain 缩小
ackground-origin : border | padding | content
border-box: 从border区域开始显示背景。
padding-box: 从padding区域开始显示背景。
content-box: 从content区域开始显示背景。
background-clip
border: 从border区域向外裁剪背景。
padding: 从padding区域向外裁剪背景。
content: 从content区域向外裁剪背景。
no-clip: 从border区域向外裁剪背景。
实例:iphone开机动画

遮罩

Mask-image
Mask-position
Mask-repeat
实例:特殊形状的幻灯片效果

1、通过 translate 来移动元素和用 left top 移动元素有何区别?分别有何优劣?
2、在兼容IE6及所有其他浏览器、不使用JS的前提下:一个未知宽高的块元素如何在屏幕中水平垂直居中?需说明原理。
3、在兼容IE6及所有其他浏览器、不使用JS的前提下:三列布局:中间宽度固定,两侧宽度自适应屏幕?需说明原理。
4、在兼容IE6及所有其他浏览器、不使用JS的前提下:三列布局:中间自适应屏幕,两侧固定宽度,要求至少两种方式完成。
5、请在IE6下实现元素(如:DIV)中心点的旋转?
6、对于一个大型网站静态页面的制作,谈谈你对HTML结构的设计、CSS样式表规划及重用性的思考?


本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学...

青夜之衫
2017/12/04
0
0
《HTML+CSS3权威指南》笔记摘要 - 目录

主要是想借助这个平台让大家给我学习途中的错误和不好的地方给与纠正。 我会努力最短时间内完成更新,如果发现有错别字或者Code错误,请指出。 信息:建议使用Opera10以上或者Google浏览器测...

产品哥
2011/12/02
416
1
Vue 2.0学习笔记:自定义表单组件

Vue 2.0学习笔记:自定义表单组件 W3CPlus2017-09-297 阅读 表单组件自定义 上一节中 ,通过 的学习,我们可以实现 双向数据绑定 的的效果。在整个教程中,我们看到的示例都是表单控件方面的...

W3CPlus
2017/09/29
0
0
css3学习笔记

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 ...

effto
2016/08/15
33
0
啦啦啦哈利路亚/laravel_biji

采用Laravel5.1框架的在线笔记系统 演示地址 http://120.27.102.104/auth/login 项目介绍 基于Laravel+Bootstrap+MariaDB开发系统架构 功能说明 在线笔记系统基于B/S结构的社区性质的协调信息...

啦啦啦哈利路亚
2017/03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
6
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
2.7K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部