Home > Developer > Web Develop
Css + html implement menu learning with adaptive width and css adaptive
This article uses css and html to adapt to the text length menu.
After implementation, it is as follows:
The implementation code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
When DIV + CSS is used to design a webpage layout, how does one adjust the background width of the menu navigation to center the navigation content?This is implemented by two divs. First, create an outer div and set the width and height. To change the width with the screen width (that is, the browser width), set the width to 100%, set the height to the desired height. The specific attribute is width: 100%; height: your own height; background: The color you need. In this way, make the div with the screen (browser) the width changes. Then, a div is nested in this div to give a width and height attribute, that is, the width and height of your navigation. To center it, the methods used by each person are also different, however, the commonly used property is the margin attribute. The specific property is width: the width of your navigation; height: the height of your navigation; margin: 0 auto; and so on, if the background is an image, you can change the background attribute. If you do not understand the background, you can always Hi me.
Adaptive Method for fixed right width on the left side of css<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css">
# Left {
Float: left;
Width: 252px;
Text-align: center;
Border: 1px solid #000;
}
# Right {
Margin-left: 252px;
Text-align: center;
Border: 1px solid # f00
}
</Style>
<Title> untitled document </title>
</Head>
<Body>
<Div id = "left">
Fixed 252px
</Div>
<Div id = "right">
Adaptive by Browser
</Div>
</Body>
</Html>
In fact, in your code, you only need to remove the right width: 100%; and float. If you are 100%, It is the width of the outer layer ~ Of course it will fall down ~ And flaot ~ If the width is not set, the width is determined based on its own content. Not adaptive ..
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
