5 CSS Basics used in Web page layout

Source: Internet
Author: User
Tags mixed set background
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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.