CSS Web Page Layout Introductory Tutorial 2: One Column Adaptive Width_Basic Tutorial

Adaptive layout is a common layout form in web design. Adaptive layout can automatically change its width and height values ​​according to the size of the browser window. It is a very flexible layout form. A good adaptive layout website can respond to different resolutions. High-efficiency monitors can provide the best display effects. In fact, the default state of div occupies the entire row of space, which is the expression of an adaptive layout with a width of 100%. The work we need to do for a column of adaptive layout is also very simple. We only need to change the width from a fixed value to a percentage value. in the form.

Copy code The code is as follows:

#layout {
border: 2px solid # A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}

CSS uses numerical values ​​as parameters in most The style attributes all provide percentages, and the width attribute is no exception. Here we change the width from a column of fixed width 300px to 80%. As you can see from the preview below, the width of the div has changed to the browser width. 80% of the value. The advantage of adaptive is that when the browser window is expanded or reduced in size, its width will remain proportional to the current width of the browser.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>AA25.CN_One column adaptive width</title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; } --> </style> <div id="layout">One </div>