网页设计 CSS盒子.ppt

1、a,1,CSS布局基础,Css盒子模型 Css块状布局,a,2,Css盒子,CSS盒子是指具备内容(content)、填充(padding)、边框(border)、边界(margin)， 属性的模式。 在CSS中所有的页面元素都可以看做“盒子”，一张网页就是由若干个盒子和盒子嵌套组成的。,a,3,a,4,Css盒子,a,5,a,6,HTML的元素类型,块元素（block） 是作为内容的独特块而显示的元素，它以新行开始和结束。 内联元素（inline） 内联元素没有开始行和结束行，在某一行中逐个出现，没有换行，水平放置在页面中。 ,a,7,Css布局常用属性-display属性,使用该属性可以改

2、变页面元素的值。 None:不显示任何内容 Block：将元素指定为块元素 Inline：将元素指定为内联元素,a,8,Css布局常用属性-position属性,使用该属性可以定位网页元素。 static:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。 relative：相对定位（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。 fixed：将元素按照浏览器窗口的左上角（或右下角）进行固定定位，具体位置由top、bottom、left、right属性联合制定。当用户滚动页面时，内容在此位置固定。 Absolute：绝对定位，将

3、元素定位到网页中的任何区域，具体位置由top、bottom、left、right属性联合制定。,a,9,Css布局常用属性-float属性,用于控制对象的浮动方式。 none:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。 left：左浮动（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。 right：右浮动,a,10,DIV+CSS布局设计思路,1.用div来定义语义结构，放置具体内容； 2.用css来布局div和美化div内部的内容和外部样式。,a,11,Css盒子实例,电子相册 导航条 页面布局,a,12,Css盒子实例

4、电子相册,a,13,a,14,a,15,定义盛放图片的盒子,div.box margin: 10px; border: 1px dotted #0000ff; padding-top:20px; padding-left:20px; height:120px; width: 120px; float:right ,a,16,定义盛放文字的盒子,div.desc text-align: center; font-weight: normal; width: 120px; margin: 2px; ,a,17,Css盒子实例导航条,a,18,导航条的 盒子布局,最外边一个大盒子(ul)，这个盒子与

5、1像素高的背景图片等宽； 里面又有五个小盒子(li)分别装着每一个导航栏， 导航栏这个盒子里面又装着一个稍小的盒子(a)； 这个盒子又装着一个黄色的修饰盒子(a的左边框，这里勉强理解为盒子，因为它不像一般的边框那么细，在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。,a,19,a,20,Css盒子实例布局网页,a,21,a,22,a,23,定义四个盒子,a,24,最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是： body font-family: Arial, Helvetica, sans-serif; font

6、-size: 12px; margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; ,a,25,定义页头盒子,#header height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; ,a,26,定义导航盒子,#nav height: 25px; width: 760px; font-size: 14px; list-style-

7、type: none; #nav li float:left; #nav li a color:#000000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; #nav li a:hover background-color:#006633; color:#FFFFFF; ,a,27,内容盒子,#content height:auto; width: 740px; line-height: 1.5em; padding: 10px; #content p text-indent: 2em; #content h3 font-size: 16px; margin: 10px;,a,28,页脚盒子,#