Record of Fore-end

HTML5


  1. external link:

    1
    2
    3
    4
    <!--href: URL address-->
    <!--target:where to open the link-->
    <!--eg:"_blank"specifies to open the link in a new tab.-->
    <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>
  2. internal link:

    1
    2
    <a href="#contacts-header">Contacts</a>
    <a id="contacts-header">Contacts</a>
  3. dead link:hash symbol ,to create a dead link.
    eg:href="#"

  4. let the picture to a link:

    1
    <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
  5. Create a Form Element:

    1
    <form action="/url-where-you-want-to-submit-form-data"></form>
  6. Create a placeholder in the input field.

    1
    <input type="text" placeholder="cat..." required>
  7. Create a Set of Radio Buttons

    1
    2
    3
    <label>
    <input type="radio" name="indoor-outdoor">Indoor
    </label>

Basic CSS


  1. Basic CSS:Change the Color of Text

    1
    <h2 style="color: blue;">CatPhotoApp</h2>
  2. Import a Google Font

    1
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
  3. border-radius: 50%

  4. Use the [type = 'radio'] to set the property.

    1
    2
    3
    [type='radio'] {
    margin: 20px 0px 20px 0px;
    }
  5. Use a custom CSS Variable

    1
    2
    --penguin-skin: gray;
    background: var(--penguin-skin);

Applied Visual Design


  1. add a box-shadow to a Card-like Element

The box-shadow property applies one or more shadows to an element.

The box-shadow property takes values for offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius, spread-radius and a color value, in that order. The blur-radius and spread-radius values are optional.

Here’s an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:

1
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

  1. Create a Gradual CSS Linear Gradient

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    background: linear-gradient(gradient_direction, color1, color2,...);
    background: linear-gradient(35deg, #CCFFF, #FFCCCC);

    div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
    }
  2. Use the css transform scale property to scale an element on hover

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
    div {
    width: 70%;
    height: 100px;
    margin: 50px auto;
    background: linear-gradient(53deg, #ccfffc, #ffcccf);
    }
    div:hover {
    transform: scale(1.1);
    }
    </style>
  3. Learn how the css @keyframes and animation properties work

    • animation-name:sets the name of the animation,which is later used by @keyframesto tell CSS which rules go with which animations.
    • animation-duration:sets the length of time for the animation.
    • animation-iteration-count:the count of animation will stop after running, but it’s possible to make the animation run continuously by setting that value to infinite.
    • animation-timing-function:controls how quickly an animates element changes over the duration of the animation.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      <style>
      div {
      height: 40px;
      width: 70%;
      background: black;
      margin: 50px auto;
      border-radius: 5px;
      }
      #rect {
      animation-name: rainbow;
      animation-duration: 4s;
      }
      @keyframes rainbow {
      0% {
      background-color: blue;
      }
      50% {
      background-color: green;
      }
      100% {
      background-color: yellow;
      }
      }
      </style>

有问题?发送 issues 给我~

0%