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

This article focuses on "how to solve the floating problem of different browser resolutions", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the floating problem of different browser resolutions.

When designing the navigation bar, because the total content width is set to 70%, tags are used to arrange the navigation content.

The code is as follows:

.meun ul {

Width: 100%

Height: 40px

Font: bolder 18px/40px "Microsoft Yahei", "Microsoft Yahei", Microsoft YaHei

Border: 1px solid rgb (206,24,0)

Background: url (.. / images/menu_bg.png) repeat-x scroll 0px 0px transparent

Margin: 0px auto

List-style:none outside none

}

For each, set the float

The code is as follows:

.meun ul li {

Float:left

}

Then set properties for each class

The code is as follows:

.linormal {

Width:16.7%

Height:40px

Text-align: center

Border-left:1px solid rgb (255,164,123)

Border-right:1px solid rgb (221,47,0)

Float: left

}

The width of the tag under linormal is 100%, and it is also set to 16.7% with linormal at the beginning, so that the text cannot be displayed in full.

The code is as follows:

.linormal a {

Width:100%

Height:40px

Display:block

Color:#fff

Text-decoration:none

}

And then there's the tag's hover attribute.

The code is as follows:

.linormal a:hover {

Background: url (".. / images/menu_bg.png") repeat-x scroll 0px-40px transparent

Text-decoration: none

Color: rgb (255,255,255)

}

The above code can change the size according to the size of the browser window, because it is a percentage width, but as the window gets smaller and smaller, the width in the navigation bar is smaller than the font width.

Float down, the whole page is completely messed up.

Later, a wide id was added under the menu, named wid, that is,

The code is as follows:

.wid {

Width:1000px

}

Within the HTML page, the invocation method is

The code is as follows:

...

At this point, I believe you have a deeper understanding of "how to solve the floating problem of different browser resolutions". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.