Merlin Trade Summary

A. Pre-development Preparation

1. Configuring the development Environment (Sublime)

2. Create a project folder

Home index.html

Css folder index.css base.css

Picture folder Images

JS folder js file

3. Css Initialization

Because the tags in the HTML have their own default styles, for the stability and unification of the layout into our own style, we need to remove the default styles of these tags.

4. Analysis of website composition ( Write code )

two. The specifications or practices that are followed in the layout

is generally followed from top to bottom, from left to right in one order. As far as the stability of the page is concerned, the use of standard streams is preferred, followed by floating or positioning considerations.

Following the elements of the standard flow, and the most stable with wide and high, the large frame is instantiated first, then the layout of the details. can use padding priority to consider padding ( inner margin ), in fact, only consider the margin ( margin ). If there is no margin to merge or share the problem, it can be more enjoyable to use the margin .

The layout of our web page is really like building blocks. Combine a block of boxes together to render a beautiful page effect. Html any of the elements can be regarded as a box model, all have a wide height, internal and external margins. However, the width and height of the elements in the row do not work, only the width of the block-level element is valid. The left and right margins of an inline element are effective. There are two ways to make the inline element possible to have a wide height:

The first is to convert inline elements into block-level elements or inline block elements , with the following code:

Display:block, Display:inline-block

The second is to add floating or positioning elements, floating or positioned elements out of the control of the standard flow, it will automatically have a wide and high effect.

The block-level elements used are: Div, p, ul,li,dl,dt,dd,h2,h3

The inline elements used are: Span,a,del,

The inline block elements used are:Img,input,button Note that inline block elements are arranged by default with a few pixels of space, which can only be solved by floating.

Three box model

Each box model has a value in the upper right-left four directions, such as

border:20px; It's like:

border-top:20px;    border-right:20px;   border-bottom:20px; border-left:20px;

padding:30px; It's like:

padding-top:30px;    padding-right:30px;    padding-bottom:30px; padding-left:30px;

margin:40px; It's like:

　　margin-top:40px;    margin-right:40px;   margin-bottom:40px; margin-left:40px;

If I want to write: margin:0 10px; It's like:

margin-top:0;   margin-bottom:0;   margin-right:10px; margin-left:10px;

If I want to write: margin:0 10px 20px; It's like:

margin-top:0;  margin-right:10px;  margin-left:10px; margin-bottom:20px;

The width and height of the 300px*400px means:

Width= Content Width (+) + left and right padding padding (30*2) + left and right border (20*2)

High height of height= content + up/ down padding padding (30*2) + up/ down border (20*2)

four selector

Basic selector:

Tag Selector,ID Selector, class selector, wildcard selector

Composite selector:

Tag designation, set selector, descendant selector, integrated selector

4.1 label-specific selector ( intersection selector ):

Tag name +id name or class name { property name : attribute value ; Property name : Property Value ;}

Application Scenario: Same class name example on different tags

4.2 Selector grouping (and set selector):

Usage: selector , selector , selector { property name : attribute value ; Property name : Property Value ;}

　　　　

4.3 descendant selectors (inclusive, derived, nested):

Parent Selector Child selector Sun level selector { property name : property value ; Property name : Property Value ;}

　　　　

4.4 Integrated selector with a combination of various selectors.

H1,li.one Span,.two, #one_1 {color:red;font-size:36p;background: #FC0;}

Label, descendant, selector group ( and set selector ), label-specified ( intersection selector )

Five composite attributes font background

Font

The following properties can be set sequentially:

Font-style (use italic, italic, or normal font)

Font-variant (Sets the font display text for small caps)

Font-weight (Sets the thickness of the text)

Font-size/line-height (set font size and line height)

font-family (font family of specified elements)

body{font:italic small-caps Bold 14px/24px "Microsoft Yahei";}

font: Italic small capital letter Bold number size/24 pixels line High Microsoft ya Black

You don't need to write each one, but the order is still the same. Again, there are at least two, which is the font size and font style.

Background

There are five background-related properties in css2 . They are:

Background-color: Full Fill background color

Background-image: A picture used as a background

Background-position: Determine the location of the background picture

Background-repeat: Determines whether the background picture is duplicated

Background-attachment: Determines whether the background picture scrolls with the page

Shorthand:

Background: Color picture whether the tile position is scrolled

Merlin Trade Summary