CSS定位和布局属性课件.ppt

1、CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程CSS定位和布局属性定位和布局属性第13章CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1 CSS定位属性13.2 CSS布局属性13.3综合案例幼儿园页面设计CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程CSS盒子布局和定位盒子布局和定位本章学习目标：（1）理解网页中BOX的正常流向。（2）会使用top、bottom、right和left属性配合position属性定义偏移量。（3）掌握CSS元素的定位方法，重点掌握static、relative和ab

2、solute定位，理解fixed 和 sticky定位。（4）盒子发生堆叠时，会使用z-index控制堆叠次序。（5）理解盒子内容的裁切。（6）能控制盒子的可见性和溢出方式。（7）能够使用display改变常见元素的显示方式。（8）能够使用float和clear控制浮动定位。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.113.1 CSS定位属性定位属性 CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属性进行定位。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.1 正常流向正常流向 正常流

3、向是预先设定的定位方式。默认情况下网页布局就是按文档流的正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。换个角度来说，在大部分的情况下，正常流向指的是网页中元素标记的方式。另外，多数的HTML元素都是属于行内元素或块级元素。块级元素里可以包含行内元素和块级元素，而行内元素里不能包含有块级元素。在正常流向中，块级元素盒子会在其父对象盒子中自上而下排列，而行内元素盒子则会按照由左至右的顺序排列。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-1】正常流向（13-1.html）示例CSS

4、3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1background:#ba9578;color:#FFF;#div2background:#cef091;color:#000;#div3background:#70c17f;color:#FFF;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.2 定位偏移属性定位偏移属性top、

5、bottom、right、left基本语法：基本语法：top:auto|长度|百分比;bottom:auto|长度|百分比;right:auto|长度|百分比;left:auto|长度|百分比;语法说明：语法说明：auto：无特殊定位，根据HTML定位规则在文档流中分配。长度：用长度值来定义偏移量，可以为负值。百分比：用百分比来定义偏移量，百分比参照包含块的高度，可以为负值。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.3 定位方式定位方式position基本语法：基本语法：position:static|relative|absolute|fixed|

6、center|page|sticky;定位允许定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口的位置。CSS 使用position 属性控制定位类型，并配合4个定位偏移属性left、right、top和bottom控制偏移量。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 静态定位static，遵循正常文档流，是所有元素默认的定位方式，此时4个定位偏移属性不会被应用。一般不特别设定，除非要取消继承其它元素的特别定位。相对定位relative，遵循正常文档流，基准位置为其在正常文档流中的位置，并通常需要top、bottom、righ

7、t、left属性配合完成，设定元素相对于原来位置的偏移量。设置为相对定位的元素会偏移某个距离，元素仍然保持其未偏移前的形状，它原来所占的空间仍保留，元素移动后可能会覆盖其它元素。相对定位一开始会按照“正常流向”来定位，所有的盒子会先定好位置。一旦一个盒子按照正常流向得到自己的位置，它还可以相对该位置而偏移，这就是相对定位。1.相对定位相对定位relativeCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-2】使用相对定位（13-2.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200p

8、x;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:static;/*静态定位*/background:#ba9578;color:#FFF;#div2position:relative;/*相对定位*/top:60px;left:30px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;bborder:1px solid red;.

9、b2position:relative;/*相对定位*/left:80px;top:60px;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 div1div2b元素1b元素2b元素3div3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 绝对定位absolute，设置为绝对定位的元素从文档流中删除，元素原先在文档流中所占的位置会取消，不再占用原有的空间。绝对定位“相对于”该元素最近的已经定位的祖先元素，若不存在已定位的祖先元素，则一直回溯到body元素。绝对定位的盒子偏移位置不影响常规文档流中的任何元素。绝对定位的盒子不存在正常流向问

10、题，也不会影响到正常流向中的其它BOX。2.绝绝对定位对定位absoluteCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-3】使用绝对定位（13-3.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:absolute;/*绝对定位*/top:100px;right:30px;background:

