代码改变世界

Div css 管理后台 简易Demo

2012-04-25 12:26  tianma  阅读(401)  评论(0)    收藏  举报

不知不觉竟然发现在博客园已经潜水4年多了， 呵呵。

公司一直比较空闲，好久没写页面了。 早上随便写了个页面 呵呵 留作记录

测试环境： IE8.0， safari, FF4.0

大家有什么好的项目Idea欢迎分享， 一直想做个属于自己的项目。

 

复制代码
  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 <html xmlns="http://www.w3.org/1999/xhtml">
  5 <head id="Head1" runat="server">
  6     <style type="text/css">
  7         body
  8         {
  9             font-size: 14px;
 10             color: #666;
 11             font-family: Tahoma, Arial !important;
 12             background: #dbdfe3;
 13         }
 14         a
 15         {
 16             color: #039;
 17         }
 18         a:hover
 19         {
 20             color: #06C;
 21         }
 22         #top, #mid, #foot
 23         {
 24             width: 780px;
 25             margin: auto;
 26         }
 27         #top
 28         {
 29             padding: 0px;
 30             background-color: #1B3572;
 31             color: #FFFFFF;
 32             height: 150px;
 33             font-weight: bold;
 34             font-size: 16px;
 35         }
 36         #top p
 37         {
 38             padding: 40px;
 39         }
 40         #mid
 41         {
 42             background: #FFFFFF;
 43             height: 600px;
 44         }
 45         #mid .left
 46         {
 47             float: left;
 48             width: 180px;
 49         }
 50         #mid .left ul
 51         {
 52             padding-left: 2em;
 53         }
 54         #mid .left ul dl
 55         {
 56             margin-top: 0em;
 57         }
 58         #mid .left ul dd
 59         {
 60             margin-left: 1em;
 61             margin-top: 3px;
 62         }
 63         #mid .right
 64         {
 65             float: left;
 66             width: 600px;
 67         }
 68         #mid .right ul
 69         {
 70             list-style-type: none;
 71             margin: 30, 0, 0, 20;
 72         }
 73         #mid .right ul .insertbutton
 74         {
 75             margin-top: 50px;
 76         }
 77         #mid .right ul dt
 78         {
 79             font-size: 15px;
 80             color: Black;
 81         }
 82         #mid .right ul dl .clearboth
 83         {
 84             clear:both;
 85         }
 86         #mid .right ul dl .align
 87         {
 88             text-align:left;
 89         }
 90         #mid .right ul dd
 91         {
 92             width:150px;
 93             margin-top: 20px;
 94             margin-left:0px;
 95             float:left;
 96             text-align:left;
 97         }
 98         
 99     </style>
100     <title></title>
101 </head>
102 <body>
103     <form id="form" runat="server">
104     <div id="top">
105         <p>
106             Tianma Server management</p>
107     </div>
108     <div id="mid">
109         <div class="left">
110             <ul>
111                 <li>
112                     <h5>
113                         Budget management</h5>
114                     <dl>
115                         <dd>
116                             Add budget
117                         </dd>
118                         <dd>
119                             Modify budget
120                         </dd>
121                         <dd>
122                             Remove budget
123                         </dd>
124                     </dl>
125                 </li>
126                 <li>
127                     <h5>
128                         Storage management</h5>
129                     <dl>
130                         <dd>
131                             Add goods
132                         </dd>
133                         <dd>
134                             Modify goods
135                         </dd>
136                         <dd>
137                             Remove goods
138                         </dd>
139                     </dl>
140                 </li>
141                 <li>
142                     <h5>
143                         Admin management</h5>
144                     <dl>
145                         <dd>
146                             Log out
147                         </dd>
148                         <dd>
149                             Log in
150                         </dd>
151                     </dl>
152                 </li>
153             </ul>
154         </div>
155         <div class="right">
156             <ul>
157                 <li>
158                     <dl>
159                         <dt>Add budget </dt>
160                         <dd>
161                             budget name :</dd>
162                         <dd class="align">
163                             <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
164                         </dd>
165                         <dt class="clearboth"></dt>
166                         <dd>
167                             user :
168                         </dd>
169                         <dd class="align">
170                             <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
171                         </dd>
172                         <dt class="clearboth"></dt>
173                         <dd>
174                             budget unit :
175                         </dd>
176                         <dd class="align">
177                             <asp:TextBox ID="txtUnit" runat="server"></asp:TextBox>
178                         </dd>
179                          <dt class="clearboth"></dt>
180                         <dd>
181                             Use of budget :
182                         </dd>
183                         <dd class="align">
184                             <asp:TextBox ID="txtUse" runat="server"></asp:TextBox>
185                         </dd>
186                         <dt class="clearboth"></dt>
187                     </dl>
188                 </li>
189                 <li class="insertbutton">
190                     <asp:Button ID="btnInsert" runat="server" Text="Insert" />
191                 </li>
192             </ul>
193         </div>
194     </div>
195     <div id="foot">
196     </div>
197     </form>
198 </body>
199 </html>