02-移动端开发教程-CSS3新特性(中)

1. 新的背景

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

1.1 background-size设置背景图片的尺寸

  • cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
  • contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
  • 也可以使用长度单位或百分比,可以是两个值第一个是水平方向第二个是垂直方向。
.box {
  width: 300px;
  height: 200px;
  border: 1px solid;
  background-image: url(./img/1.jpg);
  /* background-size: cover; */
  /* background-size: auto; */
  /* background-size: auto 40px; */
  /* 水平方向50%,垂直方向40像素高 */
  background-size: 50% 40px;
  background-size: contain;
  background-repeat: no-repeat;
}

1.2 background-origin设置背景定位的原点

语法:

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
  • border-box以边框做为参考原点;
  • padding-box以内边距做为参考原点;
  • content-box以内容区做为参考点;

注意:当使用 background-attachment 为fixed时,该属性将被忽略不起作用。

1.3 background-clip设置背景区域裁切

语法:

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
  • border-box裁切边框以内为背景区域;
  • padding-box裁切内边距以内为背景区域;
  • content-box裁切内容区做为背景区域;

1.4 多背景图的应用

在设置css的background的图片的时候,可以设置多个背景图,背景图之间用逗号隔开。而且背景图可以用线性渐变代替。

.box {
  background: linear-gradient(to right, transparent, red),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

上课代码

 .box {
  width: 300px;
  height: 300px;
  border: 100px solid rgba(33,33,33,.4);
  background:
    url(../img/border.png) right bottom no-repeat,
    linear-gradient(to right, rgba(0,33,0,.4), rgba(0,0,200, .9)),
    url(../img/a.jpg) no-repeat;
  /* cover: 铺满整个div */
  background-size: cover;

  /* 把图片缩放到能完整的显示整个背景图 */
  /* background-size: contain; */
  /* 设置具体的宽度和高度,可以是百分比或者像素 */
  /* background-size: 200px 50%; */
  padding: 100px;

  /* 背景图默认从padding开始进行显示 */

  /* 设置背景图从内容区域进行显示 */
  /* background-origin: content-box; */
  /* background-origin: padding-box; */
  background-origin: border-box;
  /* background-clip: padding-box;  */
  background-clip: content-box;
}

2. 渐变

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

2.1 线性渐变 linear-gradient

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

简单线性渐变。linear-gradient()方法,第一个参数方向,后面参数是渐变的颜色,颜色可以是多个颜色后面可以设置百分比表示渐变到盒子的位置。

例如:
background: linear-gradient(to bottom, blue, white);

 

从顶部渐变到底部,颜色由蓝色到白色

 

background: linear-gradient(to right, red, blue 20%, white);

 

向右渐变,颜色由红色渐变到蓝色(20%的位置为蓝色)然后到白色

 

线性渐变还可以设置按照某个角度进行渐变,渐变的角度的参考如下图:

 

 

渐变的角度

.box-line {
  color: red;
  width: 200px;
  height: 200px;
  border: 1px solid #089;
  float: left;
  background: linear-gradient(0deg, black, white);
}
.box-line:nth-child(1) {
  background: linear-gradient(90deg, black, white);
}
.box-line:nth-child(2) {
  background: linear-gradient(180deg, black, white);
}
.box-line:nth-child(3) {
  background: linear-gradient(270deg, black, white);
}

 

角度渐变

渐变还支持颜色的透明度:

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)));

上课代码

.box {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  /* to left/top/right/bottom: 从X的反方向的位置到具体的X位置。 */
  /* background-image: linear-gradient(to left, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to top, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to bottom, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
  /* background-image: linear-gradient(to right, rgba(33,0,0,.9), rgba(33,0,0,.1)); */

  /* 按照角度进行渐变 */
  /* deg:角度, 整圆共360deg */
  /* background: linear-gradient(-45deg, blue, red); */
  /* background: linear-gradient(135deg, blue, red); */

  /* 设置多个渐变的颜色 */
  background: linear-gradient(45deg, blue, red 50%, yellow 70%, purple);
}

2.2 径向渐变

径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 除了你可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致。