11、#ba9578;color:#FFF;#div2position:relative;/*相对定位*/top:60px;left:30px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;bborder:1px solid red;.b2position:absolute;/*绝对定位*/left:-20px;top:120px;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 div1div2b元素1b元素2b元素3div3CSS3部分H

12、TML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 固定定位fixed，与absolute一致，偏移量定位一般以窗口为参考，当出现滚动条时，对象不会随着滚动。元素原有位置空间不保留，对象脱离常规流。固定定位是绝对定位的一个子类，唯一的区别是对于连续介质，固定BOX并不随着文档的滚动而移动，类似于固定的背景图像。对于分页介质，固定定位BOX在每页中重复，当需要在每一放置同一个内容时（例如在底部放置一个签名），这个方法非常有用。3.固定定位固定定位fixedCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-4】使用固定定位（13-4.html）CSS

13、3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：bodyheight:700px;headerposition:fixed;width:100%;height:100px;top:0px;right:0px;bottom:auto;left:0px;border:1px dashed black;color:#FFF;background-color:#5f6062;text-align:center;line-height:3;asideposition:fixed;width:200px;height:auto;top:100px;right:auto;

14、bottom:100px;left:0px;border:1px dashed black;background-color:#f6edc6;text-align:center;line-height:3;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程sectionposition:fixed;width:auto;height:auto;top:100px;right:0px;bottom:100px;left:200px;border:1px dashed black;background-color:#fde8ed;text-align:center;lin

15、e-height:3;footerposition:fixed;width:100%;height:100px;top:auto;right:0;bottom:0;left:0px;border:1px dashed black;background-color:#f0ede4;text-align:center;line-height:3;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 sticky是CSS3新增关键字，对象在常态时遵循常规流，也就是当对象在屏幕中正常显示时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现就是现实中我们见到的吸附效果

16、。sticky定位屏幕中正常显示时遵循文档流，而当随着滚动条移动可能卷到屏幕外边时，则会表现出fixed的吸附效果。4.吸附定位吸附定位stickyCSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-5】使用吸附定位（13-5.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:80px;margin:10px;padding:10px;border:2px dashed#000;text-align:center;#div1position:static;/*静态定位

17、*/background:#ba9578;color:#FFF;#div2position:sticky;/*吸附定位*/top:140px;left:100px;background:#cef091;color:#000;#div3position:static;/*静态定位*/background:#70c17f;color:#FFF;div1div2div3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.4 分层呈现分层呈现z-index基本语法：基本语法：z-index:auto|数字;语法说明：语法说明：l auto：元素在当前层叠上下文中的层叠

18、级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。l 数字：用整数值来定义堆叠级别。z-index的值越小，表明该BOX层级越低，堆叠发生时处于下层，反之则处于上层。如果两个元素的z-index一样，则按照出现的先后顺序来决定，出现较晚的元素堆叠在上层。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-6】设置堆叠次序（13-6.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divposition:staic;width:200px;height:80px;margin:10px;padding:

19、10px;border:2px dashed#000;text-align:center;#div1position:absolute;/*绝对定位*/z-index:2;/*堆叠次序*/top:0px;left:0px;background:#ba9578;color:#FFF;#div2position:absolute;/*绝对定位*/z-index:6;/*堆叠次序*/top:70px;left:50px;background:#cef091;color:#000;#div3position:absolute;/*绝对定位*/z-index:4;/*堆叠次序*/top:140px;le

20、ft:100px;background:#70c17f;color:#FFF;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.1.5 裁切裁切clip基本语法：基本语法：clip：auto|：rect(|auto|auto|auto|auto)语法说明：语法说明：lauto：默认，不裁剪。lrect(|auto|auto|auto|auto)：依据上-右-下-左的顺序提供以对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。l“上-左”方位的裁剪：从0开始剪裁直到设定值，即“上-左”方位的auto值等同于0；“右-下”方

