CSS布局实例代码:两列布局实例

2016-02-20 00:08 61 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS布局实例代码:两列布局实例,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)CSS两列布局,右侧固定,左侧自适应宽度div style="width:90%; margin:0 auto;"
   div style="width:200px; float:right;"这是右侧的内容/div
   div style=" margin-right:210px;"这是左侧的内容,自适应宽度/div
/divCSS两列布局,左侧固定,右侧自适应宽度div style="width:90%; margin:0 auto;"
   div style="width:150px; float:left;这是左侧的内容 固定宽度/div
   div style=" margin-left:160px;中间内容,自适应宽度/div
/divCSS三列布局,左右宽度固定,中间自适应宽度div style="width:90%; margin:0 auto;"
   div style="width:200px; float:right; 这是右侧的内容 固定宽度/div
   div style="width:150px; float:left; 这是左侧的内容 固定宽度/div
   div style=" margin-left:160px;margin-right:210px;中间内容,自适应宽度/div
/div 三列等高布局style
*{ margin:0; padding:0}
#content{overflow:hidden}
#content #left,#content #center,#content #right{margin-bottom:-10000px;padding-bottom:10000px;width:300px;float:left;}
#content #left{background:#f00;}
#content #center{background:#0ff}
#content #right{background:#f0f}
/style
div id="content"
 p id="left"leftbr /leftbr /leftbr /leftbr /leftbr /left/p
 p id="center"center/p
 p id="right"right/p
/div

来源:http://www.tulaoshi.com/n/20160220/1631332.html

延伸阅读
标签: Web开发
在一个国外网站看到的12种常见的div+css布局模板,是可以根据屏幕分辨路自适应宽度的动态布局,感觉很好。                                菜单和内容动态    &nb...
标签: Web开发
为了让网页更美观、协调,有的时候需要用到左右等到布局,传统的等高布局是用 javascript 实现的,现在来看看 silence 发明的真正的 CSS 实现的等高布局,其方法主要是采用隐藏容器溢出、正内补丁和负外补丁结合的方法实现的。 下面来看看实际的例子(三列等高),以下面的 XHTML 代码为例: div id="wrap" div id="left&qu...
标签: Web开发
相关文章: 用CSS建设网站的实例 原文博客:veerle 翻译整理:西米CC 来自国外博客veerle的一个系列教程,分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细,但是其中提及的很多技巧和经验都很值得初学者借鉴,从界面设计到页面构建,强调了很多细节的设计理念。在翻译的过程中,个人觉得本教程比较薄弱的...
标签: Web开发
注:在做这节教程的时候,我又上网查了相关资料,看了大量的文章,做了大量的测试,最后总结出下面这些文字,洋洋洒洒一整篇,不过需要大家一句话一句话的看,一定要仔细喽!还有对于课程中的说的,最好一边看,一边练,不练绝对看不懂! 定位(position) 布局页面说容易非常容易,只需要记住这节课最后一句话就可以了,说困难,那是相当的...
标签: Web开发
前四节的大练习大家做的怎么样?有没有难度,如果你觉着有难度没有关系,这节课,我带着大家做一下这个练习! 我们先来分析一下这个页面 页面主要分5大块,顶部的Logo、导航条Nav、Banner、Content、Footer,如下图     这样HTML就很容易写出来了 div id="Logo"/div div id="Nav"/div div i...

经验教程

832

收藏

70
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部