Author: dodo [website reconstruction] translator. The original Article is here: Website.
This idea is from KESO.
Today, KESO said that for a page with three columns on the left and right, such as home.donews.com, what users want to see most is the information in the middle column, and the navigation portal for the website information in the left and right columns, therefore, the column information is the most important, and the page display sequence should take precedence over the left and right columns. Alternatively, you can give priority to the display of the most important information on a page over other elements on the page. This is true for the layout of Columns 3 or 2.
The Browser display page is a line of code executed in order, that is to say, the first line of the Code is displayed, and the layout of the three columns in the left middle right is designed, the code is either written from the left --> middle --> right, or from the right --> middle --> left to achieve the effect that KESO says, the first thing to write is the code in the middle column. So I first defined a div with ID = m and padding-left: 150px, which is used to set the position of 140px in the left column, then, a div with ID = middle is nested in this Div. I use the position: absolute attribute (absolute positioning), and then define the left and right columns. A bad thing about the position: absolute attribute is that like the layer in Photoshop, its automatic extension does not lead to the extension of the entire layout, so it will cover some page elements, for example, we usually write some copyright information at the bottom of the website. If this method is used to display the middle column first, if it is not processed, the information will be overwritten. The solution is to use JavaScript to automatically extend the height of the left and right columns along with the middle column.
Below is the code for this implementation. If you are interested, you can copy it back and try it. You are also welcome to leave a message.
BTW: This time, with Liu Ren, KESO revised donews. com to gain benefits. They are the people who really understand user needs and websites.
<! Doctype HTML public "-// W. 3C // dtd xhtml 1.0 transitional // en "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<Style>
Body {font-size: 12px ;}
Div {color: # fff}
# M {padding-left: 150px}
# Middle {position: absolute;
Background: red; width: 468px;
Margin-Right: auto;
Margin-left: auto;
Padding: 0px;
}
# Left {float: Left; Background: green; width: 140px; Height: 30px}
# Right {float: Right; Background: Blue; width: 140px}
# All {width: 770px;
Margin-Right: auto;
Margin-left: auto;
Padding: 0px;
Color: #000;
Background: # ffa200 ;}
# Footer {clear: Both; Background: #808080; color: # fff}
</Style>
<Body>
<Div id = "all">
<Div id = "M">
<Div id = "Middle">
Middle column <br/>
· It personnel's way out series (3): improving learning ability and support. [Chen Guohua] November 11
· On Alexa, who is the next target of a hacker? [Ying] November 11
· A series of thoughts on the way out of itren (II): Thinking Innovation strategies and ideas. [Chen Guohua] November 11
· It personnel's way out series (1): Project and working [Chen Guohua] 11th
· Purchase rules for the next-generation notebook after Seagate joins [Xinhua meitong] on November 11
· Mu zimei: struggling to get out of the history of the sea [Zhou jingbo] 11
· The first RSS subscription service for rental housing and second-hand housing was launched on November 11.
· Tom released its performance report for the First Quarter of [Xinhua meitong] on November 11
· Huang Hua: is it necessary for us to have a meeting? [Huang Hua] November 11
· It personnel's way out series (3): improving learning ability and support. [Chen Guohua] November 11
· On Alexa, who is the next target of a hacker? [Ying] November 11
· A series of thoughts on the way out of itren (II): Thinking Innovation strategies and ideas. [Chen Guohua] November 11
· It personnel's way out series (1): Project and working [Chen Guohua] 11th
· Purchase rules for the next-generation notebook after Seagate joins [Xinhua meitong] on November 11
· Mu zimei: struggling to get out of the history of the sea [Zhou jingbo] 11
· The first RSS subscription service for rental housing and second-hand housing was launched on November 11.
· Tom released its performance report for the First Quarter of [Xinhua meitong] on November 11
· Huang Hua: is it necessary for us to have a meeting? [Huang Hua] November 11
</Div>
</Div>
<Div id = "Left"> left column </div>
<Div id = "right"> right column <br>
</Div>
<Div id = "footer"> bottom of the webpage </div>
</Div>
<Script language = "JavaScript">
Document. getelementbyid ("Left"). style. Height = Document. getelementbyid ("Middle"). scrollheight + "PX"
Document. getelementbyid ("right"). style. Height = Document. getelementbyid ("Middle"). scrollheight + "PX"
</SCRIPT>
</Body>
</Html>
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