21、位的裁切：从设定值开始裁切直到最右边和最下边，即“右-下”方位的auto值为盒子的实际宽度和高度。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-7】使用裁切（13-7.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divposition:absolute;/*绝对定位*/width:180px;height:60px;font-size:24px;line-height:2;background:#cef091;border:2px dashed#000;text-align:center;#div1

22、left:20px;top:20px;#div2left:220px;top:20px;clip:rect(0px auto 50px 40px);/*裁切*/未被裁剪的效果被裁切后的效果CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2 CSS布局属性布局属性 CSS布局（Layout）属性控制已应用CSS样式规则的HTML元素与页面上的其它元素进行交互。例如，隐藏元素、设置元素的浮动效果、设置溢出属性确定滚动条能否出现等。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.1 可见性可见性visibility基本语法：基本

23、语法：visibility:visible|hidden|collapse;语法说明：语法说明：l visible：元素可见。l hidden：元素隐藏，但元素保留其占据的原有空间，影响页面的布局。l collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其它内容使用。对于表格外的其它对象，其作用等同于hidden。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-8】设置可见性（13-8.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程可见性divwidth:200px;height:80px;margin:1

24、0px;padding:10px;border:2px dashed#000;text-align:center;#div1visibility:visible;/*可见*/background:#ba9578;部分代码如下：color:#FFF;#div2visibility:hidden;/*隐藏*/background:#cef091;color:#000;#div3background:#70c17f;.vcvisibility:collapse;/*隐藏表格行列*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 显示隐藏 单元格1 单元格2单元格3 部分

25、代码如下：单元格4 单元格5单元格6 单元格7 单元格8单元格9 CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.2 溢出溢出overflow基本语法：基本语法：overflow：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overflow-x：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;overfl

26、ow-y：visible|hidden|scroll|auto|paged-x|paged-y|paged-x-controls|paged-y-controls|fragments;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程语法说明：语法说明：l visible：对溢出内容不做处理，内容可能会超出容器。l hidden：隐藏溢出容器的内容且不出现滚动条。l scroll：无论是否溢出都出现滚动条。l auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body元素和textarea的默认值。l page-x、page-

27、y、page-x-controls、page-y-controls和fragments属性值都是CSS3新增，目前主流浏览器均不支持，不做详述。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-9】设置CSS溢出效果（13-9.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：divwidth:200px;height:100px;margin:30px 5px;padding:5px;border:1px solid#000;text-align:center;float:left;background:#

28、daf6f7;#div1overflow:visible;/*溢出内容可见，不做处理*/#div2overflow:hidden;/*隐藏溢出容器的内容且不出现滚动条*/#div3overflow:scroll;/*无论溢出与否都有滚动条*/#div4overflow:auto;/*按需出现滚动条*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.3 显示显示display基本语法：基本语法：display：none|inline|block|list-item|inline-block|table|inline-table|table-caption|t

29、able-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程语法说明：语法说明：l none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。l inline：指定对象为内联元素。l block：指定对象

30、为块级元素。l list-item：指定对象为列表项目。l inline-block：指定对象为内联块元素。l table：指定对象作为块元素级的表格。类同于html标记。l inline-table：指定对象作为内联元素级的表格。类同于html标记。l table-caption：指定对象作为表格标题。类同于html标记。l table-cell：指定对象作为表格单元格。类同于html标记。l table-row：指定对象作为表格行。类同于html标记。l table-row-group：指定对象作为表格行组。类同于html标记。l table-column：指定对象作为表格列。类同于htm

31、l标记。l table-column-group：指定对象作为表格列组显示。类同于html标记。l table-header-group：指定对象作为表格标题组。类同于html标记。l table-footer-group：指定对象作为表格脚注组。类同于html标记。l run-in：CSS3新增关键字，根据上下文决定对象是内联对象还是块级对象。l box：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最老版本）l inline-box：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最老版本）。l flexbox：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒过渡版本

