参考：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. 如何获取WIN10 Program Files 文件夹下的文件操作权限

    找到指定文件,右键-属性-找到指定用户-授"完全控制权限“--更改文件--恢复默认权限.

  2. iOS-硬件声音 ，振动，提示警告

    为了引起用户注意发出警告的时候,常常伴随有提示音震动等.系统声音服务提供了一个接口,用于播放不超过30秒的声音文件,他支持的格式有CAF,AIF,WAV. iOS使用该API支持3种不同的通知: 声音 ...

  3. Why one-norm is an agreeable alternative for zero-norm?

    [转载请注明出处]http://www.cnblogs.com/mashiqi Today I try to give a brief inspection on why we always choo ...

  4. CentOS6.5安装openLdap

    一.关闭防火墙和selinux 关闭防火墙 chkconfig iptables off service iptables stop 关闭selinux vim /etc/selinux/config ...

  5. js中有趣的闭包(closure)

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...

  6. django1.9.6 使用 DjangoUeditor (python3.5)

    DjangoUeditor https://github.com/zhangfisher/DjangoUeditor 1 DjangoUeditor 安装 pip install DjangoUedi ...

  7. ajax请求后弹开新页面被浏览器拦截

    window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.ge ...

  8. 存储OS

    openfiler这个登陆慢 是https协议的问题 http://www.getnas.com/open-source-nas FreeNAS®,目前最受欢迎的开源免费 NAS 操作系统之一,基于以 ...

  9. ［转载］强烈推荐学习的blog

    膜拜大牛 原文出处:http://hedengcheng.com/?p=676 ACM Queue (Architecting Tomorrow’s Computing) 网址:http://queu ...

  10. scikit-learn中的主成分分析（PCA）的使用

    1.函数原型及参数说明 class sklearn.decomposition.PCA(n_components=None, copy=True, whiten=False) 参数说明: n_comp ...