HTML + CSS project summary, htmlcss Project Summary

HTML + CSS project summary, htmlcss Project Summary

In the past month or so, I have mastered the usage and features of HTML + CSS.

This week, the teacher assigned us a practical PC project and asked us to complete it within 3-4 days. I did not hesitate to forget about it and completed it in a short time, however, some effects cannot be achieved as expected. After all, the time is limited and the capability is limited. After this practice, I have summarized the following aspects:

I. Technical Summary

1. before development, you must read all the design drawings of the project from start to end. Observe the same part. For example, the headers and bottom of each page are the same, then they are extracted and applied to each page, which greatly improves the development efficiency.

 

Reset is used to reset the default style and provide a general style. However, in team development, it is best to use the same set of "base.css" for each member, which is easier to understand and improves the efficiency of team development.

Below is a set of base.css for my personal initial application:

/* @ Reset default style * // * Remove Default internal and external margins */* {margin: 0; padding: 0;}/* Remove Default Borders */img {border: none;}/* set the default font as required */body {font-family: "";}/* @ provide a general style * // * set the left floating */. fl {float: left;}/* set right float */. fr {float: right;}/* clear floating */. clear {clear: both;}/* remove the ID before the list */. li-none {list-style: none;}/* remove the link underline */. a-none {text-decoration: none;}/* sets the block-level element in the row */. in-bl {display: inline-block ;}

 

 

 

3. HTML coding specifications: Use the minimum number of tags and keep the minimum complexity while following the HTML standards and semantics.

For example, if an image is introduced separately, you can directly use the label instead of using the <div> label to enclose the label.

 

4. There are many CSS coding standards in bootstrap. Here I will talk about some of the most practical,

① When there are multiple selectors, separate them into one row.

② For ease of coding, add a space before the left curly braces of each declared block. The right curly braces of each declared block are arranged separately, and each declaration occupies an exclusive line.

③ Attribute values separated by commas. A space should be inserted after each comma.

④ Omit the 0 before the decimal point smaller than 1 (for example, use. 5 instead of 0.5 ).

⑤ When the value is 0, the unit is omitted (for example, margin: 0 ;)

 

5. code annotation: In my philosophy, there are two types of annotation: one is used to divide the content block, and the other is to describe some code. It is easier to compile code comments for later maintenance and to be understood by others.

A simple example:

/* Content starts */# content {width: 500px;/* the width and height of content are both 500px */height: 500px;}/* content ends */

 

6. For clss and id names, it is best to use English words instead of Pinyin and pure numbers. If the English word is too long, you can use the abbreviation. However, you must use the abbreviation when others can understand it. If a class contains multiple numbers, you can use English words and numbers, for example (. box01. box02. box03 ......).

 

Ii. mentality Summary

When writing code for a long time, you will inevitably feel annoyed or even crazy. If you do not adjust your mindset, it will be difficult to continue. Sometimes, it may be affected by the surrounding environment. I usually bring headphones when writing code, listen to music, and be isolated from the rest of the world.