Lesson Notes (1)

1.1 Pre-development preparatory 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: Generally like div,p, such as block-level elements, their own exclusive line, such as span,a, such as in-line elements or img,input such as inline block elements, can be displayed in one line, we call this method of 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 position

Inline-inline writing in HTML tags

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

<style>

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 websites
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
Instantiation of 1.11 Elements
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 Conversions 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 Sons and fathers
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 Questions about weights
Tag class ID in line! Important
1 10 100 1000 Infinity
Lesson Notes (1)