knowledge

  1. Div + CSS layout
  2. Flex Layout – three column adaptive
  3. less
  4. Rem adaptation
  5. Hand for flexible. Js

layout

The head – the header

Title + live time

The main frame – main

Three-column layout:

  1. The three charts on the left

  2. Middle map + statistics

  3. The three charts on the right

HTML layout:

<header> < H1 > Visual data </h1> <div class="showTime"> Real-time time </div> </header> <main> <section class="column"> <div class="panel <div class="panel-footer"></div> </div> <div class="panel line"> <div class="panel-footer"></div> </div> </section> <section class="column"> <div class="no"> </div> <div class="map"> Map </div> </section> <section class="column"> <div class="panel bar2"> Chart 1 <div Class ="panel-footer"></div> </div> <div class="panel-footer"></div> </div> <div <div class="panel-footer"></div> </div> </section> </main>Copy the code

Less:

* { margin: 0; padding: 0; box-sizing: border-box; } body { background: url(".. /images/bg.jpg") no-repeat top center; } header { position: relative; Height: 1.25 rem; background: url(".. /images/head_bg.png") no-repeat; H1 {the font - size: 0.475 rem; color: #fff; text-align: center; The line - height: 1.25 rem; } .showTime { position: absolute; Right: 0.375 rem; top: 0; The line - height: 0.9375 rem; Color: rgba(255, 255, 255, 0.7); The font - size: 0.25 rem; } } main { display: flex; min-width: 1024px; max-width: 1920px; margin: 0 auto; Padding: 0.125 rem 0.125 rem 0; .column { flex: 3; &:nth-child(2) { flex: 5; Margin: 0 0.125 rem 0.1875 rem; } } .panel { position: relative; Height: 3.875 rem; Border: 1px solid rgba(255, 255, 255, 0.17); background: url(".. /images/line\(1\).png") no-repeat rgba(255, 255, 255, 0.03); Padding: 0 0.1875 rem 0.5 rem; Margin - bottom: 0.1875 rem; &::before {position: absolute; content: ""; top: 0; left: 0; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-top: 2px solid #02a6b5; } &::after { position: absolute; content: ""; top: 0; right: 0; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-top: 2px solid #02a6b5; } // bottom corner. Panel-footer {position: absolute; bottom: 0; right: 0; height: 20px; width: 100%; &::before { position: absolute; content: ""; bottom: 0; left: 0; width: 10px; height: 10px; border-left: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; } &::after { position: absolute; content: ""; bottom: 0; right: 0; width: 10px; height: 10px; border-right: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; }}}}. No {background-color: rgba(101, 132, 226, 0.1); Padding: 0.1875 rem; } .map { position: relative; Height: 10.125 rem; }Copy the code

conclusion

  1. Flexible recalculates the HTML font size of the root node based on the screen width. 1rem = HTML font size.

  2. Use flex properties to make the three-column layout adaptive.

  3. Highlight edges using absolute position: Absolute, and pseudo-elements, and set edges for pseudo-elements.