this XHTML1 standard div layout is the famous web designer Atzie 2004 published in the "Web designer", a very classic layout, in IE, Mozilla and opera browsers can achieve center and highly adaptive.
This XHTML1 standard div layout is the famous web designer Atzie 2004 published in the "Web designer", a very classic layout, in IE, Mozilla and opera browsers can achieve center and highly adaptive. The complete code is as follows (partially modified based on Atzie code):
SEO Reference: XHTML classic three row two column layout-seobbs.net
Body {
Background: #999;
Text-align:center;
Color: #333;
Font-family:verdana, Arial, Helvetica, serif;
}
#header {
Margin-right:auto;
Margin-left:auto;
padding:0px;
width:776px;
Background: #EEE;
height:60px;
Text-align:left;
}
#contain {
Margin-left:auto;
Margin-right:auto;
width:776px;
}
#mainbg {
Float:left;
padding:0px;
width:776px;
Background: #60A179;
}
#right {
Float:right;
margin:2px 0px 2px 0px;
padding:0px;
width:574px;
Background: #ccd2de;
Text-align:left;
}
#left {
Float:left;
margin:2px 2px 0px 0px;
padding:0px;
Background: #F2F3F7;
width:200px;
Text-align:left;
}
#footer {
Clear:both;
Margin-right:auto;
Margin-left:auto;
padding:0px;
width:776px;
Background: #EEE;
height:60px;
}
. text {margin:0px;padding:20px;}
header
Core content
left
footer
Page style diagram:
Page Implementation Intermediate XHTML Technical Analysis please go to my edited post, or "Web Designer" view, demo and code download
The following is an analysis of the advantages of this layout from an SEO perspective:
Let's look at the content distribution in the page by the Web Design convention, under normal circumstances, the head (area a) for the site navigation, the bottom (d) for the auxiliary navigation and copyright information, etc., left (b) will put search, list, ranking and other functional content, the core content is concentrated on the right (c area).
As shown in the figure above, according to the traditional layout, the code is written in the order of "a->b->c->d", can also be understood as "function-> function-> core content-> function."
All know, search engine spiders crawl, is in the page code order from top to bottom, in this case the spider is difficult to crawl to the core content of the fastest, and when the page code too much when the spider may not crawl to the core content on the back, crawl to the same function as other pages, this page becomes similar pages.
In order to avoid such a situation, including Sina, Sohu, NetEase, including many websites (may also include you ^_^), are in the design of the page B and C area swap.
Then look at this layout, the page code order is "A->c->b->d", according to the content distribution can be understood as "function-> core content-> function-> function", without changing the page display, the core content of the part of the front.
In this way, spiders crawl in the shortest possible time to index the core content of the Web page.
Coupled with the advantages of the XHTML standard design code streamlining, spiders crawl efficiency and quality will be very high, will also be more popular with spiders.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.