Front-End Basics 01

1.1 Pre-development preparation work

1. Configure the development environment Sublime webstorm vscode Hbuilder Atom

2. Create a project folder to keep project-related documents in one piece for easy administration and later maintenance

Include some documents related to the project

Home or home index.html default.html

CSS folder for CSS files

Base.css Global.css

The Images folder is used to place all the pictures in the site

Js File

Audio or video files

3. Style initialization

The label in our structure has the default style, the display in each browser may not be different, in order to ensure the unity of the style of the website or for our development or maintenance, we need to clear all the original style of the label, into a unified style style, so that our site layout.

4. Analysis of website composition

When you do a website, there's a code or a practice.

The order of the layouts is generally from top to bottom, left to right

When writing a page, generally consider the use of standard flow elements, followed by the use of floating or positioning.

In the standard flow element, the width is the most stable, in fact, the use of padding, and finally can use margin.

Standard flow: a block-level element, such as div,p, that has its own exclusive line, such as a span,a element or an img,input Such an inline block element, which can be displayed in a row, is called the standard flow. Normal Flow

Any label in our site structure can be viewed as a box model that can be set to a wide height, except that some elements are set to a wide height and do not work.

1.2 CSS Style writing location

Inline-Inline writing in HTML tags

Inline writing in a pair of style tags on the same page

<style>
Input {
Outline-style:none;
}
TEXTAREA {
Resize:none;
}
</style>

Outside the chain from the external to the current page, the real implementation of the structure and style phase separation

<meta charset= "UTF-8" >
<title></title>
<link rel= "stylesheet" href= "Css/base.css"/>

Import-In @

1.3 shortcut icons for Web sites

How to make a website shortcut icon

Www.bitbug.net

<link rel= "shortcut icon" href= "/favicon.ico"/>

If the shortcut icon is in the root directory of the project folder, do not bring/

1.4 the root directory of the project folder

is to open the first layer of the project folder, or the folder where the index.html is located

1.5 Firefox

1.6 Banner

The banner is covered with the entire screen, and the area is less than half the entire page.

1.7 Alleys

Because our shielding device resolution is not the same, so the style of the display site may not be the same, in order to improve the user's experience, the site's display style unified, so you need to set up a alleys site.

Concept:

The so-called alleys is the area where the main content of the page is located, that is, the center of the page.

1.8 FW shortcut keys

I eyedropper tool absorbs color

The K-slice tool takes the width of the element

Z Magnifier Tool

V- Move

A Pointer Tool

1.9 Small labels generally play a decorative role

i s em u del ins

1.10 Font Composite Properties

Font-weight:bold 700 300 500

font-size/ Line Height : Font size / Row Height

Font-family: style of font

Font-style: style of the font

ctrl+0 Restore the browser to its default original state

1.11 instantiation of an element

is to set the element to a wide height, and then give a background color or border, so that the element is visually displayed.

1.12 transitions between elements

To have the inline element set to a wide height, it works:

Turn into block-level elements or inline block elements

Let this element have positioning ( absolute positioning or fixed positioning )

Floating also allows the inline element to have a width

1.13 webstorm shortcut keys

Ctrl+alt+l Formatting Code ( to align code )

Ctrl+d Copy the current line's code to the next line

1.14 The father of the son

When a child element is absolutely positioned, the parent element is a relative position, then the parent element is the function that sets the scope of the child element

If the nesting of three elements, it does not necessarily have to be the father of the son, the father of the Absolute.

Positioning first is to find out their nearest parent element to make a positioning, if the parent element is not positioned or relative positioning, the default is the browser or the upper left corner of the document, if the parent element has a relative positioning or absolute positioning, the parent element of the upper left corner will prevail.

1.15 problem with weights

Tag class ID in line! Important

1 Infinity

Front-End Basics 01