网页设计与制作教程 教学课件 ppt 作者 刘瑞新第11章.pptVIP

机械工业出版社 网页设计与制作 刘瑞新 吴丰 主编 机械工业出版社 第11章 CSS对列表和表单的控制 11.1 列表控制 11.1.1 列表类型 list-style-type属性主要用于修改列表项的标志类型，例如，在一个无序列表中，列表项的标志是出现在各列表项旁边的圆点，而在有序列表中，标志可能是字母、数字或另外某种符号。 ul { list-style-type: disc; } /*正常模式*/ ul#circle { list-style-type: circle; } /*圆圈模式*/ ul#square { list-style-type: square; } /*正方形模式*/ ul#decimal { list-style-type: decimal; } /*数字模式*/ ul#lower-roman { list-style-type: lower-roman; } /*小写罗马文字模式*/ ul#upper-roman { list-style-type: upper-roman; } /*大写罗马文字模式*/ ul#none { list-style-type: none; } /*无模式*/ 11.1 列表控制 11.1.2 列表项图像 list-style-image属性主要使用图像来替换列表项的标记，当list-style-image属性的属性值为none或者设置的图片路径出错时，list-style-type属性会替代list-style-image属性对列表产生作用。 ul {list-style-image:url(list_bg.jpg);} .img_error {list-style-image:url(error.jpg);} .none {list-style-image:none;} ul lia href=#这里能够正常显示列表图片/a/li /ul ul class=img_error lia href=#这里由于应用了错误的图片URL，导致图片不能正确显示/a/li /ul ul class=none lia href=#这里将列表图片属性设置为none，所以没有图片显示/a/li /ul 11.1 列表控制 11.1.3 列表项位置 list-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词outside（外部）和inside（内部）。使用outside属性值后，列表项标记被放置在文本以外，环绕文本且不根据标记对齐；使用inside属性值后，列表项目标记放置在文本以内，像是插入在列表项内容最前面的行内元素一样。 ul.inside {list-style-position: inside;} /*将列表修饰符定义在列表之内*/ ul.outside {list-style-position: outside;} /*将列表修饰符定义在列表之外*/ li {border:1px solid green;} /*为了便于观察效果，增加边框*/ 11.2 纵向列表模式的导航菜单 应用Web标准进行网页制作时，通常使用ul无序列表标签来构建菜单，其中纵向列表模式的导航菜单又是应用的比较广泛的一种。 11.3 二级纵向列表模式的导航菜单 在实际应用中，虽然CSS样式能够实现二级导航菜单，但是这里并不推荐采用这种方式。其原因在于，CSS样式存在的意义是为页面外在表现服务，而不是为页面行为服务。包含二级导航的菜单需要根据行为显示或隐藏菜单的二级内容，这种显示或隐藏的行为应该使用JavaScript等脚本语言来完成。 11.4 横向列表模式的导航菜单 在保持原有（X）HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置li标签为浮动。 11.5 图文信息列表 在保持原有（X）HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置li标签为浮动。 11.6 表单控制 11.6.1 文本框、文本域和按钮 1．美化文本框、文本域 2．美化按钮 11.6 表单控制 11.6.2 登陆框的制作 在很多网站中都有登陆框的应用，而登录框所包含的元素通常有输入框、密码输入框、验证码输入框、登录按钮和注册按钮等，这些元素是根据网站的实际需求而确定的。 11.7 案例：环保网站首页 11.8 实训：公司首页的布局制作 机械工业出版社