? 左中右3栏布局中最先显示中栏内容的方法_CSS_青云站长教程网 bet36游戏_网站下载_bet36多少地方_bet36最新体育官网
欢迎来到站长教程网!

CSS

当前位置:主页 > bet365棋牌下载手机版 > CSS >

左中右3栏布局中最先显示中栏内容的方法

时间:2019-11-04|栏目:CSS|点击: 次

这个IDEA来自KESO。
今天KESO说,对于一个左中右3栏布局的页面,比如home.donews.com,用户最想看到的是中栏的信息,左右2栏其实网站的相关信息的导航入口,所以中栏信息是最重要的,应该在页面显示顺序上优先于左右2栏。或者也可以这么说就是要将一个页面的最重要的信息优先于页面其他元素显示,无论是3栏还是2栏布局,说得很对。
浏览器显示页面是一行一行的按顺序执行代码,也就是说写在前面的先执行显示,而对于左中右3栏布局的设计,代码要么是从左-->中-->右来书写,要么就是到过来从右-->中-->左来书写,要做到KESO说的效果,那首先要书写的是中栏的代码。所以我首先定义了一个id=m的DIV,并且padding-left:150px,定义这个是为了给左栏留出140PX的显示位置,然后再在这个DIV里面嵌套定义一个id=middle的DIV,我用position:absolute的属性(绝对定位);然后再定义左栏left和右栏right。用position:absolute的属性有一个不好的地方就是它象photoshop里的层一样,它的自动延伸并不会带动整个布局的延伸,所以会遮住一些页面元素,比如我们通常会在网站的最下面写上一些copyright的信息,如果用先显示中栏的这种方法,如果不做处理的话,这些信息会被遮盖住。处理的办法就是使用javascript,让左右2栏的高度随中栏一起自动延伸。
下面是这个实现的代码,有兴趣的朋友可以COPY回去试试,也欢迎留言交流。
BTW:这次和刘韧,KESO改版DONEWS.COM,获益菲浅,他们才是真正懂用户需求,懂网站的人。








WEB标准网站设计实例:左中右3栏布局中最先显示中栏内容的方法





中栏

·IT人的出路系列思考(三): 提升学习能力与可持 ..? [陈国华]?? 11日
·alexa上,黑客的下一个目标是谁?? [阮颖]?? 11日
·IT人的出路系列思考(二):思维创新战略与谋定 ..? [陈国华]?? 11日
·IT人的出路系列思考(一):项目与打工? [陈国华]?? 11日
·希捷加入后的新一代笔记本选购规则? [新华美通]?? 11日
·木子美:挣扎出历史的海面透一口气? [周晶波]?? 11日
·首家推出出租房源、二手房源的RSS订阅服务? [鳖兔鳖]?? 11日
·TOM 在线公布二○○五年第一季度之业绩报告? [新华美通]?? 11日
·黄华:我们有必要开会吗?? [黄华]?? 11日
·IT人的出路系列思考(三): 提升学习能力与可持 ..? [陈国华]?? 11日
·alexa上,黑客的下一个目标是谁?? [阮颖]?? 11日
·IT人的出路系列思考(二):思维创新战略与谋定 ..? [陈国华]?? 11日
·IT人的出路系列思考(一):项目与打工? [陈国华]?? 11日
·希捷加入后的新一代笔记本选购规则? [新华美通]?? 11日
·木子美:挣扎出历史的海面透一口气? [周晶波]?? 11日
·首家推出出租房源、二手房源的RSS订阅服务? [鳖兔鳖]?? 11日
·TOM 在线公布二○○五年第一季度之业绩报告? [新华美通]?? 11日
·黄华:我们有必要开会吗?? [黄华]?? 11日


左栏

右栏


网页底部





本文作者: ? ?
相关阅读:
javascript charAt() arr[i]数组实例代码
javascript 支持链式调用的异步调用框架Async.Operation
Canvas教程(4):Using images应用图像
探秘:Linux在纳斯达克的应用
如何用css改变鼠标显示形状
Linux网络命令介绍:route
域名解析 A记录 MX记录 CNAME记录 TTL
第4课:制作自己的第一个网站
JavaScript 组件之旅(二)编码实现和算法
让textarea控件的滚动条怎是位与最下方
AJAX初体验之实战篇——打造博客无刷新搜索
Js获取电脑屏幕的颜色色彩品质(16位或32位)
如何对PHP程序中的常见漏洞进行攻击(上)
SMTP协议通讯模型

上一篇:如何用css改变鼠标显示形状

栏????目:CSS

下一篇:Fedora 9 texlive + vim-latex + kile安装配置

本文标题:左中右3栏布局中最先显示中栏内容的方法

本文地址:http://www.jh-floor.com/wangyezhizuo/CSS/118241.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

Copyright ? 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号