Detailed explanation of simple html and css usage

I will use three days to complete the static page effect of JD.com's homepage, which includes HTML and CSS.

1. Before development, we must first configure the development environment: we need to install development software such as sublime webstorm vscode Hbuilder atom, just choose one. I am using webstorm.

2. Create relevant project folders in the main folder: to put project-related files together for easy management and future maintenance.

Among them: including some files related to the project

Home page or homepage index.html default.html

Css folder css files

Base.css global.css

The Images folder is used to store all the images on the website.

Js file

Audio or video files

3. After that, we need to perform style initialization. Generally, all websites will perform style initialization before development. For example, large websites such as Taobao and JD have their own style initialization css files. like:

This makes it easier for developers to initialize the styles of each tag and reuse common classes.

4. Analyze the website structure

There is also a standard or general practice when making a website

The layout order is generally from top to bottom and from left to right.

When writing a page, it is generally considered to use elements of the standard flow, and then use floating or positioning.

Among standard flow elements, width and height are the most stable, so padding is used first, and margin can be used last.

Any tag in our website structure can be regarded as a box model, and the width and height can be set. However, for some elements, the width and height will not work after they are set.

To make the width and height of inline elements work:

1. Convert inline elements to block-level elements or inline-block elements

2. Floating label

3. Positioning and label removal

When laying out inline block elements, there is a default spacing of several pixels between inline block elements. These few pixels of spacing can only be cleared using floats.

There are four types of positioning:

Fixed absolute relative static

Generally, when we analyze the website structure, we can use Firefox to take a screenshot of this webpage and save it:

Then we can use fireworks to extract the width, height, color, etc. of the specific content on the website.

Common shortcut keys for Fw:

I Eyedropper Tool to pick up color

K Slice tool Measure the width of an element

Z Magnifier Tool

V Move

A Pointer Tool

Commonly used composite attributes:

Background

mso-char-indent-count:3.4900;">The reason for floating is that the parent box has no height. The original height is supported by the child elements in the standard flow. However, after the child element floats, it is out of the standard flow, causing the height of the parent element to be 0;

1. Set a height for the parent box

2. Clear: both

3. Overflow: hidden triggers the BFC mode and can also be used to clear floating

4. Pseudo-element or double pseudo-element removal method

(Pseudo-elements are often used to clear floats)

Hierarchy of positioning elements:

If you only give an element absolute positioning without writing a trbl value, it will be displayed in place

Positioned elements (relative and absolute or fixed) have a property or concept of hierarchy. If multiple adjacent elements are positioned at the same position, the latter elements will suppress the former elements by default. If they are both positioned elements, their levels are all 0 by default, but the latter elements will suppress the former elements. If you want the current element to be displayed above the elements behind it, you need to change the hierarchy using z-index.

The value range of z-index is 0-9999999. It is best to use a positive number and try not to use a negative number.

Also note that position:relative will still occupy the position in the standard flow, which will prevent other content from being displayed at its level.

opacity

Opacity: There are compatibility issues, and it not only makes the background color transparent, but also makes the content inside transparent

background: rgba(0,0,0,.3);

Make only the background color transparent, and the content opaque

Hierarchy of adjacent elements

The border flashes when the mouse enters the Taobao webpage

In this way, you can use the hover pseudo-element to control the color and other properties of the border by taking advantage of the hierarchy of adjacent elements to achieve the same effect as Taobao.

The above detailed explanation of the usage of simple html and css is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/moyong/archive/2016/07/27/5709491.html