上下左右中的网站布局

header固定定位,footer固定定位,左右固定(可以采用浮动)中间自适应

<style>
body{padding:0;margin:60px auto 0px;}
  #div_left{float:left;width:200px;height:1000px;border:1px solid #333;z-index:-1;background: blue}
  #div_mid{margin-left:200px;margin-right:200px;margin-top:0px;height:1000px;border:1px solid #333;background: red}
  #div_right{position:absolute;right:0;top:60px;width:200px;height:1000px;border:1px solid #333;z-index:-1;background: yellow}
  #header{position:fixed;left:0px;top:0px;width:100%;height:60px;background:#258}
  #footer{width:100%;height:50px;background:#555}
  #foot{position:fixed;left:0px;bottom:0px;width:100%;height:20px;background:#147}
</style>

<body>
  <div id=‘header‘></div>
  <div id=‘div_left‘></div>
  <div id=‘div_mid‘></div>
  <div id=‘div_right‘></div>
  <div id=‘footer‘></div>
  <div id=‘foot‘></div>
</body>

时间: 2024-11-03 01:56:18

上下左右中的网站布局的相关文章

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

《CSS网站布局实录》学习笔记(四)

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布

《CSS网站布局实录》学习笔记(五)

第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 分栏排版 CSS2技术对普通段落文字不能够直接实现分栏排版,如果需要实现类似报纸那样的双栏或者三栏排版,则必须借助于二列布局那样的两个div浮动定位而形成二列控件,然后再将文字分别填充此二列之中.XHTML代码如下: 1 <div id="layout"> 2 <div

《CSS网站布局实录》学习笔记(六)

第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核心属性.class的主要功能是用来对对象的样式设置,而id除了可以定义样式外,还能够成为服务网站交互行为一个特殊标识.每一个被定义了id名称的对象,其id名字在每个页面有且仅能出现一次. 6.1.2 如何使用id 在不考虑使用JavaScript脚本,而是XHTML代码及CSS样式应用的情况下,应当

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

如何做高大上的网站布局 --------------------&gt;&gt;转至(卧牛SEO/武汉SEO http://blog.sina.com.cn/zhengkangseo )

SEO开始做,最重要的是网站布局,一个网站布局决定了用户在网站的停留时间,在网站中放入用户想要的内容之外,更重要的是要让用户看到网站之后,一目了然,视觉和感官上良好的体验.那新手该如何做网站布局呢? 首先,网站布局来源于用户需求.根据用户需求,在网站上填充用户想要的内容,对于用户来说,停留网站的理由就是网站有用户想要的内容.比如:用户想要喝啤酒,你非要让他喝茶水,你想是怎样的.想想看,在便利店里,消费者找到想要的内容,你想消费者还会逗留吗?做网站 也是一样的原理.    第二,网站布局来源于用户

浅析响应式网站布局Bootstrap

bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件,可以针对不同的屏幕尺寸调整你的页面,使其在个尺寸屏幕上表现良好. 从bootstrap官方网站来看,bootstrap主要有下面几部分组成: CSS--Bootstrap为我们预实现了很多CSS样式.包括一些图片以及网站的响应式布局. 组件--Bootstrap为我们预实现了很多CSS组件.如下拉框.按钮组.导航等.也就是说Bootstrap内容帮我们定义好了很多CSS样式,你可以将这些样式直接应用到之前的下拉框等元素里.

[div+css]网站布局实例二

重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; 然后思考"以什么标签来组织所需表现的内容". ** 分析页面的基本构成,主要分成5区域: 上部LOGO; 导航菜单; 左侧边栏; 右侧内容; 底部版权区. ** 布局规划: 上部LOGO + 导航菜单 => 头部元素 =>置于header层; 左侧边栏sidebar+右侧边栏

《写给大家看的CSS书》第五章:网站布局

1.网站的基本结构 我们简单的把网站的基本布局方式分为以下四种: 其中,流动布局与固定布局的差别如下: 流动:主内容区域的宽度会随着浏览器窗口的变化而自动换行,除非达到最小宽度 固定:随着窗口的变化(例如缩小),页面将会被遮掩 以三栏式固定式布局为例,基本的HTML文档结构如下图所示 2.两栏固定布局 /* 两栏固定布局 */ body { text-align:center; /*通过这条规则使布局在IE6的浏览器窗口中居中*/ } #main_wrapper { width:840px; /