Standing on top of DIV CSS_html/css_WEB-ITnose

As a programmer, you can’t just learn technology. When appropriate, you need to stand higher, so that you can see further and achieve higher achievements!

If you are doing web development, then DIV CSS will be the basis for our learning. Many people think that DIV CSS is very simple. It is true. A good programmer can imitate almost all displayed web pages. And it achieves very cool page special effects, giving people a refreshing feeling. I am often excited to see a beautiful web page. But if the level of learning is limited to this, then what else can you do besides being a coder!

Awareness of global thinking

The first thing to do in any page design is to use DIV to design the framework, for example, consider what the page should be as a whole The structure looks like three layers: upper, middle, and lower, or three layers left, middle, and right, or only part of it, etc.

<div style="border:1px solidred;margin:1px;height:100px;">这是top部分</div><div style="border:1px solidred;margin:1px;height:500px;">这是middle部分</div><div style="border:1px solidred;margin:1px;height:100px;">这是bottom部分</div> <div style="border:1px solidred;margin:1px;width:200px;float:left;">这是left部分</div><div style="border:1px solidred;margin:1px;width:400px;float:left;">这是center部分</div><div style="border:1px solidred;margin:1px;width:200px;float:left;">这是right部分</div>

Although this has become the case for all web development It is the first step for people to make web pages, and they have been on this road for many years, but the wisdom in this is not something that everyone will think about. The framework requires designers to think from a high point and be able to think about problems from a global perspective, rather than blindly moving forward at one level. Otherwise, your design will be a mess of eyebrows and beards, with neither a clear overall structure nor a clear Attention to detail!

Find commonalities

After completing the DIV frame design, it is usually necessary to classify the page elements, so that the modification of the page style will It will become very convenient. For example, the common blog columns on the left side of CSDN all have their own styles. In this way, when we modify the style, we can ensure the unity of the page style as much as possible and avoid the page being unreadable due to different styles. Eyes!

In this way, for the above DIV code, we can abstract its public components to form a class, and retain their different parts in each div block. The code is as follows

<div class="style1" style="height:100px;">这是top部分</div><div class="style1" style="height:500px;">这是middle部分</div><div class="style1" style="height:100px;">这是bottom部分</div> <div class="style1" style="width:200px;float:left;">这是left部分</div><div class="style1" style="width:400px;float:left;">这是center部分</div><div class="style1" style="width:200px;float:left;">这是right部分</div>

The public components proposed are placed in the CSS file, as follows:

.style1{	border:1pxsolid red;	margin:1px;}

For web developers, the extraction of public parts is an important part of the difference between rookies and veterans! This way of thinking when it comes to learning is: putting what we have not learned on the basis of what we have learned. The wisdom in this is actually more worthy of praise for you and me than learning a very good technology!

No matter how awesome the technology is, it can be seen and touched. As long as you want to learn it, there is nothing you can’t learn! However, condensation of thoughts is not something everyone can do, so thinking more, summarizing learning experiences, and refining methods are the shortcuts for friends to make progress!