网页设计列表元素表.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,版权所有,*,*,第,4,章,CSS,网站元素设计,复习回顾,制作导航通常使用的标签是,，列表项内容用,.,使用的样式属性是：,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,、,texttopmiddle,、,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.51,应用字体样式,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-wrap,:normal,|,break-word,综合案例,版权所有,14,总结,列表样式,表单样式,字体及段落样式设置,版权所有,15,宏丰棋牌 鲜于翱憹,版权所有,16,