Web界面设计

表单元素的表现：
  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.文本框引导用户输入

< 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.嵌入页面

< iframe  id ="mapifrme"  scrolling ="no"  frameborder ="0"  marginheight ="0"  marginwidth ="0"  width ="330"
height ="216"  src ="" ></ iframe >

  4.各类备注、报错、提示信息
例如：

 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.地图标记：

Code
 1<dl><dt class="dtlong">标记地图：</dt><dd>
 2                <input id="g_mapid" type="hidden"  value="21" />
 3
 4                <input id="g_label" type="text" style="width:100px;" onblur="if(this.value=='') this.value = this.defaultValue" onfocus="if(this.value=='请输入楼盘名') this.value='';" value="请输入楼盘名" />
 5                <input id="g_addr" type="text" style="width:100px;" value="零陵路天钥桥路" />
 6                <input id="btn_enter" class="button" type="button" onclick="setSPaddress();" value="标记地图"/>
 7                <p class="msg">规范的输入格式为：道路门牌号码、交叉路口</p>
 8                <iframe id="mapifrme" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" width="330" height="216" src=""></iframe>
 9                </dd></dl>
10
11function setSPaddress()
12    {
13        var url ="";
14        var _mapid = document.getElementById("g_mapid").value;
15        var _label = document.getElementById("g_label").value;
16        var _addr = document.getElementById("g_addr").value;
17        url = "http://www.ddmap.com/mstmap50007/g4blog_map.jsp?g_mapid="+_mapid+"&g_label="+_label+"&g_addr="+_addr;
18        document.getElementById("mapifrme").src = url;
19    }

   6.界面流程图

流程演示：图形化的展示，更直观有效的告诉用户操作的简单快捷性；
  
是我做一个页面的时候想到的，第一次设计这样的页面。

转载于:https://www.cnblogs.com/u_xiaomo/archive/2009/10/14/1582901.html