.box {
  /* 像线性渐变一样,色标之间是等间距的 */
  background: radial-gradient(red, yellow, rgb(30, 144, 255));

  /* 椭圆使用最近端的值, 这就意味着从开始点(中心点)到封闭盒子的最近端的距离来指定椭圆的尺寸。 */
  background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

  /* 渐变的尺寸为起始点到封闭盒模型最远端的起始点的距离。 */
  background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

  /* 指定开始点(中心)和最近端的距离为圆的尺寸。 */
  background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

  /*100px的渐变半径 圆心点坐标 50px  50px*/
  background: radial-gradient(100px at 50px 50px, rgba(0,0,255,1), rgba(0,0,255,.5));
}

2.3 重复渐变

用法跟线性渐变和径向渐变一直,方法名不一致而已。

重复线性渐变:

background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);

 

重复径向渐变:

background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);

 

 

3. 过渡

过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。

语法:transition: <property> <duration> <timing-function> <delay>;

参数:

  • property,要进行过渡动画的属性,可以通过transition-property来单独设置,如果是all表示所有的都进行过渡动画。
  • duration,动画间隔时间,transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。
  • timing-function,加速曲线,transition-timing-function 属性用来描述这个中间值是怎样计算的。实质上,通过这个函数会建立一条加速度曲线,因此在整个transition变化过程中,变化速度可以不断改变。可取值为:ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end、steps(4, end)等。可以参考地址:MDN
  • delay,开始作用之前需要等待的时间。可以用transition-delay属性设置。

例子:

/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

注意:要有过渡效果,元素的状态必须从一个属性状态到另外一个属性状态,一般用于js动态修改属性、css的hover改变元素的属性等场景。
例如:

.box {
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  position: relative;
  transition: all 3s, background-color 3s;
  left: 0;
}
.box:hover {
  border: 1px solid red;
  background-color: rebeccapurple;
  left: 10px;
}

上课代码

 <style>
    .box {
      transition-delay: 0.5s;
      transition-property: width; /*all 代表对所有的可以过渡的属性应用过渡效果*/
      transition-duration: 0.9s;
      /* transition-timing-function: ease-in; */
      /* transition-timing-function: ease-in-out; */
      transition-timing-function: ease-out;
      /* transition-timing-function: steps(3, end); */
      width: 200px;
      height: 200px;
      border: 1p solid #ccc;
      background-color: #aaa;
    }

    .box:hover {
      width: 300px;
    }
    .box2 {
      width: 200px;
      height: 200px;
      border: 1p solid #ccc;
      background-color: lightblue;
      /* 可过渡的属性,过渡的持续时间, 动画函数,delay延迟执行的时间*/
      transition: all 1s ease 0.5s;
    }
    .box2:hover {
      width: 300px;
      height: 50px;
      opacity: 0.5;
      background-color: red;
    }
  </style>

  <div class="box"></div>
  <div class="box2"></div>
  <input type="button" id="btn" value="改变box2的盒子宽度">
  <script>
    // js触发过渡效果
    window.onload = function() {
      document.querySelector('#btn').addEventListener('click', function() {
        document.querySelector('.box2').style.width = '600px';
      }, false);
    }
  </script>

4. 平面2D转换transform

转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

  1. 转换原点 transform-origin 设置转换图形的原点。可以设置两个值,类型可以是:百分比、像素、位置名(left、top、bottom、right)
  2. 移动 translate(x, y) 可以改变元素的位置,x、y可为负值,带像素坐标。
  3. 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值,不带参数。
  4. 旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;值可选:30deg或者0.5turn。
  5. 倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜。单位deg
  6. 如果有多个转换操作需要用空格隔开多个css变换函数。

demo

.box {
  transition: all 0.3s ease-in;/* 配合动画效果 */
  transform-origin: left top;
}
.box:hover {
  /* transform: translate(90px) rotate(0.1turn); */
  transform: translate(20px, 30px) rotate(30deg);
  transform: translate(90px) skew(30deg) scale(0.5, .9) rotate(0.1turn);
}

5. 关于弧度和角度的单位补充

  • deg 度。一个完整的圆是 360deg。例:0deg,90deg,14.23deg。
  • grad 百分度。一个完整的圆是 400grad。例:0grad,100grad,38.8grad。
  • rad 弧度。一个完整的圆是 2π 弧度,约等于 6.2832rad。1rad 是 180/π 度。例:0rad,1.0708rad,6.2832rad。
  • turn 圈数。一个完整的圆是 1turn。例:0turn,0.25turn,1.2turn。
transform: rotate(0.2rad);
transform: rotate(39deg);
transform: rotate(30grad);
transform: rotate(0.2trun);

6. 立体3D转换

