Beautiful patchwork

A list of things you need to know

“Suitable for: backend boys who are interested in page boys“

“Viewing time: 30 minutes“

“This article mainly combs through some front-end drawing interface some will be CSS properties and techniques, after reading won’t let you become your interface painting is very fast and beautiful, but can let you know that drawing interface to learn these is enough. Want to be very beautiful very quickly, actual combat/practice, can not escape ~“

preface

Interface is the software development directly show to the customer’s things, painting the ugly will be sprayed, painting slow, affect the progress; So drawing interface is quite important in software development, drawing a good interface in addition to the interface beautiful, the code should also be beautiful, there are compatible browser, the adaptation of each resolution problem, good difficult ah, a little can not write down ~

The HTML element

Some people say that all interface elements can be div, in fact, this is true, but some common elements or try to master, after all, there are still differences ~

<! -- HTML5 standard web declaration -->

       
<! A page is an HTML, and the browser will display the content based on the internal HTML parser that parses the HTML tags.
<html lang="en">
<! Header, introduce CSS, set page title, browser control, etc.
<head>  <meta charset="UTF-8">  <! -- Some browser controls -->  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">  <title>The title displayed by the browser</title> </head> <! Content section, page element drawing area --> <body>  <! -- a block-level element.  <div></div>  <! -- Unordered list -->  <ul>  <li></li>  </ul>  <! -- Ordered list -->  <ol>  <li></li>  </ol>  <! - form - >  <table>  <th></th>  <td></td>  </table>  <! -- Hyperlink -->  <a href="" target="_black"></a>  <! - image - >  <img src="" alt="">  <! -- Common row element tag -->  <span></span>  <! -- Common line element tags in bold -->  <strong></strong>  <! -- Common line element tags in italics -->  <i></i>  <! - the title -- -- >  <h1></h1>  <h2></h2>  <! - paragraph - >  <p></p>  <! -- subscript upper table -->  <sup></sup>  <sub></sub>  <! - form - >  <form action="">  <! The input box has many types of common text/email/numbers/files etc.  <input type="text">  <! -- Drop down select -->  <select name="" id="">  <option value=""></option>  </select>  <! - button - >  <button></button>  </form> </body> </html> Copy the code

These are basic HTML element tags, so if you don’t understand any tags, Google them

There are some HTML5 semantic tags, the role of semantic tags, one is semantic, express meaning, the second is conducive to the browser engine search, so what, commonly used:

<! - the head -- -- >
<header>
    <! Navigation -- - >
    <nav></nav>
</header>
<! -- Theme section --> <main>  <! -- a content block, div abstraction -->  <section></section>  <! -- For pictures -->  <figure></figure>  <! - video - >  <video src=""></video>  <! -- -- -- > audio  <audio src=""></audio> </main> <! -- -- -- > at the bottom of the <footer></footer> Copy the code

There are many semantic tags, to understand the details of my own Baidu, here is a list of some I commonly used, then there are some H5 API, Geolocation/WebSocket/localStorage/sessionStorage/worker(thread), find out for yourself

CSS properties

CSS attributes are more, the key is to remember and practice, remember (recite words/use), practice (best direct actual combat, no opportunity to practice privately), because there are too many here according to the importance of grouping

Some of the most commonly used style attributes

/* Font size* Units: pixels px % based on browser REM based on parent tag EM VW based on total width vH based on total height* /
font-size: 20px;
/* 字体加粗 */
font-weight: bold; /* The font type I usually use is square */ font-family: Microsoft Yahei;/* Text alignment left center right */ text-align: center; /* Font spacing */ letter-spacing: 2px; /* Whether to allow font newlines to be used to omit text too long... * / white-space: nowrap; /* Text overflow... * / text-overflow: ellipsis; /* The row height, usually set the row element high in */ line-height: 200px; /* Width, only block elements and inline block elements can set the width, not line elements */ width: 200px; / * * / height: 200px; /* Color support RGB RGBA hexadecimal HSL */ color: red; /* Transparency 0-1 */ opacity: 1; /* Background color/picture etc background: red; /* Background */ background-image: url('. /name.png'); /* Set the background image adaptive method (no deformation) */ background-position: center; background-size: cover; background-repeat: no-repeat; Box-sizing: border-box; box-sizing: border-box; The width of the element = width of the content + inner margin + border height */ padding: 20px; /* Margin - The distance between an element's border and other elements */ margin: 20px; /* The property in the middle of the border can change the type of border, supporting dashed lines, dotted lines, etc. */ border: 1.px solid red; /* Border rounded */ border-radius: 5px; The first two values are the horizontal and vertical offsets respectively, and the third value is the size and color of the shadow, let alone */ box-shadow: 0 0 2px red; /* Set the size of the box model to content width and height + inside margin + border height */ box-sizing: border-box; /* Content benefit operations, commonly used are remove and scroll bar */ overflow: hidden; Float elements out of the document flow without the width and height of the parent container, so we usually clear float */ /* There are many ways to clear the float, learn by yourself, I use the parent element to add pseudo-class elements */ float: left; /* Clear float */ clear: both; /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * position: relative; /* Set the type of the element: row element/row block element/block element - display: inline; /* Elastic layout */ display: flex; /* Mouse style, common hand support custom, default also have many, own baidu */ cursor: pointer; /* Sets the layer priority of the element. The higher the number, the higher the priority z-index: 1000; / *! Important weight highest */ z-index: 1001!important; /* Middle text-bottom */ vertical-align: middle; Copy the code

