网页设计 CSS盒子PPT课件

.,1,CSS布局基础,Css盒子模型Css块状布局,.,2,Css盒子,CSS盒子是指具备内容(content)、填充(padding)、边框(border)、边界(margin)，属性的模式。在CSS中所有的页面元素都可以看做“盒子”，一张网页就是由若干个盒子和盒子嵌套组成的。,.,3,.,4,Css盒子,.,5,.,6,HTML的元素类型,块元素（block）是作为内容的独特块而显示的元素，它以新行开始和结束。内联元素（inline）内联元素没有开始行和结束行，在某一行中逐个出现，没有换行，水平放置在页面中。,.,7,Css布局常用属性-display属性,使用该属性可以改变页面元素的值。None:不显示任何内容Block：将元素指定为块元素Inline：将元素指定为内联元素,.,8,Css布局常用属性-position属性,使用该属性可以定位网页元素。static:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。relative：相对定位（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。fixed：将元素按照浏览器窗口的左上角（或右下角）进行固定定位，具体位置由top、bottom、left、right属性联合制定。当用户滚动页面时，内容在此位置固定。Absolute：绝对定位，将元素定位到网页中的任何区域，具体位置由top、bottom、left、right属性联合制定。,.,9,Css布局常用属性-float属性,用于控制对象的浮动方式。none:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。left：左浮动（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。right：右浮动,.,10,DIV+CSS布局设计思路,1.用div来定义语义结构，放置具体内容；2.用css来布局div和美化div内部的内容和外部样式。,.,11,Css盒子实例,电子相册导航条页面布局,.,12,Css盒子实例电子相册,.,13,.,14,.,15,定义盛放图片的盒子,div.boxmargin:10px;border:1pxdotted#0000ff;padding-top:20px;padding-left:20px;height:120px;width:120px;float:right,.,16,定义盛放文字的盒子,div.desctext-align:center;font-weight:normal;width:120px;margin:2px;,.,17,Css盒子实例导航条,.,18,导航条的盒子布局,最外边一个大盒子(ul)，这个盒子与1像素高的背景图片等宽；里面又有五个小盒子(li)分别装着每一个导航栏，导航栏这个盒子里面又装着一个稍小的盒子(a)；这个盒子又装着一个黄色的修饰盒子(a的左边框，这里勉强理解为盒子，因为它不像一般的边框那么细，在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。,.,19,.,20,Css盒子实例布局网页,.,21,.,22,.,23,定义四个盒子,.,24,最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并重定义其宽度为760像素，同时加上边框，那么它的样式是：bodyfont-family:Arial,Helvetica,sans-serif;font-size:12px;margin:0pxauto;height:auto;width:760px;border:1pxsolid#006633;,.,25,定义页头盒子,#headerheight:100px;width:760px;background-image:url(headPic.gif);background-repeat:no-repeat;margin:0px0px3px0px;,.,26,定义导航盒子,#navheight:25px;width:760px;font-size:14px;list-style-type:none;#navlifloat:left;#navliacolor:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color:#009966;margin-left:2px;#navlia:hoverbackground-color:#006633;color:#FFFFFF;,.,27,内容盒子,#contentheight:auto;width:740px;line-height:1.5em;padding:10px;#contentptext-indent:2em;#contenth3font-size:16px;margin:10px;,.,28,