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

This article mainly introduces the steps of "DIV+CSS making the top of the page". In the daily operation, I believe many people have doubts about the steps at the top of the DIV+CSS page. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubts of "the steps of DIV+CSS making the top of the page". Next, please follow the editor to study!

Making at the top of the Div+CSS layout tutorial page

Once we have written the general DIV structure of the page, we can begin to work on each part in detail. In the previous chapter, we wrote some styles that were written to preview the structure. We erased all the styles in css.css and rewrote the following style code:

/ * basic information * / body {font:12pxTahoma;margin:0px;text-align:center;background:#FFF;} aVL Linkman avished {font-size:12px;text-decoration:none;} a:hover {} / * Page layer Container * / # container {width:800px;margin:10pxauto}

Style description:

A:link,a:visited {font-size:12px;text-decoration:none;}

A:hover {}

These two items are to control the style of hyperlinks in the page, I will not explain the details, please refer to the manual.

# container {width:800px;margin:10pxauto}

Specifies the display area of the entire page.

Width:800px specifies a width of 800 pixels, which is set here according to the actual needs.

Margin:10pxauto, the top and bottom margins of the page are 10 pixels and are displayed in the center.

As we mentioned in the previous chapter, setting the left and right margins of the layer's margin property to auto allows the layer to be centered.

◆ next, we begin to make the TOP part. The TOP part includes LOGO, menu and Banner. The first thing we need to do is to slice the designed image. The following is the slicing completed under FW:

I sliced the TOP section into two parts, and the * section included a LOGO and a horizontal line. Because the LOGO picture does not have too many colors, here I save this part as GIF format, select the color palette as accurate, select Alpha transparency, color plate is white (where the color should be the same as the background color), export to logo.gif, image width is 800px.

At this point, some friends said, * Why use the GIF format? Isn't it better to use JPEG?

Because the GIF format of the picture file is smaller, which can make the page load faster, of course, before using this format, we must make sure that the picture does not use too many colors, when we use the GIF format, we can not see from the naked eye what the picture has changed too much, so this is feasible.

Can I still use GIF format for the rest of the Banner part of ◆?

The answer is no, because the Banner part is a detailed picture, if you use the GIF format color will be too much loss, so you must use the JPEG format to export the file to banner.jpg.

Reasonable slicing of ◆ is very important, because whether the slicing method is correct or not determines the ease of CSS writing and the speed of page loading.

After slicing, we also need to analyze the TOP part and write the DIV structure into Header as follows:

Home blog Design Photo album Forum about

Why do you write this? because using the list form for menus makes it easy to customize the style of menus later.

And why add the following code?

Inserting this code makes it easy to insert some separation styles between menu options, such as the vertical bar separation in the preview.

Then we write the following styles in css.css:

/ * Page header * / # header {background:url (logo.gif) no-repeat}

Style description:

# header {background:url (logo.gif) no-repeat}

Add a background image LOGO to the header of the page and leave it unfilled.

Here, we do not specify the height of the header layer, why not specify it?

Because there are menus and banner items in the header layer, the height of the layer is temporarily unknown, and the properties of the layer allow the layer to automatically adjust according to the content, so we do not need to specify the height.

At this point, the study on the "DIV+CSS steps at the top of the page" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.