If there is no master page, the page layout will have a lot of the same lot of the same code, which refers to a concept called reusability;
the code can be placed in the same layout as a separate file, which is written a number of common modules, We need only to introduce the other pages in the specified location they will be able to
write a head, written in top.html (write-only needs to be added):
<div style = "width: 100%; height: 100px; background: green; text-align: center; line-height: 100px; ">
this is header
</ div>
write center.html:
<div style =" width: 80%; margin: 0 Auto; text-align = left: center; border: 1px solid; " >
this is an intermediate text
</ div>
in the index, the need to place the modules of the discharge container, and after then ready to complete loading into:
<Script>
/ * use jq to write the most convenient
$ (Document) .ready (function () {
. $ ( "head #") Load ( "the top.html")
. $ ( "# Center") Load ( "center.html")
});* /
// js also be used to achieve native READY
function READY (Fn) {
IF (document.addEventListener) {
// standard browser
document.addEventListener ( 'DOMContentLoaded', function () {
document.removeEventListener ( 'DOMContentLoaded', arguments.callee, false); // logoff events, to avoid repeated triggering
fn (); // execute the function
} to false);
}
the else IF (document.attachEvent) {
// IEs browser
document.attachEvent ( 'the onreadystatechange', function () {
IF (the document.readyState == 'Complete') {
document.detachEvent ( 'the onreadystatechange', arguments .callee);
Fn ();
}
});
}
}
// called here READY
READY (function () {
$ ( "head #") Load ( "the top.html").
$ ( "# Center"). load ( "center.html")
})
</script>
<div id="head"></div>
<div style="text-align: center;padding: 20px;">
test
</div>
<div id="center"></div>
Renderings:
