网页设计-CSS盒子.pptVIP

精选完整ppt课件*CSS布局基础Css盒子模型Css块状布局精选完整ppt课件*Css盒子CSS盒子是指具备内容(content)、填充(padding)、边框(border)、边界(margin),属性的模式。在CSS中所有的页面元素都可以看做“盒子”,一张网页就是由若干个盒子和盒子嵌套组成的。精选完整ppt课件*精选完整ppt课件*Css盒子精选完整ppt课件*精选完整ppt课件*HTML的元素类型块元素（block）是作为内容的独特块而显示的元素,它以新行开始和结束。pliuldivtablebrh1…h6内联元素（inline）内联元素没有开始行和结束行,在某一行中逐个出现,没有换行,水平放置在页面中。imgainput精选完整ppt课件*Css布局常用属性---display属性使用该属性可以改变页面元素的值。None:不显示任何内容Block:将元素指定为块元素Inline:将元素指定为内联元素精选完整ppt课件*Css布局常用属性---position属性使用该属性可以定位网页元素。static:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。relative:相对定位（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。fixed:将元素按照浏览器窗口的左上角（或右下角）进行固定定位，具体位置由top、bottom、left、right属性联合制定。当用户滚动页面时，内容在此位置固定。Absolute:绝对定位，将元素定位到网页中的任何区域，具体位置由top、bottom、left、right属性联合制定。精选完整ppt课件*Css布局常用属性---float属性用于控制对象的浮动方式。none:静态定位，定位属性的默认值，元素按照html语法规则的自然属性定位。left:左浮动（先对于页面的自然定位而言），具体位置由top、bottom、left、right属性联合制定。right:右浮动精选完整ppt课件*DIV+CSS布局设计思路1.用div来定义语义结构,放置具体内容；2.用css来布局div和美化div内部的内容和外部样式。精选完整ppt课件*Css盒子实例电子相册导航条页面布局精选完整ppt课件*Css盒子实例—电子相册精选完整ppt课件*精选完整ppt课件*精选完整ppt课件*定义盛放图片的盒子div.box{margin:10px;border:1pxdotted#0000ff;padding-top:20px;padding-left:20px;height:120px;width:120px;float:right} 精选完整ppt课件*定义盛放文字的盒子div.desc{text-align:center;font-weight:normal;width:120px;margin:2px;}精选完整ppt课件*Css盒子实例—导航条精选完整ppt课件*导航条的盒子布局最外边一个大盒子(ul),这个盒子与1像素高的背景图片等宽；里面又有五个小盒子(li)分别装着每一个导航栏,导航栏这个盒子里面又装着一个稍小的盒子(a)；这个盒子又装着一个黄色的修饰盒子(a的左边框,这里勉强理解为盒子,因为它不像一般的边框那么细,在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。

精选完整ppt课件*精选完整ppt课件*Css盒子实例—布局网页精选完整ppt课件*精选完整ppt课件*