典型的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的论坛不过现在关门了甚是可 ...

随机推荐

centos-mysql 安装
初学者自编文档,如有错误,请指出,具体命令就不阐述了,不明白度娘吧! nginx我是编译安装在服务器上和其他安装应该会有区别安装路径路径:/usr/local/ 安装包存放位置:/home/ap ...
JQuery笔记(一)jq的使用方法
我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本官网的链接是只有最新的3下载,我把我在官网下载的jq代码链接发出来,如下点我获取jq代码和js不同的是,jq开发者封装了一些方法 ...
简单的jquery ajax文件上传功能
/* * 图片上传 * 注意如果不加processData:false和contentType:false会报错 */ function uploadImage(image) { var imageF ...
学习node的REPL
REPL: read eval print loop 支持多行代码编辑模式,即识别{} () 为代码块. 在repl中快速查看对象的属性 gl = global repl command .h ...
mongodb （一）
#mongodb安装(3.4.0) #下载安装包,解压 mkdir /data/mongodb cd /data/mongodb mkdir log conf data bin vim conf/mo ...
wpf 控件截屏
/// <summary> /// 保存截图 /// </summary> /// <param name="ui">控件名称</para ...
for clean
static(修饰变量方,法:静态块:静态内部类:静态导包) final transient 作用foreach 原理 volatile底层原理实现集合LIST MAP SET 实现类的底层原理优, ...
【.NET】上传文件，生成缩略图
类名:Upload using System; using System.Collections; using System.ComponentModel; using System.Data; us ...
ZeroMQ中PUB-SUB模式测试
因为公司有需求,对程序模块之间通信效率有较高的需求.之前公司用的通信组件是ActiveMQ,根据网上公布的测试结果显示其效率比较低, 后来考虑准备在新的项目中开始使用ZeroMQ.看了几天发现用起来比 ...
oracle 学习之DG的搭建
1.配置过程确认为归档模式 SQL> select log_mode from v$database; LOG_MODE ------------ ARCHIVELOG 配置归档日志存放路径( ...

典型的DIV＋CSS布局——左中右版式

典型的DIV＋CSS布局——左中右版式的更多相关文章

随机推荐

热门专题