网页设计列表元素表单和字体.ppt

《网页设计列表元素表单和字体.ppt》由会员分享，可在线阅读，更多相关《网页设计列表元素表单和字体.ppt（15页珍藏版）》请在装配图网上搜索。

1、第 4章 CSS网站元素设计 版权所有 2 复习回顾 制作导航通常使用的标签是，列表项内容用 .使用的样式属性是： list-style:none; 版权所有 3 4.3 使用列表元素 列表在网页设计中使用的频率非常高：整齐、直观，如新 闻网站、电子商务网站等 版权所有 4 列表样式属性： list-style:设置列表的所有属性选项 语法： list-style : list-style-image ： none | url ( url ) list-style-position ： outside | inside list-style-type ： disc : 默认值 。 实心圆 ci

2、rcle : 空心圆 square :实心方块 decimal : 阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母 none : 不使用项目符号 版权所有 5 使用图片自定义项目符号： 直接用图片代替项目符号： 利用背景来制作精确定位的项目符号 Ul List-style-image:url(图片路径）； 控制项目符号距文字的距 离可用属性： text-indent 1、取消项目符号： ullist-style-type:none; 2、对每个列表项定义不重复背景，且要求

3、文字不能压住背景 li background-image:url(images/flower_bullet.gif); background-repeat:no-repeat; background-position:0px 3px; padding-left:15px; 版权所有 6 使列表变为段落 display属性： 标签 div， a， span的默认显示方式是否相同？ 列表元素转换为一行显示：强制转换显示模式： Display： inline与 float的比较 : display:inline;适合上下文关联 float:left(right);更适合对象的布局模式 Block N

4、one inline inline-block list-item ul display:inline; ul li display:inline; 版权所有 7 列表缩进排版： text-indent：用于控制段落文本的首行缩进 ul list-style-type:none; padding-left:30px; ul li margin:5px; text-indent:-30px; 综合案例 版权所有 8 4.4 表单设计 万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需 要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交 互的一个入口。只要有交互出现的地方，就会有表

5、单。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面， 用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于 处理浏览者提交的信息。 版权所有 9 标签名称 特别属性 说明 文件上传框（ input type=”file”） accept 设定接收内容格式（见 Form标签） 图片提交框（ input type=”image”） align 设置图片旁边文字的对齐方式，有如 下值可以设置： Left、 right、 top、 texttop、 middle、 Absmiddle、 baseline、 bottom、 absbottom Alt 设置图片替换文字，供显示不了图片

6、 的情况下使用 Src 设置图片框中图片地址 单选框（ input type=radio） Checked 设置当前单选框是否被选中 列表框（ select/option) selected 设置某项是否被选中 按钮（ input type=button/submit/re set) 提交表单的值 多选择框（ input type=checkbox） Checked 设置当前多选框是否被选中 文本输入框（ input type=”text”） maxlength 设置文本输入框最大容纳字符数 Readonly 设置当前文本输入框是否为只读 版权所有 10 改变输入框及文本域样式 改变边框样式、

7、颜色、背景颜色等： 圆角输入框设计要点： Border:border-color border-style border-width 1、圆角图片作为背景 2、没有边框 3、调整输入文本位置 版权所有 11 其他样式设计： 改变下拉列表样式：分清类别 改变按钮样式：背景图片与边框、缩进 综合案例 版权所有 12 表单设计的原则 明确的输入标示 验证数据及减少提交次数 提供智能的表单 减少用户点击键盘的次数 友好的提示 版权所有 13 4.5.1 应用字体样式 color Font-family:可以设置多个名称，浏览器则按照先后顺序依次使 用可用字体。 font-size:xx-small |

8、 x-small | small | medium | large | x- large | xx-large | larger | smaller | length font-size-adjust:none | number font-style:normal | italic | oblique font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 text-decoration : none | underline | blink | ov

9、erline | line-through text-transform : none | capitalize | uppercase | lowercase font-variant : normal | small-caps 百分数 | 由浮点数字 和单位标识符组成的 长度值，不可为负值 版权所有 14 4.5.2 应用段落样式 line-height : normal | length letter-spacing : normal | length word-spacing : normal | length text-indent : length text-overflow :

10、clip | ellipsis vertical-align : auto | baseline | sub | super | top | text- top | middle | bottom | text-bottom | length text-align : left | right | center | justify layout-flow : horizontal | vertical-ideographic word-break : normal | break-all | keep-all white-space : normal | pre | nowrap word-wrap : normal | break-word 综合案例 版权所有 15 总结 列表样式 表单样式 字体及段落样式设置