Proficient in CSS + DIV webpage style and layout-CSS section effects, div-css

Source: Internet
Author: User

Proficient in CSS + DIV webpage style and layout-CSS section effects, div-css

In the previous blog, the editor mainly introduced in detail how CSS controls the Display Effect of text. As the demand changes, how can we perform relevant operations on paragraphs, in order to achieve the expected results, we will continue to improve the Display Effect of CSS on section control for the sake of needs. First, let's look at a map:

Next, the editor will give a brief introduction to CSS section settings as shown in the context. First, let's take a look at the alignment effect in CSS section settings:

Alignment Effect

Horizontal Alignment

First, let's look at the code and running effect of a horizontal alignment:

<Span style = "font-size: 18px;"> The running effect is as follows:

In the section horizontal align effect settings, we use text-align to achieve horizontal align. Next, let's take a look at how the Vertical Alignment Method is set through code. The sample code and effect are as follows:

Vertical Alignment

<Span style = "font-size: 18px;"> The running effect is as follows:

From the code, we can easily see that vertical is used to achieve vertical alignment. After reading the example of setting the alignment effect in CSS, let's learn how to set the line spacing in the CSS section, including the line spacing and word spacing.

Padding settings

Line spacing

First, let's look at the code and running effect of an example:

<Span style = "font-size: 18px;"> The display effect is as follows:

For the row spacing settings, we use line-hight for relevant settings. After reading the row spacing settings, let's take a look at how to set the word spacing. The example code and effects are as follows:

Line spacing

<Span style = "font-size: 18px;"> The running effect is as follows:

From the code, we can see that text-indent sets the header to be indented from css, and letter-spacing sets the distance between characters and the font spacing css style, next let's take a look at the example of a New Year's Day. We will take the New Year's Day as the subject. Let's take a small example and wish you a happy New Year, the longer the length is, the more beautiful '(* Your _ running *)'. The example code and running effect are as follows:

First letter enlargement

<Span style = "font-size: 18px;"> The running effect is as follows:

Here we set the background color in the body; then the text size and color in the p tag; the size of the first word in the span, sink ,...... Is the effect awesome? Let's simulate Baidu search: We entered in the Baidu input box: Ding Guohua csdn will be able to come out and wait for us nie, for example:

Next, we will simulate this Baidu search, use the knowledge we have learned, and operate on it in practice, will there be a different surprise waiting for us nie, the Code is as follows:

<Span style = "font-size: 18px;"> The effect is as follows:

By comparison, we can see that Baidu search is not as complicated as we thought, and everything is simplified in our own hands-on process.

Note:In this blog, I will introduce the section settings of CSS, including alignment effect, spacing settings, first-word amplification, and Baidu search, the alignment effect includes horizontal alignment and vertical alignment. the padding setting includes line spacing and word spacing. Step by step, you can try to catch up with the example. Finally, let's briefly summarize the effect, in the design text section settings, we use keywords to design them. First, let's look at the alignment method. In the horizontal align method, we use text-align to achieve horizontal align, vertical is used to achieve vertical alignment. For row spacing settings, line-hight is used for relevant settings, and text-indent is used to set the header distance css indent, letter-spacing is used to set the distance between words and characters. The first character is enlarged. Here, the background color is set in the body, and the text size and color are set in the p tag; the size and sinking of the first word are set in span, and the baidu search function is finally simulated. BS learning, To be continued ......


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.