Web界面设计
表单元素的表现:
1.用户与表单进行交互时的设置鼠标进行不同样式切换
例如:
流程演示:图形化的展示,更直观有效的告诉用户操作的简单快捷性;
是我做一个页面的时候想到的,第一次设计这样的页面。
1.用户与表单进行交互时的设置鼠标进行不同样式切换
<input id="txt_title" onfocus="this.style.background='#E6EDFD none repeat scroll 0 0'"
onblur="this.style.background='1px solid #FFF;'" type="text" maxlength="30" />
2.文本框引导用户输入onblur="this.style.background='1px solid #FFF;'" type="text" maxlength="30" />
<input id="g_label" type="text" style="width:100px;" onblur="if(this.value=='')
this.value = this.defaultValue" onfocus="if(this.value=='请输入楼盘名') this.value='';" value="请输入楼盘名" />
3.嵌入页面this.value = this.defaultValue" onfocus="if(this.value=='请输入楼盘名') this.value='';" value="请输入楼盘名" />
<iframe id="mapifrme" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" width="330"
height="216" src=""></iframe>
4.各类备注、报错、提示信息height="216" src=""></iframe>
例如:
1<div id="CloseDiv">
2 <span><a></a></span>
3 <font color="red">请详细填写基本资料,有利于别人更好地了解商铺!</font>
4 <a title="关闭提示" style="float:right;color: #FF8800;
5 display: block;" onclick="hiddenDiv();" href="javascript:;">关闭提示</a>
6
7 </div>
8 <!--反馈信息-->
9 <div id="lbl_show">
10 <div class="SaveLayer hidden"><span></span>恭喜,操作成功!</div>
11 </div>
12/*提示,是由一个操作所引导的提示页面,并独立成提示区域,通常在页面的顶部显示。*/
13#CloseDiv span a
14{
15 color: #FF8800;
16 display: block;
17 height: 28px;
18}
19#CloseDiv,.msg
20{
21 background: #FFFFCC none repeat scroll 0 0;
22 border: 1px dashed #FFCC33;
23 height: 28px;
24 line-height: 28px;
25 margin: 0 0 8px;
26 padding: 0 8px;
27 text-align: left;
28}
29#CloseDiv a
30{
31 color: #0055CC;
32 font-size: 13px;
33}
34#CloseDiv span
35{
36 width: 28px;
37 background:transparent url(../images/fankui.gif) no-repeat -116px -39px;
38 float: left;
39}
40/*反馈 操作成功,或者失败*/
41.Wrong span
42{
43 color: #FF8800;
44 display: block;
45 height: 28px;
46 float:left;
47 padding:0 0 0 28px;
48 background:transparent url(../images/fankui.gif) no-repeat scroll -116px -8px;
49}
50.SaveLayer,.Wrong{
51 border:1px dashed #DDDDDD;
52 font-weight:bold;
53 height:28px;
54 margin:6px 0;padding: 0 8px;
55 line-height:28px;
56 text-align:left;
57}
58.SaveLayer span
59{
60 color: #FF8800;
61 display: block;
62 height: 28px;
63 float:left;
64 padding:0 0 0 28px;
65 background:transparent url(../images/fankui.gif) no-repeat scroll -116px -104px;
66}
5.地图标记:2 <span><a></a></span>
3 <font color="red">请详细填写基本资料,有利于别人更好地了解商铺!</font>
4 <a title="关闭提示" style="float:right;color: #FF8800;
5 display: block;" onclick="hiddenDiv();" href="javascript:;">关闭提示</a>
6
7 </div>
8 <!--反馈信息-->
9 <div id="lbl_show">
10 <div class="SaveLayer hidden"><span></span>恭喜,操作成功!</div>
11 </div>
12/*提示,是由一个操作所引导的提示页面,并独立成提示区域,通常在页面的顶部显示。*/
13#CloseDiv span a
14{
15 color: #FF8800;
16 display: block;
17 height: 28px;
18}
19#CloseDiv,.msg
20{
21 background: #FFFFCC none repeat scroll 0 0;
22 border: 1px dashed #FFCC33;
23 height: 28px;
24 line-height: 28px;
25 margin: 0 0 8px;
26 padding: 0 8px;
27 text-align: left;
28}
29#CloseDiv a
30{
31 color: #0055CC;
32 font-size: 13px;
33}
34#CloseDiv span
35{
36 width: 28px;
37 background:transparent url(../images/fankui.gif) no-repeat -116px -39px;
38 float: left;
39}
40/*反馈 操作成功,或者失败*/
41.Wrong span
42{
43 color: #FF8800;
44 display: block;
45 height: 28px;
46 float:left;
47 padding:0 0 0 28px;
48 background:transparent url(../images/fankui.gif) no-repeat scroll -116px -8px;
49}
50.SaveLayer,.Wrong{
51 border:1px dashed #DDDDDD;
52 font-weight:bold;
53 height:28px;
54 margin:6px 0;padding: 0 8px;
55 line-height:28px;
56 text-align:left;
57}
58.SaveLayer span
59{
60 color: #FF8800;
61 display: block;
62 height: 28px;
63 float:left;
64 padding:0 0 0 28px;
65 background:transparent url(../images/fankui.gif) no-repeat scroll -116px -104px;
66}
Code
6.界面流程图流程演示:图形化的展示,更直观有效的告诉用户操作的简单快捷性;
是我做一个页面的时候想到的,第一次设计这样的页面。