32、）。l inline-flexbox：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）。l flex：CSS3新增关键字，将对象作为弹性伸缩盒显示（伸缩盒最新版本）。l inline-flex：CSS3新增关键字，将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-10】使用display构造表格（13-10.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：bodyfont-size:13px;line-height:1.5;text-

33、align:center;.tabledisplay:table;/*显示为表格*/margin:0 auto;border-collapse:collapse;border:1px solid#ccc;.table-captiondisplay:table-caption;/*显示为表格标题*/font-size:16px;text-align:center;CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程.table-header-group /*显示为表格标题行*/display:table-header-group;background:#eee;font-

34、weight:bold;.table-row-group /*显示为表格行组*/display:table-row-group;.table-rowdisplay:table-row;/*显示为表格行*/*表格行组中的表格行鼠标经过时背景色为淡黄色#ffffcc*/.table-row-group.table-row:hover background:#ffffcc;.table-celldisplay:table-cell;/*显示为表格单元格*/padding:0 5px;border:1px solid#ccc;width:100px;CSS3部分HTML5+CSS3网页设计与制作案例教

35、程网页设计与制作案例教程学生信息表学号姓名年龄201677001袁天一19201677002马丽娜18201677003侯雨欣20CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.4 浮动浮动float 基本语法：基本语法：float:none|left|right语法说明：语法说明：lnone：设置元素不浮动；lleft：设置元素浮在左边；lright：设置元素浮在右边。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-11】使用浮动效果（13-11.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设

36、计与制作案例教程部分代码如下：浮动sectionwidth:500px;height:120px;border:1px solid#000;margin:10px;background:#f3de83;h1,h2,h3background:#daf6f7;margin:10px;padding:5px;border:1px solid#000;font-size:14px;text-align:center;height:auto;h1width:60px;h2width:100px;h3width:150px;.float_nonefloat:none;/*不浮动*/.float_leftf

37、loat:left;/*浮动在左*/.float_rightfloat:right;/*浮动在右*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 H1H2H3 H1H2H3 H1H2H3CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程13.2.5 清除清除clear基本语法：基本语法：clear:none|left|right|both;语法说明：语法说明：lnone：允许两边都可以有浮动元素。lboth：不允许有浮动元素。lleft：不允许左边有浮动元素。lright：不允许右边有浮动元素。CSS3部分HTML5+CSS3网页设计与

38、制作案例教程网页设计与制作案例教程【例13-12】使用清除浮动（13-12.html）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程部分代码如下：sectionwidth:500px;height:120px;border:1px solid#000;margin:10px;background:#f3de83;h1,h2,h3background:#daf6f7;margin:10px;padding:5px;border:1px solid#000;font-size:14px;text-align:center;height:auto;h1width:60p

39、x;h2width:100px;h3width:150px;h4width:200px;padding:10px;background:#f9aa9d;border:2px dashed#000;font-size:14px;text-align:center;pfont:13px/1.5 宋体;.float_nonefloat:none;/*不浮动*/.float_leftfloat:left;/*浮动在左*/.float_rightfloat:right;/*浮动在右*/.clear_both /*清除两侧浮动*/clear:both;CSS3部分HTML5+CSS3网页设计与制作案例教程

40、网页设计与制作案例教程 H1左浮动H2左浮动H3右浮动H4不浮动 H1左浮动H2左浮动H3右浮动段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。段落文字，不浮动，不清除浮动时效果。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 H1左浮动H2左浮动H3右浮动H4不浮动，清除两侧浮动 H1左浮动H2左浮动H3右浮动段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。段落文字，不浮动，除浮左右两侧动时效果。CSS3部分HTML5+CSS3网页

