网页设计列表元素表.pptVIP

第4章 CSS网站元素设计 www.xiaolong520.co m 版权所有 1 复习回顾 制作导航通常使用的标签是 ，列表项内容用 .使用的样式属性是 ：list-style:none; 版权所有 2 4.3 使用列表元素 列表在网页设计中使用的频率非常高：整齐、直观，如新 闻网站、电子商务网站等 版权所有 3 列表样式属性： list-style:设置列表的所有属性选项 语法： list-style : list-style-image ：none | url ( url ) list-style-position ：outside | inside list-style-type ： disc : 默认值。实心圆 circle : 空心圆 square :实心方块 decimal : 阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母 none : 不使用项目符号 版权所有 4 使用图片自定义项目符号： 直接用图片代替项目符号： 利用背景来制作精确定位的项目符号 Ul List-style-image:url(图片路径）； 控制项目符号距文字的距 离可用属性： text-indent 1、取消项目符号：ullist-style-type:none; 2、对每个列表项定义不重复背景，且要求文字不能压住背景 li background-image:url(images/flower_bullet.gif); background-repeat:no-repeat; background-position:0px 3px; padding-left:15px; 版权所有 5 使列表变为段落 display属性： 标签div，a，span的默认显示方式是否相同？ 列表元素转换为一行显示：强制转换显示模式： Display：inline与float的比较: display:inline;适合上下文关联 float:left(right);更适合对象的布局模式 Block None inline inline-block list-item ul display:inline; ul li display:inline; 版权所有 6 列表缩进排版： text-indent：用于控制段落文本的首行缩进 ul list-style-type:none; padding-left:30px; ul li margin:5px; text-indent:-30px; 综合案例 版权所有 7 4.4 表单设计 万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需 要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交 互的一个入口。只要有交互出现的地方，就会有表单。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面， 用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于 处理浏览者提交的信息。 版权所有 8 标签名称特别属性说明 文件上传框（input type=”file”） accept设定接收内容格式（见Form标签） 图片提交框（input type=”image”） align设置图片旁边文字的对齐方式，有 如下值可以设置：Left、right、top、 texttop、middle、Absmiddle、baseline 、bottom、absbottom Alt设置图片替换文字，供显示不了图 片的情况下使用 Src设置图片框中图片地址 单选框（input type=radio）Checked设置当前单选框是否被选中 列表框（select/option)selected设置某项是否被选中 按钮（input type=button/submit/reset) 提交表单的值 多选择框（input type=checkbox） Checked设置当前多选框是否被选中 文本输入框（input type=”text”） maxlength设置文本输入框最大容纳字符数 Readonly设置当前文本输入框是否为只读 版权所有 9 改变输入框及文本域样式 改变边框样式、颜色、背景颜色等： 圆角输入框设计要点： Border:border-color border-style border-width 1、圆角图片作为背景 2、没有边框 3、调整输入文本位置 版权所有 10 其他样式设计： 改变下拉列表样式：分清类别 改变按钮样式：背景图片与边框、缩进 综合案例 版权所有 11 表单设计的原则 明确的输入标示 验证数据及减少提交次数 提供智能的表单 减少用户点击键盘的次数 友好的提示 版权所有 12 4.5.1 应用字体样式 color Font-family:可以设置多个名称，浏览器则按照先后顺序依次使 用可用字体。 font-size:xx-small | 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 | overline | line-through text-transform : none | capitalize | uppercase | lowercase font-variant : normal | small-caps 百分数 | 由浮点数字 和单位标识符组成的 长度值，不可为负值 版权所有 13 4.5.2 应用段落样式 line-height : normal | length letter-spacing : normal | length word-spacing : normal | length text-indent : length text-overflow : 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-w