一份不错的 asp.net 界面样式

  去年年底应一个朋友的要求，花了点时间从原来的项目中抽取了一份界面样式。

  登录样式代码： 

View Code

  1 /*--------------------------------------------------------------
  2 /*     All Rights Reserved , Copyright (C) 2009 , CreaSoft , Ltd. 
  3 /*--------------------------------------------------------------
  4 
  5 <remarks>
  6 /* 头部
  7 /* Head
  8 /* 
  9 /* 修改纪录
 10 /* 
 11 /*版本：1.0 2009.09.29    LiangMingMing   创建代码
 12 /*
 13 /* 版本：1.0
 14 /* <author>
 15 /*    <name>LiangMingMing</name>
 16 /*        <date>2009.09.29</date>
 17 /*</author> 
 18 /* </remarks>*/
 19 
 20 /*图片集成*/
 21 .ImgJ1{background-image:url(../Images/Login/标签.gif); background-repeat:no-repeat; background-position:0px 0px;}
 22 .ImgJ2,.SmbBtn{background-image:url(../Images/Login/内容.gif); background-repeat:no-repeat; background-position:0px 0px;}
 23 
 24 /*整体框架*/
 25 .BODYFORM{vertical-align:middle; text-align:center; margin:auto;}
 26 #DIVFORM { width:960px; height:724px; vertical-align:middle; text-align:center;  margin:auto;}
 27 
 28 /*头部*/
 29 #DIVHEAD{width:100%;height:50px;line-height:0;}
 30 #DIVHEADLEFT {
 31  width:50%; /*设定宽度*/
 32  height:50px;
 33  text-align:left; /*文字左对齐*/
 34  vertical-align:middle ;
 35  float:left; /*浮动居左*/
 36  clear:left; /*不允许左侧存在浮动*/
 37  /*overflow:hidden*/ /*超出宽度部分隐藏*/
 38 }
 39 #DIVHEADRIGHT 
 40 {
 41  font-size:12px;
 42  font-family:宋体;
 43  color:Black ;
 44  width:49%;
 45  height:50px;
 46  text-align:right;
 47  vertical-align:middle    ;
 48  float:right; /*浮动居右*/
 49  clear:right; /*不允许右侧存在浮动*/
 50  /*overflow:hidden*/ 
 51 }
 52 .DIVCOMPANY{background-image:url(../Images/Login/标识.jpg); margin-top:18px; width:162px; height:36px; text-align:left; vertical-align:middle ; float:left; /*浮动居右*/ clear:left; /*不允许右侧存在浮动*/ }
 53 .DIVCOMPANYEXPLAIN{margin-top:18px;text-align:left; vertical-align:middle ; float:left; /*浮动居左*/  width:260px; height:36px; background-position:0px -192px;}
 54 #DIVHEADRIGHTPAGE{margin-top:28px;width:260px; width:300px!important; display:block; height:20px; text-align:left; vertical-align:bottom  ; float:right; /*浮动居右*/ clear:left; /*不允许右侧存在浮动*/ }
 55 #DIVHEADRIGHTPAGE ul {list-style:none;margin:0px;}
 56 #DIVHEADRIGHTPAGE ul li a:link,#DIVHEADRIGHTPAGE ul li a:visited {font-size:12px;color:#666 ;TEXT-DECORATION:none;}
 57 #DIVHEADRIGHTPAGE ul li a:hover{ color:Red}
 58 #DIVHEADRIGHTPAGE ul li {float:right;margin:0 1px;display:block;line-height:28px}
 59 #DIVHEADRIGHTPAGE ul { clear:both  ; list-style:none;margin:0px;}
 60 #DIVHEADRIGHTPAGE ul li {float:left; margin:0 2px;display:block;line-height:28px}
 61 
 62 /*主体框*/
 63 
 64 #DIVMDI{ width :100% ; height:486px;background-image:url(../Images/Login/背景.gif); text-align:left; margin:0;}      /*背景*/
 65 #DIVMDISUM{height:340px; width:655px;margin-left :255px; margin-top:45px;  }   
 66 #DIVMDILABAL{height:305px; width:240px;margin-left :-40px!important; margin-top:65px!important;margin-left:0px; margin-top:20px;display:block;   float:left; /*浮动居左*/ clear:left ;}   
 67 /*标签*/
 68 #DIVMDILABAL ul li.l1 { display:block;width:240px;}
 69 #DIVMDILABAL ul li.l2 { display:block;width:240px;}
 70 #DIVMDILABAL ul li.l3 { display:block;width:240px;}
 71   /*默认*/
 72 #DIVMDILABAL ul {list-style:none;margin:0px;}
 73 .DIVMDILABAL_UL_LI1{display:block; width:240px;height:103px;background-position:0px 0px;}
 74 .DIVMDILABAL_UL_LI2{display:block; width:240px;height:102px;background-position:0px -103px;}
 75 .DIVMDILABAL_UL_LI3{display:block; width:240px;height:102px;background-position:0px -203px;}
 76    /*移动焦点时*/
 77 #DIVMDILABAL ul {list-style:none;margin:0px;}
 78 .DIVMDILABAL_UL_LI1:hover{display:block; width:240px;height:103px;background-position:-256px 0px;}
 79 .DIVMDILABAL_UL_LI2:hover{display:block; width:240px;height:102px;background-position:-256px -103px;}
 80 .DIVMDILABAL_UL_LI3:hover{ display:block;width:240px;height:102px;background-position:-256px -203px;}
 81   /*选中*/
 82 .DIVMDILABAL_UL_LI1_Select{display:block; width:240px;height:103px;background-position:-512px 0px;}
 83 .DIVMDILABAL_UL_LI2_Select{display:block; width:240px;height:102px;background-position:-512px -103px;}
 84 .DIVMDILABAL_UL_LI3_Select{ display:block;width:240px;height:102px;background-position:-512px -203px;}
 85 /*切换内容*/
 86 #DIVCONECT{text-align:center ; vertical-align:middle ; float:right; /*浮动居左*/ width :415px; height:340;}
 87 #DIVLOGO{margin-top:60px!important;margin-top:18px;display:block;  width :380px; height:50px;}
 88 #DIVLOGIN{ width :380px; height:255px;}
 89 .TTABLE_LOGIN{font-size:12px; font-family:宋体; border:0; margin:0; padding:0;}
 90 .TTABLE_LOGIN TR TD.t1{ width:50px; height:40px;text-align:center ; vertical-align:middle;}
 91 .TTABLE_LOGIN TR TD.t2{ height:40px;text-align:center; vertical-align:middle;}
 92 .TTABLE_LOGIN TR TD.t3{ width:100px; height:40px;text-align:left ; vertical-align:middle;}
 93 .TTABLE_LOGIN TR TD.t4{text-align:left;  height:40px;vertical-align:middle;}
 94 .TTABLE_LOGIN TR TD.t5{text-align:center;  height:30px;vertical-align:middle; color:Red ;}
 95 .TTABLE_LOGIN TR TD.t6{text-align:left;  height:30px;vertical-align:middle; }
 96 .TEXTBOX_LOGIN{font-size: 12px;border:1px solid #666666;background:#F1FAFF;    height: 30px; width:200px;}
 97 
 98 /*按钮样式*/
 99 .BUTTON_LOGIN{border:none; width:86px; height:34px;}
100 
101 /*文本框样式*/
102                 /*OA*/
103                 .TabOn_OA_Ipt{background:#F1FAFF;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
104                 .TabOn_OA_IptOnF{background:#FFFFD8;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
105                 
106                 /*人事*/
107                 .TabOn_ICM_Ipt{background:#F1FFF7;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
108                 .TabOn_ICM_IptOnF{background:#FFFFD8;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
109                 
110                 /*企业门户*/
111                 .TabOn_IN_Ipt{background-color:#FFF6F6;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
112                 .TabOn_IN_IptOnF{background:#FFFFD8;font-size: 18px;border: 1px solid #666666;    height: 30px; width:200px; vertical-align:middle;}
113                 
114 /*登录标题*/
115 .TabOn_OA_LgBx_Name{ background-position:-384px 0px; width:350; height:30px; margin-left:0;}
116 .TabOn_ICM_LgBx_Name{ background-position:-384px -64px; width:350; height:30px; margin-left:0;}
117 .TabOn_IN_LgBx_Name{ background-position:-384px -128px; width:350; height:30px; margin-left:0;}
118 
119 /*版本*/
120 .DDL_VISION{ text-align:center ; vertical-align:middle;}
121 /*登录框的链接*/
122 .TTABLE_LOGIN TR TD a{text-decoration:underline;color:#007BBB;}
123 .TTABLE_LOGIN TR TD a:hover{text-decoration:underline;}
124 .TTABLE_LOGIN TR TD.t6 a{text-decoration:underline;color:#007BBB; font-size:14px; font-weight:bold;}
125 .TTABLE_LOGIN TR TD.t6 a:hover{text-decoration:underline;}
126 /*推荐、广告*/
127 #DIVACM{ width:100%; height:94px; text-align:center; vertical-align:middle;}
128 .DIVIco1{ margin-left:60px; background-position:0px -256px;text-align:left; vertical-align:middle ; float:left; /*浮动居左*/  clear:right; width:60px; height:60px; }
129 .DIVIco2{ text-align:left; vertical-align:middle ; float:left; /*浮动居左*/ width:200px; height:60px; }
130 .DIVIco3{ background-position:-96px -256px;text-align:left; vertical-align:middle ;  float:left ;  width:60px; height:60px; }
131 .DIVIco4{ text-align:left; vertical-align:middle ; float:left; /*浮动居左*/ width:200px; height:60px;}
132 .DIVIco5{ background-position:-192px -256px;text-align:left; vertical-align:middle ; float:left; /*浮动居左*/ width:60px; height:60px;  }
133 .DIVIco6{ text-align:left; vertical-align:middle ; float:left; /*浮动居左*/  width:200px; height:60px; }
134 .DIVIco2 ul{list-style:none;margin:0px;position:relative;}
135 .DIVIco2 ul li{ font-size:12px; color:#999999;}
136 .DIVIco2 ul li p{position:absolute; top:24px; width:180px; line-height:18px;}
137 .DIVIco4 ul{list-style:none;margin:0px;position:relative;}
138 .DIVIco4 ul li{font-size:12px; color:#999999;}
139 .DIVIco4 ul li p{position:absolute; top:24px; width:180px; line-height:18px;}
140 .DIVIco6 ul{list-style:none;margin:0px;}
141 .DIVIco6 ul li{font-size:12px; color:#999999;position:relative;}
142 .DIVIco6 ul li p{position:absolute; top:24px; width:180px; line-height:18px;}
143 #DIVACM a{text-decoration:underline;color:#007BBB;}
144 #DIVACM a:hover{text-decoration:underline;}
145 /*细线*/
146 #DIVLINE{width:100%; height:1px;margin:0; padding:0;}
147 /*底部*/
148 #DIVFOOT{width:100%; height:94px; font-size:12px; color:#999999;border-top:1px solid #eee;}
149 #DIVFOOTIN{ margin-top:10px;}
150 #DIVFOOT a{TEXT-DECORATION:none;color:#999999;}
151 #DIVFOOT a:hover{TEXT-DECORATION:none;}

 

  一些为界面而愁的人也可以参考一下。界面的效果也是还不错的，当然大家也可以给点意见。

  包括的界面有：登录界面 ，首页、我的桌面、管理页面、单据页面等等。

 

  界面的效果图如下：

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/lmm1508561/archive/2012/02/03/2337519.html