使用Div+CSS进行网页的多列布局

这几天我在用Div+CSS进行网页三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方还是请各位多多指教。

当您需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:


使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法,那就是使用 列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用来进行页面的多列布局。

时间: 2025-01-01 01:23:33

使用Div+CSS进行网页的多列布局的相关文章

DIV+CSS:网页一行两列背景自适应

网页布局中常有的一种情况就是网页主体部分分成一行两列:而在很多种情况下,设计师们常把左右两列的背景色设计成不同色彩,以实现内容块的明显区分:但这样的设计给布局提出了一个看似简单,而实现非常难的问题:那就是左右两列怎么样实现背景高度自适应,及左边内容高于右边时,右边背景色也要和左边一样:右边内容高于左边时,左边背景色也要和右边一样: 当年为了实现这个,我在网上查过无数的文章,都没有很好的解决方案:多数人用很大的负数实现,也有人用javascript实现: 后来因为感觉这样实现不合理,所以我一直用表

DIV+CSS建设网页简单的6个步骤

网页制作Webjx文章简介:DIV+CSS建设网页简单的6个步骤. 大家都知道用DIV+CSS的布局来设计网站便于优化,容易被收录,比如两个网站同时上线,拥有同样的外链,推广2个月后,保证使用DIV+CSS布局的站点获得的排名比传统的TABLE 要好,用DIV+CSS建设该网站首先是从整体布局入手,构思好网站的整体布局结构,一般我们按以下步骤来建设一个网站的页面: 1.顶部部分,其中包括了LOGO.MENU和一幅Banner图片: 2.页面中间部分,那就是我们的主体了,这里就以我们为一客户做的站

DIV+CSS设计网页时的常见错误处理技巧

以下是一些DIV+CSS设计网页时的常见错误处理技巧,希望能对大家有所帮助. 1. 检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 2. 检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 3. 确定错误发生的位置 假如错误影响了整体布局,则可以逐个删除div块,直到删除

【DIV+CSS入门教程】使用Table布局是不明智的

使用Table布局页面为什么是不明智的? 大家看到标题,不要误解认为在页面中不能使用Table,而是可以使用Table,但是尽量不要用Table去布局页面,为什么这么说呢,因为使用Table布局页面会使页面失去灵活性,怎么个灵活法呢,比如今天你好不容易做出来的页面,第二天老板说我不喜欢登录模块放到右边,还是放到左边,通知板块放到右侧去,页面风格最好一个月换一种,如果遇到这种老板,提出这种要求,并且你的页面是用Table布局的,那么你会崩溃的,工作量那是大大滴~,如果不相信的话,你们自己可以找个页

使用DIV+CSS制作网页后,表格Table还有用吗?

css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很

DIV+CSS制作网页心得

其实DIVCSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言). DIVCSS是目前互联网网页制作最热门的方法,但对于完全手写代码,许多网页设计师都望而止步. 其实DIVCSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言). 首先你要知道,当你开始学习DIVCSS的时候,你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话),然而这项技术更适合刚接触网页制作的人. 然后你要知道,DIVCSS是高

Div+CSS标准网页布局容易出现的问题汇总

css|标准|网页|问题 应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题.现在总结一下,以便大家能够看到明白问题出在那里. 一.CSS校验的问题 我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验.有些未通过CSS2.0校验,主要校验错误都是:"Line : 0 font-family: 建议你指定一个种类族科作为最后的选择"W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束.例如"sans-serif&quo

技巧:div+css设计网页时浮动问题的解决方法

css|浮动|技巧|解决|设计|网页|问题 前我最常用的方法有两种: 方法一: 使用块级clear,即声明一个块的类属性为.clear {clear:both;} 方法二: 使用内联元素清理,比如说在主浮动内容后跟一个内联元素. .inlineclear {clear:both;}<span class="inlineclear"></span> 方法三:使用双层div嵌套 #pubpage {display:block;clear:both;}#main {d

DIV CSS制作网页过程中关于居中问题的总结

css|过程|网页|问题 1.DIV居中 body {text-align: center;} div {margin-right: auto; margin-left: auto;}说明: 对于IE,在父元素定义"text-align: center;"就可以了 对于FF等其他浏览器,仅这样不能居中,需在子元素中定义"margin-right: auto; margin-left: auto;". 2.背景居中 body {background:url(#) #f