参考：http://www.blueidea.com/tech/web/2007/4545_2.asp

代码试验：

html代码：

 <!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>无标题文档</title>

 <link rel="stylesheet" type="text/css" href="2.css">

 </head>

 <body>

 <div id="header"></div>

 <div id="nav">

 <li><a>111</a></li>

 <li><a>222</a></li>

 <li><a>333</a></li>

 <li><a>444</a></li>

 <li><a>555</a></li>

 <li><a>666</a></li>

 </div>

 <div id="content">

 <div id="box1">

 <div id="box3"></div>

 </div>

 <div id="box2">

 </div>

 <h3>123</h3>

 <p>第１章

 Delphi使用概論

 本書的第一章在內容上力求淺顯，其中甚至有一步接一步的操作說明，即使是從來沒有使用過Delphi的程式設計師，閱讀本章相信也不至於有任何問題。我在這一章中示範性的完成一個簡單的應用程式，除了用以說明典型的Delphi的程式開發流程，並且也以這個實例探討Delphi專案是由哪些檔案所組成，接著是與寫作程式息息相關的工具，包括程式編輯器（Program Editor）、除錯器（Debugger）的使用等等。</p>

 <p>Delphi程式開發流程</p>

 <p>典型的Delphi應用程式開發流程大致上可分為以下兩大步驟：</p>

 <p>    設計包括視窗外觀、主選單、按鈕等等的使用者操作介面。</p>

 <p>    撰寫使用者操作介面引發的事件處理程序以及其他相關程式。</p>

 <p>上述的兩大設計工作不論是介面的設計或者程式的撰寫，都是在所謂的整合開發環境（IDE，Integrated Development Environment）中進行的，此環境不僅能在設計階段就對未來成品的外觀擁有立即的視覺效果，其他的開發工具如程式編輯器與除錯器等也都整合在同一個環境中隨手可得。</p>

 <br />

 <br />

 <br />

 <br />

 <br />

 </div>

 <div id="footer">

 123company</div>

 </body>

 </html>

css代码：

 @charset "utf-8";

 /* CSS Document */

 * {margin:0px; padding:0px;}

 body {

 font-family: Arial, Helvetica, sans-serif;

 font-size: 12px;

 margin: 0px auto;

 height: auto;

 width: 1000px;

 border: 1px solid #006633;

 }

 #header {

 height: 100px;

 width: 1000px;

 background:#FFC;

 background-repeat: no-repeat;

 margin:0px 0px 3px 0px;

 }

 #nav {

 height: 25px;

 width: 1000px;

 font-size: 14px;

 list-style-type: none;

 }

 #nav li {

 float:left;

 }

 #nav li a{

 color:#FFFFFF;

 text-decoration:none;

 padding-top:4px;

 display:block;

 width:97px;

 height:22px;

 text-align:center;

 background-color:#60758C;

 margin-left:2px;

 }

 #nav li a:hover{

 background-color:#00A8D5;

 color:#FFFFFF;

 }

 #content {

 height:auto;

 width: 980px;

 line-height: 1.5em;

 padding: 10px;

 position:relative;

 }

 #content p {

 text-indent: 2em;

 }

 #content h3 {

 font-size: 16px;

 margin: 10px;

 }

 #box1{

     background:#FcF;

     height:600px;

     width:300px;

     float:left;

     position:relative;

     }

 #box2{

     background:#CCC;

     height:600px;

     width:680px;

     float:left;

     }

 #box3{

     background:#999;

     height:200px;

     width:200px;

     position:absolute;

     top:0px;

     right:0px;

     }

 #footer {

 height: 50px;

 width: 980px;

 line-height: 2em;

 text-align: center;

 background-color:#3FF;

 padding: 10px;

 }

显示结果：

CSS盒子模型学习记录2的更多相关文章

  1. CSS盒子模型学习记录1

    http://www.blueidea.com/tech/web/2007/4545.asp 代码试验: html代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. CSS盒子模型学习记录3（侧面导航栏）

    学习http://www.blueidea.com/tech/web/2007/4545_2.asp 代码试验 html <!DOCTYPE html PUBLIC "-//W3C// ...

  3. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  4. 前端学习（十三）：CSS盒子模型

    进击のpython ***** 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能 ...

  5. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  6. 1.26学习总结——css盒子模型

    CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...

  7. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  8. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. Poisson Distribution——泊松分布

    老师留个小作业,用EXCEL做不同lambda(np)的泊松分布图,这里分别用EXCEL,Python,MATLAB和R简单画一下. 1. EXCEL 运用EXCEL统计学公式,POISSON,算出各 ...

  2. HDU5128 细心、细心、细心

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5128 题意:给你n(n < 30)个点的坐标,然后让你求出这n个点能构成的两个最大矩形的面积,有 ...

  3. MVC中的自定义控件——分页

    上一篇是个简单例子,这篇借分页写个升级版的例子. 不想拼html代码,因为不好修改,那写一个PartialView. @model System.Web.Mvc.PagerModel @if (Mod ...

  4. 一些sql语句的常用总结（重要）

    select primary_flag from tc_contact where primary_flag !=0 select dept_id,dept_name,tree_level,tree_ ...

  5. 多线程下HttpContext.Current 的问题

    在项目中需要记录文本日志,为了加快响应速度所以用到了多线程. 但是以前的方法是不支持多线程的,程序运行错误. 追踪代码发现提示HttpContext为空. 1.HttpContext.Current表 ...

  6. 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

    使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核 ...

  7. 关于CSS的那些事？

    关于CSS的那些事? 它有精准定位与排版,使得网页布局.信息排版一目了然:它有多姿多彩的样式属性,使得网页中各元素千变万化:它有神奇的渲染天赋,使得网页有了如诗如画.别具一格的魅力.你知道它了吗?没错 ...

  8. svn服务器迁移（生成dump）

    首先介绍一下dump文件 一定要进入VisualSVN服务端的安装目录里的bin目录下面,然后再执行svnadmin  相关命令. 不然会出现下图中的“svnadmin不是内部命令或外部命令,也不是可 ...

  9. javaScript 1

    js 字符串 1. 必须在写在一行,写在多行会报错,可以用 / 分开写在多行 也可以用 “+” 连接 . ===> /转义字符   /r/n:  (以下来在百度) \r是回车,英文是Carria ...

  10. 渴切API参考手册

    渴切:是国内优秀的开源css框架. 渴切是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间.它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重 ...