Shulou(Shulou.com)06/01 Report--

This article "HTML CSS web design example analysis" article knowledge point most people do not understand, so Xiaobian to you summarized the following content, detailed content, clear steps, has a certain reference value, I hope you can read this article to gain something, let's take a look at this article "HTML CSS web design example analysis" article bar.

html code:

This is my first website.

BODY tag represents the container of the main element of the web page, which contains all the html tags of the web page, such as text, images, lists, etc. The web tags we write in the future need to be placed here, where I write a paragraph of text, it will be displayed in the browser. These constitute the basic format of our web page, we do not need to memorize, know what it means on the line, when needed directly to use.

As you can see from the code, all tag content is contained by a div tag, div is a combination of block-level elements, often used to distinguish between different regions or modules, it can be independent, separable, it has automatic wrapping properties, but you can use css to define style or layout for it.

h3 belongs to the title tag, from h2 to h7 can be customized, general web page title or need to focus on performance can be used, p tag indicates a paragraph or a paragraph of text description, img tag indicates the image in the page, you can directly introduce the image address, note that it is a single tag.

Then knowing the meaning of these tags, we can define css styles for this html code according to our actual needs.

First of all, I want to limit the entire area to a height and width, so we should write:

div {

width: 300px;

}

…

If you want to add other styles, you can continue to define them, such as adding a background color, adding a padding or an outer margin.

div {

width: 300px;

background: #f2f2f2;

padding: 20px;

margin: 20px;

}

Note: margin means an independent block or label extending inward, margin means extending outward, which is easy for beginners to confuse.

Next we define the title, the title is relatively simple, for example, give it a size of 20 pixels, the title color is red, need to make it centered, then it should be written like this:

h3 {

font-size: 20px;

color: #ff0000;

text-align: center;

}

--

The text description is similar to the title, but the font is smaller. Note that you need to define a line height for the paragraph and adjust the spacing between paragraphs.

p {

font-size: 14px;

color: #333;

line-height: 24px;

}

The final picture is even simpler, let it adapt to the width directly, follow div, set a 100%.

img {

width: 100%;

}

The above is about "HTML CSS web design example analysis" the content of this article, I believe everyone has a certain understanding, I hope the content shared by Xiaobian is helpful to everyone, if you want to know more related knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.