★模板结构CSS示意图
CSS实现自适应九宫格布局大全
CSS实现⾃适应九宫格布局⼤全看到微博和朋友圈都实现了图⽚九宫格，曾经有次⾯试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽⾼，然后进⾏浮动。
今天想折腾⼀下，实现⾃适应⽗元素宽度的布局。
这次我只写了四种⽅式去实现九宫格，算上inline-block的话就是五种了。
⾸先要注意的是九宫格容器是宽⾼相等的正⽅形，并且是⾃适应的，这⾥关键是实现宽⾼相等，有些⼈想到了相对视⼝宽度 vw，但是它是相对于屏幕可见宽度来设置的，并且会忽略滚动条的宽度，所以这是不可⾏的。
这⾥我⽤⼀种变通⽅法，看代码…FlexBoxHTML 结构如下：1 2 3 4 5 6 7 8 9 10 11 12 13<div class="square"><ul class="square-inner flex"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>抽取公共样式：1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21.square{position: relative;width: 100%;height: 0;padding-bottom: 100%; /* padding百分⽐是相对⽗元素宽度计算的 */ margin-bottom: 30px;}.square-inner{position: absolute;top: 0;left: 0;width: 100%;height: 100%; /* 铺满⽗元素容器，这时候宽⾼就始终相等了 */}.square-inner>li{width: calc(98% / 3); /* calc⾥⾯的运算符两边要空格 */height: calc(98% / 3);margin-right: 1%;margin-bottom: 1%;overflow: hidden;}使⽤Flex的⼀个好处是不⽤再担⼼⾼度塌陷的问题，⽽且还可以轻松实现⼦元素横向竖向甚⾄按⽐例伸缩扩展的布局。
《网页设计》课件——11-CSS浮动布局
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
css样式大全(整理版)
字体属性：(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit| narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub| super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-a lpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-re size|se-resize|sw-resize}。
（二）css盒子模型
属性作⽤padding-left 左内边距padding-right 右内边距padding-top 上内边距padding-bottom 下内边距写法意思padding:10px;上下左右内边距均为 10像素padding:5px 10px;上下内边距是5像素，左右内边距是10像素padding:5px 10px 15px;上内边距是5px ，左右内边距是10px ，下边距是15px padding:5px 10px 15px 20px;上是5px ，右是10px ，下是15px ，左是20px 从上顺时针（⼆）css 盒⼦模型记录前端学习过程，⽅便查漏补缺，如有错误，请评论告知~⼀、⽹页布局的本质⽹页布局过程： 1、先准备好相关的⽹页元素，⽹页元素基本都是盒⼦Box 2、利⽤CSS 设置好盒⼦样式，然后摆放到相应位置 3、往盒⼦⾥装内容⽹页布局的核⼼本质：就是利⽤CSS 摆盒⼦。
⼆、盒⼦模型所谓盒⼦模型：就是把HTML 页⾯中的布局元素看作是⼀个矩形的盒⼦，也就是⼀个盛装内容的容器。
CSS 盒⼦模型本质上是⼀个盒⼦，封装周围的HTML 元素，它包括：边框、外边框、内边距和实际内容其中：content ：实际内容padding （内边距）：盒⼦边框与内容之间的距离margin （外边距）：盒⼦与盒⼦之间的距离border （边框）：字⾯意思三、内边距（padding ）padding 属性⽤于设置内边距，即边框与内容之间的距离padding 属性的复合写法可以有⼀到四个值也可以单独指定padding 值：padding-top ：10px; （其他⽅位同理）注：padding 可能会影响盒⼦的实际⼤⼩。
属性作⽤margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距如上图，⼀个100 x 100的盒⼦，在设置padding 为30px 以后，盒⼦实际⼤⼩变为160 x 160因此在使⽤时，应当注意padding 对盒⼦⼤⼩的影响，以设置盒⼦的最终⼤⼩。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
第9章 CSS样式表
9.3 实例——使用CSS样式控制页面
把外部CSS样式表链接到页面
CSS样式表文件与网页文件的关系
9.3 实例——使用CSS样式控制页面
操作步骤:
– 打开未设置样式的主页文件 – 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下
图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图 所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网 页中相应的样式即发生改变
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义biankuang的CSS规则，参数设置如下图所 示
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义bankuai的CSS规则，参数设置如下图所示
9.3 实例——使用CSS样式控制页面
9.4 DIV+CSS布局
–单击【确定】按钮，完成Body标签样式的定义 –定义#container容器。单击“CSS样式”面板右下角的“新建样式” 按钮，弹出“新建CSS规则”对话框，设置参数如下图所示。
9.4 DIV+CSS布局
–单击【确定】按钮，打开“#container的CSS规则定义”对话框，设 置参数如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
插入DIV标签
–在页面中单击，执行“插入”|“布局对象”|“Div标签”命令， 弹出“插入Div标签”对话框，在“插入”栏中选择“在插入 点”，在“ID”栏中选择“container”样式，如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
【CSS】CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
【CSS】CSS画矩形、圆、半圆、弧形、半圆、⼩三⾓、疑问框在⽹页中，常常会⽤到各种Icon，假设⽼是⿇烦设计狮画出来不免有些不好意思，所以有时候我们也能够⽤CSS写出各种简单的形状。
⼀来能够减轻他们的负担，⼆来也能够使⽤CSS替代图⽚。
提⾼载⼊速度。
在⽹页中。
结合CSS能画出来的最主要的形状就是矩形，所以，我们能够在矩形的基础上做出各种变换，得到⾮常多不同的形状。
这次的分享主要⽤到圆⾓、边框、定位等知识点（鉴于IE9以上才⽀持圆⾓，临时不考虑兼容问题）先做⼀些通⽤的基础设置：div {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: red;}毫⽆疑问。
结合HTML就能够画出最主要的矩形：<div>矩形</div>效果：以下针对矩形做⼀些变换：圆形：<div class="circle">圆形</div>border-radius圆⾓的四个值按顺序取值分别为：左上、右上、右下、左下。
原理：四个⾓都是圆⾓：四个⾓的取值为50%或为宽和⾼⼀样的值（此处即100px）。
.circle {border-radius: 50%;}半圆：<div class="semi-circle">半圆</div>原理：左上、右上⾓是圆⾓，右下、左下⾓是直⾓：左上⾓、右上⾓的值为宽和⾼⼀样的值。
右下⾓、左下⾓的值不变（等于0）。
另外。
由于还要设置⾼度值为原来⾼度的⼀半才是标准的半圆。
.semi-circle {border-radius: 100px 100px 0 0;height: 50px;}扇形：<div class="sector">扇形</div>原理：左上⾓是圆⾓。
《CSS布局教程详解》
《CSS布局教程详解》CSS布局教程详解CSS（层叠样式表）是Web开发中不可或缺的一部分。
它不仅可以美化页面，还可以控制HTML元素的布局。
在Web开发中，页面布局是非常重要的一环。
一个好的页面布局可以增加用户体验，提高网站的可用性和可读性。
本篇文章将详细介绍CSS布局的各种方法和技巧。
一、基本布局1.流式布局：流式布局是指页面随着浏览器大小的变化而自适应调整大小。
可以通过设置宽度百分比（如width: 100%）实现。
2.定宽布局：定宽布局是指页面大小固定不变。
可以通过设置固定宽度（如width: 960px）实现。
3.弹性布局：弹性布局是指页面可变宽度、可变高度、可变间距。
可以通过设置flex布局实现。
二、布局技巧1. 圣杯布局：圣杯布局是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果。
2. 双飞翼布局：双飞翼布局也是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果，同时可以避免圣杯布局的一些负面效果。
3. 瀑布流布局：瀑布流布局是一种流式布局，通过设置每个元素的位置使其自然排列，适用于图片墙等排列不规则的布局。
4. 响应式布局：响应式布局是指页面针对不同设备（如手机、平板、电脑等）自适应调整大小和布局。
可以通过设置Media Query实现。
三、布局优化1. 减少HTTP请求：HTTP请求是影响网站性能的主要因素之一，可以通过合并CSS文件、缓存CSS等方式来减少HTTP请求。
2. 使用辅助工具：CSS布局的实现过程中，可以使用很多辅助工具来简化任务，如CSS预处理器、网格系统、框架等。
3. 确定元素大小：在对元素进行布局时，一定要确定其大小。
如果不确定大小，布局可能会出现问题，影响页面的美观度和用户体验。
四、总结CSS布局是Web开发中非常重要的一环，它可以影响页面的美观度、用户体验、可用性和可读性。
本文介绍了CSS布局的基本方法和各种技巧，并提出了优化布局的建议。
第八讲CSS模板和库项目
• 更多的HTML标签的信息请浏览附录:html标 记大全
• 选择高级：重新定义一些标签的特定组 合格式。共有四种:a:link, a:visited, a:hover,a:active
• a:link当文字作为链接时, a:visited当其链 接的网页已被浏览时, a:hover表示光标移 向链接文字时,a:active当超链接文字被选 中时
第八讲 CSS、模板和库项目
本章内容
• CSS样式表是Dreamweaver中的重点和难点，通 过本章的学习，大家要理解CSS样式表的作用。 掌握如何建立CSS样式表，如何运用CSS样式表， 如何设置CSS样式表的各项属性。
• 在Dreamweaver MX中利用模板和库项目能够创 建具有统一风格的网页，同时也能更方便地进行 网站的维护。本章介绍模板与库项目的基础知识 和应用：如何创建模板以及在网页设计中应用模 板，如何创建和设置库项目以及向网页添加库项 目等。
• 在网页中练习这四种的效果
• 外部：将以文件的形式存在。 • 仅对该文档：内嵌式样式。
CSS的属性
• 字体：font-family • 大小：font-size • 粗细：font-weight • 样式：font-style • 行高：line-height • 修饰：text-decoration • 颜色：color
• 在Dreamweaver MX中利用模板和库项目能够创建具 有统一风格的网页，同时也能更方便的进行网站的维 护。
8．1 创建模板
1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板
1. 将现有文档存为模板
• 实例1 创建模板 ① 建立站点 ② 新建网页
③ 网页另存为模板：
CSS盒模型详解
CSS盒模型详解盒⼦模型前⾔盒⼦模型，英⽂即box model。
⽆论是div、span、还是a都是盒⼦。
但是，图⽚、表单元素⼀律看作是⽂本，它们并不是盒⼦。
这个很好理解，⽐如说，⼀张图⽚⾥并不能放东西，它⾃⼰就是⾃⼰的内容。
盒⼦中的区域⼀个盒⼦中主要的属性就5个：width、height、padding、border、margin。
如下：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
盒⼦模型的⽰意图：代码演⽰：上⾯这个盒⼦，width:200px; height:200px; 但是真实占有的宽⾼是302*302。
这是因为还要加上padding、border。
注意：宽度和真实占有宽度，不是⼀个概念！来看下⾯这例⼦。
标准盒模型和IE盒模型我们⽬前所学习的知识中，以标准盒⼦模型为准。
标准盒⼦模型：IE盒⼦模型：上图显⽰：在 CSS 盒⼦模型 (Box Model) 规定了元素处理元素的⼏种⽅式：width和height：内容的宽度、⾼度（不是盒⼦的宽度、⾼度）。
padding：内边距。
border：边框。
margin：外边距。
CSS盒模型和IE盒模型的区别：在标准盒⼦模型中，width 和 height 指的是内容区域的宽度和⾼度。
增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。
IE盒⼦模型中，width 和 height 指的是内容区域+border+padding的宽度和⾼度。
注：Android中也有margin和padding的概念，意思是差不多的，如果你会⼀点Android，应该⽐较好理解吧。
区别在于，Android中没有border这个东西，⽽且在Android中，margin并不是控件的⼀部分，我觉得这样做更合理⼀些，呵呵。
<body>标签也有margin<body>标签有必要强调⼀下。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
pj模板结构CSS示意图2010年07月24日 10:40-------------pj整体结构-------------------------------pj顶部结构-----------------------------pj内容结构--------------------------pj侧边结构-----------------------PJBlog2的界面一共用到 5 个CSS文件,(5个文件,其实不用担心,我只是为了方便阅读,所以把CSS文件分成了5个)global.css 全局样式表layout.css 层次样式表typography.css 局部样式表link.css 超链接样式表UBB/editor.css UBB编辑器样式表-------------------模板结构html代码-----------------1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2.<HTML>3.<HEAD>4.<TITLE> New Document </TITLE>5.<META NAME="Generator" CONTENT="EditPlus">6.<META NAME="Author" CONTENT="">7.<META NAME="Keywords" CONTENT="">8.<META NAME="Description" CONTENT="">9.<style>10.body{11.background-color:#FFFAFA;12.border:1px solid #7D7D7D;13.color: #8B4513;14.font:Verdana,Geneva,Arial,Helvetica,sans-serif;15.font-size:13px;16.padding:2px;17.margin:0px;18.}19.#blogname{20.MARGIN:5px;21.BORDER: 1px solid #9ACD32;22.BACKGROUND: #C6E28D;23.WIDTH:970px;24.HEIGHT:20px;25.}26.#blogtitle{27.MARGIN:5px;28.BORDER: 1px solid #9ACD32;29.BACKGROUND: #F0E68C;30.WIDTH:960px;31.HEIGHT:20px;32.}33.#menu{34.MARGIN:5px;35.BORDER: 1px solid #9ACD32;36.BACKGROUND: #8AB632;37.WIDTH:970px;38.HEIGHT:20px;39.}40.#ul{41.MARGIN:5px;42.BORDER: 1px solid #9ACD32;43.BACKGROUND: #F0E68C;44.WIDTH:960px;45.HEIGHT:20px;46.}47.#menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid#9ACD32; margin: 5px 3px 5px 4px; }48.#li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid#9ACD32;margin: 5px 4px 5px 2px; }49.#menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid#9ACD32;margin: 5px 3px 5px 4px; }50.#menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid#9ACD32;margin: 5px 3px 5px 4px; }51.52.53.#header{54.MARGIN:5px;55.BORDER: 1px solid #7B7B7B;56.BACKGROUND:#ccd2de;57.WIDTH:980px;58.HEIGHT:20px;59.}60.#container{61.WIDTH:980px;62.BACKGROUND:#FFF;63.border: 1px double #9ACD32;64.margin: 2px 2px 2px 2px;65.text-align: center;66.}67.#leftsidebar{68.border:1px solid #5F82E9;69.FLOAT:left;70.MARGIN:1px 0px 5px 5px;71.BACKGROUND:#F2F3F7;72.WIDTH:190px;73.clear:left;74.line-height: 150%;75.}76.#tbody{77.border: 1px solid #ACD558;78.MARGIN:5px 3px 3px 5px;79.PADDING:0px;80.WIDTH:970px;81.BACKGROUND: #F0E68C;82.}83.#maincontent{84.border:1px solid #A68100;85.MARGIN:3px 5px 3px 5px;86.PADDING:0px;87.WIDTH:970px;88.BACKGROUND: #C8C8C8;89.}90.#innermaincontent{91.border:1px solid #5F82E9;92.MARGIN:1px 3px 3px 5px;93.WIDTH:546px;94.BACKGROUND: #F0E68C;95.line-height: 150%;96.FLOAT:left;97.}98.#mainContent-topimg{border:1px solid #B58615;99.MARGIN:1px 3px 8px 5px;100.WIDTH:540px;101.BACKGROUND: #ECC56A;102.line-height: 150%;103.}104.#content-width{border:1px solid #B58615; 105.MARGIN:5px 3px 3px 5px;106.WIDTH:540px;107.BACKGROUND: #ECC56A;108.line-height: 150%;109.}110.#pageContent{border:1px solid #9ACD32; 111.MARGIN:5px 3px 8px 3px;112.WIDTH:530px;113.BACKGROUND: #B4D96A;114.line-height: 150%;115.}116.#Content{border:1px solid #9ACD32;117.MARGIN:8px 3px 5px 3px;118.WIDTH:530px;119.BACKGROUND: #B4D96A;120.line-height: 150%;121.}122.#Content-top{border: 1px solid #70922B; 123.MARGIN:5px 3px 12px 3px;124.WIDTH:520px;125.BACKGROUND: #8AB632;126.line-height: 150%;127.}128.#ContentTitle{border: 1px solid #AEA01A; 129.MARGIN:5px 3px 5px 3px;130.WIDTH:250px;131.BACKGROUND: #EBDB47;132.line-height: 150%;133.float:left;134.}135.#ContentAuthor{border: 1px solid #AEA01A; 136.MARGIN:5px 3px 5px 3px;137.WIDTH:250px;138.BACKGROUND: #EBDB47;139.line-height: 150%;140.float:right;141.}142.#Content-body{border:1px solid #70922B;143.MARGIN:12px 3px 5px 3px;144.WIDTH:520px;145.BACKGROUND: #8AB632;146.line-height: 150%;147.}148.#Content-bottom{border:1px solid #70922B;149.MARGIN:12px 3px 8px 3px;150.WIDTH:520px;151.BACKGROUND: #8AB632;152.line-height: 150%;153.}154.#mainContent-bottomimg{border: 1px solid #B58615; 155.MARGIN:8px 3px 12px 5px;156.WIDTH:540px;157.BACKGROUND: #ECC56A;158.line-height: 150%;159.}160.#rightsidebar{161.border: 1px solid #5F82E9;162.FLOAT:right;163.MARGIN:1px 5px 5px 2px;164.WIDTH:190px;165.BACKGROUND:#F2F3F7;166.clear:right;167.line-height: 150%;168.}169.#sidebar-topimg{170.border: 1px solid #5F82E9;171.MARGIN:1px 5px 2px 5px;172.WIDTH:190px;173.BACKGROUND: #C6E28D;174.line-height: 150%;175.}176.#sidepanel{177.border: 1px solid #5F82E9;178.MARGIN:1px 5px 2px 5px;179.WIDTH:190px;180.BACKGROUND: #C6E28D;181.line-height: 150%;182.}183.#Ptitle{border: 1px solid #5F82E9; 184.MARGIN:1px 5px 2px 5px;185.WIDTH:178px;186.BACKGROUND: #F0E68C;187.line-height: 150%;188.189.}190.#Pcontent{border: 1px solid #5F82E9; 191.MARGIN:1px 5px 2px 5px;192.WIDTH:178px;193.BACKGROUND: #F0E68C;194.line-height: 150%;195.196.}197.#Pfoot{border: 1px solid #5F82E9; 198.MARGIN:1px 5px 2px 5px;199.WIDTH:178px;200.BACKGROUND: #F0E68C;201.line-height: 150%;202.203.}204.#sidebar-bottomimg{205.border: 1px solid #5F82E9;206.MARGIN:1px 5px 2px 5px;207.WIDTH:190px;208.BACKGROUND: #C6E28D;209.line-height: 150%;210.}211.#footer{212.CLEAR:both;213.MARGIN:5px;214.PADDING:5px 0px 5px 0px;215.BACKGROUND:#ccd2de;216.HEIGHT:20px;217.WIDTH:985px;218.BORDER: 1px solid #7B7B7B;219.}220.</style>221.</HEAD>222.223.<BODY>224.<div id="container">225.container226.<div id="header">header227.<div id="blogname">blogname228.<div id="blogtitle">blogtitle</div>229.</div>230.<div id="menu">menu231.<div id="ul">ul232.<div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><divid="menuDiv">menuDiv</div><div id="li">li</div><divid="menuR">menuR</div>233.</div>234.</div>235.</div>236.<div id="tbody">tbody237.<div id="maincontent">maincontent238.<div id="leftsidebar">leftsidebar239.<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel240.<div id="Ptitle">Ptitle</div><divid="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>241.</div><div id="sidebar-bottomimg">sidebar-bottomimg</div> 242.</div>243.<div id="innermaincontent">innermaincontent244.<div id="mainContent-topimg">mainContent-topimg</div> 245.<div id="content-width">content-width246.<div id="pageContent">pageContent</div>247.<div id="Content">Content248.<div id="Content-top">Content-top249.<div id="ContentTitle">ContentTitle</div><divid="ContentAuthor">ContentAuthor</div>250.</div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div>251.</div>252.</div>253.<div id="mainContent-bottomimg">mainContent-bottomimg</div> 254.</div>255.<div id="rightsidebar">rightsidebar256.<div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel257.<div id="Ptitle">Ptitle</div><divid="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div>258.</div><div id="sidebar-bottomimg">sidebar-bottomimg</div> 259.</div>260.</div>261.</div>262.<div id="footer">footer</div>263.</div>264.<div></div>265.</BODY>266.</HTML>2. 关于Skins的XML定义PJBlog2的界面必须拷贝到 Skins\ 文件夹下面,而且每一个界面都必须包含一个 skin.xml 界面配置的XML文件才可以被系统读取1. 界面配置文件 skin.xml 结构1.<?xml version="1.0" encoding="UTF-8"?>2.<SkinSet>3.<SkinName>默认皮肤 - Flash导航条风格</SkinName>4.<SkinDesigner>PuterJam</SkinDesigner>5.<pubDate>2004-11-6</pubDate>6.<DesignerURL></DesignerURL>7.<DesignerMail>puterjam@</DesignerMail>8.<Flash>9.<UseFlash>-1</UseFlash>10.<FlashPath>head.swf</FlashPath>11.<FlashWidth>748</FlashWidth>12.<FlashHeight>80</FlashHeight>13.<FlashAlign>center</FlashAlign>14.<FlashTop>0</FlashTop>15.<FlashTransparent>-1</FlashTransparent>16.</Flash>17.</SkinSet>复制代码2. 界面配置文件 skin.xml 字段分析SkinName 界面名称SkinDesigner 界面设计者pubDate 发布时间DesignerURL 设计者主页DesignerMail 设计者电子邮件Flash/UseFlash 是否使用Flash导航条 0=false -1=trueFlash/FlashPath Flash导航条路径名Flash/FlashWidth Flash导航条宽度Flash/FlashHeight Flash导航条高度Flash/FlashAlign Flash导航条对齐方式 left | right | centerFlash/FlashTop Flash导航条距离页面顶部高度Flash/FlashTransparent Flash导航条是否透明 0=false -1=true3. PJBlog2界面的其他说明1. 每个界面下面的 UBB/ 文件夹里面的文件都不能少.因为它提供给UBB编辑器图片和样式等信息2. 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:一种是内容模块 Content Module另一种是侧边模块 Side Module.我们需要控制某个自定义模块时就可以使用#Content_ 或者 #Side_ 来独立控制它们的样式.例如:某个 侧边模块 的标识 是 Category, 那么就可以 用 #Side_Category 来控制这个模块的CSS.3. Flash 导航条如何获取日志分类?PJBlog2提供了一个 menu.asp 的文件,它动态输出了日志分类的XML文件演示看这里SiteName 站点名字SiteURL 站点地址Menu/MenuName 分类名称Menu/MenuIntro 分类说明Menu/MenuType 分类类型 0=同时在顶部和侧边显示 1=只在顶部显示 2=只在侧边显示Menu/MenuUrl 分类链接地址Menu/logNum 分类日志数目。