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

第4章CSS网站元素设计,版权所有,2,复习回顾,制作导航通常使用的标签是，列表项内容用.使用的样式属性是：list-style:none;,版权所有,3,4.3使用列表元素,列表在网页设计中使用的频率非常高：整齐、直观，如新闻网站、电子商务网站等,版权所有,4,列表样式属性：,list-style:设置列表的所有属性选项语法：,list-style:list-style-image：none|url(url)list-style-position：outside|insidelist-style-type：,disc:默认值。实心圆circle:空心圆square:实心方块decimal:阿拉伯数字lower-roman:小写罗马数字upper-roman:大写罗马数字lower-alpha:小写英文字母upper-alpha:大写英文字母none:不使用项目符号,版权所有,5,使用图片自定义项目符号：,直接用图片代替项目符号：利用背景来制作精确定位的项目符号,UlList-style-image:url(图片路径）；,控制项目符号距文字的距离可用属性：text-indent,1、取消项目符号：ullist-style-type:none;2、对每个列表项定义不重复背景，且要求文字不能压住背景libackground-image:url(images/flower_bullet.gif);background-repeat:no-repeat;background-position:0px3px;padding-left:15px;,版权所有,6,使列表变为段落,display属性：标签div，a，span的默认显示方式是否相同？列表元素转换为一行显示：强制转换显示模式：Display：inline与float的比较:display:inline;适合上下文关联float:left(right);更适合对象的布局模式,BlockNoneinlineinline-blocklist-item,uldisplay:inline;ullidisplay:inline;,版权所有,7,列表缩进排版：,text-indent：用于控制段落文本的首行缩进ullist-style-type:none;padding-left:30px;ullimargin:5px;text-indent:-30px;,综合案例,版权所有,8,4.4表单设计,万维网向浏览者传递信息，使浏览者非常方便地从互联网取得需要的信息。在交互式的网络中，表单是一个不可缺少的元素，它是交互的一个入口。只要有交互出现的地方，就会有表单。一个完整的交互表单由两部分组成：一是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务端的应用程序，用于处理浏览者提交的信息。,版权所有,9,版权所有,10,改变输入框及文本域样式,改变边框样式、颜色、背景颜色等：圆角输入框设计要点：,Border:border-colorborder-styleborder-width,1、圆角图片作为背景2、没有边框3、调整输入文本位置,版权所有,11,其他样式设计：,改变下拉列表样式：分清类别改变按钮样式：背景图片与边框、缩进,综合案例,版权所有,12,表单设计的原则,明确的输入标示验证数据及减少提交次数提供智能的表单减少用户点击键盘的次数友好的提示,版权所有,13,4.5.1应用字体样式,colorFont-family:可以设置多个名称，浏览器则按照先后顺序依次使用可用字体。font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthfont-size-adjust:none|numberfont-style:normal|italic|obliquefont-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900text-decoration:none|underline|blink|overline|line-throughtext-transform:none|capitalize|uppercase|lowercasefont-variant:normal|small-caps,百分数|由浮点数字和单位标识符组成的长度值，不可为负值,版权所有,14,4.5.2应用段落样式,line-height:normal|lengthletter-spacing:normal|lengthword-spacing:normal|lengthtext-indent:lengthtext-overflow:clip|ellipsisvertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|lengthtext-align:left|right|center|justifylayout-flow:horizontal|vertical-ideographicword-break:n