网页设计 CSS盒子ppt课件.ppt

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