典型的DIV＋CSS布局——左中右版式
【效果】
【HTML】
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>左中右版式</title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div id="wrap">
- <div id="header">header</div>
- <div id="container">
- <div id="left_side">left_side</div>
- <div id="content">content</div>
- <div id="right_side">right-side</div>
- </div>
- <div id="footer">footer</div>
- </div>
- </form>
- </body>
- </html>
【CSS】
- #wrap{
- width:700px;
- margin:0 auto;
- }
- #header{
- margin:20px;
- height:80px;
- border:solid 1px #0000FF;
- }
- #container{
- position:relative;
- margin:20px;
- height:400px;
- }
- #left_side{
- position:absolute;
- top:0px;
- left:0px;
- border:solid 1px #0000FF;
- width:170px;
- height:100%;
- }
- #content{
- margin:0px 190px 0px 190px;
- border:solid 1px #0000FF;
- height:100%;
- }
- #right_side{
- position:absolute;
- top:0px;
- right:0px;
- border:solid 1px #0000FF;
- width:170px;
- height:100%;
- }
- #footer{
- margin:20px;
- height:80px;
- border:solid 1px #0000FF;
- }
【说明】
典型的DIV＋CSS布局——固定宽度且居中的版式中，运用的是浮动属性；这个实例，则运用了绝对定位属性。
1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。
3、左中右布局，也可以运用浮动属性，具体可参考典型的DIV＋CSS布局——固定宽度且居中的版式。
典型的DIV＋CSS布局——左中右版式的更多相关文章
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- (转)Div+CSS布局入门
在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...
- <转载>div+css布局教程之div+css常见布局结构定义
在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...
- DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
随机推荐
- 洛谷-谁拿了最多奖学金-NOIP2005提高组复赛
题目描述 Description 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(>8 ...
- 矩阵赋值实例（matrixAssign）
题目:给一个二维数组赋值. 分析:主机端代码完成的主要功能: 启动CUDA,使用多卡时应加上设备号,或使用cudaSetDevice()设置GPU设备. 为输入数据分配内存空间 初始化输入数据 为GP ...
- ArcGIS 10.5 named user介绍
1 Named user概述 1.1 Named user简介 Named user是ArcGIS产品自10.3版本正式推出的一种以用户为中心的授权机制,也称"授权 ...
- [译][待续]Chap1.Using neural nets to recognize handwritten digits
Chapter1 使用神经网络辨识手写数字 人类的视觉系统是自然界的一大奇迹.试看如下的手写数列: 绝大多数人都能毫不费劲地认出这些数字是504192,而这会让人产生识别数字非常简单的错觉.人类大脑的 ...
- WEB 技术分类 Javascript DOM(Element Node) BOM
Web technology for developers Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...
- 《JavaScript高级程序设计》读书笔记 ---Array 类型
除了Object 之外,Array 类型恐怕是ECMAScript 中最常用的类型了.而且,ECMAScript 中的数组与其他多数语言中的数组有着相当大的区别.虽然ECMAScript 数组与其他语 ...
- prototype原型解析
每个对象都有原型, prototype能够实现实例共享,节约使您有能力向对象添加属性和方法. 如 <script type="text/javascript"> fun ...
- php中的curl常用例子
1.基本请求 <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "http://www.baidu.com"); ...
- Android设置对话框去除黑边
在res/values/styles.xml文件中添加如下内容 <style name="dialog" parent="@android:style/Theme. ...
- zoj 2193 poj 2585 Window Pains
拓扑排序. 深刻体会:ACM比赛的精髓之处不在于学了某个算法或数据结构,而在于知道这个知识点但不知道这个问题可以用这个知识去解决!一看题目,根本想不到是拓扑排序.T_T...... #include& ...