Home > Developer > Web Develop
The page has been written for almost 3 months, and one of the biggest problems encountered is the layout of the pages. Himself summed up the next.
(a) layout of the approximate style . Involves the use of layout in the Jquery UI. Refer to the JS file of layout first. Then $ to find a label you want to layout, usually body, using the layout () method can be. Code: $ (' body '). layout ();. If you do not reference the CSS file, the effect is not obvious, you need to define the layout of the 3 components of the style, respectively, the window pane, pull bar Resizer, pull bar on the Close button Toggler, such as the following code. About this body, it is a parent container, which can put 2 to 5 Div, the corresponding class attributes are: In the Cardinal, Ui-layout-east|south|west|north|center. Which center is must have, if not, the browser will be error. You can continue to place div as the parent container for the center Div. One of the benefits of using layout is that you don't have to worry about self-adaptation, because layout helps you achieve it. Effect
Code:
<! DOCTYPE html>
<meta name= "viewport" content= "Width=device-width"/>
<title>layout Layout </title>
<script></script>
<script type= "Text/javascript" src= "~/scripts/jquery-1.10.2.js" ></script>
<script type= "Text/javascript" src= "~/scripts/jqueryui/jquery-ui.custom.min.js" ></script>
<script type= "Text/javascript" src= "~/scripts/jqueryui/jquery.layout-latest.min.js" ></script>
@*<script type= "Text/javascript" src= "~/scripts/layouttest/test.js" ></script>*@
<style type= "Text/css" >
. ui-layout-pane {
Background: #ffd800;
BORDER:3PX solid blue;
padding:10px;
Overflow:auto;
}
. ui-layout-resizer {
Background: #ffd800;
border:0px solid #00ff21;
border-width:2px;
}
. ui-layout-toggler {
BORDER:2PX solid blue;
Background-color:black;
}
</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' body '). Layout ({
Applydefaultstyles:false,
});
$ (' #uiCenter1 '). Layout ({
Applydefaultstyles:false,
});
$ (' #uiCenter2 '). Layout ({
Applydefaultstyles:false,
});
$ (' #uiCenter3 '). Layout ({
Applydefaultstyles:false,
});
});
</script>
<body style= "background-color:red" >
<div class= "Ui-layout-north" style= "background: #F00; Color:blue "> North </div>
<div class= "Ui-layout-west" style= "background: #F00; Color:blue "> West </div>
<div class= "Ui-layout-east" style= "background: #F00; Color:blue "> East </div>
<div class= "Ui-layout-south" style= "background: #F00; Color:blue "> South </div>
<div id= "UiCenter1" class= "Ui-layout-center" style= "background:red" >
<div class= "Ui-layout-north" style= "background: #F00; Color:blue "> North </div>
<div class= "Ui-layout-west" style= "background: #F00; Color:blue "> West </div>
<div class= "Ui-layout-east" style= "background: #F00; Color:blue "> East </div>
<div class= "Ui-layout-south" style= "background: #F00; Color:blue "> South </div>
<div id= "UiCenter2" class= "Ui-layout-center" style= "background:red" >
<div class= "Ui-layout-north" style= "background: #F00; Color:blue "> North </div>
<div class= "Ui-layout-west" style= "background: #F00; Color:blue "> West </div>
<div class= "Ui-layout-east" style= "background: #F00; Color:blue "> East </div>
<div class= "Ui-layout-south" style= "background: #F00; Color:blue "> South </div>
<div id= "UiCenter3" class= "Ui-layout-center" style= "background:red" >
<div class= "Ui-layout-north" style= "background: #F00; Color:blue "> North </div>
<div class= "Ui-layout-west" style= "background: #F00; Color:blue "> West </div>
<div class= "Ui-layout-east" style= "background: #F00; Color:blue "> East </div>
<div class= "Ui-layout-south" style= "background: #F00; Color:blue "> South </div>
<div class= "Ui-layout-center" style= "background:red" >
</div>
</div>
</div>
</div>
</body>
(b) The layout of the entire page with layout, now to do is to put the specific tags in a div in the top and the top. Common tags are: label, text of input, checkbox for input, select, Div, Button label. According to the experiment found:
"1" two label labels are defined next to each other and separated by one or more spaces after the definition is different when displayed. The difference is that the latter two tags are separated by a "fixed" size gap, note the "fixed".
"2" standard document flow. label, input text, input checkbox, select, button These tags are placed together, from left to right one after another, and the div wraps. The preceding elements are called "inline elements", which are called "block-level elements", such as Div. Many tabs are placed in the browser, and by default the browser arranges the labels from top to bottom, from left to right. Here is a hidden knowledge point, put a div in the browser, if you do not set a high width of the Div, then the Div will be placed in the size of their own labels to determine the approximate size, when the browser width is reduced so that the contents of the div in a row can not fit, This time div will increase its own height, expand the space to accommodate their own tags, and the browser will not appear scroll bar. But if you set the width of the Div, then when the Div line does not fit inside the label, because the div already has a width, all the browser can not narrow the width of the Div, can only enlarge the size of the browser itself, resulting in a horizontal scroll bar. Summary: The standard document flow for HTML pages is from top to bottom, from left to right.
"3" floating. Because the browser's default ordering is too limited, sometimes we want to reorder it! This time, you need to use a "float" to complete. As you can imagine, you take a tab out of the browser and float and wait, and at this point the browser will sort through the default document flow for the rest of the tags, and then you put the floating tag in the browser. So how to float a label? Very simply, use the float in the property style for the label you need to float. Set float to True. Then it is equivalent to taking the label out of the browser's standard document stream. You can not only take a label floating, you can take any of the tags you want to float, so that the position of multiple floating labels can be called by a noun, that is, "floating layer." So what is the order of the floating labels in the floating layer? The order of their order and inline elements is kind, from front to back in order. Now, we should put the tags in the floating layer in the browser. Where to put it. Depends on the relative nature of the close two elements, as well as the size of the browser. A: Float to the back of the previous block level element. B: The elements waiting in the floating layer are too large to let the elements in the document flow first. C: If the floating position has block-level elements, the inline floating element is placed in front of the block-level element, and if it is a block-level floating element, it will be overwritten with this block-level element.
"4" display. The definitions that can be displayed are displayed, whether inline or block-level elements. If the value for the div setting display is inline, then the div becomes an inline element. The block value is referred to as a chunk-level element.
HTML page layout with "one"
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
