当前位置：首页 → 问答吧 → 怎么先显示中间列?

怎么先显示中间列?

时间：2011-01-12

来源：互联网

比如.有三个列..左,中,右.
当打开网页的时候先让中间的内容显示,然后在显示左右的.
这用css怎么做啊?

作者: rao3324180 发布时间: 2011-01-12

<!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="author" content="庞淦..."> <meta name="keywords" content="关键字..."> <meta name="description" content="网站描述..."> <meta name="robots" content="all" /> <title>http://www.4sonline.com.cn/</title> <style type="text/css"> html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre{margin:0;padding:0;} body{font:12px/1.231 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;color:#333;} h1,h2,h3,h4,h5,h6{font-size:14px;font-weight:bold;} a{color:#333;text-decoration:none;outline:none;} a:hover{color:#23930c;text-decoration:underline;} textarea,select,input,button,label{vertical-align:middle;font-size:12px;} button{background:none;border:none;cursor:pointer} address,cite,code,em,var,abbr,acronym{font-style:normal;} pre{font-size:12px;text-align:center;white-space:pre-wrap;word-wrap: break-word;} table{border-collapse:collapse;table-layout:fixed} div,li,dt,dd,p,pre,td,th{word-wrap:break-word;word-break:break-all;} ol,ul{list-style:none;} li{list-style-position:outside} img{border:none;} /*clear float*/ .clearfix{clear:both;height:1%;display:table;display:inline-block;} .clearall{overflow:hidden;_zoom:1;} .clear{clear:both;font-size:0;height:0;line-height:0;} /*newsListBar*/ .fl{float:left;display:inline;} .fr{float:right;display:inline;} .wrap{width:1000px;position:relative;margin:0 auto} .mainbar{width:500px;height:500px;background:#CCC;position:absolute;top:0;left:250px;} .sidebarLeft,.sidebarRight{width:250px;height:500px;} .sidebarLeft{background:#09F} .sidebarRight{background:#963} </style> </head> <body> <div class="wrap"> <div class="mainbar">主栏信息</div> <div class="sidebarLeft fl">左侧栏信息</div> <div class="sidebarRight fr">右侧栏信息</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

效果需大网站遇上加载慢的情况下才能看出明显效果。顺序加载，先显示主要内容。

[ 本帖最后由 radom 于 2011-1-12 15:19 编辑 ]

作者: radom 发布时间: 2011-01-12

引用:

原帖由 radom 于 2011-1-12 15:13 发表
[html]

CSS截取字符串,兼容浏览器

html,body,h1,h2,h3,h4,h5,h6,p,br,form,input,button,textarea,select,fieldset,blockquote,ul,ol,li,dl,dt,dd,pre{margin:0;padding:0;}
body{font:12px/1.23 ...

怎么感觉看上去3个同时一起显示了?

作者: rao3324180 发布时间: 2011-01-12

可以去看看网上的“圣杯”布局，你会有收获的。
顺便说下,先显示主栏并不是说是主栏的内容先显示出来，而是结构语义化的体现，真正意义的结构与样式的分离。
看一个三列布局的例子：

最大众化的布局这样的：
<div id="wrapper">
  <div id="lside"></div>
  <div id="main"></div>
  <div id="rside"></div>
</div>

遵循内容为主的布局：
<div id="wrapper">
  <div id="main"></div>
  <div id="lside"></div>
  <div id="rside"></div>
</div>

作者: haitao8410 发布时间: 2011-01-12