CSS3给我们带来惊喜的是3D的转换,给页面的效果带来了无限的可能。但是学习这块需要有3D的模型的思维建立,老马刚开始学习的时候也非常头疼,但是老马搞过Unity3D,所以搞起来很顺手。

大家先建立3D模型思维,看看下面图是否能在内心中体会在3D空间中沿着X、Y、Z轴进行旋转。

 

 

3D旋转

6.1 立体3D的坐标轴

注意:x\y\z的正值的方向。

 

3D坐标图

 

左手坐标系

css3中旋转后都是按照左手坐标系进行运转。旋转的正值的方向就是:手指弯曲的方向。

6.2 立体3D转换的操作

transform的3D操作属性

  1. 移动 translate3d(tx, ty, tz) 可以改变元素的位置,x、y,z可为负值,带像素坐标。translate3d(10px,0px,0px)。z方向的移动必须配合perspective。三个方向分别可以对应:translateX、translateY、translateZ
  2. 缩放 scale3d(x, y,z) 可以对元素进行x,y,z三个方向的缩放,x、y、z的取值可为小数,不可为负值,不带参数。也可以用scaleX、scaleY、scaleZ替代
  3. 旋转 rotate3d(x1,y1,z1,a) 可以对元素进行x、y、z三个方向的旋转,a正值为顺时针,负值为逆时针;值可选:30deg或者0.5turn。css3的3d旋转满足左手坐标系的法则,掌心指向的方向就是正方向。x1、y1、z1的取值0-1,表示旋转的矢量。一般直接用rotateX、rotateY、rotateZ代替。
  4. perspective视距,作为transform的函数,作用于自身,必须写在最前面。表示观察者和 z平面的距离。
/* X方向缩放 */
transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */
使用向量[sx, 1] 完成在X方向上的缩放.

/* Y方向缩放 */
transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */
/* 使用向量[1, sy] 完成在Y方向的缩放. */

/* 倾斜 */
transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */
/* 元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供,在Y轴上没有倾斜。 */

/* X方向倾斜 */
transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */
/* 绕X轴以指定的角度倾斜 */

/* Y方向倾斜 */
transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */
/* 绕Y轴以指定的角度倾斜 */

/* 平移 */
transform:  translate(tx[, ty])  /* one or two <length> values */

/* X方向平移 */
transform:  translateX(tx)       /* see <length> for possible values */
/* 在X轴平移指定距离 */

/* Y方向平移 */
transform:  translateY(ty)       /* see <length> for possible values */

transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

6.3 3D显示模式

transform-style: 可选值:flat(2D默认值) ,preserve-3d (3D)

要想有3D的显示效果,请选择preserve-3d。

6.4 perspective透视

作为单独的CSS属性,指定了观察者与z=0平面的距离。这个是作用于盒子内的所有子元素。跟transform中的perspective()函数的意义是一样的。

perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;

 

透视

 

透视距离

案例1: 3D立方体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cube</title>
  <style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .cube {
      position: relative;
      margin: 200px auto;
      width: 202px;
      height: 202px;
      perspective: 1000px;
      /* 设置显示效果为3d效果 */
      transform-style: preserve-3d;
      transform: rotateX(-10deg) rotateY(20deg);
    }

    .cube div {
      border: 1px solid #ccc;
      width: 200px;
      height: 200px;
      position: absolute;
      left: 0;
      right: 0;
      line-height: 200px;
      text-align: center;
      opacity: 0.7;
    }

    .cube .right {
      transform: rotateY(90deg) translateZ(100px);
      background-color: blue;
    }
    .cube .left {
      transform: rotateY(90deg) translateZ(-100px);
      background-color: red;
    }

    .cube .top {
      transform: rotateX(90deg) translateZ(100px);
      background-color: yellow;
    }
    .cube .bottom {
      transform: rotateX(90deg) translateZ(-100px);
      background-color: lightcoral;
    }

    .cube .front {
      transform: translateZ(100px);
      background-color: purple;
    }
    .cube .back {
      transform: translateZ(-100px);
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="cube">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="top">top</div>
    <div class="bottom">bottom</div>
    <div class="front">front</div>
    <div class="back">back</div>
  </div>
</body>
</html>

案例2:3D导航案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D导航案例</title>
  <style>
    html, body, div, ul, li {
      margin: 0;
      padding: 0;
    }

    ul { list-style: none; }

    .nav .nav-item {
      float: left;
      width: 150px;
      height: 30px;
      /* border: 1px solid #ccc; */
      text-align: center;
      line-height: 30px;
      position: relative;

      /* 要有3d的效果:需要设置以下两个属性 */
      perspective: 1000px;
      transform-style: preserve-3d;

      transition: transform 0.6s ease;
    }
    .nav .nav-item:hover {
      transform: rotateX(-90deg);
    }
    /* 约定: a标签是立方体的前面。  */
    /* div是立方体的上面 */

    .nav .nav-item a, .nav .nav-item .des {
      width: 150px;
      height: 30px;
      opacity: .7;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
    }
    .nav .nav-item a {
      display: block;
      background-color: darkcyan;
      text-decoration: none;
      transform: translateZ(15px)
    }
    .nav .nav-item .des {
      background-color: blue;
      transform: rotateX(90deg) translateZ(15px);
    }
  </style>

</head>
<body>
  <ul class="nav">
    <li class="nav-item">
      <a href="javascript:">item1</a>
      <div class="des">item==1</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item2</a>
      <div class="des">item==2</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item3</a>
      <div class="des">item==3</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item4</a>
      <div class="des">item==4</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item5</a>
      <div class="des">item==5</div>
    </li>
    <li class="nav-item">
      <a href="javascript:">item6</a>
      <div class="des">item==6</div>
    </li>
  </ul>
</body>
</html>

6.5 backface-visibility 设置元素背面是否可见

参数:可选值

  1. visible 背面是可见的。
  2. hidden 背面是不可见的。

注:当一个元素设置了 rotateY(180deg),相当与对元素进行“翻面”,此时如果设置了backface-visibility: visible此时该元素不可见。

案例1: 翻转显示背面盒子信息

 <style>
    html, body, div, pre {
      padding: 0;
      margin: 0;
    }

    .box-wrap {
      width: 450px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      perspective: 1000px;
    }

    .box-wrap .front, .box-wrap .back {
      border: 1px solid #ccc;
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: .8;
      transition: all 1s ease;
      backface-visibility: hidden;
    }
    .box-wrap .front {
      text-align: center;
      background-color: rebeccapurple;
    }
    .box-wrap .front img {
      width: 200px;
      height: 200px;
      border: 2px solid #cccc;
      border-radius: 50%;
    }

    .box-wrap .back {
      background-color: green;
      transform: rotateY(-180deg);
    }

    .box-wrap:hover .front {
      transform: rotateY(180deg);
    }

    .box-wrap:hover .back {
      transform: none;
    }
  </style>

  <div class="box-wrap">
    <div class="front">
      <img src="../img/a.jpg" alt="">
      <h3>老马在线吗?</h3>
    </div>
    <div class="back">
      <h3>联系老马</h3>
      <pre>
          对应视频地址1:https://chuanke.baidu.com/s5508922.html
          对应视频地址2:https://qtxh.ke.qq.com/
          老马qq: 515154084
          老马微信:请扫码
      </pre>
    </div>
  </div>

案例2: 揭开头盖盒子案例:

<style>
    html, body, div {
      padding: 0;
      margin: 0;
    }

    .box {
      position: relative;
      margin: 100px auto;
      width: 202px;
      height: 450px;
      perspective: 1000px;
      transform-style: preserve-3d;
    }

    .box div {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;

      position: absolute;
      left: 0;
      top: 0;
      opacity: .7;
    }
    .top {
      background-color: blue;
      z-index: 10;
      transition: transform 1s ease;
      /* 第一个值是:设置水平的旋转参考点 */
      /* 第二个值是:设置垂直的旋转参考点 */
      /* 第三个值是:设置z的旋转参考点 */
      transform-origin: 50% bottom 0;
    }
    .bottom {
      background-color: maroon;
      z-index: 9;
    }

    .box:hover .top {
      transform: rotateX(-180deg);
    }
  </style>

 <div class="box">
    <div class="top">top</div>
    <div class="bottom">bottom</div>
  </div>


下一篇预告:

  • CSS3动画
  • 弹性盒子
  • animate动画库
  • web在线字体
  • 字体图标
  • 兼容处理

联系老马

对应视频地址:https://chuanke.baidu.com/s5508922.html
老马qq: 515154084
老马微信:请扫码

 

扫码加老马微信

时间: 2024-10-01 06:04:21

02-移动端开发教程-CSS3新特性(中)的相关文章

01-移动端开发教程-CSS3新特性

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包括: CSS3新特性 新选择器 边框.背景升级.圆角.阴影 新的盒模型 渐变.动画.2D3D转换 伸缩布局.多列布局 新单位 在线字体图标 前缀应用.浏览器兼容.渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js.触屏事件 zepto.js\bootstrap\iScroll.j

03-移动端开发教程-CSS3新特性(下)

1. CSS3动画 1.1 过渡的缺点 transition的优点在于简单易用,但是它有几个很大的局限. transition需要事件触发,所以没法在网页加载时自动发生. transition是一次性的,不能重复发生,除非一再触发. transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有一个开始状态和结束状态. 一条transition规则,只能定义一个属性的变化,不能控制多个属性. CSS Animation就是为了解决这些问题而提出的. .box { /* 分别设置多

深入了解 CSS3 新特性

很多已经存在的新功能和特性正在被提出至CSS3.我们将在此尝试展示其中的一些内容--前提是他们已经被Firefox.Konqueror.Safari/Webkit实现了. 下面依次介绍. 译者注:原文链接在此省去,其链接的内容会附带在最后面. 边框 border-color 属性 boder-image 属性 border-radius 属性 box-shadow 属性 背景 background-origin 属性和 background-clip 属性 background-size 属性

IE10对CSS3新特性的支持和HTML5新特性的支持

文章简介:IE10将增强对HTML5和CSS3的支持. Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用.我们来看下IE10都有哪些新特性吧. IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性.嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfro

python 服务端-求python服务端开发教程

问题描述 求python服务端开发教程 如题,本人只开发过Android本地应用这些,但是现在需要搞一个具有客户端和服务端的东西,想学一学python来做服务端开发,本人对服务端开发可以说是一窍不通......连python怎么为app提供数据都不是很了解.....网络的基础知识都学过了,linux也懂一些常用命令,求大神们推荐一本好一点的教程,适合服务端开发基础的,python的....谢谢各位了 解决方案 python开发web API有很多好用的坑i 框架flask小巧精炼

C#开发教程之利用特性自定义数据导出到Excel_C#教程

网上C#导出Excel的方法有很多.但用来用去感觉不够自动化.于是花了点时间,利用特性做了个比较通用的导出方法.只需要根据实体类,自动导出想要的数据 1.在NuGet上安装Aspose.Cells或者用微软自带类库也可以 2.需要导出的数据的实例类: using System.ComponentModel; using System.Reflection; using System.Runtime.Serialization; public class OrderReport { [Displa

微信公众帐号开发教程(十) 解析接口中的消息创建时间CreateTime

从微信公众平台的消息接口指南中可以看出,每种类型的消息定义中,都包含有CreateTime参数,它表示 消息的创建时间,如下图所示: 开发教程(十) 解析接口中的消息创建时间CreateTime-create time"> 上图是消息接口指南中4.1-文本消息的定义.注意CreateTime的描述:消息创建时间(整型),重点在于 这是一个整型的时间,而不是我们大家所熟悉的类似于"yyyy-MM-dd HH:mm:ss"的标准格式时间. 本文主要想介绍的就是微信消息接口中

C#做服务端,怎么增加新特性?在其他机器编译生成exe文件和dll文件,再拷贝到服务器上?

问题描述 1.之前用PHP搞服务端,增加新特性,是容易的自己再机器上调试好代码,直接提交到服务器上,特性就更新成功了.因为PHP,不需要编译,直接提交新的代码就行.2.C#做服务端,怎么增加特性呢?一直好奇这些,强语言,怎么操作.调试好代码,生成exe文件和依赖的DLL之类的,拷贝的服务器上?是这样吗?2.1如果这样的话,即使增加一个很小的特性,比如几十行代码,都得把整个项目的代码都重新编译一遍? 解决方案 解决方案二:编译型的语言要添加新的功能就得重新编译,生成的dll,然后发布.但是你也可以

110.iOS10新特性适配教程XCode8新特性解析_IOS

iOS10 新特性 SiriKit SiriKit的功能非常强大,支持音频.视频.消息发送接收.搜索照片.预订行程.管理锻炼等等.在用到此服务时,siri会发送Intent对象,里面包括用户的请求和各种数据,可以对这个intent处理选择适当的响应. 这个功能主要是看这两个头文件(#import Proactive Suggestions 系统预先建议 背景就是iOS9的时候系统给予的主动建议会通过:Spolight搜索,Safari搜索,Handoff,或者siri建议. 在iOS10之后新增