Web page layout tutorial: Introduction to CSS web page layout properties

Since it is a layout tutorial example, I did not spend more time on the details of the layout. However, I think the layout of the template is good. Those who know CSS can download it and make more detailed art. It will be a very good web page. Initially Those who are learning can download it to modify and modify the attribute parameters to more vividly grasp the characteristics of the attributes, so as to achieve the purpose of deeper mastering of CSS. Is CSS really difficult to learn? Actually Since it is a layout tutorial example, I did not spend more time on the details of the layout. However, I think the layout of the template is good. Those who know CSS can download it for more detailed art. It will be a very good web page for preliminary learning. Download to modify and modify attribute parameters to more vividly grasp the characteristics of attributes, in order to achieve the purpose of deeper mastery of CSS.


Is CSS really difficult to learn? In fact, it’s not difficult. It’s just that I lack the experience to master it. Is there any gain if I study hard with a book? Yes! But it may not be very effective. As a As someone who has experienced it, I think it is very difficult to passively learn something you want to remember. My experience in learning it is that you can first master the essence (starting with important attributes). After mastering the essence, these attributes will naturally be far from enough to meet your needs and cause you to seek knowledge. desire, automatically extend other related attributes to naturally master and deepen the understanding of CSS. This is a method I think (unfortunately, if someone had told me this when I was learning, I would have taken a lot less detours). This is my first writing experience to share with you. There may be some deficiencies in language organization, so I would like to ask netizens to include it, but I believe that with more experience in the future, I will write better. The following are some of my experiences and some conceptual explanations that I think are necessary. If you have experience to share, please leave a comment to discuss together.

In the current web technology, CSS+p has become a mainstream website standard, we can call it (web standard). CSS is the abbreviation of Cascading Style Sheets in English. It is a computer language used to express file formats such as HTML or XML.

Before understanding and learning CSS, we must first understand the advantages and conveniences of this computer language for us. Understanding this I personally think is very basic but also necessary, and it will help clarify CSS+p learning Purpose. Script House combines the experience of website technology and designers, and from the perspective of network applications, summarizes the advantages and problems of CSS+p website design as follows:

First of all, the great advantage of CSS is reflected in the concise code , for a large website, it can save a lot of bandwidth (the real meaning is that it increases the proportion of effective keywords in the total code of the web page). Websites made using web standards are search engine friendly and have certain advantages; from the aspect of program and web page art, , the two can be independent of each other and then combined to reduce the workload and avoid heavy development.

Secondly, the website produced by CSS+p makes website revision relatively simple. Many problems only require changing CSS without changing the program, thus reducing the cost of website revision and saving a lot of time. I have worked with colleagues in the development room on similar project cases, and I believe that my colleagues will be more or less aware of the practical convenience of this.

The last point is that when I first came into contact with it, I felt that it was very difficult to control. Instead, I felt that table had better control over the position, and I might be resistant to using p to write web page layouts. In fact, this is an adaptation process. We can understand the key points carefully through a lot of practical operations and exercises. After that, you can feel that it is indeed ever-changing. Different layouts of a page may have different ways of writing the layout, but no matter how you write it, the code follows one principle: that is: the defined name is as universal as possible. nature, that is, using the least code to define more box molds, I call it (one person with multiple uses); the naming should be standardized and combinatorial to facilitate other designers to understand and use it. The other one is about whether to use ID or Class. Many people may be confused about this. In fact, it is relative, but now my writing habit is mainly to use classes more. I think this is more convenient and suitable for my writing habits.

The following are the basic and commonly used attributes that PHP Chinese website believes need to be understood and mastered first:

Important attributes that must be understood and mastered in CSS:

Margin: auto | length by Length value consisting of floating point number and unit identifier | percent. The percentage is based on the height of the parent object. For inline objects, the left and right outer margins can be negative values.

　padding: length A length value consisting of a floating point number and a unit identifier | or a percentage. The percentage is based on the width of the parent object.

Float: none | left |right This is float, an attribute that must be used in defining the layout. When using it, you should pay attention to the positioning and browser compatibility issues that arise. In many practices Learn more about this property during operation. To have this attribute, you need to understand the following supporting attributes "clear"

clear: none | left |right | both; none allows floating objects on both sides; both does not allow floating objects; left does not allow floating objects on the left There is a floating object right that does not allow floating objects on the right.

background:url(images/aardvark.gif) left top no-repeat | repeat-x | repeat-y Defining background images to beautify the layout is also a very commonly used attribute.

Overflow: visible | auto | hidden | scroll I usually use this function in layout to prevent and solve browser compatibility issues

border:1px solid #CCCCC This is to define the border size , line, color attributes.

List-style-image list-style-position list-stle-type This list attribute is usually used in ordered lists and unordered lists. Lists are often used in defining web page title index text links. This is Verify that CSS definitions are superior to table representation.

The above are the CSS properties that Script House believes must be memorized and understood when learning CSS. Fully understanding its characteristics can greatly improve the freedom of our application layout. So it is not difficult to learn this. After mastering the above styles, you will find that when you didn’t understand it before, you felt incompetent when making the page. After mastering it, you will naturally be able to realize the layout and layout you want based on your own logical thinking, and CSS Resistance will be relieved a lot.

Talking about this, I want to ask a very common question. I don’t think the WEB standard prohibits all tables from using p. Even I had this wrong idea when I first started. My understanding of “standard” is that standard designers develop good writing habits and achieve a mainstream unification. In some cases, tables are still superior to p in terms of functional implementation of web pages, and excessive use of p without restraint consumes IE parsing and increases the burden on the CPU. This is also an issue we should pay attention to.

While mastering the above commonly used attributes, the following is a CSS three-column layout template written by Design Ming on the Internet blog. It mainly focuses on how to master the essence of CSS and learn web page layout tutorial example templates. Netizens can download this The template is carefully considered according to the content of the article, so as to understand and master the technology. This template has been compiled by our site to cover the important CSS properties listed above.

Since it is a layout tutorial example, I did not spend more time on the details of the layout. However, I think the layout of the template is good. Those who know CSS can download it and make more detailed art. It will be a very good one. For preliminary learning, you can download the web page to modify and modify the attribute parameters to more vividly grasp the characteristics of the attributes, so as to achieve the purpose of deeper mastering of CSS.

The above is the detailed content of Web page layout tutorial: Introduction to CSS web page layout properties. For more information, please follow other related articles on the PHP Chinese website!