http://www.blueidea.com/articleimg/2007/03/4545/css2.html彻底弄懂CSS盒子模式(DIV布局快速入门)
RIA知识库
flex
RIA
http://www.blueidea.com/articleimg/2007/03/4545/css1.html
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 25px;
width: 740px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
background-color:#006633
}
#nav {
height: 25px;
width: 740px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #006633;
padding: 10px;
}
-->
</style>
<body>
<div id="header">
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于*** | 广告服务 | ***招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p>
</div>
</body>
分享到：
相关推荐
【彻底弄懂CSS盒子模式】 CSS盒子模式是CSS布局的基础，理解它对于使用CSS进行网页设计至关重要。在网页设计中，元素（如div）被视作一个个“盒子”，每个盒子都有其特定的属性，包括内容(content)、内边距(padding...
CSS盒子模式是网页布局的基础，尤其对于使用CSS（层叠样式表）进行页面设计和开发而言，至关重要。在传统表格布局中，网页内容是通过表格和嵌套表格来定位的，而CSS布局则是通过定义不同大小和嵌套的“盒子”（即...
CSS 盒子模式（DIV 布局快速入门） CSS 盒子模式是CSS 中最核心的概念之一，它是 DIV 排版的基础，也是网页标准设计的关键所在。通过使用 CSS 盒子模式，可以实现网页的快速布局，提高企业竞争力，并且可以使代码...
本篇文章将深入解析CSS盒子模型，并通过实例探讨如何使用div布局，帮助你彻底掌握这一核心技术。 首先，我们需要理解CSS盒子模型的基本构成。每个HTML元素在CSS中都被视为一个矩形的“盒子”，它包含四个部分：内容...
### CSS盒子模型详解 #### 一、引言 随着网页设计技术的发展，越来越多的设计者开始意识到采用CSS（层叠样式表）来进行网页布局的重要性。传统的表格布局方式虽然简单易用，但存在诸多局限性，如代码冗余、不易...
### CSS盒子模式详解 #### 一、引言与概述 CSS盒子模型是Web前端开发中的一个核心概念，它定义了元素在网页上如何占据空间以及元素间的相互作用方式。掌握CSS盒子模型对于创建布局合理、视觉效果良好的网页至关...
CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念，...
**CSS盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）扮演着至关重要的角色，其中CSS盒子模型是理解布局和元素尺寸计算的关键概念。本资料将深入探讨CSS盒子模型，帮助你掌握这一核心知识。 **一、基本概念...
在网页设计中，CSS（层叠样式表）是用于...通过这三张图片，你可以更直观地掌握CSS盒子模型的工作原理，并运用到实际的网页设计中。实践中，结合代码调试和视觉效果预览，将更有利于深化理解，从而提升网页设计的技能。
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上如何显示的关键概念。在CSS中，每个元素都可以被看作一个矩形的盒子，包含内容区、内边距、边框和外边距四部分，这四个...
CSS 盒子模型 CSS 盒子模型是 CSS 的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。在网页设计中，每个 HTML 元素都可以看作是一个装了东西的盒子，这个盒子由元素的内容、填充、边框和边界组成...
CSS盒子模型是CSS布局的基础，理解和掌握它对于网页设计至关重要。"京东快报"可能是一个项目或者课程，涉及到使用CSS来构建符合京东风格的页面布局。在这里，我们将深入探讨CSS盒子模型及其在实际应用中的运用。 **...
这个模型包括四个主要部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解这个模型对于精确控制元素的尺寸和...因此，深入理解和熟练掌握CSS盒子模型是每个前端开发者必备的技能之一。
【CSS盒子模型定位浅析】 CSS（层叠样式表）是一种强大的样式控制工具，它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距...
### CSS盒子模型详解 #### 一、概述 CSS盒子模型是网页布局的基础，它定义了元素如何占据空间以及元素间的相互关系。理解CSS盒子模型对于前端开发者来说至关重要，因为这直接影响到网页的设计与布局。 #### 二、...
在传统的表格布局中，网页内容被嵌套在表格单元格内，而CSS盒子模型使得我们可以使用更灵活的`div`标签进行布局，通过CSS定义各个`div`的盒子属性，实现更加精细的页面设计。这种布局方式使代码更简洁，易于维护，且...
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
在这个“css学习 盒子模型 css基础”的主题中，我们将深入探讨CSS的基础知识，特别是盒子模型这一关键概念。 首先，让我们从CSS的基础语法开始。CSS采用选择器+声明的方式来指定元素的样式。选择器定位HTML元素，如...