css div 网页布局左右定宽，中间根据网页宽度动态变化 - - ITeye博客

`

medicine

浏览: 266458 次
性别:
来自: 郑州

最近访客更多访客>>

flatcsun

dongguangming88

dirdirdirdir

Luob.

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

coosummer：演示地址：http://www.jscssshare.com/ ...
table的css样式
wenlifang530：赞
table的css样式
javagaoluo： Hi,你这个解决方案中文件在哪个pom中配置
maven 编译时遇到的问题 resources 与 compiler
chaoren.beng：我用上之后,页面展示中文文件名时乱码,楼主有没有类似情况?
uploadify 文件上传实例
javawangzilong： Thread.sleep(1000);为什么线程不睡眠了
死锁demo

css div 网页布局左右定宽，中间根据网页宽度动态变化

博客分类：

css

css div 网页布局左右定宽中间根据网页宽度动态变化

阅读更多

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css div 网页布局 左右定宽，中间根据网页宽度动态变化</title>
<style>
body{ margin:0; padding:10px;}
#head{ margin-bottom:10px; height:50px; background-color:#999999}
#main{}
#left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}
#mid{ width:auto;background:#00FF00;margin:0 220px;border:1px solid #000;}
#right{ width:500px;margin-left:-200px; float:right; background-color:#CCCC00}
#foot{ margin-top:10px; clear:both; height:50px; background-color:#CCCCCC}

</style>
</head>

<body>
<div id="head">我是头部</div>
<div id="main">
 <div id="left">我是左边,宽:200px</div>
 <div id="right">我是右边,宽:200px</div>
 <div id="mid">我是中间,宽自适应</div> 
</div>
<div id="foot">我是底部</div>
</body>
</html>

分享到：

css div 网页布局左中右定宽居中 | java数据库驱动的问题

2012-05-27 10:40
浏览 1543
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

div+css 网页模板布局固定宽度右窄左宽: 本知识点主要围绕"div+css 网页模板布局固定宽度右窄左宽"这一主题展开，我们将探讨如何构建一个左侧宽、右侧窄的网页布局。 1. **基本概念**： - `<div>`元素：HTML中的`<div>`元素是块级元素，它可以容纳其他...

Div+CSS 3.0网页布局案例精粹: 《Div+CSS 3.0网页布局案例精粹》是一本深入探讨网页设计技术的书籍，专注于使用Div和CSS 3.0进行高效、灵活的网页布局。在现代网页设计中，Div元素作为HTML中的一个容器，常用于组织网页内容，而CSS 3.0作为样式表...

CSS.DIV网页样式与布局: 三、CSS.DIV布局原理 1. 块级元素与行内元素：在CSS布局中，`<div>`作为块级元素，它默认占据整个宽度，新的一行开始。而行内元素（如`<span>`）则只占据其内容的宽度。通过调整元素类型，我们可以控制元素的排列...

css+div网页布局实例40例: 这个“css+div网页布局实例40例”集合提供了一系列实战教程，帮助学习者掌握如何用CSS和div进行高效、灵活的网页设计。以下是对这些实例中的关键知识点的详细解释： 1. **CSS基础**：首先要理解CSS的基本语法，包括...

div+css网页布局学习: * 流式布局是指网页的宽度和高度可以根据浏览器的大小而变化 * 固定布局是指网页的宽度和高度是固定的，不会随浏览器的大小而变化五、CSS导航菜单设计 * 导航菜单是网页中最常用的交互元素 * CSS可以用来设计和...

精通CSS DIV网页样式与布局.pdf+书中实例: - **Flexbox**：提供了一种更加高效灵活的方式来布局、对齐和分配空间给元素，即使它们的尺寸未知或者动态变化。 - **Grid布局**：允许将页面划分为网格，并且可以轻松地控制各个网格项的大小和位置。 ### 实例...

一个div css 网页布局模版: 在网页设计领域，Div CSS布局模版是一种常用的技术，用于构建高效、响应式的网页结构。Div，全称为“Division”，是HTML中的一个区块元素，它允许我们将网页内容划分为多个独立的部分，便于管理和样式化。CSS，即...

div+css网页布局设计模板源代码: 在网页设计领域，`div+css`是一种广泛采用的布局技术，它将内容与样式分离，使得网页结构清晰，易于维护。本主题聚焦于“div+css网页布局设计模板源代码”，我们将深入探讨这一主题，了解相关知识点。 1. **Div元素...

table布局网页转换为div+CSS布局的转换软件: 在网页设计领域，传统的`table`布局曾是构建网页结构的主要方式，但随着Web标准的发展，`div`结合`CSS`布局（层叠样式表）逐渐成为主流。`table`布局虽然简单易用，但在复杂性和可维护性上存在诸多问题，如不易控制...

《精通CSS+DIV网页样式与布局》光盘源码: 　第10章　理解CSS定位与div布局　　10.1　div 标记与 span 标记　10.2　盒子模型　10.3　元素的定位　　10.4　定位实例一：轻轻松松给图片签名　　10.5　定位实例二：文字阴影效果　　第11章　CSS+div布局...

精通div+css网页样式与网页布局: ### 精通div+css网页样式与网页布局 #### 一、基础知识介绍 **div+css**是一种网站页面布局的方式，它通过结合HTML中的`div`元素与CSS（层叠样式表）来构建和设计网页。这种方式不仅提高了网页的可维护性，还增强...

DIV+CSS DIV居中布局: 在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高了代码的可维护性和网页的加载效率。本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV...

CSS+DIV网页布局技巧（精髓）: ### CSS+DIV网页布局技巧（精髓） #### 一、消除列表样式 ...以上技巧是CSS+DIV布局中经常用到的一些方法，掌握了这些技巧后，你可以更轻松地解决跨浏览器兼容性问题，并且更加高效地进行网页布局的设计。

Div+Css网页版式布局: 7. **盒模型**：理解CSS盒模型是掌握Div布局的关键，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，这些都会影响元素的实际尺寸。 8. **定位（Positioning）**：CSS的定位机制包括静态...

变幻之美DivCSS网页布局揭秘-案例实战篇源码: 《变幻之美DivCSS网页布局揭秘-案例实战篇源码》是一部深入探讨Div+CSS网页布局技术的实践性教程。在Web开发领域，Div+CSS布局是构建高效、可维护、响应式网站的基础，它能够帮助开发者实现灵活多变的页面设计，提升...

《变幻之美 DivCSS网页布局揭秘》源文件: 《变幻之美 DivCSS网页布局揭秘》是一本深入探讨CSS网页布局技术的专业书籍，其源文件提供了丰富的实践案例，帮助读者理解和掌握使用Div+CSS进行网页布局的精髓。在这个压缩包中，包含的是《变幻之美-DivCSS网页布局...

css+div网页样式与布局案例指导: 通过CSS，我们可以对div进行样式化，创建各种复杂的网页布局，例如：固定宽度布局、响应式布局、栅格系统等。div元素可以通过class或id选择器与其他CSS规则结合，实现定制化的样式效果。本书《CSS+Div网页样式与...

Web标准-CSSDIV网页布局与美化.ppt: 《Web标准-CSSDIV网页布局与美化》的内容涵盖了Web开发中的关键方面，主要分为五个模块：Web标准介绍、CSS样式与盒模型、CSS+DIV布局设计、CSS美化网页元素以及网站设计实例。以下是对这些模块的详细阐述： 1. **...

DIV+CSS网页布局商业案例精粹-配书源代码: 《DIV+CSS网页布局商业案例精粹》是一本专注于网页设计和开发的专业书籍，其配书源代码提供了丰富的实例，让读者能够深入理解和实践DIV+CSS技术。在网页设计领域，DIV（Division）和CSS（Cascading Style Sheets）是...

《CSS+DIV网页样式与布局》源码: 《CSS+DIV网页样式与布局》是一本深入探讨如何使用CSS（层叠样式表）和HTML的DIV元素来实现高效、灵活的网页设计的书籍。源码提供了书中各个实例的实际代码，供读者学习和实践。以下是对这些知识点的详细解释： 1. ...

Global site tag (gtag.js) - Google Analytics