参考：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. 基于Twemproxy的Redis集群搭建以及想法

    基于Twemproxy的Redis集群方案(转) redis3.0 已经发布了几个月了,但是我这等菜鸟到网上还是没有找到很好的关于搭建redis3.0集群的文章,而且好像很多公司的redis版本还保持 ...

  2. 三部曲二（基本算法、动态规划、搜索）-1003-Lucky and Good Months by Gregorian Calendar

    模拟加阅读题......虽然很多事常识性的知识,但也有许多不知道的知识,关键是不读不知道那些是已经知道的那些不是,许多重要的信息零散的分布在一大坨英文里,读起来很痛苦......自己读了一遍,读的晕晕 ...

  3. 第三个Sprint冲刺第三天

    讨论地点:宿舍 讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:增强了界面的效果,改善了视角

  4. js常见函数汇总

    /**  * 隐藏元素  * @param {String} elem  */ function hide(elem){     var curDisplay = getStyle(elem, 'di ...

  5. ubuntu15.10跑裸机程序跑.bin文件

    1:安装tftp:#apt-get update#apt-get install tftp-hpa tftpd-hpa xinetd2:#cd /srv#mkdir tftp#chmod 777 tf ...

  6. HDU 4471 矩阵快速幂 Homework

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4471 解题思路,矩阵快速幂····特殊点特殊处理····· 令h为计算某个数最多须知前h个数,于是写 ...

  7. JSBinding / Code Snippets

    new a gameobject & overloaded methds var go1 = new UnityEngine.GameObject.ctor(); var go2 = new ...

  8. Android Studio debug使用release的签名

    当我们在做微信微博sdk分享的时候调试非常麻烦,因为要使用对应的签名版本才能调用sdk成功. 当我们使用AndroidStudio的Gradle之后会很简单的解决这个问题. 1.我们把签名文件放到工程 ...

  9. JS识记

    1.重新按照URL地址加载本页? window.location.reload(); 2.JS中实现命名空间一例? <script type="text/javascript" ...

  10. testNG中同一个test节点上class的执行顺序

    如果每个class中都有setUp(),那么先执行所有class的setUp方法,之后再执行具体的测试方法.这样就导致只有最后一个测试能通过,其他测试都失败了. 具体设置如下图: