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

版权所有 计算机网络基础 第4章 CSS网站元素设计 复习回顾 4.3 使用列表元素 列表样式属性： 使用图片自定义项目符号： 使列表变为段落 列表缩进排版： 4.4 表单设计 改变输入框及文本域样式 其他样式设计： 表单设计的原则 4.5.1 应用字体样式 4.5.2 应用段落样式 总结 列表样式 表单样式 字体及段落样式设置 * * 制作导航通常使用的标签是ul/ul，列表项内容用li/li.使用的样式属性是：list-style:none; 列表在网页设计中使用的频率非常高：整齐、直观，如新闻网站、电子商务网站等 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 :　 不使用项目符号 直接用图片代替项目符号： 利用背景来制作精确定位的项目符号 Ul{ List-style-image:url(图片路径）； } 控制项目符号距文字的距离可用属性： text-indent 1、取消项目符号：ul{list-style-type:none;} 2、对每个列表项定义不重复背景，且要求文字不能压住背景 li{ background-image:url(images/flower_bullet.gif); background-repeat:no-repeat; background-position:0px 3px; padding-left:15px; } 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; } text-indent：用于控制段落文本的首行缩进 ul{ list-style-type:none; padding-left:30px; } ul li{ margin:5px; text-indent:-30px; } 综合案例 万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交互的一个入口。只要有交互出现的地方，就会有表单。 一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。 设置某项是否被选中 selected 列表框（select/option) 提交表单的值 按钮（input type=button/submit/reset) 设置当前文本输入框是否为只读 Readonly 设置文本输入框最大容纳字符数 maxlength 文本输入框（input type=”text”） 设置当前多选框是否被选中 Checked 多选择框（input type=checkbox） 设置当前单选框是否被选中 Checked 单选框（input type=radio） 设置图片框中图片地址 Src 设置图片替换文字，供显示不了图片的情况下使用 Alt 设置图片旁边文字的对齐方式，有如下值可以设置：Left、right、top、texttop、middle、Absmiddle、baseline、bottom、absbottom align 图片提交框（input type=”image”） 设定接收内容格式（见Form标签） accept 文件上传框（input type=”file”） 说明 特别属性 标签名称 改变边框样式、颜色、背景颜色等： 圆角输入框设计要点： Border:border-color border-style