41、设计与制作案例教程网页设计与制作案例教程13.3 综合实例综合实例幼儿园页面设幼儿园页面设计计CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程【例13-13】CSS布局定位综合案例（13-13.html&css13-13.css）CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 园内介绍 家园互动 宝贝风采 特色课程 教师天地 信息中心 健康快车 部分HTML代码如下：CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 中秋节放假按国家规定为期三天，分别为9月15、16和17日，即周四、周五和周六，周日照常上课。

42、预祝您节日愉快！CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 园长信箱 资源共享 互助论坛 党员之家 家长您好！.CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 今天：10金秋十月，爱心传递幼儿十月精彩图集大放送，萌娃的幼儿园生活，爸爸妈妈看过来（图）。9月20日：快乐中秋，幸福童年幼儿园大型月饼DIY活动纪实，看小厨师如何嗨翻天（图）。9月14日：为留守儿童献爱心9月12日，幼儿园小朋友为留守儿童送出玩具和图书（图）。8月16日：幼儿歌咏会“我是小歌手”大型亲子演唱会8月6日隆重开唱（图）。5月15日：快乐六一，欢乐童年大一班小朋

43、友积极排练木偶剧匹诺曹（图）。CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程 版权所有© 清华大学出版社 本书编委 CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*全局样式*/bodytext-align:center;margin:0px;pmargin:10px;font:13px/1.8 宋体;text-indent:2em;text-align:left/*外部父div样式开始*/#containerwidth:880px;margin:0 auto;/*外部父div样式结束*/CSS代码如下：/*导航区域样式开始*

44、/#naviclear:both;/*不允许两侧有浮动*/background:#00a8ce;margin:5px 15px;height:36px;border:3px#fff solid;border-radius:10px;box-shadow:0 0 2px 2px#CCCCCC;#navi span /*导航条中span元素样式*/display:block;/*显示为块级元素*/float:left;/*浮动在左*/width:80px;padding:5px;margin:10px 0px;font:14px 黑体;color:#FFF;CSS3部分HTML5+CSS3网页设计

45、与制作案例教程网页设计与制作案例教程#navi form /*导航区表单样式*/float:right;/*浮动在右*/margin:3px;.sinput /*导航区表单文本框样式*/width:100px;height:21px;padding:4px 7px;color:#737272;background:#95e3f3;border:1px solid#787575;border-radius:3px 0 0 3px;.sbtn /*导航区表单搜索按钮样式*/width:60px;height:31px;margin-left:-10px;padding:0 12px;border-

46、radius:0px 3px 3px 0px;border:1px solid#787575;background-color:#4c4b4b;font-size:13px;color:#f3f7fc;/*导航区域样式结束*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*主体部分横向第一栏样式开始*/#main1clear:both;/*不允许两侧有浮动*/margin:2px;height:340px;#main1_leftfloat:left;width:220px;height:340px;background:url(images/board.gif)

47、no-repeat center top;#main1_rightfloat:right;width:656px;#main1_left pmargin:60px 50px;/*内容部分横向第一栏样式结束*/CSS3部分HTML5+CSS3网页设计与制作案例教程网页设计与制作案例教程/*内容部分横向第二栏样式开始*/#main2clear:both;margin:2px;height:196px;#main2_left /*内容部分横向第二栏左侧样式*/width:220px;float:left;/*浮动在左*/#main2_right /*内容部分横向第二栏右侧样式*/float:righ

48、t;/*浮动在右*/width:654px;border:1px#a4db18 solid;border-radius:5px;#main2_left ul /*内容部分横向第二栏左侧列表样式*/margin:0;padding:0;#main2_left ul li /*内容部分横向第二栏左侧列表项样式*/list-style:none;font:13px/1.8 宋体;margin:5px auto;padding:3px;border:1px#ebf811 solid;background:#a4db18;width:85%;border-radius:4px;#main2_left ul li:hover /*鼠标经过内容部分横向第二栏左侧列表项样式*/background:#ebf811;/*内容部分横向第二栏样式结束*/