In addition to these element selectors, the most common ones are element selectors/class selectors /ID selectors/descendant selectors, the more common child selectors, and the less common sibling selectors/pseudo-class selectors

Transition animations

Transition is used for simple initialization effect, animation is used for complex effect production, the most important thing to learn this chapter is to try to achieve their own, because the effect of transition and animation is significantly different, so try is the best way to understand. In practical development, transitions are used slightly more than animations

/* The first parameter of the transition is the attribute name of the transition. The second attribute is the speed of the transition
/* The third parameter is transition time, so you can split these attributes into separate attributes
transition: all linear 2s;
/* Delay transition */
transition-delay: 1.s;
  /* When talking about transitions, */ is often used in conjunction with panning/rotating/scaling elements /* The base position of the rotation element defaults to the upper left corner */ transform-origin: center; Rotate rotate in px deg scale and the number >0 */ /* Pan/rotate/zoom have X/Y/Z axis properties set, flexible use, make some cool effects */ transform: translate(a)rotate(a)scale(a); /* The z-axis needs to be used with the 3D effect */ /* Sets how the element changes */ transform-style: preserve-3d; /* Sets the visual distance of the element */ perspective: 1200px; Copy the code

An early effect article: CSS3D animation makes a 3D rotating sieve

Elastic layout

Elastic layout is simple, the commonly used several properties of horizontal vertical direction using skilled, elements of clear, actually very simple to use, need to be aware of is made of elastic layout elements affected by width, so, in general, we need to set the role element width, I actual situation using percentage and flexible use of pixels

/* Set the elastic layout */
display: flex;
/* Whether the width exceeds the container width is allowed to wrap */
flex-wrap: wrap;
/* align horizontally left */
justify-content: flex-start; /* align horizontally right */ justify-content: flex-end; /* Horizontal center */ justify-content: center; /* Align both ends */ justify-content: space-around; /* Both scores are horizontally centered */ justify-content: space-between; /* align vertically on top */ align-items: flex-start; /* vertical bottom alignment */ align-items: flex-end; /* vertically centered */ align-items: center; Copy the code

When I study, I refer to Ruan Yifeng’s network log. There are many attributes in it, but I have never used them in daily work

Properties that are not commonly used

/* Set the width */
width: 1000px;
margin: 0 auto;
/ * * /
/ * italics * /
font-style: italic; /* Underline */ text-decoration: underline; /* Delete line */ text-decoration: line-through; /* Paragraphs are left blank, i.e. a paragraph is preceded by two Spaces */ text-indent: 2rem; /* List ul has an inner margin ~ */ by default list-style: none;  /* * * collapse */ border-collapse: collapse;  /* Element hover */ div:hover {  } Copy the code

HTML and CSS parts here summarized almost, this is not a standard, this is just a simple summary of my knowledge of these, there are many detailed are not detailed description, but can master these, flexible use, draw an interface is more than enough

Rapid debugging

How to debug the effect quickly, fast development, usually, we first style in the browser, output the effect, after satisfactory copy to the compiler, this is the fastest development method

How to debug quickly in the browser

  1. Choose a personal favorite debugging background display mode, if the screen is large, it is better to put the bottom or right side, do not recommend split screen, switching back and forth is very troublesome, unless you are 12 inches

  2. Select the element you want to debug. I see most backends right click to check that there is a shortcut: Ctrl+Shift+C

  3. Color, color can click the color value of the box to open the color value version debugging


  1. Content that can be debugged in the browser is element content and element attributes, and element content is often ignored

  1. The modified properties are simply dragged and copied to the compiler

