dreamweavercs6网页设计与制作css基础知识刘敏娜主编.ppt

项目列表 ? 项目列表的编号是通过属性 list-style-ty pe 来修改，无论是在 ul 标记还是 li 标记中都可以。 ? ul{list-style-type:decimal;} ? 可用的属性值： disc,circle,square,,upper -alpha ? Css 还提供了属性 list-style-image ，可以 将项目符号显示为任意的图片。 ? 如下例 项目列表 ? 设置 list-style-type 为 none 的效果（无项 目符号） ? display 属性： display:block; ? li 标记的 float 属性： float:left( 水平显示 各个项目 ) 项目列表几个重要属性 菜单实例 ? 百度导航条 ? 流行的 Tab 菜单 css+div 布局技术 ? div 标记与 span 标记 ? 盒子模型 ? 元素的定位 div 标记与 span 标记 ? div （ division ）是一个区块容器标记， 可以容纳段落、标题、表格等网页元 素。可以把 div/div 中的内容看作 一个独立的对象，用于 css 的控制。 span 标记 ? span 标记也是作为网页中的容器。 ? 区别： span 是一个行内元素，在它的前 后不会换行。 ? Span 标记可以包括在 div 标记中，反之 不成立。 盒子模型 ? 所有页面中的元素都可以看成是一个 盒子，占据着一定的页面空间。 ? 可以通过调整盒子的边框和距离等参 数来调节盒子的位置。 ? 一个盒子模型由 content （内容） ,border （边框） ,padding （间隙） ,margin （间 隔） 4 个部分构成。 ? 盒子的实际宽度是由： content+padding +border+margin 构成。在 css 中 width 和 h eight 是指 width+padding 。 盒子模型 content border ? border 一般用于分离元素， border 的外 围是元素的最外围，因此在计算元素 实际的高度和宽时要将 bordre 计算入内。 ? border 的属性： color,width,style ? style 可取值： none,hidden,dotted,dashed, solid,double,insert 等。 例子： padding ? padding 用于控制 content 与 border 之间的 距离。 ? 可以设置 4 个方向上的值 ? 也可以合并为一个语句 , 方向为从上方 开始顺时针。 margin ? 用于表示元素之间的距离。 ? 如果是行内元素紧邻时，之间的距离 是第一个元素的 margin-right+ 第二个元 素的 margin-left ? 如果不是行内元素：则取 margin- bottom 和 margin-top 两个中的大者 元素的定位 ? Float 定位 ? Position 定位 ? 实例 Float 定位 ? 可以设置为 left,right 或者 none 。 Position 定位 ? 分别取 static,absolute,relative,fixed; ? 取 absolute 时，子块不属于父块，左边 框相对于 body 左边的距离，四个边上 的值可以为绝对的像素，也可以为百 分数 . ? 当值取 relative 时，子块是相对于父块 定位。 ? 例子 ? 给图片签名 ? 文字阴影效果 Css+div 布局方法剖析 ? Css 排版观念 ? 固定宽度且居中的版式 ? 左中右版式 css+div 网页样式与布局 css+div 网页样式与布局 ? css 基本语法 ? css 设置图片格式 ? css 设置网页中的背景 ? css 设置表格与表单的样式 ? css 设置页面和浏览器的元素 ? 用 css 制作实用的菜单 css 基本语法 ? css （ cascading style sheet ），中文名为 层叠样式表，用于控制网页样式并允 许将样式信息与网页内容分离的一种 标志性语言。 ? 引入它是为了使 html 语言能够更好的适 应页面的美工设计。 ? css 文件是纯文本文件。 ? 使用文字处理软件均可编辑。推荐 drea mweaver 软件。 如何编辑 css 使用 css 控制页面 ? 行内样式 ? 内