《网页设计列表元素表单和字体》由会员分享，可在线阅读，更多相关《网页设计列表元素表单和字体（15页珍藏版）》请在金锄头文库上搜索。
1、第4章 CSS网站元素设计www.xiaolong520.co m 版权所有1复习回顾制作导航通常使用的标签是 ，列表项内容用 .使用的样式属性是 ：list-style:none; 版权所有24.3 使用列表元素列表在网页设计中使用的频率非常高：整齐、直观，如新 闻网站、电子商务网站等 版权所有3列表样式属性：list-style:设置列表的所有属性选项语法：list-style : list-style-image ：none | url ( url ) list-style-position ：outside | inside list-style-type ： disc : 默认值。实
2、心圆 circle : 空心圆 square :实心方块 decimal : 阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母 none : 不使用项目符号 版权所有4使用图片自定义项目符号：直接用图片代替项目符号：利用背景来制作精确定位的项目符号UlList-style-image:url(图片路径）；控制项目符号距文字的距 离可用属性： text-indent1、取消项目符号：ullist-style-type:none;2、对每个列表项定义不重复背景，且要求文字不能压
3、住背景 libackground-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);更适合对象的布局模式BlockNoneinlineinline-blocklist
4、-itemul display:inline; ul li display:inline; 版权所有6列表缩进排版：text-indent：用于控制段落文本的首行缩进ul list-style-type:none; padding-left:30px; ul li margin:5px; text-indent:-30px; 综合案例 版权所有74.4 表单设计万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需 要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交 互的一个入口。只要有交互出现的地方，就会有表单。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面， 用于
5、填写浏览者进行交互的信息；另一个是服务端的应用程序，用于 处理浏览者提交的信息。 版权所有8标签名称特别属性说明文件上传框（input type=”file”）accept设定接收内容格式（见Form标签）图片提交框（input type=”image”）align设置图片旁边文字的对齐方式，有 如下值可以设置：Left、right、top、 texttop、middle、Absmiddle、baseline 、bottom、absbottomAlt设置图片替换文字，供显示不了图 片的情况下使用 Src设置图片框中图片地址 单选框（input type=radio）Checked设置当前单选框
6、是否被选中列表框（select/option)selected设置某项是否被选中按钮（input type=button/submit/reset)提交表单的值多选择框（input type=checkbox）Checked设置当前多选框是否被选中文本输入框（input type=”text”）maxlength设置文本输入框最大容纳字符数 Readonly设置当前文本输入框是否为只读 版权所有9改变输入框及文本域样式改变边框样式、颜色、背景颜色等：圆角输入框设计要点：Border:border-colorborder-styleborder-width1、圆角图片作为背景2、没有边框3、调整
7、输入文本位置 版权所有10其他样式设计：改变下拉列表样式：分清类别改变按钮样式：背景图片与边框、缩进综合案例 版权所有11表单设计的原则明确的输入标示验证数据及减少提交次数提供智能的表单减少用户点击键盘的次数友好的提示 版权所有124.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
8、 | 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 |
9、small-caps 百分数 | 由浮点数字 和单位标识符组成的 长度值，不可为负值 版权所有134.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-wrap : normal | break-word 综合案例 版权所有14总结 列表样式 表单样式 字体及段落样式设置 版权所有15
