Online preview at http://ryansu.gitee.io/cv/

Jsbin link

Grid layout ideas

  • Set appropriate HTML semantic tags such asheader aside main footer figure
  • Draw a grid for the container. For example, set the body to grid 
    body{
  display:grid;
  grid:100px 400px/ 1fr 300px 700px 1fr
}
Copy the code
  • Note: The order in which HTML elements are written in a Grid layout does not need to be the same as the order in which they are actually placed

Common Grid properties

For the container

  • display:grid
  • Grid: row height/column width1frIt’s a fraction of the remaining space
  • The justify – the content / / with flex
  • Align the items / / with flex

For content

  • grid-column:1Column 1 is exclusive;1/5Represents 1-4 cells
  • grid-row:2Indicates exclusive line 2;1/2It occupies the first row

Difference between Auto and 1FR

  • Auto means adaptive
  • 1FR means take all the space left

Best for the following layout: fixed width on the left, auto on the right, all the remaining space in the middle is 1FR

Fixed width on the left, auto on the right, all the remaining space in the middle is 1FR

Ideas for writing CSS

  • css reset
  • Layout – Grid configuration and responsive configuration
  • Common CSS — Set font for body
  • Page – The label in the current page

Use the icon – the font

  • Search the iconfont website for keywords and add shopping carts
  • Place the icon of the shopping cart in the new project
  • You can edit each iconDebugging sizePretty much the same, okModify the class name
  • Click Font Class to generate the code
  • Write code into the project<link rel="stylesheet" href="//at.alicdn.com/t/font_2295657_jx7j4x2e6pp.css">
  • The place of use<span style =" max-width: 100%; clear: both; min-height: 1em;

Deploy to gitee code cloud to ensure access speed

  • parcel build index.html --no-minify --public-url ./