5 CSS Basics used in Web page layout

Introduces 5 Web page typesetting commonly used CSS base, of course, including graphics and text mixed row, is how to do.

This article to introduce in the composition of the article will often use a few CSS base, of course, including graphics and text mixed row, is how to do.
1. First Line Indent
You know, from primary school, the teacher taught us that the beginning of the paragraph should be empty two lattice. While you use Word, there is a first line indent this function, but in the HTML of your space bar seems to play a role. Of course, you can use it instead of a space, but this is not the ideal way to use CSS bar, simple, effective:
<p style= "TEXT-INDENT:2EM;" > Your Content </p>
In this case, this has style= "TEXT-INDENT:2EM;" The paragraph will display a two-character indent. Indent more? Modify 2EM, 2 for 2 characters, and you can increase or decrease accordingly.
2. Graphic mixed row
In Word, we can use wrapping to make text appear around the picture, and in CSS, we can use float to let the text appear in a blank space outside the picture without clearing the float. As shown below

In the following code, the float is set to left, the picture appears on the left-hand side, and right is displayed on the right-hand side, and Margin-right is designed to keep the text and pictures together, if you set it to be float:right; Margin-right changed into Margin-left:

3. Set Background color
Let's take a look at an example, if you have something you need to refer to, and there is no setting in the topic, or you want to customize the background color.

The code is as follows, if you do not know how the color is defined, you can look at the web216 security, change the color code to use, such as #faf7e8 to indicate the light yellow above:
<p style= "background: #faf7e8; border-top:1px dotted #a3a3a3; border-bottom:1px dotted #a3a3a3; text-align:center;" >
4. Make text centered
As in the example above, you can have the article centered horizontally within the width of the container as long as you add Text-align:center to the code. Oh, easy?!
5. Display a border
Border we will use the border, add a border, as long as add style= "border:1px dotted #080;" The size of the 1px code border, and the dotted is the style of the border, commonly used styles with three: solid (real side) dashed (dotted line) dotted (dotted line). Just like the border of the example above, I'm using the dotted edge.