Leveraging UI components

Whether we used jquery in the past, or now we use frameworks like Vue, a set of UI components is indispensable, the elements and styles of UI components have been handled for us, we need to deal with nothing more than data; So often we design the style of the UI component library and the styles are different, this time we need to cover these style, then cover these styles, need to pay attention to, in order to avoid global affected after replacement, the covered in the style of the third party UI library, must add their own unique style, in case of conflict style

The use of UI components, can achieve twice the result with half the effort, of course, the coverage style or we need to achieve our own, so the above mentioned HTML/CSS is the basis

Browser compatibility

When it comes to browser compatibility, you have to mention IE, IE version too many, almost completely different support, most of the current framework support IE10/IE11, so IE10 below most of the abandoned bar, even the government project is now also using Chrome /QQ/360 these bar.

Less /es6/ts for vue/react/ Angular frameworks is parsed into browser-aware babel-loder. So some syntax in ES6 requires us to install Babel-Polyfill to solve IE compatibility issues

In the previous need to adapt IE, what is downward compatibility, upward adaptation, fortunately, I did not touch ~

A brief look at each browser kernel

  • Google: its
  • Firefox: Gecko
  • 360, Cheetah, 2345 browser: Use IE+Chorme dual core
  • Sogou, Roam, QQ browser: Trident (compatible mode) +Webkit (high-speed mode);

If there is a clear browser compatibility requirement for the project implementation, remember to make a plan in advance. If not, consult the project manager. If not, follow the debugging browser as the standard

Resolution adaptation

Resolution adaptation is usually a headache in the development process, adaptation is also a lot of schemes, corresponding to different scenarios flexible use ~

In fact, I also have a headache. I like to adapt big data like echarts, which only needs to call the corresponding API

Below, I briefly introduce several adaptation schemes used:

  • Grid layout

    The principle of grid is combined with elastic layout and media query, different resolutions will be divided into different parts of the container, usually used UI components have, this I usually use not much, this is suitable for simple regular layout, and different resolutions do not have the requirements of the core display effect

  • Percentage + media query

    Percentage is used to determine the fixed position and adaptive size of the container, so the content style in the container needs to be modified according to different resolutions, such as font and spacing. It is commonly used in large screen processing of self-defined display content, and it is also commonly used in business systems

  • Vw depends on the width of the container

    All units are uniformly defined by VW, so that the webpage can be displayed in a better way. This method has not been used in the project, because the display of different resolutions can not be controlled, so it can only be said to be a better display, which is not convenient for the real project

  • Zoom + media query

    Transform: Scale (.8) using media query at different resolutions; To control, in order to display the interface can be used, business system do not use, will lead to some internal functional abnormalities

    Generally need to do adaptive several resolutions:

    @media screen and (min-width: 1024px) and (max-width:1280px)
@media screen and (min-width: 1281px) and (max-width:1366px)
@media screen and (min-width: 1367px) and (max-width:1440px)
@media screen and (min-width: 1441px) and (max-width:1680px)
Copy the code

    The above four kinds are not complete. I use 1920 by default and the larger score ratio, and I include several other kinds in the above four kinds

The inconsistency of leader/customer/user resolution is a real headache, but it is a problem we need to solve. The above solutions need to be applied flexibly in different scenarios to meet customer needs. So far I also do not have a universal solution, hope to have a better solution to the friends can share

Practical development

In the actual development process, in many cases, there is no designer, right? No product manager? No prototype? What should we do? We are designers/product managers, who let us occupy all the front end. In this case, in addition to analyzing the needs of ourselves and mining the content users want, the color of the system at the beginning of the project had better be decided first, or red, green and blue? Certainly not, color collocation we are not good at ah, fortunately, there are some better color value collocation website for us to use directly ~ really fragrant

Colour collocation

We know that black and white is the color of gm, so often business system we choose white or light white as the background, usually in black or dark color display system as the background color to our system generally don’t use too much color, had better not exceed 3 kinds, so we usually give priority to with a color is tonal, Other colors are distinguished by colors similar to the main tone

Color reference for some sites:

  • Web safe colors
  • Color Hunt
  • Drops of water
  • Adobe Color

reference

In addition to color value collocation, the overall display effect of the interface we can refer to some beautiful websites to trigger inspiration, such as:

  • Some templates for flying ice
  • Station cool inside many many excellent designers released beautiful system diagram

The above is a page as a child some share, if there is an error, please correct

The public no. :


This article is formatted using MDNICE