本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。

本文主要内容：

  • 颜色

  • 文本

  • 盒模型中的 box-sizing 属性

  • 处理兼容性问题：私有前缀

  • 边框

  • 背景属性

  • 渐变

颜色

CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。

RGBA、HSLA可应用于所有使用颜色的地方。

RGBA 举例：

  1.     background-color: rgba(0, 0, 255, 0.3);
  3.     border: 30px solid rgba(0, 255, 0, 0.3);

解释：

  • RGBA 即：Red、Green、Blue、Alpha

  • R、G、B 的取值范围是：0~255

HSLA 举例：

  1. 	background-color: hsla(240,50%,50%,0.4);

解释：

  • H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。

  • S 饱和度，取值范围 0%~100%。值越大，越鲜艳。

  • L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。

  • A 透明度，取值范围 0~1。

如果不知道 H 的值该设置多少，我们不妨来看一下色盘：

推荐链接：配色宝典

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

文本

text-shadow：设置文本的阴影

格式举例：

  1. 	text-shadow: 20px 27px 22px pink;

参数解释：水平位移 垂直位移 模糊程度 阴影颜色。

效果举例：

举例：凹凸文字效果

text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {
  8.             background-color: #666;
  9.         }
  11.         div {
  12.             font-size: 100px;
  13.             text-align: center;
  14.             font-weight: bold;
  15.             font-family: "Microsoft Yahei";
  16.             color: #666;
  17.         }
  19.         /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/
  20.         .tu {
  21.             text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
  22.         }
  24.         .ao {
  25.             text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div class="ao">生命壹号</div>
  31. <div class="tu">生命壹号</div>
  32. </body>
  33. </html>

效果如下：

上图中，实现凹凸文字效果的方式比较简单，给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。

盒模型中的 box-sizing 属性

我们在之前的文章中专门讲过盒子模型。

CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

这就需要用到 box-sizing属性。它的属性值可以是：content-box、border-box。解释如下。

外加模式：（css的默认方式）

  1. 	box-sizing: content-box;

解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。

内减模式：【需要注意】

  1. 	box-sizing: border-box;

解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

处理兼容性问题：私有前缀

通过网址http://caniuse.com/ 可以查询CSS3各特性的支持程度。

处理兼容性问题的常见方法：为属性添加私有前缀。

如此方法不能解决，应尽量避免使用，无需刻意去处理CSS3的兼容性问题。

私有前缀的举例：

比如说，我想给指定的div设置下面这样一个属性：

  1. 	background: linear-gradient(left, green, yellow);

上面这个属性的作用是：添加从左到右的线性渐变，颜色从绿色变为黄色。

如果直接这样写属性，是看不到效果的：

此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。

格式如下：

  1.     -webkit-: 谷歌 苹果
  2.     -moz-:火狐
  3.     -ms-：IE
  4.     -o-：欧朋

格式举例如下：

  1.     background: -webkit-linear-gradient(left, green, yellow);
  2.     background: -moz-linear-gradient(left, green, yellow);
  3.     background: -ms-linear-gradient(left, green, yellow);
  4.     background: -o-linear-gradient(left, green, yellow);
  5.     background: linear-gradient(left, green, yellow);

效果如下：

边框

边框的属性很多，其中边框圆角和边框阴影这两个属性，应用十分广泛，兼容性也相对较好，且符合渐进增强的原则，需要重点熟悉。

边框圆角：border-radius 属性

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等， 就是椭圆。

单个属性的写法：

  1. 	border-top-left-radius: 60px 120px;        //参数解释：水平半径   垂直半径
  3. 	border-top-right-radius: 60px 120px;
  5. 	border-bottom-left-radius: 60px 120px;
  7. 	border-bottom-right-radius: 60px 120px;

复合写法：

  1. 	border-radius: 60px/120px;             //参数：水平半径/垂直半径
  3. 	border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
  5. 	border-radius: 20px 60px;

最简洁的写法：（四个角的半径都相同时）

  1. 	border-radius: 60px;

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  8.         .parent {
  9.             width: 400px;
  10.         }
  11.         .box {
  12.             width: 100px;
  13.             height: 100px;
  14.             float: left;
  15.             border: 1px solid rgb(144, 12, 63);
  16.             margin: 20px;
  17.             text-align: center;
  18.             line-height: 100px;
  19.             color: #fff;
  20.             font-size: 50px;
  21.             background-color: rgb(255, 141, 26);
  23.         }
  25.         /*画圆形的方式一*/
  26.         .box:nth-child(1) {
  27.             border-radius: 100px;
  28.         }
  30.         /*画圆形的方式二*/
  31.         .box:nth-child(2) {
  32.             border-radius: 50%;
  33.         }
  35.         .box:nth-child(3) {
  36.             border-radius: 200px 0 0 0;
  37.         }
  39.         .box:nth-child(4) {
  40.             border-radius: 100px/50px;
  41.         }
  43.         .box:nth-child(5) {
  44.             border-radius: 10%;
  45.         }
  47.         .box:nth-child(6) {
  48.             border-radius: 0 100px;
  49.         }
  51.     </style>
  52. </head>
  53. <body>
  55. <div class="parent">
  56.     <div class="box">1</div>
  57.     <div class="box">2</div>
  58.     <div class="box">3</div>
  59.     <div class="box">4</div>
  60.     <div class="box">5</div>
  61.     <div class="box">6</div>
  62. </div>
  63. </body>
  64. </html>

效果如下：

边框阴影：box-shadow 属性

格式举例：

  1. 	box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色
  3. 	box-shadow: 15px 21px 48px -2px #666;

参数解释：

  • 水平偏移：正值向右 负值向左。

  • 垂直偏移：正值向下 负值向上。

  • 模糊程度：不能为负值。

效果如下：

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

  1. 	box-shadow:3px 3px 3px 3px #666 inset;

效果如下：

20180207_2028.png

注意：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

我们还可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

边框图片有以下属性：

  1. 	/* 边框图片的路径*/
  2. 	border-image-source: url("images/border.png");
  4. 	/* 图片边框的裁剪*/
  5. 	border-image-slice: 27;
  7. 	/*图片边框的宽度*/
  8. 	border-image-width: 27px;
  10. 	/*边框图片的平铺*/
  11. 	/* repeat :正常平铺 但是可能会显示不完整*/
  12. 	/*round: 平铺 但是保证 图片完整*/
  13. 	/*stretch: 拉伸显示*/
  14. 	border-image-repeat: stretch;

我们也可以写成一个综合属性：

  1. 	 border-image: url("images/border.png") 27/20px round;

这个属性要好好理解，我们假设拿下面这张图来作为边框图片：

这张图片将会被“切割”成九宫格形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺：

再具体一点：

背景属性

背景属性在 CSS3 中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

背景尺寸：background-size属性

background-size属性：设置背景图片的尺寸。

格式举例：

  1. 	/* 宽、高的具体数值 */
  2. 	background-size: 500px 500px;
  4. 	/* 宽高的百分比 */
  5. 	background-size: 50% 50%;   // 如果两个属性值相同，可以简写成：background-size: 50%;
  7. 	background-size: 100% auto;  //这个属性可以自己试验一下。
  9. 	/* cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。 */
  10. 	background-size: cover;
  12. 	/* contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。  */
  13. 	background-size: contain;

这里我们对属性值 cover 和 contain进行再次强调：

  • cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。也就是说，保证背景图片完全覆盖盒子，但不能保证完整显示。

  • contain：会自动调整缩放比例，保证图片始终完整显示在背景区域。也就是说，保证背景图片最大化地在盒子里，等比例显示，但不保证能铺满盒子。

背景原点：background-origin 属性

background-origin 属性：控制背景从什么地方开始显示。

格式举例：


  2. 	/* 从 padding-box 内边距开始显示背景图 */
  3. 	background-origin: padding-box;           //默认值
  5. 	/* 从 border-box 边框开始显示背景图  */
  6. 	background-origin: border-box;
  8. 	/* 从 content-box 内容区域开始显示背景图  */
  9. 	background-origin: content-box;

如果属性值设置成了border-box，那边框部分也会显示图片哦。

如下图所示：

背景裁剪：background-clip属性

格式举例：

background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：

  • border-box 超出 border-box 的部分，将裁剪掉

  • padding-box 超出 padding-box 的部分，将裁剪掉

  • content-box 超出 content-box 的部分，将裁剪掉

假设现在有这样的属性设置：

  1. 	background-origin: border-box;
  3. 	background-clip: content-box;

上方代码的意思是，背景图片从边框部分开始加载，但是呢，超出内容区域的部分将被裁减掉。

同时设置多个背景

我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。

代码举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box {
  8.             height: 416px;
  9.             border: 1px solid #000;
  10.             margin: 100px auto;
  11.             /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
  12.             background: url(images/bg1.png) no-repeat left top,
  13.             url(images/bg2.png) no-repeat right top,
  14.             url(images/bg3.png) no-repeat right bottom,
  15.             url(images/bg4.png) no-repeat left bottom,
  16.             url(images/bg5.png) no-repeat center;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <div class="box"></div>
  22. </body>
  23. </html>

实现效果如下：

上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。

渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

渐变分为：

  • 线性渐变：沿着某条直线朝一个方向产生渐变效果。

  • 径向渐变：从一个中心点开始沿着四周产生渐变效果。

  • 重复渐变。

见下图：

注意，渐变属于背景图片属性background-image的属性值。我们依次来看一下。

线性渐变

格式：


  2.     background-image: linear-gradient(方向, 起始颜色, 终止颜色);
  4.     background-image: linear-gradient(to right, yellow, green);

参数解释：

  • 方向可以是：to left、to right、to top、to bottom、角度30deg（指的是顺时针方向30°）。

格式举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 500px;
  9.             height: 100px;
  10.             margin: 10px auto;
  11.             border: 1px solid #000;
  12.         }
  14.         /* 语法：
  15.             linear-gradient(方向，起始颜色，终止颜色);
  16.             方向：to left   to right  to top   to bottom 　角度　30deg
  17.             起始颜色
  18.             终止颜色
  19.         */
  20.         div:nth-child(1) {
  21.             background-image: linear-gradient(to right, yellow, green);
  22.         }
  24.         /* 不写方向，表示默认的方向是：从上往下 */
  25.         div:nth-child(2) {
  26.             background-image: linear-gradient(yellow, green);
  27.         }
  29.         /* 方向可以指定角度 */
  30.         div:nth-child(3) {
  31.             width: 100px;
  32.             height: 100px;
  33.             background-image: linear-gradient(135deg, yellow, green);
  34.         }
  36.         /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
  37.         div:nth-child(4) {
  38.             background-image: linear-gradient(to right,
  39.             yellow 0%,
  40.             red 40%,
  41.             green 70%,
  42.             blue 100%);
  44.         }
  46.         /* 颜色之间，出现突变 */
  47.         div:nth-child(5) {
  48.             background-image: linear-gradient(45deg,
  49.             yellow 0%,
  50.             yellow 25%,
  51.             blue 25%,
  52.             blue 50%,
  53.             red 50%,
  54.             red 75%,
  55.             green 75%,
  56.             green 100%
  57.             );
  58.         }
  60.         div:nth-child(6) {
  61.             background-image: linear-gradient(to right,
  62.             #000 0%,
  63.             #000 25%,
  64.             #fff 25%,
  65.             #fff 50%,
  66.             #000 50%,
  67.             #000 75%,
  68.             #fff 75%,
  69.             #fff 100%
  70.             );
  72.         }
  74.     </style>
  75. </head>
  76. <body>
  77. <div></div>
  78. <div></div>
  79. <div></div>
  80. <div></div>
  81. <div></div>
  82. <div></div>
  83. </body>
  84. </html>

效果如下：

举例：按钮

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3 渐变</title>
  6.     <style>
  7.         html, body {
  8.             height: 100%;
  9.         }
  11.         body {
  12.             margin: 0;
  13.             padding: 0;
  14.             background-color: #f8fcd4;
  15.         }
  17.         .nav {
  18.             width: 800px;
  19.             text-align: center;
  20.             padding-top: 50px;
  21.             margin: 0 auto;
  22.         }
  24.         /*设置按钮基本样式*/
  25.         .nav a {
  26.             display: inline-block;
  27.             width: 100px;
  28.             height: 30px;
  29.             text-align: center;
  30.             line-height: 30px;
  31.             font-size: 14px;
  32.             color: #fff;
  33.             text-decoration: none;
  34.             border: 1px solid #e59500;
  35.             background-color: #FFB700;
  36.             background-image: linear-gradient(
  37.                     to bottom,
  38.                     #FFB700 0%,
  39.                     #FF8C00 100%
  40.             );
  41.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <div class="nav">
  47.     <a href="javascript:;">导航1</a>
  48.     <a href="javascript:;">导航2</a>
  49.     <a href="javascript:;">导航3</a>
  50.     <a href="javascript:;">导航4</a>
  51.     <a href="javascript:;">导航5</a>
  52.     <a href="javascript:;">导航6</a>
  53. </div>
  54. </body>
  55. </html>

效果：

径向渐变

格式：

  1. 	background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
  3. 	background-image: radial-gradient(100px at center,yellow ,green);

解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。

中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。

当然，还有其他的各种参数。格式举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 250px;
  9.             height: 250px;
  10.             border: 1px solid #000;
  11.             margin: 20px;
  12.             float: left;
  13.         }
  15.         /*
  16.             径向渐变：
  17.             radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
  18.             中心点位置：at  left  right  center bottom  top
  19.         */
  21.         /*辐射半径为100px，中心点在中间*/
  22.         div:nth-child(1) {
  23.             background-image: radial-gradient(100px at center, yellow, green);
  24.         }
  26.         /*中心点在左上角*/
  27.         div:nth-child(3) {
  28.             background-image: radial-gradient(at left top, yellow, green);
  29.         }
  31.         div:nth-child(2) {
  32.             background-image: radial-gradient(at 50px 50px, yellow, green);
  33.         }
  35.         /*设置不同的颜色渐变*/
  36.         div:nth-child(4) {
  37.             background-image: radial-gradient(100px at center,
  38.             yellow 0%,
  39.             green 30%,
  40.             blue 60%,
  41.             red 100%);
  42.         }
  44.         /*如果辐射半径的宽高不同，那就是椭圆*/
  45.         div:nth-child(5) {
  46.             background-image: radial-gradient(100px 50px at center, yellow, green);
  47.         }
  49.     </style>
  50. </head>
  51. <body>
  52. <div class="box"></div>
  53. <div class="box"></div>
  54. <div class="box"></div>
  55. <div class="box"></div>
  56. <div class="box"></div>
  57. </body>
  58. </html>

效果如下：

举例：利用径向渐变和边框圆角的属性，生成按钮。代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3 渐变</title>
  6.     <style>
  8.         div:nth-child(1) {
  9.             width: 200px;
  10.             height: 200px;
  11.             margin: 40px auto;
  12.             border-radius: 100px;
  13.             background-color: yellowgreen;
  14.         }
  16.         div:nth-child(2) {
  17.             width: 200px;
  18.             height: 200px;
  19.             margin: 40px auto;
  20.             border-radius: 100px;
  21.             background-color: yellowgreen;
  22.             background-image: radial-gradient(
  23.                     200px at 100px 100px,
  24.                     rgba(0, 0, 0, 0),
  25.                     rgba(0, 0, 0, 0.5)
  26.             );
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div></div>
  32. <div></div>
  33. </body>
  34. </html>

效果如下：

上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。

CSS3的更多属性，且听下文继续。

我的公众号

想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

CSS3属性详解（图文教程）的更多相关文章

  1. CSS3 Media Queries_media queries, css3属性详解

    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...

  2. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  3. 转：【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  4. 轻松学习Linux之Shell文件和目录属性详解

    轻松学习Linux之Shell文件和目录属性详解 轻松学习Linux之理解Sitcky 轻松学习Linux之理解umask 轻松学习Linux之理解SUID&SGUID 本系列多媒体教程已完成 ...

  5. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  6. border-sizing属性详解和应用

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...

  7. css 12-CSS3属性详解：动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  8. css 11-CSS3属性详解（一）

    11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...

  9. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

随机推荐

  1. 信息学奥赛一本通算法（C++版）基础算法：高精度计算

    高精度加法(大位相加) #include <bits/stdc++.h> using namespace std; int main() { ],b1[]; ],b[],c[];//a,b ...

  2. Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which floor?【枚举，暴力】

    B. Which floor? time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...

  3. python程序的标准输入输出

    1,  A+B Problem : http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=1000 #! ...

  4. 各大型邮箱smtp服务器及端口收集

    >新浪邮箱smtp服务器 外发服务器:smtp.vip.sina.com 收件服务器:pop3.vip.sina.com 新浪免费邮件 外发服务器:smtp.sina.com.cn 收件服务器: ...

  5. 30分钟学玩转RabbitMQ

    最近在学习RabbitMQ,在网上找了不少资料发现都特高端.动辄集群部署,分布式架构什么的,对于一个初学者实在不够友好.心想求人不如求自己,为什么不自己整理一套资料呢?于是<30分钟学玩转Rab ...

  6. html静态页面乱码

    1.将文件保存为UTF-8 2.写入以下代码 <!-- 防止中文乱码 --><meta http-equiv="Content-Type" content=&qu ...

  7. 2017-06-22(locate shutdown half poweroff init0 reboot init 6)

    locate locate 文件搜索命令 格式:locate  [文件名] locate 在后台数据库中(/var/lib/mlocate/mlocate.db)按文件名搜索,速度快 刚刚新建的文件, ...

  8. CentOS 6.3 64位下MySQL5.1.54源码安装配置详解

    安装环境:CentOS 6.3 64位 一:先安装依赖包(不然配置的时候会报错的!) yum -y install ncurses* libtermcap* 新建mysql用户 [root@clien ...

  9. 洛谷P1233 [木棍加工]

    主要思路: 这道题一眼看过去就可以贪心.. 首先可以按L排序.. 显然排序之后我们就可以抛开L不管了.. 然后就可以愉快的贪心了.. 细节: 这道题可以看成用 最少的合法序列(详见原题) 装下所有木棍 ...

  10. CSS学习（一）

    /*</br> * color</br> * background-color background-image background-repeat background-po ...