lucky 的学习笔记(应用视觉设计)

lucky 的学习笔记(应用视觉设计)
0

1、对齐:center, justify, right, left(faulted)

<style>
  h4 {
    text-align: center;
  }
  p {
    text-align: justify;
  }
</style>
<h4>Today is a good day</h4>
    <p>I'm doing perfect</p>

2、加粗:<p><strong>I'm learning coding</strong></p>
下划线:<u> </u>
强调:<em> </em>
删除线:<s> </s>
水平线:<hr> 自关闭标签

3、阴影 box-shadow?

4、透明度:opacity: 数字
在动画中会用到这个属性

5、大小写:text-transform

`text-transform: uppercase 全部大写 lowercase 全部小写 capitalize 首字母大写 inherit 继承 initial 默认值 none 不改变文字

6、字体

font-size 大小
font-weight 粗细
font-family 字体家族

7、行高:line-weight

8、伪类

a: hover {
  color: red;
}
<a href="http://freecatphotoapp.com/" target="_blank">猫咪相册 App</a>

9、位置
相对位置(向下偏移 15 像素):

  h2 {
    position: relative;
    top: 15px;
  }

绝对位置:
position: absolute 定位是元素的定位参照于最近的已定位父元素。
position: fixed 定位的参照物是浏览器的窗口。

浮动:

  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    float: right;
    width: 40%;
  }
</style>

重叠元素的位置:
z-index 的取值是整数,数值大的元素优先于数值小的元素显示。

块级元素居中:

<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;
    margin: auto;
  }
</style>
<div></div>

通过设置图片 display 属性为 block 来把它变成块级元素,然后添加 margin 属性居中。

10、缩放

p: hover {
  transform: scale(2.1);
}

11、动画
animation 属性控制动画的外观, @keyframes 规则控制动画中各阶段的变化。
用偏移属性 rightlefttopbottom 可以用在动画规则里创建动作。

<style>
 #example {
    animation-name: rainbow;  动画名称
    animation-duration: 10s;     动画循环的时间
    animation-iteration-count: 3  动画循环的次数(infinite 永不停止)
    animation-timing-function: linear 匀速  ease-out 高速开始低速结束  ease-in 低速开始高速结束  cubic-bezier (x1, y1, x2, y2) 贝塞尔曲线定义速度曲线
  }
  @keyframes rainbow {
    0% {
      background-color: blue;
      top: 20px;
    }
    50% {
      background-color: green;
      top: 0px;
    }
    100% {
      background-color: yellow;
      top: 20px;
    }
  }
</style>

悬停时始终高亮:animation-fill-mode: forwards

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    /* add your code below this line */
    animation-fill-mode: forwards;
    /* add your code above this line */
  }
  @keyframes background-color {
    100% {
      background-color: green;
    }
  }
</style>
<button>注册</button>