HTML+CSS project summary

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

This week the teacher assigned us a practical project on PC and required it to be completed within 3-4 days. I did not hesitate to forget food and sleep and completed it roughly within the tight time limit, but some effects could not be achieved as imagined. After all, time is limited and ability is limited. After this actual combat, I have various conclusions on this:

1. Technical summary

　1. Before development, you must read all the design drawings of this project from beginning to end. Pay attention to the same parts. For example, the head and bottom of each page are the same, then extract them. , applied to each page, which can greatly improve the efficiency of development.

　　2. During the development process, I must have written a lot of repeated css styles, which slowed down the development speed. In this way, I can make myself a css framework based on personal habits and hobbies - base.css, which is used to reset the default Style and provide universal styles. However, in team development, it is of course best for each member to use the same set of "base.css", which is easier to understand and improves the efficiency of team development.

The following is a set of base.css that I personally used initially:

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 重置默认样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认内外边距 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;"> 0</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去除默认边框 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
img </span>{<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 根据要求设定默认字体 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">
    @ 提供通用样式
</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置左浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fl </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> left</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置右浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.fr </span>{<span style="color: #ff0000;">
    float</span>:<span style="color: #0000ff;"> right</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 清除浮动 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clear </span>{<span style="color: #ff0000;">
    clear</span>:<span style="color: #0000ff;"> both</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉列表前的标识 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.li-none </span>{<span style="color: #ff0000;">
    list-style</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 去掉a链接下划线 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.a-none </span>{<span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;"> none</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> 设置行内块级元素 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.in-bl </span>{<span style="color: #ff0000;">
    display</span>:<span style="color: #0000ff;"> inline-block</span>;
}

　3. HTML coding standards: On the premise of following HTML standards and semantics, try to use the fewest tags and maintain the minimum complexity.

　For example: If you introduce a separate image, you can use the <img> tag directly instead of using a <div> tag to wrap the <img> tag.

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

　　①When there are multiple selectors, put the selectors on a separate line.

　　②For the readability of the code, add a space before the left curly brace of each declaration block, the right curly brace of each declaration block should be on a separate line, and each statement should be on its own line.

　　③Attribute values ​​separated by commas, a space should be inserted after each comma.

　　④Omit the 0 in front of decimals less than 1 (for example: use .5 instead of 0.5).

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

　5. Code comments: In my philosophy, comments are divided into two types, one is used to divide content blocks, and the other is to describe certain codes. Writing code comments makes it easier for later maintenance and easier for others to understand.

　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<span style="color: #008000;">/*</span><span style="color: #008000;"> content 开始 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
#content </span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">500px</span>;    <span style="color: #008000;">/*</span><span style="color: #008000;">content的宽高均为500px</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 500px</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;"> content 结束 </span><span style="color: #008000;">*/</span>

　

6. As for the naming of clss and id, it is best to use English words instead of pinyin and pure numbers. If the English word is too long, you can use abbreviations, but use abbreviations when others can understand them. If a class has multiple items, you can use English words + numbers, such as (.box01 .box02 .box03...).

2. Summary of mentality

When writing code for a long time, it is inevitable that you will feel irritable or even crazy. If you don't adjust your mentality, it will be difficult to continue. Sometimes, you will be affected by the surrounding environment. When I am writing code, I usually put on headphones, listen to music, and isolate myself from the world.