参考：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. GCD的基本知识

    什么是GCD 全称是Grand Central Dispatch,可译为“牛逼的中枢调度器” 纯C语言,提供了非常多强大的函数 GCD的优势 GCD是苹果公司为多核的并行运算提出的解决方案 GCD会自 ...

  2. 【LeetCode OJ】Flatten Binary Tree to Linked List

    Problem Link: http://oj.leetcode.com/problems/flatten-binary-tree-to-linked-list/ The problem is ask ...

  3. 第二个Sprint冲刺项目github

    https://github.com/22shaojiawen/the-second-sprint-project

  4. 为CDH 5.7集群添加Kerberos身份验证及Sentry权限控制

    转载请注明出处:http://www.cnblogs.com/xiaodf/ 4. 为CDH 5集群添加Kerberos身份验证 4.1 安装sentry1.点击“操作”,“添加服务”:2.选择sen ...

  5. mm/mmap.c

    /* *    linux/mm/mmap.c * * Written by obz. */#include <linux/stat.h>#include <linux/sched. ...

  6. linux之tmpwatch命令

    系统使用时间长后会产生临时文件(/tmp下),需要清理.但清理的时候不推荐使用rm -rf.这样有时会引起程序的僵死. tmpwatch的说明: [root@AY121231034820cd91077 ...

  7. RabbitMQ中 exchange、route、queue的关系

    从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心,下面我们就围绕这三个主要组件    从应用使用的角度全面的介绍如何利用Rabbit MQ构建 ...

  8. server.transfer 用法

    server.transfer 特点: 1:大家熟悉的一个特点,用server.transfer 跳转到新页面时,浏览器的地址是没有改变的(因为重定向完全在服务器端进行,浏览器根本不知道服务器已经执行 ...

  9. 化繁为简 如何向老婆解释MapReduce？（转载）

    化繁为简 如何向老婆解释MapReduce? 昨天,我在Xebia印度办公室发表了一个关于MapReduce的演说.演说进行得很顺利,听众们都能够理解MapReduce的概念(根据他们的反馈).我成功 ...

  10. go_databasetest

    go_databasetest go语言的数据库测试: go get github.com/Go-SQL-Driver/MySQL package main import ( _"githu ...